perf(order): detail page format

mock/order/list.ts

@@ -25,8 +25,8 @@ const demoList = (() => {
       name: '@ctitle(5,15)',
       'orderType|1': [0, 1, 2, 3],
       'orderStatus|1': [0, 1, 2, 3],
-      'shipingStatus|1': [0, 1, 2, 3],
-      'paymentStatus|1': [0, 1, 2, 3],
+      'shipingStatus|1': [0, 1],
+      'paymentStatus|1': [0, 1],
       'shipingCompany|1': [
         '顺丰速运',
         'EMS',

src/views/dashboard/corporation/index.vue

@@ -123,6 +123,7 @@
         tableSetting: { fullScreen: true },
         showIndexColumn: false,
         rowKey: 'id',
+        pagination: { pageSize: 20 },
       });
 
       return {

src/views/dashboard/order/detail.vue

@@ -3,12 +3,50 @@
     <PageWrapper :title="`订单号：${id}`" contentBackground>
       <Description
         size="middle"
-        title="退款申请"
+        title="商品详情"
         :bordered="false"
         :column="3"
         :data="refundData"
         :schema="refundSchema"
       />
+      <a-divider />
+      <Description
+        size="middle"
+        title="订单信息"
+        :bordered="false"
+        :column="3"
+        :data="refundData"
+        :schema="refundSchema"
+      />
+      <a-divider />
+      <Description
+        size="middle"
+        title="用户信息"
+        :bordered="false"
+        :column="3"
+        :data="personData"
+        :schema="personSchema"
+      />
+      <a-card title="物流进度" :bordered="false">
+        <a-steps :current="2" progress-dot size="small">
+          <a-step title="创建订单">
+            <template #description>
+              <p>2016-12-12 12:32</p>
+            </template>
+          </a-step>
+          <a-step title="已付款">
+            <template #description>
+              <p>2016-12-13 12:32</p>
+            </template>
+          </a-step>
+          <a-step title="物流配送">
+            <template #description>
+              <p>顺丰速送 </p>
+            </template>
+          </a-step>
+          <a-step title="已配送" />
+        </a-steps>
+      </a-card>
 
       <template #extra>
         <a-button
@@ -31,10 +69,18 @@
   import { Description } from '/@/components/Description/index';
   import { useRoute, useRouter } from 'vue-router';
   import { useTabs } from '/@/hooks/web/useTabs';
-  import { refundSchema, refundData } from './data';
+  import { refundSchema, refundData, personData, personSchema } from './data';
+  import { Divider, Card, Steps } from 'ant-design-vue';
 
   export default defineComponent({
-    components: { PageWrapper, Description },
+    components: {
+      PageWrapper,
+      Description,
+      [Divider.name]: Divider,
+      [Card.name]: Card,
+      [Steps.name]: Steps,
+      [Steps.Step.name]: Steps.Step,
+    },
     setup() {
       const route = useRoute();
       const { setTitle } = useTabs();
@@ -47,6 +93,8 @@
       return {
         refundSchema,
         refundData,
+        personData,
+        personSchema,
         router,
         id,
       };

src/views/dashboard/order/list.vue

@@ -5,6 +5,16 @@
       <template #cover="{ record }">
         <TableImg :size="150" :simpleShow="true" :imgList="[record.cover]" />
       </template>
+      <template #orderType="{ record }"> {{ renderOrderTypeLabel(record.orderType) }} </template>
+      <template #orderStatus="{ record }">
+        {{ renderOrderStatusLabel(record.orderStatus) }}
+      </template>
+      <template #shipingStatus="{ record }">
+        {{ renderShipingStatusLabel(record.shipingStatus) }}
+      </template>
+      <template #paymentStatus="{ record }">
+        {{ renderPaymentStatusLabel(record.paymentStatus) }}
+      </template>
       <template #action="{ record }">
         <TableAction
           :actions="[
@@ -64,6 +74,7 @@
         {
           title: '订单号',
           dataIndex: 'orderNo',
+
           width: 160,
         },
         {
@@ -79,21 +90,28 @@
         {
           title: '订单类型',
           dataIndex: 'orderType',
+          slots: { customRender: 'orderType' },
+          sorter: true,
           width: 80,
         },
         {
           title: '订单状态',
           dataIndex: 'orderStatus',
-          width: 60,
+          sorter: true,
+          slots: { customRender: 'orderStatus' },
+          width: 80,
         },
         {
           title: '发货状态',
           dataIndex: 'shipingStatus',
-          width: 60,
+          sorter: true,
+          slots: { customRender: 'shipingStatus' },
+          width: 80,
         },
         {
           title: '付款状态',
           dataIndex: 'paymentStatus',
+          slots: { customRender: 'paymentStatus' },
           width: 60,
         },
         {
@@ -137,15 +155,6 @@
               xxl: 5,
             },
           },
-          {
-            field: 'userName',
-            label: '企业账号',
-            component: 'Input',
-            colProps: {
-              xl: 12,
-              xxl: 8,
-            },
-          },
         ],
       };
 
@@ -160,13 +169,65 @@
         showIndexColumn: false,
         rowKey: 'id',
         pagination: { pageSize: 20 },
+        bordered: true,
       });
 
+      function renderOrderTypeLabel(type: number): string {
+        switch (type) {
+          case 0:
+            return '立即购买';
+          case 1:
+            return '延后购买';
+          default:
+            return '立即购买';
+        }
+      }
+      function renderOrderStatusLabel(type: number): string {
+        switch (type) {
+          case 0:
+            return '已取消';
+          case 1:
+            return '待付款';
+          case 2:
+            return '已付款';
+          case 3:
+            return '已发货';
+          case 4:
+            return '已收货';
+          default:
+            return '';
+        }
+      }
+      function renderShipingStatusLabel(type: number): string {
+        switch (type) {
+          case 0:
+            return '未发货';
+          case 1:
+            return '已发货';
+          default:
+            return '';
+        }
+      }
+      function renderPaymentStatusLabel(type: number): string {
+        switch (type) {
+          case 0:
+            return '未付款';
+          case 1:
+            return '已付款';
+          default:
+            return '';
+        }
+      }
+
       return {
         registerTable,
         createMessage,
         t,
         go,
+        renderOrderTypeLabel,
+        renderOrderStatusLabel,
+        renderShipingStatusLabel,
+        renderPaymentStatusLabel,
         uploadApi: uploadApi as any,
       };
     },