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

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),
+}

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>