feat：商品详情的样式调整

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,7 +13,21 @@
 
       <view class="goods-content">
         <!-- 商品信息组件 -->
-        <GoodInfo :goodsData="goodsData" @showCalendar="showCalendar" />
+        <GoodInfo :goodsData="goodsData" />
+
+        <!-- 地址区域 -->
+        <LocationCard :orderData="goodsData" />
+
+        <!-- 日期选择区域 -->
+        <DateSelector
+          v-if="goodsData.commodityTypeCode === '0'"
+          @showCalendar="showCalendar"
+          :checkInDate="selectedDate.startDate"
+          :checkOutDate="selectedDate.endDate"
+          :checkInDay="''"
+          :checkOutDay="''"
+          :nights="selectedDate.totalDays"
+        />
 
         <view v-if="goodsData.commodityPurchaseInstruction" class="use-notice">
           <ModuleTitle
@@ -97,11 +111,31 @@ 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";
 
 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([]);
 
 // 获取商品详情数据

pages/goods/styles/index.scss

@@ -26,7 +26,7 @@ $button-hover-color: darken($button-color, 8%);
       align-items: flex-start;
       flex-direction: column;
       padding: 12px 0;
-    
+
       .module-icon {
         display: flex;
         flex-direction: row;