feat: 统一了商品详情购买需知的组件

components/GoodDetail/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <view>
+    <view v-if="goodsData.commodityPurchaseInstruction" class="use-notice">
+      <ModuleTitle
+        v-if="showTitle"
+        :title="goodsData.commodityPurchaseInstruction.templateTitle"
+      />
+      <view
+        class="use-notice-content"
+        v-for="(moduleItem, index) in goodsData.commodityPurchaseInstruction
+          .commodityPurchaseInstructionModuleEntityList"
+        :key="index"
+      >
+        <view
+          class="module-item"
+          :class="{
+            'border-bottom':
+              index <
+              goodsData.commodityPurchaseInstruction
+                .commodityPurchaseInstructionModuleEntityList.length -
+                1,
+          }"
+        >
+          <view class="module-icon">
+            <uni-icons fontFamily="znicons" size="20" color="#333">{{
+              zniconsMap[moduleItem.moduleIcon]
+            }}</uni-icons>
+            <text class="module-title">{{ moduleItem.moduleTitle }}</text>
+          </view>
+          <text class="module-desc">{{ moduleItem.moduleContent }}</text>
+        </view>
+      </view>
+    </view>
+    <zero-markdown-view
+      v-else
+      :markdown="goodsData.commodityTip"
+      :aiMode="true"
+    />
+  </view>
+</template>
+
+<script setup>
+import ModuleTitle from "@/components/ModuleTitle/index.vue";
+import { zniconsMap } from "@/static/fonts/znicons.js";
+import { defineProps } from "vue";
+
+// Props定义
+const props = defineProps({
+  goodsData: {
+    type: Object,
+    default: () => ({}),
+  },
+  showTitle: {
+    type: Boolean,
+    default: true,
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@font-face {
+  font-family: znicons;
+  src: url("@/static/fonts/znicons.ttf");
+}
+
+// 使用须知样式
+.use-notice {
+  margin: 16px 0;
+}
+
+.use-notice-content {
+  .module-item {
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+    padding: 12px 0;
+
+    .module-icon {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-right: 8px;
+      flex-shrink: 0;
+
+      .module-title {
+        font-size: 14px;
+        color: #333;
+        text-align: center;
+        word-wrap: break-word;
+        margin-left: 4px;
+      }
+    }
+
+    .module-desc {
+      flex: 1;
+      font-size: 12px;
+      color: #666;
+      line-height: 1.5;
+      margin-top: 4px;
+    }
+  }
+  .border-bottom {
+    border-bottom: 1px solid #f0f0f0;
+  }
+}
+</style>

components/LocationCard/index.vue

@@ -1,9 +1,7 @@
 <template>
   <view class="store-address" @click="openMap">
     <view class="text-container">
-      <text class="location-label"
-        >位于「{{ orderData.oneLevelAddress }}」
-      </text>
+      <text class="location-label">位于 {{ orderData.oneLevelAddress }} </text>
       <text class="address-text">{{ orderData.commodityAddress }}</text>
     </view>
     <image

components/LocationCard/styles/index.scss

@@ -1,30 +1,17 @@
 .store-address {
   display: flex;
   align-items: center;
+  margin: 6px 0;
   padding: 16px 12px;
-  background-color: #f8f9fa;
   background-image: url("./images/loc_bg_img.png"); // 预留背景图片位置，用户手动导入
   background-size: cover;
   background-position: center;
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  border-radius: 20px;
   font-size: 14px;
   color: #333;
   position: relative;
   overflow: hidden;
 
-  // 添加半透明遮罩层确保文字可读性
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(255, 255, 255, 0.8);
-    z-index: 1;
-  }
-
   // 左侧文本容器
   .text-container {
     display: flex;

pages/goods/components/DateSelector/index.vue

@@ -0,0 +1,130 @@
+<template>
+  <view class="date-selector" @click="showCalendar">
+    <view class="date-item">
+      <view class="date-label">入住日期</view>
+      <view class="date-box">
+        <view class="date-content">
+          <text class="date-text">{{ checkInDate }}</text>
+          <text class="day-text">{{ checkInDay }}</text>
+        </view>
+      </view>
+    </view>
+
+    <view class="nights-info">
+      <text class="nights-text">{{ nights }}晚</text>
+    </view>
+
+    <view class="date-item">
+      <view class="date-label">退房日期</view>
+      <view class="date-box">
+        <view class="date-content">
+          <text class="date-text">{{ checkOutDate }}</text>
+          <text class="day-text">{{ checkOutDay }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from "vue";
+
+// 定义事件
+const emit = defineEmits(["showCalendar"]);
+
+// 定义方法
+const showCalendar = () => {
+  emit("showCalendar");
+};
+
+// Props定义
+const props = defineProps({
+  checkInDate: {
+    type: String,
+    default: "08月25日",
+  },
+  checkOutDate: {
+    type: String,
+    default: "08月25日",
+  },
+  checkInDay: {
+    type: String,
+    default: "周一",
+  },
+  checkOutDay: {
+    type: String,
+    default: "周一",
+  },
+  nights: {
+    type: Number,
+    default: 1,
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.date-selector {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  margin: 24rpx 0 12rpx;
+  padding: 12rpx 0;
+}
+
+.date-item {
+  flex: 1;
+  position: relative;
+}
+
+.date-label {
+  position: absolute;
+  top: -12rpx;
+  left: 24rpx;
+  font-size: 20rpx;
+  color: #999999;
+  background: #ffffff;
+  padding: 0 8rpx;
+  z-index: 1;
+}
+
+.date-box {
+  padding: 20rpx 24rpx;
+  background: #ffffff;
+  border-radius: 16rpx;
+  border: 2rpx solid #f0f0f0;
+  display: flex;
+  align-items: center;
+  justify-content: start;
+}
+
+.date-content {
+  display: flex;
+  align-items: baseline;
+  gap: 8rpx;
+}
+
+.date-text {
+  font-size: 32rpx;
+  font-weight: 500;
+  color: #333333;
+}
+
+.day-text {
+  font-size: 20rpx;
+  color: #666666;
+}
+
+.nights-info {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 80rpx;
+  margin: 0 16rpx;
+  margin-bottom: 20rpx;
+}
+
+.nights-text {
+  font-size: 24rpx;
+  color: #666666;
+}
+</style>

pages/goods/components/GoodInfo/index.vue

@@ -8,20 +8,6 @@
       <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>
-
-    <!-- 地址区域 -->
-    <view class="address-section">
-      <LocationCard :orderData="goodsData" />
     </view>
 
     <!-- 设施信息区域 -->
@@ -40,11 +26,7 @@
 </template>
 
 <script setup>
-import { computed, defineProps, defineEmits } from "vue";
-import LocationCard from "@/components/LocationCard/index.vue";
-
-// 事件定义
-const emits = defineEmits(["showCalendar"]);
+import { computed, defineProps } from "vue";
 
 // Props定义
 const props = defineProps({
@@ -66,13 +48,6 @@ const facilitiesList = computed(() => {
   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

@@ -36,24 +36,6 @@
     }
   }
 
-  // 地址区域
-  .address-section {
-    padding: 6px 0;
-
-    .address-item {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-
-      .address-text {
-        flex: 1;
-        font-size: 14px;
-        color: #333;
-        line-height: 1.4;
-      }
-    }
-  }
-
   // 设施信息区域
   .facilities-section {
     margin-top: 12px;

pages/goods/index.vue

@@ -13,44 +13,24 @@
 
       <view class="goods-content">
         <!-- 商品信息组件 -->
-        <GoodInfo :goodsData="goodsData" @showCalendar="showCalendar" />
+        <GoodInfo :goodsData="goodsData" />
 
-        <view v-if="goodsData.commodityPurchaseInstruction" class="use-notice">
-          <ModuleTitle
-            :title="goodsData.commodityPurchaseInstruction.templateTitle"
-          />
-          <view
-            class="use-notice-content"
-            v-for="(moduleItem, index) in goodsData.commodityPurchaseInstruction
-              .commodityPurchaseInstructionModuleEntityList"
-            :key="index"
-          >
-            <view
-              class="module-item"
-              :class="{
-                'border-bottom':
-                  index <
-                  goodsData.commodityPurchaseInstruction
-                    .commodityPurchaseInstructionModuleEntityList.length -
-                    1,
-              }"
-            >
-              <view class="module-icon">
-                <uni-icons fontFamily="znicons" size="20" color="#333">{{
-                  zniconsMap[moduleItem.moduleIcon]
-                }}</uni-icons>
-                <text class="module-title">{{ moduleItem.moduleTitle }}</text>
-              </view>
-              <text class="module-desc">{{ moduleItem.moduleContent }}</text>
-            </view>
-          </view>
-        </view>
+        <!-- 地址区域 -->
+        <LocationCard :orderData="goodsData" />
 
-        <zero-markdown-view
-          v-else
-          :markdown="goodsData.commodityTip"
-          :aiMode="true"
+        <!-- 日期选择区域 -->
+        <DateSelector
+          v-if="goodsData.commodityTypeCode === '0'"
+          @showCalendar="showCalendar"
+          :checkInDate="selectedDate.startDate"
+          :checkOutDate="selectedDate.endDate"
+          :checkInDay="''"
+          :checkOutDay="''"
+          :nights="selectedDate.totalDays"
         />
+
+        <!-- 商品详情组件 -->
+        <GoodDetail :goodsData="goodsData" />
       </view>
     </scroll-view>
 
@@ -93,15 +73,34 @@ import {
 import TopNavBar from "@/components/TopNavBar/index.vue";
 import ImageSwiper from "@/components/ImageSwiper/index.vue";
 import GoodInfo from "./components/GoodInfo/index.vue";
-import ModuleTitle from "@/components/ModuleTitle/index.vue";
 import GoodConfirm from "./components/GoodConfirm/index.vue";
 import Calender from "@/components/Calender/index.vue";
-import { zniconsMap } from "@/static/fonts/znicons.js";
+import LocationCard from "@/components/LocationCard/index.vue";
+import DateSelector from "./components/DateSelector/index.vue";
+import GoodDetail from "@/components/GoodDetail/index.vue";
 
 const calendarVisible = ref(false);
 const goodsData = ref({});
 const goodConfirmRef = ref(null);
-const selectedDate = ref();
+
+// 格式化日期为 yyyy-mm-dd 格式
+const formatDate = (date) => {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+};
+
+// 获取今天和明天的日期
+const today = new Date();
+const tomorrow = new Date(today);
+tomorrow.setDate(today.getDate() + 1);
+
+const selectedDate = ref({
+  startDate: formatDate(today),
+  endDate: formatDate(tomorrow),
+  totalDays: 1,
+});
 const priceData = ref([]);
 
 // 获取商品详情数据
@@ -280,8 +279,4 @@ const handleDateSelect = (data) => {
 
 <style scoped lang="scss">
 @import "./styles/index.scss";
-@font-face {
-  font-family: znicons;
-  src: url("@/static/fonts/znicons.ttf");
-}
 </style>

pages/module/detail/DetailCardGoodsContentList.vue

@@ -82,7 +82,6 @@ const placeOrderHandle = (item) => {
       flex-direction: column;
       align-items: start;
       width: 188px;
-      //   height: 244px;
       background-color: #ffffff;
       border-radius: 10px;
       margin-right: 8px;

pages/order/components/NoticeInfo/index.vue

@@ -1,17 +1,13 @@
 <template>
   <view class="notice-info mb12">
     <view class="notice-title"> 购买须知 </view>
-
-    <zero-markdown-view
-      :markdown="orderData.commodityTip"
-      :fontSize="14"
-      :aiMode="true"
-    />
+    <GoodDetail :goodsData="orderData" :showTitle="false" />
   </view>
 </template>
 
 <script setup>
 import { defineProps } from "vue";
+import GoodDetail from "@/components/GoodDetail/index.vue";
 
 const props = defineProps({
   orderData: {