feat: 商品详情交互开发

pages/goods/components/GoodConfirm/index.vue

@@ -39,13 +39,25 @@
                 }}</view>
                 <view class="goods-price">
                   <text class="currency">¥</text>
-                  <text class="price">{{ goodsData.price || 399 }}</text>
+                  <text class="price">
+                    {{ goodsData.specificationPrice || 399 }}
+                  </text>
                 </view>
-                <view class="goods-service-list">
+                <view
+                  class="goods-service-list"
+                  v-if="
+                    goodsData.commodityServiceList &&
+                    goodsData.commodityServiceList.length
+                  "
+                >
                   <view class="service-title">包含服务</view>
-                  <view class="goods-service-item">
-                    <text class="service-label">随时可退</text>
-                    <text class="service-value">1份</text>
+                  <view
+                    class="goods-service-item"
+                    v-for="item in goodsData.commodityServiceList"
+                    :key="item.serviceTitle"
+                  >
+                    <text class="service-label">{{ item.serviceTitle }}</text>
+                    <text class="service-value">{{ item.serviceAmount }}</text>
                   </view>
                 </view>
               </view>
@@ -54,7 +66,11 @@
 
           <!-- 数量选择区域 -->
           <view class="quantity-section">
-            <ModuleTitle title="游客信息" />
+            <ModuleTitle
+              :title="
+                goodsData.commodityTypeCode === '0' ? '订房信息' : '游客信息'
+              "
+            />
 
             <Stepper v-model="quantity" />
           </view>
@@ -67,7 +83,11 @@
           >
             <FormCard
               v-for="(item, index) in userFormList"
-              :title="`游客${index + 1}`"
+              :title="
+                goodsData.commodityTypeCode === '0'
+                  ? `房间${index + 1}`
+                  : `游客${index + 1}`
+              "
               :form="item"
               :showDeleteIcon="userFormList.length > 1"
               :key="index"
@@ -78,7 +98,7 @@
           </scroll-view>
 
           <!-- 总价区域 -->
-          <SumCard />
+          <SumCard :referencePrice="goodsData.specificationPrice" :discount="totalPrice" />
         </view>
       </scroll-view>
 
@@ -107,7 +127,9 @@ import SumCard from "@/components/SumCard/index.vue";
 const props = defineProps({
   goodsData: {
     type: Object,
-    default: () => ({}),
+    default: () => ({
+      commodityTypeCode: "0", // 商品类型 0-酒店 1-门票 2-餐饮
+    }),
   },
 });
 

pages/goods/components/GoodInfo/index.vue

@@ -8,6 +8,15 @@
       <view class="tag-wrapper" v-if="goodsData.timeTag">
         <view class="time-tag">{{ goodsData.timeTag || "随时可退" }}</view>
       </view>
+      <!-- 日历ICON，酒店订单显示 -->
+      <uni-icons
+        class="calender-icon"
+        v-if="isShowCalendar"
+        type="calendar"
+        size="24"
+        color="#00A6FF"
+        @click="showCalendar"
+      />
     </view>
 
     <!-- 地址区域 -->
@@ -31,9 +40,12 @@
 </template>
 
 <script setup>
-import { computed, defineProps } from "vue";
+import { computed, defineProps, defineEmits } from "vue";
 import LocationInfo from "@/components/LocationInfo/index.vue";
 
+// 事件定义
+const emits = defineEmits(["showCalendar"]);
+
 // Props定义
 const props = defineProps({
   goodsData: {
@@ -44,12 +56,23 @@ const props = defineProps({
 
 // 设施列表 - 使用computed优化性能
 const facilitiesList = computed(() => {
-  if (props.goodsData.commodityTag && props.goodsData.commodityTag.length) {
-    return props.goodsData.commodityTag;
+  if (
+    props.goodsData.commodityFacilityList &&
+    props.goodsData.commodityFacilityList.length
+  ) {
+    return props.goodsData.commodityFacilityList;
   }
 
   return [];
 });
+
+// 日历弹窗
+const showCalendar = () => emits("showCalendar");
+
+// 是否显示日历按钮
+const isShowCalendar = computed(() => {
+  return props.goodsData.commodityTypeCode === "0";
+});
 </script>
 
 <style scoped lang="scss">

pages/goods/components/GoodInfo/styles/index.scss

@@ -1,9 +1,10 @@
 .good-info {
   background: #fff;
-  margin-bottom: 12px;
 
   // 标题区域
   .title-section {
+    display: flex;
+    align-items: center;
     margin-bottom: 12px;
 
     .title {
@@ -11,8 +12,10 @@
       color: #333;
       font-weight: 600;
       line-height: 1.4;
-      display: block;
-      margin-bottom: 8px;
+      flex: 0 280px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
     .tag-wrapper {
@@ -27,11 +30,14 @@
         border: 1px solid #f55726;
       }
     }
+
+    .calender-icon {
+      margin-left: auto;
+    }
   }
 
   // 地址区域
   .address-section {
-    margin-bottom: 12px;
     padding: 12px 0;
     border-top: 1px solid #f0f0f0;
     border-bottom: 1px solid #f0f0f0;
@@ -52,6 +58,8 @@
 
   // 设施信息区域
   .facilities-section {
+    margin-top: 12px;
+
     .facilities-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);