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, yppStatus, yppStatusEnum } from '../normal-order/normal-order';
const orderInfo = ref<Api.delivery.deliveryOrder>();
// const appStore = useAppStore();
const TimeDown = ref<number>(0);

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_DELIVE RY:
//       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">
          统一状态：
          <template v-if="orderInfo.businessType != 'DYY'">
            {{ orderStatus[orderInfo.hbOrderStatus as keyof typeof orderStatus] }}
          </template>
          <template v-else>
            {{ yppStatus[orderInfo.yppDetail?.orderState as keyof typeof yppStatus] }}
          </template>
        </div>
        <NCard size="small" title="订单概览" :bordered="false">
          <div>订单编号：{{ orderInfo.orderNumber }}</div>
          <div>业务类型：{{ orderInfo.businessType }}</div>
          <div>
            订单状态：
            <template v-if="orderInfo.businessType != 'DYY'">
              {{
                orderInfo.hbOrderStatus == 20 ||
                orderInfo.hbOrderStatus == 30 ||
                orderInfo.hbOrderStatus == 40 ||
                orderInfo.hbOrderStatus == 70
                  ? '进行中'
                  : orderStatus[orderInfo.hbOrderStatus as keyof typeof orderStatus]
              }}
            </template>
            <template v-else>
              {{ yppStatus[orderInfo.yppDetail?.orderState as keyof typeof yppStatus] }}
            </template>
          </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">
            业务状态：
            <template v-if="orderInfo.businessType == 'XSB'">
              {{ orderStatus[orderInfo.hbOrderStatus as keyof typeof orderStatus] }}
            </template>
            <template v-if="orderInfo.businessType == 'DYY'">
              {{ yppStatus[orderInfo.yppDetail?.orderState as keyof typeof yppStatus] }}
            </template>
          </div>
          <div class="mb-10px ml-20px text-16px font-semibold">第三方订单编号：{{ orderInfo.orderNumber }}</div>
        </div>
        <NCard size="small" title="业务信息" :bordered="false">
          <template v-if="orderInfo.businessType == 'XSB'">
            <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>
          </template>
          <template v-if="orderInfo.businessType == 'DYY'">
            <div class="pb-20px font-semibold">01 影片与场次信息</div>
            <div>影片名称：{{ orderInfo.yppDetail?.movieName || '暂无' }}</div>
            <div class="flex items-center justify-between">
              <div>影院名称：{{ orderInfo.yppDetail?.cinemaName || '--' }}</div>
              <div>影厅：{{ orderInfo.yppDetail?.hallName || '--' }}</div>
            </div>
            <div class="flex items-center justify-between">
              <div>放映时间：{{ orderInfo.yppDetail?.sessionBeginTime || '--' }}</div>
              <div>结束时间：{{ orderInfo.yppDetail?.sessionEndTime || '--' }}</div>
            </div>
            <div class="flex items-center justify-between">
              <div>版本类型：{{ orderInfo.yppDetail?.movieVersion || '--' }}</div>
              <div>语言：{{ orderInfo.yppDetail?.movieVersion || '--' }}</div>
            </div>
            <div class="flex items-center justify-between">
              <div>座位信息: {{ orderInfo.yppDetail?.seatNames || '--' }}</div>
              <div>快速票：{{ orderInfo.yppDetail?.buyModel ? '是' : '否' }}</div>
            </div>
            <div class="pb-20px font-semibold">02 价格与结算信息</div>
            <div v-if="yppStatusEnum.WAIT_PAY == orderInfo.yppDetail?.orderState" class="font-semibold">
              【客户需支付信息】
            </div>
            <div
              :class="[
                yppStatusEnum.WAIT_PAY != orderInfo.yppDetail?.orderState ? 'flex items-center justify-between' : ''
              ]"
            >
              <div v-if="yppStatusEnum.WAIT_PAY != orderInfo.yppDetail?.orderState">
                <div class="font-semibold">【客户已支付信息】</div>
                <div>市场原价（单价）：￥{{ orderInfo.yppDetail?.originPrice || '--' }}</div>
                <div>原票价总价：￥{{ orderInfo.yppDetail?.totalUserPrice || '--' }}</div>
                <div>积分抵扣: ￥{{ (Number(orderInfo.offsetPoints) / 100).toFixed(2) || 0 }}</div>
                <div>客户实际支付：￥{{ orderInfo.actualTotal }}</div>
              </div>
              <template v-if="yppStatusEnum.WAIT_PAY != orderInfo.yppDetail?.orderState">
                <div>
                  <div class="font-semibold">【预存款结算信息】</div>
                  <div>企业扣款价：￥--</div>
                  <div>结算价已退金额：￥--</div>
                  <div>订单成本价：￥--</div>
                </div>
              </template>
            </div>
            <template
              v-if="
                [yppStatusEnum.SUCCESS, yppStatusEnum.REFUND_FAIL].includes(orderInfo.yppDetail?.orderState as number)
              "
            >
              <div class="pb-20px font-semibold">03 取票与退款信息</div>
              <div class="flex flex-wrap items-center">
                <div v-for="item in orderInfo.yppDetail?.seatList" :key="item" class="w30%">
                  <div>座位：{{ item }}</div>
                  <div>取票码：640085 | 661789</div>
                </div>
              </div>
            </template>
          </template>
        </NCard>
      </div>
    </div>
  </div>
</template>

<style scoped></style>