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

2024-03-04 21:20:05 +08:00
parent ab960e139f
commit 8354c2ae72
10 changed files with 375 additions and 63 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -25,7 +25,7 @@
  },
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
  },
  "files.associations": {
    "*.env.*": "dotenv",
--- a/package.json
+++ b/package.json
@@ -40,12 +40,14 @@
    "@wangeditor/editor-for-vue": "5.1.12",
    "axios": "^1.6.2",
    "dayjs": "^1.11.10",
+    "echarts": "^5.5.0",
    "lodash-es": "^4.17.21",
    "md-editor-v3": "^4.9.0",
    "mockjs": "^1.1.0",
    "pinia": "^2.1.7",
    "vite": "^4.5.0",
    "vue": "3.3.4",
+    "vue-echarts": "^6.6.9",
    "vue-router": "^4.2.5",
    "xlsx": "^0.18.5"
  },
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,9 @@ dependencies:
  dayjs:
    specifier: ^1.11.10
    version: 1.11.10
+  echarts:
+    specifier: ^5.5.0
+    version: 5.5.0
  lodash-es:
    specifier: ^4.17.21
    version: 4.17.21
@@ -47,6 +50,9 @@ dependencies:
  vue:
    specifier: 3.3.4
    version: 3.3.4
+  vue-echarts:
+    specifier: ^6.6.9
+    version: 6.6.9(echarts@5.5.0)(vue@3.3.4)
  vue-router:
    specifier: ^4.2.5
    version: 4.2.5(vue@3.3.4)
@@ -3480,6 +3486,13 @@ packages:
    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
    dev: true

+  /echarts@5.5.0:
+    resolution: {integrity: sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==}
+    dependencies:
+      tslib: 2.3.0
+      zrender: 5.5.0
+    dev: false
+
  /editor@1.0.0:
    resolution: {integrity: sha512-SoRmbGStwNYHgKfjOrX2L0mUvp9bUVv0uPppZSOMAntEbcFtoC3MKF5b3T6HQPXKIV+QGY3xPO3JK5it5lVkuw==}
    dev: true
@@ -5922,6 +5935,10 @@ packages:
    engines: {node: '>=0.10.0'}
    dev: true

+  /resize-detector@0.3.0:
+    resolution: {integrity: sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ==}
+    dev: false
+
  /resolve-dir@1.0.1:
    resolution: {integrity: sha512-R7uiTjECzvOsWSfdM0QKFNBVFcK27aHOUwdvK53BcW8zqnGdYp0Fbj82cy54+2A4P2tFM22J5kRfe1R+lM/1yg==}
    engines: {node: '>=0.10.0'}
@@ -6670,6 +6687,10 @@ packages:
    resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
    dev: true

+  /tslib@2.3.0:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+    dev: false
+
  /tslib@2.6.2:
    resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}

@@ -7138,6 +7159,21 @@ packages:
      vue: 3.3.4
    dev: true

+  /vue-demi@0.13.11(vue@3.3.4):
+    resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: 3.3.4
+    dev: false
+
  /vue-demi@0.14.6(vue@3.3.4):
    resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
    engines: {node: '>=12'}
@@ -7152,6 +7188,26 @@ packages:
    dependencies:
      vue: 3.3.4

+  /vue-echarts@6.6.9(echarts@5.5.0)(vue@3.3.4):
+    resolution: {integrity: sha512-mojIq3ZvsjabeVmDthhAUDV8Kgf2Rr/X4lV4da7gEFd1fP05gcSJ0j7wa7HQkW5LlFmF2gdCJ8p4Chas6NNIQQ==}
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.5
+      '@vue/runtime-core': ^3.0.0
+      echarts: ^5.4.1
+      vue: ^2.6.12 || ^3.1.1
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      '@vue/runtime-core':
+        optional: true
+    dependencies:
+      echarts: 5.5.0
+      resize-detector: 0.3.0
+      vue: 3.3.4
+      vue-demi: 0.13.11(vue@3.3.4)
+    dev: false
+
  /vue-eslint-parser@9.3.2(eslint@8.54.0):
    resolution: {integrity: sha512-q7tWyCVaV9f8iQyIA5Mkj/S6AoJ9KBN8IeUSf3XEmBrOtxOZnfTg5s4KClbZBCK3GtnT/+RyCLZyDHuZwTuBjg==}
    engines: {node: ^14.17.0 || >=16.0.0}
@@ -7353,3 +7409,9 @@ packages:
  /yocto-queue@0.1.0:
    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
    engines: {node: '>=10'}
+
+  /zrender@5.5.0:
+    resolution: {integrity: sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==}
+    dependencies:
+      tslib: 2.3.0
+    dev: false
--- 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',
+      },
+    },
  ],
 }