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 duration from 'dayjs/plugin/duration';
import { fetchGetNomalOrderInfo } from '@/service/api/order-manage/normal-order';
// import { useAppStore } from '@/store/modules/app';
// import { copyTextToClipboard } from '@/utils/zt';
import {
  businessType,
  chargeMethod,
  orderColumns,
  orderDJKColumns,
  orderDJKLogColumns,
  orderStatus,
  orderStatusEnum,
  payType,
  yppStatus,
  yppStatusEnum
} from '../normal-order/normal-order';
const orderInfo = ref<Api.delivery.deliveryOrder>();
// const appStore = useAppStore();
const TimeDown = ref<number>(0);
dayjs.extend(duration);
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));
// }
function secondsToTime(seconds: number) {
  // 创建 duration 对象
  const time = dayjs.duration(seconds, 'seconds');

  // 获取时分秒
  const hours = Math.floor(seconds / 3600);
  const minutes = time.minutes();
  const secs = time.seconds();

  // 格式化为两位数字符串
  const formatTime = (num: number) => num.toString().padStart(2, '0');

  if (hours > 0) {
    return `${formatTime(hours)}:${formatTime(minutes)}:${formatTime(secs)}`;
  }
  return `00:${formatTime(minutes)}:${formatTime(secs)}`;
}
</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>
            业务类型：{{ businessType[orderInfo.businessType as keyof typeof businessType] || 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.orderMoney }}</div>

          <div>订单创建：{{ orderInfo?.createTime || '暂无' }}</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.channelName || '---' }}</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 != 'DYY'">
              {{ orderStatus[orderInfo.hbOrderStatus as keyof typeof orderStatus] }}
            </template>
            <template v-else>
              {{ 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 class="mt-20px" :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-else-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 v-if="yppStatusEnum.SUCCESS == orderInfo.yppDetail?.orderState" class="flex flex-wrap items-center">
                <div>
                  <div>座位：{{ orderInfo.yppDetail?.seatNames }}</div>
                  <div>取票码：{{ orderInfo.yppDetail?.ticketCode || '--' }}</div>
                </div>
              </div>
              <template v-if="yppStatusEnum.REFUND_FAIL == orderInfo.yppDetail?.orderState">
                <div class="flex">
                  <div>退款金额：</div>
                  <div>
                    <div>{{ orderInfo.yppDetail?.epRefundAmount }}</div>
                    <div class="text-gray">
                      退还金额：{{ orderInfo.yppDetail?.epRefundAmount }}元 退还积分：{{ orderInfo.offsetPoints }}
                    </div>
                  </div>
                </div>
              </template>
            </template>
          </template>
          <template v-else-if="orderInfo.businessType == 'CD'">
            <div class="flex flex-wrap items-center">
              <div class="mr10px flex-shrink-0">
                <div>终端编号：{{ orderInfo.chargeOrder.connectorId || '--' }}</div>
                <div>充电电站：{{ orderInfo.chargeOrder.powerStationName || '--' }}</div>
                <div>充电开始时间：{{ orderInfo.chargeOrder.startTime || '--' }}</div>
                <div>充电结束时间：{{ orderInfo.chargeOrder.endTime || '--' }}</div>
                <div>充电时长：{{ secondsToTime(Number(orderInfo.chargeOrder.chargeTime)) || '--' }}</div>
                <div>充电度数：{{ orderInfo.chargeOrder.totalPower || '--' }}</div>
                <div>
                  终止方式：{{ chargeMethod[orderInfo.chargeOrder.stopMethod as keyof typeof chargeMethod] || '--' }}
                </div>
                <div>详细地址：{{ orderInfo.chargeOrder.powerStationName?.split('-')[0] || '--' }}</div>
              </div>
              <NTable v-if="orderInfo.hbOrderStatus == orderStatusEnum.ORDER_COMPLETE" :single-line="false">
                <NThead>
                  <NTr>
                    <NTh>费用类型</NTh>
                    <NTh>金额/元</NTh>
                  </NTr>
                </NThead>
                <NTbody>
                  <NTr>
                    <NTd>电费</NTd>
                    <NTd>{{ orderInfo.chargeOrder.totalMoney }}</NTd>
                  </NTr>
                  <NTr>
                    <NTd>结算服务费</NTd>
                    <NTd>0</NTd>
                  </NTr>
                  <NTr>
                    <NTd>运营服务费</NTd>
                    <NTd>{{ orderInfo.chargeOrder.realServiceCost }}</NTd>
                  </NTr>
                  <NTr>
                    <NTd>订单金额</NTd>
                    <NTd>{{ orderInfo.actualTotal }}</NTd>
                  </NTr>
                  <NTr>
                    <NTd>积分抵扣</NTd>
                    <NTd>{{ orderInfo.actualTotal }}</NTd>
                  </NTr>
                </NTbody>
              </NTable>
            </div>
          </template>
          <template v-else-if="orderInfo.businessType == 'XNSP'">
            <div>商品名称：{{ orderInfo.virtualOrderItem?.productName }}</div>
            <div>充值账号：{{ orderInfo.virtualOrderItem?.rechargeAccount }}</div>
            <NTable class="mt-10px" :single-line="true">
              <NThead>
                <NTr>
                  <NTh>商品</NTh>
                  <NTh>单价/元</NTh>
                  <NTh>数量</NTh>
                  <NTh>小计/元</NTh>
                </NTr>
              </NThead>
              <NTbody>
                <NTr>
                  <NTd>{{ orderInfo.virtualOrderItem?.productName }}</NTd>
                  <NTd>{{ orderInfo.virtualOrderItem?.sellPrice }}</NTd>
                  <NTd>1</NTd>
                  <NTd>{{ orderInfo.virtualOrderItem?.sellPrice }}</NTd>
                </NTr>
                <NTr v-if="orderInfo.offsetPoints">
                  <NTd></NTd>
                  <NTd></NTd>
                  <NTd>积分抵扣</NTd>
                  <NTd>-{{ Number(orderInfo.offsetPoints) || 0 }}</NTd>
                </NTr>
              </NTbody>
            </NTable>
          </template>
          <template v-else-if="orderInfo.businessType == 'DJK'">
            <div>下单时间：{{ orderInfo.createTime || '---' }}</div>
            <div>支付方式：{{ payType[orderInfo.payType as keyof typeof payType] || '---' }}</div>
            <div>有效期：{{ orderInfo.djkOrderAttachInfo.expiredTime || '---' }}</div>
            <div class="py-20px font-semibold">订单信息</div>
            <NDataTable :columns="orderDJKColumns" :data="[orderInfo.djkOrderAttachInfo]" :bordered="false" />
            <div class="py-20px font-semibold">商品&费用</div>

            <NTable class="mt-20px" :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>

            <div class="py-20px font-semibold">操作记录</div>
            <NDataTable :columns="orderDJKLogColumns" :data="orderInfo.djkOrderLogList" :bordered="false" />
          </template>
          <template v-else-if="orderInfo.businessType == 'JY'">
            <div class="mt-20px pb-20px font-semibold">01 订单编号</div>
            <div>我方订单编号：{{ orderInfo.yppDetail?.movieName || '---' }}</div>
            <div>小桔订单编号：{{ orderInfo.yppDetail?.movieName || '---' }}</div>

            <div class="mt-20px pb-20px font-semibold">02 油站信息</div>
            <div>油站名称：{{ orderInfo.yppDetail?.movieName || '---' }}</div>
            <div>油站地址：{{ orderInfo.yppDetail?.movieName || '---' }}</div>
            <div>所在城市：{{ orderInfo.yppDetail?.movieName || '---' }}</div>

            <div class="mt-20px pb-20px font-semibold">03 加油明细</div>
            <div>油品名称：{{ orderInfo.yppDetail?.movieName || '---' }}</div>
            <div>枪号：{{ orderInfo.yppDetail?.movieName || '---' }}</div>
            <div>加油量：{{ orderInfo.yppDetail?.movieName || '---' }}</div>

            <div class="mt-20px pb-20px font-semibold">04 加油明细</div>
            <div>门店价：{{ orderInfo.yppDetail?.movieName || '---' }}</div>
            <div>平台价：{{ orderInfo.yppDetail?.movieName || '---' }}</div>
            <div>订单金额：{{ orderInfo.yppDetail?.movieName || '---' }}</div>
            <div>抵扣金额：{{ orderInfo.yppDetail?.movieName || '---' }}</div>
            <div>服务费：{{ orderInfo.yppDetail?.movieName || '---' }}</div>
            <div>需付金额：{{ orderInfo.yppDetail?.movieName || '---' }}</div>
          </template>
        </NCard>
      </div>
    </div>
  </div>
</template>

<style scoped></style>