national-motion-web/src/views/orderManagement/refundOrder/components/refundOrderModelView.vue

<template>
  <BasicModal v-bind="$attrs" @register="registerModal" title="查看退款详情" width="1000px" destroyOnClose>
    <div class="px3 max-h-900px overflow-y-scroll" v-if="orderInfo">
      <TypographyTitle :level="5">订单信息</TypographyTitle>
      <div class="w-full">
        <Table :columns="orderCloumsData" :dataSource="orderInfo.refundOrderProInfoList" bordered :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 '../refundOrder.api';
  import { orderStatus, orderColum, getColumText, verificationRecordColumns, gameScheduleVOListColumns } from '../refundOrder.data';
  import dayjs from 'dayjs';
  const orderId = ref();
  const orderInfo = ref<AppOrderInfoVO>();
  const [registerModal, { setModalProps }] = useModalInner(async (data) => {
    setModalProps({ loading: true, showCancelBtn: false, showOkBtn: false });
    // orderInfo.value = undefined;
    // orderId.value = data.record.orderId;
    // const res = await queryByid(data.record.orderId);
    orderInfo.value = data.record;
    console.log(orderInfo.value,'弹窗数据')
    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);
    orderInfo.value = res;
  }
  const normalClass = computed(() => {
    const newList = orderInfo.value?.verificationRecordDTOList?.filter((it) => it.coursesType == 0);
    return newList?.length ? newList[0].verificationRecordList : [];
  });
  const supplementClass = computed(() => {
    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 && getGameCertification.value.teamEmblemImg) {
      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>