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;