feat: 订单详情布局功能调整

src/pages-order/order/components/GoodsInfo/index.vue

@@ -1,41 +1,28 @@
 <template>
-  <view class="goods-info mb-12">
-    <view class="hotel-header">
-      <image class="hotel-icon" :src="orderTypeIcon"></image>
-      <text class="hotel-name">{{ orderData.storeName }}</text>
+  <view class="border-box bg-white p-12 rounded-12 mb-12">
+    <!-- 酒店类型入住离店日期部分 -->
+    <DateRangeSection
+      v-if="orderData.commodityTypeCode === '0'"
+      :selectedDate="selectedDate"
+    />
+
+    <view class="font-size-16 font-500 color-000 line-height-24 ellipsis-1">
+      {{ orderData.commodityName }}
     </view>
-    <view class="goods-detail">
-      <image
-        v-if="shouldShowImage"
-        class="goods-image"
-        :src="commodityCoverPhoto"
-        lazy-load
-      ></image>
-      <view class="goods-description">
-        <text class="goods-title">{{ commodityName }}</text>
-        <!-- 门店地址 -->
-        <LocationInfo :orderData="orderData" />
-        <!-- 酒店类型 -->
-        <template v-if="orderData.orderType === '0'">
-          <view class="in-date" v-if="checkInData">
-            入住时间：{{ checkInData }}
-          </view>
-          <view class="out-date" v-if="checkOutData">
-            离店时间：{{ checkOutData }}
-          </view>
-        </template>
+
+    <view class="border-box border-bottom">
+      <view class="font-size-12 color-99A0AE line-height-16 pb-12">
+        {{ orderData.commodityDescription }}
       </view>
-    </view>
-    <view class="included-services" v-if="hasServices">
-      <text class="services-title">包含服务</text>
-      <view
-        v-for="item in formattedServiceList"
-        :key="item.key"
-        class="service-item"
-      >
-        <text class="service-name"> · {{ item.displayTitle }} </text>
-        <text class="service-quantity">
-          {{ item.displayAmount }}
+
+      <!-- 权益部分 -->
+      <view class="flex flex-items-center mb-8">
+        <text
+          class="bg-F7F7F7 border-box rounded-4 font-size-11 color-525866 mr-4 pt-4 pb-4 pl-6 pr-6"
+          v-for="(item, index) in orderData.commodityFacilityList"
+          :key="index"
+        >
+          {{ item }}
         </text>
       </view>
     </view>
@@ -44,82 +31,29 @@
 
 <script setup>
 import { defineProps, computed } from "vue";
-import LocationInfo from "@/components/LocationInfo/index.vue";
-import iconHouse from "./images/icon_house.png";
-import iconFood from "./images/food.png";
-import iconTicket from "./images/ticket.png";
+import DateRangeSection from "@/components/DateRangeSection/index.vue";
 
 const props = defineProps({
   orderData: {
     type: Object,
     required: true,
-    default: () => ({
-      id: "",
-      commodityServiceList: [],
-      orderStatus: "0", // 订单状态 0-待支付 1-待确认 2-待使用 3-已取消 4-退款中 5-已退款 6-已完成
-      orderType: "0", // 0-酒店订单, 1-门票订单, 2-餐饮
-    }),
+    default: () => ({}),
   },
 });
 
-// 计算属性：商品名称
-const commodityName = computed(() => {
-  return props.orderData.commodityName || "未知商品";
+const selectedDate = computed(() => {
+  // 计算总天数
+  const startDate = props.orderData.checkInData || "";
+  const endDate = props.orderData.checkOutData || "";
+  const timeStamp = 1000 * 60 * 60 * 24;
+  const totalDays = (new Date(endDate) - new Date(startDate)) / timeStamp;
+
+  return {
+    startDate,
+    endDate,
+    totalDays,
+  };
 });
-
-// 计算属性：商品封面图片
-const commodityCoverPhoto = computed(() => {
-  return props.orderData.commodityCoverPhoto || "";
-});
-
-// 计算属性：入住时间
-const checkInData = computed(() => props.orderData.checkInData || "");
-
-// 计算属性：离店时间
-const checkOutData = computed(() => props.orderData.checkOutData || "");
-
-// 计算属性：服务列表
-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 orderTypeIcon = computed(() => {
-  const orderType = props.orderData.orderType;
-
-  switch (orderType) {
-    case "0":
-      return iconHouse; // 酒店订单
-    case "1":
-      return iconTicket; // 门票订单
-    case "2":
-      return iconFood; // 餐饮订单
-    default:
-      return iconHouse; // 默认显示酒店图标
-  }
-});
-
-// 格式化服务数量
-const formatServiceAmount = (amount) => {
-  if (!amount) return "";
-  return typeof amount === "number" ? `×${amount}` : amount;
-};
 </script>
 
 <style scoped lang="scss">