feat(order): 优化订单详情展示逻辑

- 修改订单详情页面布局和样式
- 增加团队信息和赛程安排展示
- 优化订单商品列表展示逻辑
- 修复订单状态显示问题
- 新增导出功能按钮

src/views/orderManagement/order/components/orderModelView.vue

@@ -7,11 +7,12 @@
       </div>
       <div class="mt3">
         <div v-if="orderInfo.orderType != 1 && orderInfo.orderType != 2"
-          >共{{ orderInfo.proInfoList?.length }}人 <span class="text-gray">{{ orderStatus[orderInfo.orderStatus] }}</span>
+          >共{{ count }}人 <span class="text-gray">{{ orderStatus[orderInfo.orderStatus] }}</span>
         </div>
-        <div v-else> 共 {{ orderInfo.proInfoList?.length }} 场 </div>
+        <div v-else> 共 {{ count }} 场 </div>
         <div class="flex items-center mt3" v-if="orderInfo.orderStatus == 1 || orderInfo.orderStatus == 2">
           <div class="flex items-center mr2" v-for="item in orderInfo.proInfoList" :key="item.id">
+            <!-- //6为保险不展示 -->
             <template v-if="item.type != 6">
               <div class="mr3 text-gray" v-if="orderInfo.orderType != 1 && orderInfo.orderType != 2">{{ item.userName }} </div>
               <div class="mr3 text-gray" :class="[item.orderStatus == 2 ? 'line-through' : '']" v-else> {{ item.ticketNo }} </div>
@@ -40,7 +41,7 @@
           <div class="text-gray">地点：{{ orderInfo.siteName }}</div>
           <div class="text-gray">地址：{{ orderInfo.address }} </div>
         </div>
-        <div>
+        <div v-if="!getGameCertification">
           <div>付款信息 </div>
           <div class="text-gray">实付金额：{{ orderInfo.price || 0 }}元</div>
           <div class="text-gray">付款时间：{{ orderInfo.payTime || '--' }}</div>
@@ -50,11 +51,25 @@
           <div class="text-gray">买家昵称：{{ orderInfo.nikeName }}</div>
           <div class="text-gray">买家电话：{{ orderInfo.phoneNumber }}</div>
         </div>
+        <div v-if="getGameCertification">
+          <div>团队信息 </div>
+          <div class="text-gray">队名：{{ getGameCertification.teamName }}</div>
+          <div class="text-gray flex items-center" v-if="getImageList.length"
+            >队徽：
+            <div class="overflow-x-scroll w220px flex items-center">
+              <div v-for="item in getImageList" :key="item" class="flex items-center">
+                <div class="mr2">
+                  <Image :width="40" :height="40" class="rounded-16px mr2" :src="item" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
       <Divider></Divider>
       <TypographyTitle :level="5">订单信息</TypographyTitle>
       <div class="w-full">
-        <Table :columns="orderColum" :dataSource="orderInfo.proInfoList" bordered :pagination="{ hideOnSinglePage: true }"></Table>
+        <Table :columns="orderCloumsData" :dataSource="orderInfo.proInfoList" bordered :pagination="{ hideOnSinglePage: true }"></Table>
       </div>
       <div class="mt3">
         <Descriptions title="费用信息" bordered layout="vertical">
@@ -103,7 +118,7 @@
           </DescriptionsItem>
         </Descriptions>
       </div>
-      <div class="mt3" v-if="orderInfo.isinList">
+      <div class="mt3">
         <TypographyTitle :level="5">使用记录</TypographyTitle>
         <Table :columns="getColumText(orderInfo.orderType)" :dataSource="orderInfo.isinList" :pagination="{ hideOnSinglePage: true }"></Table>
       </div>
@@ -115,23 +130,33 @@
         <TypographyTitle :level="5">（补课）核销记录</TypographyTitle>
         <Table :columns="verificationRecordColumns" :dataSource="supplementClass" :pagination="{ hideOnSinglePage: true }"></Table>
       </div>
+      <div class="mt3" v-if="orderInfo?.gameScheduleVOList?.length">
+        <TypographyTitle :level="5">赛程安排</TypographyTitle>
+        <Table :columns="gameScheduleVOListColumns" :dataSource="orderInfo?.gameScheduleVOList" :pagination="{ hideOnSinglePage: true }"></Table>
+      </div>
     </div>
   </BasicModal>
 </template>
 <script lang="ts" setup>
+  import { Image } from 'ant-design-vue';
   import { TypographyTitle, Divider, Table, Descriptions, DescriptionsItem, StatisticCountdown } from 'ant-design-vue';
   import { computed, ref } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { queryByid, AppOrderInfoVO } from '../order.api';
-  import { orderStatus, orderColum, getColumText, verificationRecordColumns } from '../order.data';
+  import { orderStatus, orderColum, getColumText, verificationRecordColumns, gameScheduleVOListColumns } from '../order.data';
   import dayjs from 'dayjs';
   const orderId = ref();
   const orderInfo = ref<AppOrderInfoVO>();
   const [registerModal, { setModalProps }] = useModalInner(async (data) => {
-    setModalProps({ confirmLoading: false, showCancelBtn: false, showOkBtn: false });
+    setModalProps({ loading: true, showCancelBtn: false, showOkBtn: false });
+    orderInfo.value = undefined;
     orderId.value = data.record.id;
     const res = await queryByid(data.record.id);
     orderInfo.value = res;
+    setModalProps({ loading: false });
+  });
+  const count = computed(() => {
+    return orderInfo.value?.proInfoList?.filter((it) => it.type != 6).length;
   });
   async function finish() {
     const res = await queryByid(orderId.value);
@@ -145,4 +170,46 @@
     const newList = orderInfo.value?.verificationRecordDTOList?.filter((it) => it.coursesType == 1);
     return newList?.length ? newList[0].verificationRecordList : [];
   });
+  const getGameCertification = computed(() => {
+    if (orderInfo.value?.gameCertification) {
+      return JSON.parse(orderInfo.value?.gameCertification);
+    }
+    return '';
+  });
+  const getImageList = computed(() => {
+    if (getGameCertification.value) {
+      console.log(getGameCertification.value.teamEmblemImg.split(','), 'getGameCertification.value.teamEmblemImg');
+
+      return getGameCertification.value.teamEmblemImg.split(',');
+    }
+    return [];
+  });
+  const orderCloumsData = computed(() => {
+    if (orderInfo.value?.orderType == 0) {
+      const newColum = [...orderColum];
+
+      newColum.splice(1, 1, {
+        title: '使用日期-时段',
+        dataIndex: 'useTime',
+        width: 380,
+        align: 'center',
+        customRender: ({ record }) => {
+          return record.type != 6 ? record.useDateStr + '-' + record.frameTimeStr : '无';
+        },
+      });
+      newColum.splice(2, 1, {
+        title: '使用人/联系电话',
+        dataIndex: 'useTime',
+        width: 380,
+        align: 'center',
+        customRender: ({ record }) => {
+          return record.type != 6 ? record.userName + '-' + record.userPhone : '无';
+        },
+      });
+      console.log(newColum, 'newColum');
+
+      return newColum;
+    }
+    return orderColum;
+  });
 </script>

src/views/orderManagement/order/index.vue

@@ -1,7 +1,11 @@
 <template>
   <BasicTable @register="registerTable">
     <!--插槽:table标题-->
-    <template #tableTitle> </template>
+    <template #tableTitle>
+      <div class="flex items-center p3">
+        <a-button type="primary" @click="handleExport">导出赛事报名表</a-button>
+      </div>
+    </template>
     <!--操作栏-->
     <template #action="{ record }">
       <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
@@ -10,6 +14,14 @@
       <div class="flex items-center h-20px text-16px">
         <div class="font-semibold">订单编号：{{ record.orderCode }}</div>
         <div class="ml3">下单时间：{{ record.createTime }}</div>
+        <div class="ml3 truncate w300px"
+          >店铺名称：
+
+          <a-tooltip>
+            <template #title>{{ record.orderType == 3 || record.orderType == 4 ? record.departName : record.siteName }}</template>
+            {{ record.orderType == 3 || record.orderType == 4 ? record.departName : record.siteName }}
+          </a-tooltip>
+        </div>
       </div>
       <div class="mt3 flex items-center border-b border-solid pb-3 h-90px" v-for="item in record.orderProInfoList" :key="item.id">
         <Image :width="80" :height="80" class="rounded-16px" :src="item.productImage" v-if="item.productImage" />
@@ -53,7 +65,7 @@
 
 <script setup lang="ts">
   import orderModelView from './components/orderModelView.vue';
-  import { Image } from 'ant-design-vue';
+  import { Image, message } from 'ant-design-vue';
   import { ref, reactive, computed, unref } from 'vue';
   import { BasicTable, useTable, TableAction, TableImg } from '/@/components/Table';
   import { useModal } from '/@/components/Modal';
@@ -97,18 +109,6 @@
       record,
     });
   }
-  // /**
-  //  * 删除事件
-  //  */
-  // async function handleDelete(record) {
-  //   await deleteOne({ id: record.id }, handleSuccess);
-  // }
-  /**
-   * 成功回调
-   */
-  function handleSuccess() {
-    (selectedRowKeys.value = []) && reload();
-  }
   /**
    * 操作栏
    */
@@ -127,6 +127,9 @@
   function getDropDownAction(record) {
     return [];
   }
+  function handleExport() {
+    message.error('记得提醒搞导出，现在暂时没有这个功能！');
+  }
 </script>
 
 <style scoped></style>

src/views/orderManagement/order/order.api.ts

@@ -359,7 +359,7 @@ export interface AppOrderProInfo {
    */
   ticketNo?: string;
   /**
-   * 商品类型（1-学校 2-包场 3-无固定场 4-个人赛 5-团队赛 6-课程 7-保险）
+   * 商品类型（0-学校 1-包场 2-无固定场 3-个人赛 4-团队赛 5-课程 6-保险）
    */
   type?: number;
   /**

src/views/orderManagement/order/order.data.ts

@@ -9,7 +9,7 @@ export const columns: BasicColumn[] = [
     title: '商品',
     align: 'left',
     dataIndex: 'userName',
-    width: 520,
+    width: 820,
     slots: { customRender: 'goods' },
   },
   {
@@ -178,7 +178,7 @@ export const orderColum: TableColumnType[] = [
     title: '小计/元',
     align: 'center',
     customRender: ({ record }) => {
-      return (record.originalPrice || 0) * record.quantity;
+      return (record.originalPrice ? record.originalPrice : 0) * record.quantity;
     },
     width: 180,
   },
@@ -202,6 +202,9 @@ export function getColumText(type: number) {
       title: '手机号',
       align: 'center',
       width: 180,
+      customRender: ({ record }) => {
+        return record.isinList[0].userPhone;
+      },
     },
     {
       dataIndex: 'isinCode',
@@ -309,6 +312,7 @@ export function getColumText(type: number) {
       dataIndex: 'isinCode',
       title: '核验人员/使用照片',
       align: 'center',
+      width: 280,
       customRender: ({ record }) => {
         const viewList: VNode[] = [];
         record.isinList.forEach((it) => {
@@ -318,8 +322,6 @@ export function getColumText(type: number) {
       },
     });
   }
-  console.log(colum, '数据');
-
   return colum;
 }
 
@@ -370,3 +372,29 @@ export const verificationRecordColumns: TableColumnType[] = [
     align: 'center',
   },
 ];
+
+export const gameScheduleVOListColumns: TableColumnType[] = [
+  {
+    title: '比赛项目',
+    dataIndex: 'name',
+    align: 'center',
+  },
+  {
+    title: '时间段',
+    dataIndex: 'startTime',
+    align: 'center',
+    customRender: ({ record }) => {
+      return `${record.startTime} - ${record.endTime}`;
+    },
+  },
+  {
+    title: '安排',
+    dataIndex: 'arrange',
+    align: 'center',
+  },
+  {
+    title: '比赛状态',
+    dataIndex: 'startStatus',
+    align: 'center',
+  },
+];