feat: 订单接口字段对接

pages/order/components/OrderCard/constants/order.js

@@ -0,0 +1,59 @@
+// 订单类型
+export const ORDER_TYPE_MAP = {
+  0: [
+    {
+      label: '订单编号',
+      key: 'orderId'
+    },
+    {
+      label: '入住时间',
+      key: 'checkInData'
+    },
+    {
+      label: '游客姓名',
+      key: 'visitorName'
+    },
+    {
+      label: '联系电话',
+      key: 'contactPhone'
+    }
+  ],
+  1: [
+    {
+      label: '订单编号',
+      key: 'orderId'
+    },
+    {
+      label: '份数',
+      key: 'commodityAmount'
+    }
+  ],
+  2: [
+    {
+      label: '订单编号',
+      key: 'orderId'
+    },
+    {
+      label: '份数',
+      key: 'commodityAmount'
+    }
+  ],
+}
+
+// 工单类型
+export const SERVICE_TYPE_MAP = {
+  0: [
+    {
+      label: '创建时间',
+      key: 'createTime'
+    },
+    {
+      label: '联系房客',
+      key: 'userName'
+    },
+    {
+      label: '联系电话',
+      key: 'userPhone'
+    }
+  ],
+}

pages/order/components/OrderCard/index.vue

@@ -3,8 +3,9 @@
     <!-- 卡片头部 -->
     <view class="card-header">
       <view class="status-info">
-        <image class="status-icon" src="./images/service.png"></image>
-        <view class="order-title">{{ orderData.visitorName }}</view>
+        <image class="status-icon" :src="ICON_MAP[orderData.orderType]"></image>
+        <view class="order-title">{{ orderData.commodityName }}</view>
+        <image class="arrow-icon" src="./images/arrow.png"></image>
       </view>
       <view
         v-if="orderData.status !== 'pending'"
@@ -41,8 +42,11 @@
 </template>
 
 <script setup>
-import Divider from "@/components/Divider/index.vue";
 import { defineProps } from "vue";
+import Divider from "@/components/Divider/index.vue";
+import serviceIcon from "./images/service.png";
+import ticketIcon from "./images/ticket.png";
+import hotelIcon from "./images/hotel.png";
 
 // Props
 const props = defineProps({
@@ -63,6 +67,13 @@ const props = defineProps({
 // Emits
 const emit = defineEmits(["click", "call", "complete"]);
 
+// 图标映射
+const ICON_MAP = {
+  0: serviceIcon,
+  1: ticketIcon,
+  2: hotelIcon,
+};
+
 // 获取状态文本
 const getStatusText = (status) => {
   const statusMap = {

pages/order/components/OrderCard/styles/index.scss

@@ -40,7 +40,11 @@
   font-weight: 500;
   color: #333333;
   line-height: 1.4;
-  flex: 1;
+}
+
+.arrow-icon {
+  width: 24px;
+  height: 24px;
 }
 
 .status-tag {
@@ -50,35 +54,39 @@
   font-size: 12px;
   font-weight: 500;
 
+  &.tag-0 {
+    color: #00A6FF;
+    border: 1px solid #00A6FF;
+  }
+
   &.tag-1 {
     color: #f00044;
     border: 1px solid #f00044;
   }
 
   &.tag-2 {
-    color: #ff8c00;
-    border: 1px solid #ffd591;
+    color: #40AE36;
+    border: 1px solid #40AE36;
   }
 
   &.tag-3 {
-    color: #818181;
-    border: 1px solid #818181;
+    color: #808389;
+    border: 1px solid #808389;
   }
 
   &.tag-4 {
-    color: #00a6ff;
-    border: 1px solid #00a6ff;
-  }
-
-  &.tag-6 {
-    color: #52c41a;
-    border: 1px solid #b7eb8f;
+    color: #0256FF;
+    border: 1px solid #0256FF;
   }
 
   &.tag-5 {
-    background-color: #f5f5f5;
-    color: #999999;
-    border: 1px solid #d9d9d9;
+    color: #808389;
+    border: 1px solid #808389;
+  }
+
+    &.tag-6 {
+    color: #FD8702;
+    border: 1px solid #FD8702;
   }
 }