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

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>