订单详情，设备层模版页面调试

haha-admin-web/src/api/layer-template.ts

@@ -160,9 +160,6 @@ export interface LayerTemplateQueryParams {
   /** 设备ID / Device ID */
   deviceId?: number;
 
-  /** 设备编码 / Device code */
-  deviceCode?: string;
-
   /** 同步状态 / Sync status */
   syncStatus?: number;
 

haha-admin-web/src/views/layer-template/utils/hook.ts

@@ -38,11 +38,9 @@ export interface LayerTemplateItem {
   deviceId?: number | string;
   /** 设备名称 / Device name */
   deviceName?: string;
-  /** 设备编码 / Device code */
-  deviceCode?: string;
   /** 总楼层数 / Total floor count */
   totalFloors?: number;
-  /** 同步状态 (0-未同步, 1-已同步, 2-同步中, 3-同步失败) */
+  /** 同步状态 (0-未同步, 1-同步中, 2-已同步, 3-同步失败) */
   syncStatus?: number;
   /** 最后同步时间 / Last sync time */
   lastSyncTime?: string;
@@ -101,7 +99,8 @@ export function useProduct(tableRef?: Ref) {
   // 同步状态选项
   const syncStatusOptions = [
     { label: "未同步", value: 0 },
-    { label: "已同步", value: 1 },
+    { label: "同步中", value: 1 },
+    { label: "已同步", value: 2 },
     { label: "同步失败", value: 3 }
   ];
 
@@ -110,12 +109,12 @@ export function useProduct(tableRef?: Ref) {
     {
       label: "ID",
       prop: "id",
-      width: 70
+      width: 100
     },
     {
       label: "模板名称",
       prop: "templateName",
-      minWidth: 150,
+      minWidth: 100,
       showOverflowTooltip: true
     },
     {
@@ -123,12 +122,6 @@ export function useProduct(tableRef?: Ref) {
       prop: "deviceId",
       minWidth: 100
     },
-    {
-      label: "设备编码",
-      prop: "deviceCode",
-      minWidth: 120,
-      showOverflowTooltip: true
-    },
     {
       label: "机柜层数",
       prop: "totalFloors",
@@ -142,8 +135,8 @@ export function useProduct(tableRef?: Ref) {
       cellRenderer: ({ row }) => {
         const statusMap: Record<number, { label: string; type: string }> = {
           0: { label: "未同步", type: "info" },
-          1: { label: "已同步", type: "success" },
-          2: { label: "同步中", type: "warning" },
+          1: { label: "同步中", type: "warning" },
+          2: { label: "已同步", type: "success" },
           3: { label: "同步失败", type: "danger" }
         };
         const status = statusMap[row.syncStatus] || {

haha-admin-web/src/views/order/utils/hook.tsx

@@ -134,9 +134,9 @@ export function useOrder(tableRef: Ref) {
       minWidth: 85,
       cellRenderer: ({ row }) => {
         const statusMap: Record<string, { label: string; type: string }> = {
-          "unpaid": { label: "待支付", type: "warning" },
-          "paid": { label: "已支付", type: "success" },
-          "refund": { label: "已退款", type: "danger" }
+          "UNPAID": { label: "待支付", type: "warning" },
+          "PAID": { label: "已支付", type: "success" },
+          "REFUND": { label: "已退款", type: "danger" }
         };
         const status = statusMap[row.payStatus] || { label: "未知", type: "info" };
         return <el-tag type={status.type as any}>{status.label}</el-tag>;
@@ -244,85 +244,140 @@ export function useOrder(tableRef: Ref) {
     try {
       const { data } = await getOrderById(row.id);
       const order = data;
-
+  
+      // 支付状态样式
+      const payStatusStyle = order.payStatus === "PAID"
+        ? "success" : order.payStatus === "REFUND"
+        ? "danger" : "warning";
+      const payStatusText = order.payStatusLabel || (order.payStatus === "PAID" ? "已支付" : order.payStatus === "REFUND" ? "已退款" : "待支付");
+  
+      // 订单状态样式
+      const statusStyle = order.status === 1
+        ? "success" : order.status === 3
+        ? "danger" : order.status === 2
+        ? "info" : "warning";
+      const statusText = order.statusText || (order.status === 0 ? "待支付" : order.status === 1 ? "已完成" : order.status === 2 ? "已取消" : "已退款");
+  
+      // 支付方式样式
+      const payTypeMap: Record<string, { text: string; type: string }> = {
+        "wechat": { text: "微信支付", type: "success" },
+        "alipay": { text: "支付宝", type: "primary" },
+        "cash": { text: "现金", type: "warning" },
+        "free": { text: "免费", type: "info" }
+      };
+      const payType = payTypeMap[order.payType] || { text: order.payType || "-", type: "info" };
+  
       addDialog({
-        title: `订单详情 - ${order.orderNo}`,
-        width: "70%",
+        title: `订单详情`,
+        width: "720px",
         draggable: true,
-        fullscreen: deviceDetection(),
         closeOnClickModal: false,
         contentRenderer: () => (
-          <div>
-            <ElDescriptions column={2} border>
-              <ElDescriptionsItem label="订单编号">{order.orderNo}</ElDescriptionsItem>
-              <ElDescriptionsItem label="支付订单号">{order.outTradeNo || "-"}</ElDescriptionsItem>
-              <ElDescriptionsItem label="用户 ID">{order.userId || "-"}</ElDescriptionsItem>
-              <ElDescriptionsItem label="设备 ID">{order.deviceId || "-"}</ElDescriptionsItem>
+          <div style="max-height: 70vh; overflow-y: auto; padding: 0 4px;">
+            {/* 基本信息 */}
+            <div style="font-size: 15px; font-weight: 600; margin-bottom: 10px; color: var(--el-text-color-primary);">基本信息</div>
+            <ElDescriptions column={3} border size="small">
+              <ElDescriptionsItem label="订单编号" span={2}>{order.orderNo}</ElDescriptionsItem>
               <ElDescriptionsItem label="门店名称">{order.shopName || "-"}</ElDescriptionsItem>
-              <ElDescriptionsItem label="活动 ID">{order.activityId || "-"}</ElDescriptionsItem>
+              <ElDescriptionsItem label="支付订单号" span={2}>{order.outTradeNo || "-"}</ElDescriptionsItem>
+              <ElDescriptionsItem label="设备 ID">{order.deviceId || "-"}</ElDescriptionsItem>
+              <ElDescriptionsItem label="活动 ID" span={2}>{order.activityId || "-"}</ElDescriptionsItem>
+              <ElDescriptionsItem label="用户 ID">{order.userId || "-"}</ElDescriptionsItem>
+            </ElDescriptions>
+  
+            {/* 金额与状态 */}
+            <div style="font-size: 15px; font-weight: 600; margin: 14px 0 10px; color: var(--el-text-color-primary);">金额与状态</div>
+            <ElDescriptions column={3} border size="small">
               <ElDescriptionsItem label="订单金额">
-                ¥{order.totalAmount || '0.00'}
+                <span>¥{order.totalAmount || "0.00"}</span>
               </ElDescriptionsItem>
               <ElDescriptionsItem label="优惠金额">
                 {order.discountAmount > 0 ? (
                   <el-tag type="success" size="small">-¥{order.discountAmount}</el-tag>
                 ) : (
-                  <span class="text-gray-400">¥0.00</span>
+                  <span style="color: #999">¥0.00</span>
                 )}
               </ElDescriptionsItem>
               <ElDescriptionsItem label="实付金额">
-                <span class="text-red-600 font-bold text-lg">¥{order.paidAmount || (order.totalAmount || 0) - (order.discountAmount || 0)}</span>
+                <span style="color: #e6a23c; font-weight: 600; font-size: 15px;">¥{order.paidAmount || (order.totalAmount || 0) - (order.discountAmount || 0)}</span>
               </ElDescriptionsItem>
               <ElDescriptionsItem label="支付方式">
-                <el-tag type={order.payType === "wechat" ? "success" : order.payType === "alipay" ? "primary" : "info"} size="small">
-                  {order.payType === "wechat" ? "微信支付" : order.payType === "alipay" ? "支付宝" : order.payType === "cash" ? "现金" : order.payType === "free" ? "免费" : order.payType || "-"}
-                </el-tag>
+                <el-tag type={payType.type as any} size="small">{payType.text}</el-tag>
               </ElDescriptionsItem>
               <ElDescriptionsItem label="支付状态">
-                <el-tag type={order.payStatus === "paid" ? "success" : order.payStatus === "refund" ? "danger" : "warning"}>
-                  {order.payStatus === "paid" ? "已支付" : order.payStatus === "refund" ? "已退款" : "待支付"}
-                </el-tag>
+                <el-tag type={payStatusStyle as any} size="small">{payStatusText}</el-tag>
               </ElDescriptionsItem>
               <ElDescriptionsItem label="订单状态">
-                <el-tag type={order.status === 1 ? "success" : order.status === 3 ? "danger" : order.status === 2 ? "info" : "warning"}>
-                  {order.status === 0 ? "待支付" : order.status === 1 ? "已完成" : order.status === 2 ? "已取消" : "已退款"}
-                </el-tag>
-              </ElDescriptionsItem>
-              <ElDescriptionsItem label="下单时间">
-                {dayjs(order.createTime).format("YYYY-MM-DD HH:mm:ss")}
+                <el-tag type={statusStyle as any} size="small">{statusText}</el-tag>
               </ElDescriptionsItem>
-              <ElDescriptionsItem label="支付时间">
-                {order.payTime ? dayjs(order.payTime).format("YYYY-MM-DD HH:mm:ss") : "-"}
-              </ElDescriptionsItem>
-              {order.videoUrl && (
-                <ElDescriptionsItem label="支付视频" span={2}>
-                  <video src={order.videoUrl} controls class="w-full max-w-md" />
-                </ElDescriptionsItem>
-              )}
-              {order.confidence && (
-                <ElDescriptionsItem label="置信度">
-                  {(order.confidence * 100).toFixed(2)}%
-                </ElDescriptionsItem>
-              )}
+              <ElDescriptionsItem label="下单时间">{dayjs(order.createTime).format("YYYY-MM-DD HH:mm:ss")}</ElDescriptionsItem>
+              <ElDescriptionsItem label="支付时间" span={2}>{order.payTime ? dayjs(order.payTime).format("YYYY-MM-DD HH:mm:ss") : "-"}</ElDescriptionsItem>
             </ElDescriptions>
-
-            <div class="mt-4">
-              <div class="font-bold mb-2">订单商品</div>
-              <ElTable data={order.items || []} border>
-                <ElTableColumn prop="productName" label="商品名称" />
-                <ElTableColumn
-                  prop="price"
-                  label="单价"
-                  formatter={({ price }) => `¥${((price || 0) / 100).toFixed(2)}`}
-                />
-                <ElTableColumn prop="quantity" label="数量" />
-                <ElTableColumn
-                  prop="amount"
-                  label="小计"
-                  formatter={({ amount }) => `¥${((amount || 0) / 100).toFixed(2)}`}
-                />
-              </ElTable>
-            </div>
+  
+            {/* 视频与置信度 */}
+            {(order.videoUrl || order.confidence) && (
+              <>
+                <div style="font-size: 15px; font-weight: 600; margin: 14px 0 10px; color: var(--el-text-color-primary);">其他信息</div>
+                <ElDescriptions column={3} border size="small">
+                  {order.videoUrl && (
+                    <ElDescriptionsItem label="支付视频" span={3}>
+                      <video src={order.videoUrl} controls style="width: 100%; max-width: 360px; max-height: 200px;" />
+                    </ElDescriptionsItem>
+                  )}
+                  {order.confidence && (
+                    <ElDescriptionsItem label="置信度">{(order.confidence * 100).toFixed(2)}%</ElDescriptionsItem>
+                  )}
+                </ElDescriptions>
+              </>
+            )}
+  
+            {/* 订单商品 */}
+            {order.products && order.products.length > 0 && (
+              <>
+                <div style="font-size: 15px; font-weight: 600; margin: 14px 0 10px; color: var(--el-text-color-primary);">订单商品</div>
+                <ElTable data={order.products} border size="small" style="width: 100%">
+                  <ElTableColumn prop="productName" label="商品名称" min-width={140} />
+                  <ElTableColumn
+                    prop="pic"
+                    label="图片"
+                    width={70}
+                    align="center"
+                    v-slots={{
+                      default: ({ row }: any) => row.pic ? (
+                        <el-image src={row.pic} style="width: 40px; height: 40px" fit="cover" preview-teleported={true} preview-src-list={[row.pic]} />
+                      ) : <span style="color: #999">-</span>
+                    }}
+                  />
+                  <ElTableColumn
+                    label="单价"
+                    width={90}
+                    align="right"
+                    v-slots={{
+                      default: ({ row }: any) => <span>¥{row.price || "0.00"}</span>
+                    }}
+                  />
+                  <ElTableColumn
+                    label="数量"
+                    width={60}
+                    align="center"
+                    v-slots={{
+                      default: ({ row }: any) => <span>×{row.productNum || 1}</span>
+                    }}
+                  />
+                  <ElTableColumn
+                    label="小计"
+                    width={100}
+                    align="right"
+                    v-slots={{
+                      default: ({ row }: any) => {
+                        const subtotal = row.price && row.productNum ? (row.price * row.productNum) : 0;
+                        return <span style="font-weight: 500">¥{subtotal.toFixed(2)}</span>;
+                      }
+                    }}
+                  />
+                </ElTable>
+              </>
+            )}
           </div>
         ),
         hideFooter: true

haha-admin-web/src/views/order/utils/types.ts

@@ -2,6 +2,7 @@
 export interface OrderItem {
   id: number;
   orderNo: string;
+  orderName?: string;
   outTradeNo?: string;
   activityId?: string;
   userId: number;
@@ -9,30 +10,35 @@ export interface OrderItem {
   shopId?: number;
   shopName?: string;
   totalAmount: number;
-  payAmount?: number;
+  paidAmount?: number;
   discountAmount?: number;
   payStatus: string;
+  payStatusLabel?: string;
   payType?: string;
   payTime?: string;
   status: number;
+  statusText?: string;
   refundStatus?: number;
   refundReason?: string;
   refundTime?: string;
   createTime: string;
-  items?: OrderItemDetail[];
+  products?: OrderItemDetail[];
   videoUrl?: string;
   confidence?: number;
 }
 
-// 订单明细类型
+// 订单明细类型（与后端 OrderItemVO 对齐）
 export interface OrderItemDetail {
   id: number;
-  productId: number;
+  productId?: number;
+  code?: string;
+  barCode?: string;
   productName: string;
-  productImage: string;
-  price: number;
-  quantity: number;
-  amount: number;
+  pic?: string;
+  productNum?: number;
+  money?: number;
+  originPrice?: number;
+  price?: number;
 }
 
 // 搜索表单类型

haha-common/src/main/java/com/haha/common/vo/OrderVO.java

@@ -27,7 +27,7 @@ public class OrderVO {
     /** 实付总金额 = total_amount - discount_amount */
     private BigDecimal paidAmount;
     
-    private Integer payStatus;
+    private String payStatus;
     private String payStatusLabel;
     private Integer status;
     private String statusText;

haha-service/src/main/java/com/haha/service/impl/OrderServiceImpl.java

@@ -142,7 +142,7 @@ public class OrderServiceImpl extends ServiceImpl<OrderMapper, Order> implements
         vo.setTotalAmount(order.getTotalAmount());
         vo.setDiscountAmount(order.getDiscountAmount());
         vo.setPaidAmount(order.getPaidAmount());
-        vo.setPayStatus(order.getPayStatus() != null ? Integer.valueOf(order.getPayStatus()) : null);
+        vo.setPayStatus(order.getPayStatus());
         vo.setPayStatusLabel(getPayStatusLabel(order.getPayStatus()));
         vo.setStatus(order.getStatus());
         vo.setStatusText(getStatusLabel(order.getStatus()));