feat: 订单详情代码完善

pages/order/components/OrderCard/index.vue

@@ -4,13 +4,13 @@
     <view class="card-header">
       <view class="status-info">
         <image class="status-icon" src="./images/service.png"></image>
-        <view class="order-title">{{ orderData.title }}</view>
+        <view class="order-title">{{ orderData.visitorName }}</view>
       </view>
       <view
         v-if="orderData.status !== 'pending'"
-        :class="['status-tag', `tag-${orderData.status}`]"
+        :class="['status-tag', `tag-${orderData.orderStatus}`]"
       >
-        {{ getStatusText(orderData.status) }}
+        {{ getStatusText(orderData.orderStatus) }}
       </view>
     </view>
 
@@ -25,7 +25,7 @@
       </view>
       <view class="info-row">
         <text class="label">联系房客：</text>
-        <text class="value">{{ orderData.contactName }}</text>
+        <text class="value">{{ orderData.visitorName }}</text>
       </view>
       <view class="info-row">
         <text class="label">联系电话：</text>
@@ -55,7 +55,7 @@ const props = defineProps({
       createTime: "",
       contactName: "",
       contactPhone: "",
-      status: "pending", // pending-待处理, completed-已完成, cancelled-已取消
+      orderStatus: "pending", // pending-待处理, completed-已完成, cancelled-已取消
     }),
   },
 });
@@ -66,10 +66,13 @@ const emit = defineEmits(["click", "call", "complete"]);
 // 获取状态文本
 const getStatusText = (status) => {
   const statusMap = {
-    pending: "待处理",
-    completed: "已完成",
-    cancelled: "已取消",
-    processing: "处理中",
+    0: "待支付",
+    1: "待确认",
+    2: "待使用",
+    3: "已取消",
+    4: "退款中",
+    5: "已关闭",
+    6: "已完成",
   };
   return statusMap[status] || "未知状态";
 };
@@ -97,4 +100,4 @@ defineExpose({
 
 <style scoped lang="scss">
 @import "./styles/index.scss";
-</style>
+</style>

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

@@ -1,10 +1,10 @@
 .order-card {
   background-color: #fff;
   border-radius: 6px 6px 12px 12px;
-  box-shadow: 0px 3px 8px 0 rgba(0,0,0,0.12); 
+  box-shadow: 0px 3px 8px 0 rgba(0, 0, 0, 0.12);
   margin: 12px;
   transition: all 0.3s ease;
-  
+
   &:active {
     transform: scale(0.98);
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
@@ -46,37 +46,42 @@
 .status-tag {
   box-sizing: border-box;
   padding: 6px 16px;
-  border-radius: 20px ;
+  border-radius: 20px;
   font-size: 12px;
   font-weight: 500;
-  
-  &.tag-pending {
-    background-color: #FFF7E6;
-    color: #FF8C00;
-    border: 1px solid #FFD591;
+
+  &.tag-1 {
+    color: #f00044;
+    border: 1px solid #f00044;
   }
-  
-  &.tag-completed {
-    background-color: #F6FFED;
-    color: #52C41A;
-    border: 1px solid #B7EB8F;
+
+  &.tag-2 {
+    color: #ff8c00;
+    border: 1px solid #ffd591;
   }
-  
-  &.tag-cancelled {
-    background-color: #F5F5F5;
+
+  &.tag-3 {
+    color: #818181;
+    border: 1px solid #818181;
+  }
+
+  &.tag-4 {
+    color: #00a6ff;
+    border: 1px solid #00a6ff;
+  }
+
+  &.tag-6 {
+    color: #52c41a;
+    border: 1px solid #b7eb8f;
+  }
+
+  &.tag-5 {
+    background-color: #f5f5f5;
     color: #999999;
-    border: 1px solid #D9D9D9;
-  }
-  
-  &.tag-processing {
-    background-color: #E6F7FF;
-    color: #1890FF;
-    border: 1px solid #91D5FF;
+    border: 1px solid #d9d9d9;
   }
 }
 
-
-
 .card-content {
   padding: 16px;
 }
@@ -85,7 +90,7 @@
   display: flex;
   align-items: center;
   margin-bottom: 10px;
-  
+
   &:last-child {
     margin-bottom: 0;
   }
@@ -112,19 +117,19 @@
   width: 280px;
   height: 42px;
   border-radius: 50px;
-  border: 2px solid #FFCA70;
+  border: 2px solid #ffca70;
   font-size: 14px;
   font-weight: 500;
   transition: all 0.3s ease;
-  background: linear-gradient( 179deg, #FFB100 0%, #FF7F19 100%);
+  background: linear-gradient(179deg, #ffb100 0%, #ff7f19 100%);
   color: #ffffff;
   margin: 0 auto;
 
   &:hover {
-    background: linear-gradient(135deg, #FF7A00 0%, #FF6600 100%);
+    background: linear-gradient(135deg, #ff7a00 0%, #ff6600 100%);
   }
-  
+
   &:active {
     transform: scale(0.95);
   }
-}
+}