feat(custom): 新增后结功能模块

2024-03-04 21:20:05 +08:00
parent ab960e139f
commit 8354c2ae72
10 changed files with 375 additions and 63 deletions
--- a/src/components/Echarts.vue
+++ b/src/components/Echarts.vue
@@ -0,0 +1,51 @@
+<template>
+  <v-chart :loading="loading" class="chart" :option="option" />
+</template>
+
+<script setup>
+import { use } from 'echarts/core'
+import { BarChart, PieChart } from 'echarts/charts'
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  GridComponent,
+  DataZoomComponent,
+} from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+
+use([
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  GridComponent,
+  BarChart,
+  CanvasRenderer,
+  PieChart,
+  DataZoomComponent,
+])
+
+import VChart, { THEME_KEY } from 'vue-echarts'
+
+import { provide } from 'vue'
+
+provide(THEME_KEY, 'white')
+
+defineProps({
+  option: {
+    type: Object,
+    required: true,
+  },
+  loading: {
+    type: Boolean,
+    default: true,
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
--- a/src/views/order/index/api.js
+++ b/src/views/order/index/api.js
@@ -1,5 +1,5 @@
 import { request } from '@/utils'

 export default {
-  getOrder: (data) => request.post('/order', data),
+  getOrder: (data) => request.post('/later/order', data),
 }
--- a/src/views/order/index/index.vue
+++ b/src/views/order/index/index.vue
@@ -3,21 +3,31 @@
    <n-row gutter="12">
      <n-col :span="24">
        <div flex>
-          <n-card w-500>
-            <n-statistic label="订单流水" tabular-nums>
-              <n-number-animation :from="0" :to="cardData.total" :precision="2" />
+          <n-card w-500 rounded-5 style="background-color: #5579e9">
+            <n-statistic label="交易金额（元）" tabular-nums>
+              <n-number-animation :from="0" :to="cardData.payments" :precision="2" />
            </n-statistic>
          </n-card>
-          <n-card ml-10 w-500>
-            <n-statistic label="订单佣金" tabular-nums>
-              <n-number-animation :from="0" :to="cardData.service" />
-            </n-statistic>
-          </n-card>
-          <n-card ml-10 w-500>
-            <n-statistic label="订单数量" tabular-nums>
+          <n-card ml-10 w-500 rounded-5 style="background-color: #e74f5b">
+            <n-statistic label="订单数量（条）" tabular-nums>
              <n-number-animation :from="0" :to="cardData.count" />
            </n-statistic>
          </n-card>
+          <n-card ml-10 w-500 rounded-5 style="background-color: #00b4c3">
+            <n-statistic label="赠送豆子（个）" tabular-nums>
+              <n-number-animation :from="0" :to="cardData.total_pulse" :precision="2" />
+            </n-statistic>
+          </n-card>
+          <n-card ml-10 w-500 rounded-5 style="background-color: #f1b301">
+            <n-statistic label="挂帐（元）" tabular-nums>
+              <n-number-animation :from="0" :to="cardData.onAccount" :precision="2" />
+            </n-statistic>
+          </n-card>
+          <n-card ml-10 w-500 rounded-5 style="background-color: #ffa940">
+            <n-statistic label="抹零（元）" tabular-nums>
+              <n-number-animation :from="0" :to="cardData.zero" :precision="2" />
+            </n-statistic>
+          </n-card>
        </div>
      </n-col>
      <n-col :span="24" mt-10>
@@ -39,7 +49,7 @@
          <n-input-group>
            <n-select
              v-model:value="queryData.selectKey"
-              :style="{ width: '7%' }"
+              :style="{ width: '25rem' }"
              :options="selectOptions"
              placeholder="请选择"
            />
@@ -79,7 +89,6 @@

 <script setup>
 import api from './api'
-import { NEllipsis } from 'naive-ui'

 const loading = ref(false)

@@ -91,21 +100,17 @@ const queryData = ref({
 })

 const songs = ref([
+  {
+    value: 0,
+    label: '未付款',
+  },
  {
    value: 1,
-    label: '待付款',
+    label: '已付款',
  },
  {
    value: 2,
-    label: '待核销',
-  },
-  {
-    value: 3,
-    label: '已核销',
-  },
-  {
-    value: 4,
-    label: '已过期',
+    label: '挂帐中',
  },
 ])

@@ -137,7 +142,8 @@ const columns = ref([
  {
    title: '用户',
    align: 'center',
-    key: 'user_name',
+    slot: 'nickName',
+    render: (row) => h('span', {}, { default: () => row.User.nickName }),
  },
  {
    title: '手机号',
@@ -149,15 +155,19 @@ const columns = ref([
    align: 'center',
    slot: 'goods_name',
    render: (row) => {
-      return h(
-        NEllipsis,
-        {
-          style: 'max-width: 240px',
-        },
-        {
-          default: () => row.goods_name,
-        }
-      )
+      const el = []
+      row.OrderGoods.forEach((item) => {
+        el.push(
+          h(
+            'div',
+            {},
+            {
+              default: () => `${item.Goods.name}|${item.pay_price}元|X${item.number}`,
+            }
+          )
+        )
+      })
+      return el
    },
  },
  {
@@ -168,12 +178,17 @@ const columns = ref([
  {
    title: '商品总价',
    align: 'center',
-    key: 'number',
+    key: 'payments',
  },
  {
-    title: '订单佣金',
+    title: '实付金额',
    align: 'center',
-    key: 'commission',
+    key: 'pay_amount',
+  },
+  {
+    title: '抹零',
+    align: 'center',
+    key: 'zero',
  },
  {
    title: '订单状态',
@@ -182,13 +197,11 @@ const columns = ref([
    render(row) {
      switch (row.status) {
        case 0:
-          return h('span', '待付款')
+          return h('span', '未付款')
        case 1:
-          return h('span', '待使用')
+          return h('span', '已付款')
        case 2:
-          return h('span', '已完成')
-        case 3:
-          return h('span', '已过期')
+          return h('span', '挂帐中')
      }
    },
  },
@@ -198,9 +211,14 @@ const columns = ref([
    key: 'add_time',
  },
  {
-    title: '核销时间',
+    title: '挂帐时间',
    align: 'center',
-    key: 'cancel_time',
+    key: 'on_account_time',
+  },
+  {
+    title: '付款时间',
+    align: 'center',
+    key: 'payment_time',
  },
  // {
  //   title: '操作',
@@ -243,13 +261,13 @@ const getList = async () => {
  loading.value = true
  try {
    const query_data = {
-      Status: queryData.value.status || '',
+      Status: queryData.value.status,
      StartTime: queryData.value.time === null ? '' : queryData.value.time[0] || '',
      EndTime: queryData.value.time === null ? '' : queryData.value.time[1] || '',
    }
    switch (queryData.value.selectKey) {
      case 0:
-        query_data['GoodsName'] = queryData.value.word
+        query_data['GoodName'] = queryData.value.word
        break
      case 1:
        query_data['UserName'] = queryData.value.word
@@ -262,14 +280,15 @@ const getList = async () => {
        break
    }
    const res = await api.getOrder({
-      pageNum: pagination.value.page,
-      pageSize: pagination.value.pageSize,
+      PageNum: pagination.value.page,
+      PageSize: pagination.value.pageSize,
      ...query_data,
    })
    data.value = res.data.data || []
    pagination.value.itemCount = res.data.total
-    cardData.value.total = res.data.number
-    cardData.value.service = res.data.commission
+    cardData.value.payments = res.data.payments
+    cardData.value.onAccount = res.data.onAccount
+    cardData.value.total_pulse = res.data.total_pulse
    cardData.value.count = res.data.total
  } catch (error) {
    $message.error(error.msg)
@@ -289,4 +308,13 @@ const clear = () => {
 }
 </script>

-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+:deep(.n-statistic__label) {
+  color: #fff !important;
+  font-size: 16px;
+}
+:deep(.n-statistic-value__content) {
+  color: #fff !important;
+  font-size: 16px;
+}
+</style>
--- a/src/views/order/index1/index.vue
+++ b/src/views/order/index1/index.vue
@@ -66,7 +66,7 @@
          <n-input-group>
            <n-select
              v-model:value="queryData.selectKey"
-              :style="{ width: '10%' }"
+              :style="{ width: '25rem' }"
              :options="selectOptions"
              placeholder="请选择"
            />
--- a/src/views/order/pengding_order_data/api.js
+++ b/src/views/order/pengding_order_data/api.js
@@ -0,0 +1,5 @@
+import { request } from '@/utils'
+
+export default {
+  getData: (data) => request.post('/later/order/count', data),
+}
--- a/src/views/order/pengding_order_data/index.vue
+++ b/src/views/order/pengding_order_data/index.vue
@@ -0,0 +1,153 @@
+<template>
+  <CommonPage show-footer :title="$route.title">
+    <n-card mb-5 rounded-5 title="营业额汇总">
+      <n-grid x-gap="10" :y-gap="8" :cols="4">
+        <n-gi>
+          <n-card rounded-5 style="background-color: #5579e9">
+            <n-statistic label="应收金额（元）" tabular-nums>
+              <n-number-animation :from="0" :to="cardData.payments" :precision="2" />
+            </n-statistic>
+          </n-card>
+        </n-gi>
+        <n-gi>
+          <n-card rounded-5 style="background-color: #e74f5b">
+            <n-statistic label="实收金额（条）" tabular-nums>
+              <n-number-animation :from="0" :to="cardData.payAmount" :precision="2" />
+            </n-statistic>
+          </n-card>
+        </n-gi>
+        <n-gi>
+          <n-card rounded-5 style="background-color: #00b4c3">
+            <n-statistic label="促销积分" tabular-nums>
+              <n-number-animation :from="0" :to="cardData.integral" :precision="2" />
+            </n-statistic>
+          </n-card>
+        </n-gi>
+        <n-gi>
+          <n-card rounded-5 style="background-color: #e74f5b">
+            <n-statistic label="订单数量（条）" tabular-nums>
+              <n-number-animation :from="0" :to="cardData.total" />
+            </n-statistic>
+          </n-card>
+        </n-gi>
+        <n-gi>
+          <n-card rounded-5 style="background-color: #2c5ba9">
+            <n-statistic label="挂帐（元）" tabular-nums>
+              <n-number-animation :from="0" :to="cardData.onAccount" :precision="2" />
+            </n-statistic>
+          </n-card>
+        </n-gi>
+        <n-gi>
+          <n-card rounded-5 style="background-color: #f0727d">
+            <n-statistic label="赠送豆子（个）" tabular-nums>
+              <n-number-animation :from="0" :to="cardData.total_pulse" />
+            </n-statistic>
+          </n-card>
+        </n-gi>
+        <n-gi>
+          <n-card rounded-5 style="background-color: #797979">
+            <n-statistic label="抹零（元）" tabular-nums>
+              <n-number-animation :from="0" :to="cardData.zero" />
+            </n-statistic>
+          </n-card>
+        </n-gi>
+      </n-grid>
+    </n-card>
+    <n-card rounded-5 title="商品类别汇总（元）">
+      <Echarts :loading="loading" :option="option" />
+    </n-card>
+  </CommonPage>
+</template>
+
+<script setup>
+import api from './api'
+import Echarts from '@/components/Echarts.vue'
+
+const cardData = ref({})
+
+const loading = ref(false)
+
+const option = ref({
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow',
+    },
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true,
+  },
+  xAxis: {
+    type: 'category',
+    data: [],
+  },
+  yAxis: {
+    type: 'value',
+  },
+  series: [
+    {
+      data: [],
+      type: 'bar',
+      name: '金额（元）',
+      label: {
+        show: true,
+        position: 'top',
+        formatter: function (value) {
+          return `¥${value.data}元`
+        },
+      },
+    },
+  ],
+  dataZoom: [
+    {
+      type: 'inside',
+    },
+    {
+      type: 'slider',
+    },
+  ],
+})
+
+onMounted(() => {
+  get_data()
+})
+
+const get_data = async () => {
+  loading.value = true
+  option.value.xAxis.data = []
+  option.value.series[0].data = []
+  const res = await api.getData()
+  cardData.value = res.data
+  for (let i = 0; i < 100; i++) {
+    res.data.data.push({
+      Name: '商品' + i,
+      Price: 2000 - i * 20,
+    })
+  }
+  for (let i = 0; i < res.data.data.length; i++) {
+    option.value.xAxis.data.push(res.data.data[i].Name)
+    option.value.series[0].data.push(res.data.data[i].Price)
+  }
+  console.log(cardData.value)
+  loading.value = false
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.n-statistic__label) {
+  color: #fff !important;
+  font-size: 16px;
+}
+:deep(.n-statistic-value__content) {
+  color: #fff !important;
+  font-size: 16px;
+}
+
+.chart {
+  width: 100%;
+  height: 150rem;
+}
+</style>
--- a/src/views/order/route.js
+++ b/src/views/order/route.js
@@ -22,16 +22,27 @@ export default {
        icon: 'material-symbols:auto-awesome-outline-rounded',
      },
    },
-    // {
-    //   name: 'dhList',
-    //   path: 'dh_list',
-    //   component: () => import('./index/index.vue'),
-    //   meta: {
-    //     requireAuth: true,
-    //     title: '订单列表',
-    //     role: ['2'],
-    //     icon: 'material-symbols:auto-awesome-outline-rounded',
-    //   },
-    // },
+    {
+      name: 'pendingList',
+      path: 'pending_list',
+      component: () => import('./index/index.vue'),
+      meta: {
+        // requireAuth: true,
+        title: '后结订单',
+        // role: ['2'],
+        icon: 'material-symbols:auto-awesome-outline-rounded',
+      },
+    },
+    {
+      name: 'pendingData',
+      path: 'pending_data',
+      component: () => import('./pengding_order_data/index.vue'),
+      meta: {
+        // requireAuth: true,
+        title: '后结统计',
+        // role: ['2'],
+        icon: 'material-symbols:auto-awesome-outline-rounded',
+      },
+    },
  ],
 }