city-gather-admin/src/views/order-manage/order-detail/index.vue

<script setup lang="ts">
import { ref } from 'vue';
import { useRoute } from 'vue-router';
// import { NFlex } from 'naive-ui';
import dayjs from 'dayjs';
import { fetchGetNomalOrderInfo } from '@/service/api/order-manage/normal-order';
// import { useAppStore } from '@/store/modules/app';
// import { copyTextToClipboard } from '@/utils/zt';
import { orderColumns, orderStatus, orderStatusEnum } from '../normal-order/normal-order';
import DeliveryModal from '../normal-order/component/delivery-modal.vue';
const orderInfo = ref<Api.delivery.deliveryOrder>();
// const appStore = useAppStore();
const TimeDown = ref<number>(0);
// const ShipmentRef = useTemplateRef('Shipment');
const emit = defineEmits<{
  (e: 'finish'): void;
}>();
const route = useRoute();
async function open(orderNumber: string) {
  const { data, error } = await fetchGetNomalOrderInfo(orderNumber);
  if (!error) {
    orderInfo.value = data;
    if (orderInfo.value.hbLogisticStatus == orderStatusEnum.WAIT_PAY) {
      const createTime = dayjs(orderInfo.value.createTime);
      const currentTime = dayjs();
      const elapsed = currentTime.diff(createTime);
      const fifteenMinutesInMillis = 15 * 60 * 1000;
      TimeDown.value = fifteenMinutesInMillis - elapsed;
    }
  }
}
console.log(route.query.orderNumber);

open(String(route.query.orderNumber));
defineExpose({ open });

// const isRefund = computed(() => {
//   const goodsData = orderInfo.value?.orderItems?.find(it => it.refundIngCount == 1);
//   return Boolean(goodsData);
// });

// const currentSteps = computed(() => {
//   switch (orderInfo.value?.hbOrderStatus) {
//     case orderStatusEnum.WAIT_PAY:
//       return 1;
//     case orderStatusEnum.ORDER_ACCEPT:
//       return 2;
//     case orderStatusEnum.ORDER_WAIT_DELIVERY:
//       return 2;
//     case orderStatusEnum.WAIT_DELIVERY:
//       return 2;
//     case orderStatusEnum.ORDER_DELIVERY:
//       return 3;
//     case orderStatusEnum.ORDER_ARRIVE:
//       return 3;
//     case orderStatusEnum.ORDER_COMPLETE:
//       return 4;
//     default:
//       return 1;
//   }
// });
// function handleCopy(value: string | number | undefined) {
//   copyTextToClipboard(String(value));
//   // copyTextToClipboard(String(orderInfo.value?.orderNumber));
// }
</script>

<template>
  <div>
    <div v-if="orderInfo" class="flex">
      <div class="mr-20px w-300px">
        <div class="mb-10px text-16px font-semibold">
          统一状态：
          {{ orderStatus[orderInfo.hbOrderStatus as keyof typeof orderStatus] }}
        </div>
        <NCard size="small" title="订单概览" :bordered="false">
          <div>订单编号：{{ orderInfo.orderNumber }}</div>
          <div>业务类型：{{ orderInfo.businessType }}</div>
          <div>
            订单状态：
            {{
              orderInfo.hbOrderStatus == 20 ||
              orderInfo.hbOrderStatus == 30 ||
              orderInfo.hbOrderStatus == 40 ||
              orderInfo.hbOrderStatus == 70
                ? '进行中'
                : orderStatus[orderInfo.hbOrderStatus as keyof typeof orderStatus]
            }}
          </div>
          <div>订单金额：{{ orderInfo.actualTotal }}</div>

          <div>订单创建：{{ orderInfo?.remarks || '暂无' }}</div>
          <div>创建人：用户自助下单</div>
          <div>备注：{{ orderInfo?.remarks || '暂无' }}</div>
        </NCard>
        <NCard size="small" class="mt-20px" title="客户信息" :bordered="false">
          <div>客户姓名：{{ orderInfo?.consigneeName || '---' }}</div>
          <div>客户手机号：{{ orderInfo?.consigneeMobile || '---' }}</div>
          <div>客户地址：{{ orderInfo?.consigneeAddress || '---' }}</div>
          <div>用户昵称：{{ orderInfo.userName || '---' }}</div>
          <div>用户电话：{{ orderInfo.consigneeMobile }}</div>
          <div>企业身份：{{ orderInfo.level || '---' }}</div>
          <div>会员等级：{{ orderInfo.level || '---' }}</div>
          <div>分销等级：{{ orderInfo.level || '---' }}</div>
        </NCard>
        <NCard size="small" class="mt-20px" title="支付信息" :bordered="false">
          <div>支付状态：{{ orderInfo.isPayed ? '已支付' : '未支付' }}</div>
          <div>支付金额：{{ orderInfo.actualTotal }}元</div>
          <div>
            付款方式：{{
              orderInfo.hbOrderStatus == orderStatusEnum.WAIT_PAY ||
              orderInfo.hbOrderStatus == orderStatusEnum.ORDER_CANCEL
                ? '暂无'
                : '微信'
            }}
          </div>
          <div>支付时间：{{ orderInfo.payTime || '暂无' }}</div>
          <div>交易号：{{ orderInfo.outTradeNo || '---' }}</div>
          <div>退款记录：{{ orderInfo.record || '暂无' }}</div>
        </NCard>
      </div>
      <div class="flex-1">
        <div class="flex">
          <div class="mb-10px text-16px font-semibold">
            业务状态：
            {{ orderStatus[orderInfo.hbOrderStatus as keyof typeof orderStatus] }}
          </div>
          <div class="mb-10px ml-20px text-16px font-semibold">第三方订单编号：{{ orderInfo.orderNumber }}</div>
        </div>
        <NCard size="small" title="业务信息" :bordered="false">
          <div class="pb-20px font-semibold">01 商家信息</div>
          <div>门店名称：{{ orderInfo.shopName || '暂无' }}</div>
          <div>门店地址：{{ orderInfo.shopAddress || '暂无' }}</div>
          <div>联系电话：{{ orderInfo.tel || '暂无' }}</div>
          <div class="py-20px font-semibold">02 商品&费用</div>
          <NDataTable :columns="orderColumns" :data="orderInfo.orderItemList" :bordered="false" />

          <NTable :single-line="false">
            <NThead>
              <NTr>
                <NTh>费用类型</NTh>
                <NTh>金额/元</NTh>
              </NTr>
            </NThead>
            <NTbody>
              <NTr>
                <NTd>商品总额</NTd>
                <NTd>{{ orderInfo.total }}</NTd>
              </NTr>
              <NTr>
                <NTd>配送费（快递）</NTd>
                <NTd>{{ orderInfo.freightAmount }}</NTd>
              </NTr>
              <NTr>
                <NTd>积分</NTd>
                <NTd>-{{ (Number(orderInfo.offsetPoints) / 100).toFixed(2) || 0 }}</NTd>
              </NTr>
              <NTr>
                <NTd v-if="orderInfo.hbOrderStatus == orderStatusEnum.WAIT_PAY">需付款</NTd>
                <NTd
                  v-if="
                    orderInfo.hbOrderStatus != orderStatusEnum.WAIT_PAY &&
                    orderInfo.hbOrderStatus != orderStatusEnum.ORDER_CANCEL
                  "
                >
                  实际付款
                </NTd>
                <NTd v-if="orderInfo.hbOrderStatus == orderStatusEnum.ORDER_CANCEL">应付款</NTd>
                <NTd>{{ orderInfo.actualTotal }}</NTd>
              </NTr>
            </NTbody>
          </NTable>
        </NCard>
      </div>
    </div>
    <DeliveryModal ref="Shipment" @finish="emit('finish')"></DeliveryModal>
  </div>
</template>

<style scoped></style>