feat(api): 添加充电订单相关类型定义

添加ChargeOrdeVo接口定义，包含充电订单的详细信息如充电时间、
设备编码、起止时间、用户信息、金额等字段，并在deliveryOrder
接口中增加chargeOrder属性

feat(order-detail): 增加充电订单详情展示功能

新增充电订单数据显示区域，包括终端编号、充电电站、充
电时间、充电时长、充电度数、终止方式等信息，并实现
秒数转时分秒格式化函数，同时优化取票与退款信息显示

chore(normal-order): 添加充电终止方式枚举常量

定义充电终止方式对应的描述文本数组，用于将数字编码
转换为可读的中文描述，包括用户手动停止、运营商平台
停止、BMS停止、设备故障、连接器断开等方式

src/typings/api.d.ts

@@ -681,6 +681,7 @@ declare namespace Api {
       [property: string]: any;
     }
     interface deliveryOrder {
+      chargeOrder: ChargeOrdeVo;
       /**
        * 取消原因
        */
@@ -888,6 +889,82 @@ declare namespace Api {
       businessType: string;
       [property: string]: any;
     }
+    interface ChargeOrdeVo {
+      /**
+       * 充电订单号
+       */
+      chargeOrderNo?: string;
+      /**
+       * 充电时间：秒
+       */
+      chargeTime?: number;
+      /**
+       * 充电设备接口编码
+       */
+      connectorId?: string;
+      /**
+       * 结束充电时间
+       */
+      endTime?: string;
+      /**
+       * 用户ID
+       */
+      memberId?: number;
+      /**
+       * 订购流水号
+       */
+      orderNumber?: string;
+      /**
+       * 电站名称
+       */
+      powerStationName?: string;
+      /**
+       * 预充值金额
+       */
+      preAmt?: number;
+      /**
+       * 平台实际收取金额
+       */
+      realCost?: number;
+      /**
+       * 平台总服务费
+       */
+      realServiceCost?: number;
+      /**
+       * 备注
+       */
+      remarks?: string;
+      /**
+       * 开始充电时间
+       */
+      startTime?: string;
+      /**
+       * 第三方充电站ID
+       */
+      stationId?: string;
+      /**
+       * 充电订单状态
+       */
+      status?: number;
+      /**
+       * 0:用户手动停止充电；1:客户归属地运营商平台停止充电；2:BMS停止充电；3:充电机设备故障；4:连接器断开；其它:自定义
+       */
+      stopMethod?: number;
+      /**
+       * 实际充电度数（单位：0.001 kw/h）
+       */
+      totalCharge?: number;
+      /**
+       * 三方电费
+       */
+      totalMoney?: number;
+      /**
+       * 充电度数
+       */
+      totalPower?: number;
+      [property: string]: any;
+    }
+
     interface OrderItemElement {
       /**
        * 商品实际金额 = 商品总金额 - 分摊的优惠金额

src/views/order-manage/normal-order/normal-order.ts

@@ -313,3 +313,16 @@ export const deliveryInfo: FormSchema[] = [
     }
   }
 ];
+
+/**
+ * 0:用户手动停止充电；1:客户归属地运营商平台停止充电；2:BMS停止充电；3:充电机设备故障；4:连接器断开；其它:自定义
+ */
+
+export const chargeMethod = [
+  '用户手动停止充电',
+  '客户归属地运营商平台停止充电',
+  'BMS停止充电',
+  '充电机设备故障',
+  '连接器断开',
+  '其它'
+];

src/views/order-manage/order-detail/index.vue

@@ -3,14 +3,22 @@ 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 { orderColumns, orderStatus, orderStatusEnum, yppStatus, yppStatusEnum } from '../normal-order/normal-order';
+import {
+  chargeMethod,
+  orderColumns,
+  orderStatus,
+  orderStatusEnum,
+  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);
@@ -59,6 +67,23 @@ defineExpose({ open });
 //   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>
@@ -129,10 +154,10 @@ defineExpose({ open });
         <div class="flex">
           <div class="mb-10px text-16px font-semibold">
             业务状态：
-            <template v-if="orderInfo.businessType == 'XSB'">
+            <template v-if="orderInfo.businessType != 'DYY'">
               {{ orderStatus[orderInfo.hbOrderStatus as keyof typeof orderStatus] }}
             </template>
-            <template v-if="orderInfo.businessType == 'DYY'">
+            <template v-else>
               {{ yppStatus[orderInfo.yppDetail?.orderState as keyof typeof yppStatus] }}
             </template>
           </div>
@@ -233,14 +258,73 @@ defineExpose({ open });
               "
             >
               <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 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 items-center">
+                  <div>退款金额：</div>
+                  <div>
+                    <div>{{ orderInfo.yppDetail?.epRefundAmount }}</div>
+                    <div class="text-gray">
+                      退还金额：{{ orderInfo.yppDetail?.epRefundAmount }}元 退还积分：{{
+                        (Number(orderInfo.offsetPoints) / 100).toFixed(2)
+                      }}
+                    </div>
+                  </div>
+                </div>
+              </template>
             </template>
           </template>
+          <template v-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.totalCharge || '--' }}</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>
         </NCard>
       </div>
     </div>