feat: 调整项目结构

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

@@ -0,0 +1,127 @@
+<template>
+  <view class="goods-info mb12">
+    <view class="hotel-header">
+      <image class="hotel-icon" :src="orderTypeIcon"></image>
+      <text class="hotel-name">{{ orderData.storeName }}</text>
+    </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>
+    </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 }}
+        </text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<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";
+
+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-餐饮
+    }),
+  },
+});
+
+// 计算属性：商品名称
+const commodityName = computed(() => {
+  return props.orderData.commodityName || "未知商品";
+});
+
+// 计算属性：商品封面图片
+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">
+@use "./styles/index.scss";
+</style>