feat: 订单详情字段对接

pages/order/components/GoodsInfo/index.vue

@@ -2,46 +2,93 @@
   <view class="goods-info mb12">
     <view class="hotel-header">
       <image class="hotel-icon" src="./images/icon_house.png"></image>
-      <text class="hotel-name">{{ orderData.commodityName }}</text>
+      <text class="hotel-name">{{ orderData.commodityAddress }}</text>
     </view>
     <view class="goods-detail">
-      <image class="goods-image" :src="orderData.commodityCoverPhoto"></image>
+      <image
+        v-if="shouldShowImage"
+        class="goods-image"
+        :src="commodityCoverPhoto"
+        lazy-load
+      ></image>
       <view class="goods-description">
-        <text class="goods-title">{{ orderData.commodityName }}</text>
+        <text class="goods-title">{{ commodityName }}</text>
-        <text class="goods-date">预定时间：{{ orderData.checkInData }}</text>
+        <text class="goods-date" v-if="checkInData"
+          >预定时间：{{ checkInData }}</text
+        >
       </view>
     </view>
-    <view class="included-services">
+    <view class="included-services" v-if="hasServices">
       <text class="services-title">包含服务</text>
-      <view class="service-item">
+      <view
-        <text class="service-name">· 精致下午茶</text>
+        v-for="item in formattedServiceList"
-        <text class="service-quantity">1份</text>
+        :key="item.key"
-      </view>
+        class="service-item"
-      <view class="service-item">
+      >
-        <text class="service-name">· 接机或接站</text>
+        <text class="service-name"> · {{ item.displayTitle }} </text>
-        <text class="service-quantity">1份</text>
+        <text class="service-quantity">
+          {{ item.displayAmount }}
+        </text>
       </view>
     </view>
   </view>
 </template>
 
 <script setup>
-import { defineProps } from "vue";
+import { defineProps, computed } from "vue";
 
-defineProps({
+const props = defineProps({
   orderData: {
     type: Object,
     required: true,
     default: () => ({
       id: "",
-      createTime: "",
+      commodityServiceList: [],
-      contactName: "",
-      contactPhone: "",
       orderStatus: "0", // 订单状态 0-待支付 1-待确认 2-待使用 3-已取消 4-退款中 5-已退款 6-已完成
       orderType: undefined, // 0-酒店订单, 1-门票订单, 2-餐饮
     }),
   },
 });
+
+// 计算属性：商品名称
+const commodityName = computed(() => {
+  return props.orderData.commodityName || "未知商品";
+});
+
+// 计算属性：商品封面图片
+const commodityCoverPhoto = computed(() => {
+  return props.orderData.commodityCoverPhoto || "";
+});
+
+// 计算属性：入住时间
+const checkInData = computed(() => props.orderData.checkInData || "");
+
+// 计算属性：服务列表
+const serviceList = computed(() => props.orderData.commodityServiceList || []);
+
+// 计算属性：是否有服务
+const hasServices = computed(() => serviceList.value.length);
+
+// 计算属性：格式化的服务列表（预处理数据，减少模板中的计算）
+const formattedServiceList = computed(() => {
+  return serviceList.value.map((item, index) => ({
+    ...item,
+    key: item.id || item.serviceTitle || `service-${index}`,
+    displayTitle: item.serviceTitle || "未知服务",
+    displayAmount: formatServiceAmount(item.serviceAmount),
+  }));
+});
+
+// 计算属性：是否显示商品图片
+const shouldShowImage = computed(() => {
+  return !!commodityCoverPhoto.value;
+});
+
+// 格式化服务数量
+const formatServiceAmount = (amount) => {
+  if (!amount) return "";
+  return typeof amount === "number" ? `×${amount}` : amount;
+};
 </script>
 
 <style scoped lang="scss">

pages/order/components/OrderInfo/index.vue

@@ -15,7 +15,7 @@
     <!-- 在已退款状态显示 -->
     <view class="order-item">
       <text class="label">退款单号</text>
-      <text class="value">{{ payWayText }}</text>
+      <text class="value">{{ orderData.refundOrderNo }}</text>
     </view>
     <view class="line"></view>
     <view class="order-item amount">