feat: 增加使用日期组件

src/components/Stepper/index.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="stepper-wrapper border-box flex flex-items-center rounded-8">
     <uni-icons type="minus" size="24" color="#D1D1D1" @click="decrease" />
-    <text class="stepper-text text-center font-size-14 font-500 color-000">
+    <text class="stepper-text text-center font-size-14 font-500 color-000 ml-4 mr-4">
       {{ value }} {{ unit }}
     </text>
     <uni-icons type="plus" size="24" color="#198CFF" @click="increase" />

src/components/UseDateRange/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <view class="bg-white rounded-12 overflow-hidden mb-12">
+    <view
+      class="border-box font-size-16 font-500 color-000 line-height-24 p-12"
+      >使用日期</view
+    >
+    <view class="flex flex-items-center border-box ">
+      <scroll-view class="date-scroll" scroll-x>
+        <view class="date-list">
+          <block v-for="(item) in dates" :key="item.date">
+            <view
+              class="date-item"
+              :class="{ selected: isSameDate(selectedDate, item.date) }"
+              @click="onDateClick(item)"
+            >
+              <view class="label font-size-12">{{ item.label }}</view>
+              <view class="md font-size-16 font-600">{{ formatMD(item.date) }}</view>
+              <view class="status font-size-12">可订</view>
+              <view v-if="isSameDate(selectedDate, item.date)" class="check">✔</view>
+            </view>
+          </block>
+        </view>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+const props = defineProps({
+  selectedDate: { type: String, default: null },
+  days: { type: Number, default: 14 }
+});
+const emit = defineEmits(['update:selectedDate']);
+
+const dates = ref([]);
+const selectedDate = ref(props.selectedDate);
+
+watch(() => props.selectedDate, (v) => {
+  selectedDate.value = v;
+});
+
+const initDates = (days = props.days) => {
+  const arr = [];
+  const today = new Date();
+  for (let i = 0; i < days; i++) {
+    const d = new Date(today);
+    d.setDate(today.getDate() + i);
+    const iso = d.toISOString().slice(0, 10);
+    arr.push({ date: iso, day: i, disabled: false, label: getLabel(i, d) });
+  }
+  dates.value = arr;
+}
+
+const getLabel = (i, d) => {
+  if (i === 0) return '今天';
+  if (i === 1) return '明天';
+  const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
+  return week[d.getDay()];
+}
+
+const formatMD = (dateStr) => {
+  const d = new Date(dateStr);
+  const mm = String(d.getMonth() + 1).padStart(2, '0');
+  const dd = String(d.getDate()).padStart(2, '0');
+  return `${mm}-${dd}`;
+}
+
+const isSameDate = (a, b) => {
+  if (!a || !b) return false;
+  return a === b;
+}
+
+const onDateClick = (item) => {
+  const date = item.date;
+  if (selectedDate.value === date) {
+    selectedDate.value = null;
+  } else {
+    selectedDate.value = date;
+  }
+  emit('update:selectedDate', selectedDate.value);
+}
+onMounted(() => initDates());
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>

src/components/UseDateRange/styles/index.scss

@@ -0,0 +1,62 @@
+.date-scroll {
+  width: 100%;
+}
+.date-list {
+  display: flex;
+  padding: 8px 12px 12px;
+}
+.date-item {
+  width: 76px;
+  min-width: 76px;
+  height: 86px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 0 0 1px rgba(0,0,0,0.04);
+  margin-right: 12px;
+  padding: 8px 10px;
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+.date-item .label { 
+  margin-bottom: 6px; 
+  color: #999; 
+}
+.date-item .md { 
+  margin-bottom: 6px; 
+  color: #000; 
+}
+.date-item .status { 
+  font-size: 12px; 
+  color: #999; }
+.date-item.selected {
+  border: 1px solid $theme-color-500;
+  background: $theme-color-50;
+}
+.date-item.selected .label,
+.date-item.selected .md,
+.date-item.selected .status {
+  color: $theme-color-500;
+}
+.date-item.disabled {
+  opacity: 0.45;
+}
+.date-item .check {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  background: $theme-color-500;
+  color: #fff;
+  width: 18px;
+  height: 18px;
+  border-top-left-radius: 10px;
+  border-bottom-right-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+}

src/constant/type.js

@@ -3,4 +3,5 @@ export const GOODS_TYPE = {
   0: "客房",
   1: "门票",
   2: "餐饮",
+  3: "套餐",
 };

src/pages-booking/components/ConactSection/index.vue

@@ -16,6 +16,8 @@
     </view>
   </view>
 
+  <UseDateRange v-model:selectedDate="reservationDate"/>
+
   <!-- 联系方式 -->
   <view class="bg-white rounded-12 overflow-hidden">
     <view
@@ -26,7 +28,7 @@
       <view class="font-size-14 font-500 color-525866 mr-12"> 联系手机 </view>
       <view class="right">
         <input
-          class="border-box rounded-8 px-4 py-2 font-size-15 color-000 line-height-20"
+          class="border-box px-4 py-2 font-size-15 color-000 line-height-20"
           v-model.trim="userFormList[0].contactPhone"
           placeholder="请输入联系手机"
           maxlength="11"
@@ -39,6 +41,7 @@
 <script setup>
 import { computed, defineProps } from "vue";
 import Stepper from "@/components/Stepper/index.vue";
+import UseDateRange from "@/components/UseDateRange/index.vue";
 
 const props = defineProps({
   modelValue: {
@@ -49,15 +52,25 @@ const props = defineProps({
     type: Array,
     default: () => [{ contactPhone: "" }],
   },
+  reservationDate: {
+    type: String,
+    default: null,
+  },
 });
 
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits(["update:modelValue", "update:reservationDate"]);
 const count = computed({
   get: () => props.modelValue,
   set: (val) => {
     emit("update:modelValue", val);
   },
 });
+const reservationDate = computed({
+  get: () => props.reservationDate,
+  set: (val) => {
+    emit("update:reservationDate", val);
+  },
+});
 </script>
 
 <style></style>

src/pages-booking/index.vue

@@ -67,6 +67,7 @@
         v-if="orderData.commodityTypeCode !== '0'"
         v-model="quantity"
         :userFormList="userFormList"
+        v-model:reservationDate="selectedReservationDate"
       />
 
       <!-- 酒店类型 -->
@@ -119,6 +120,7 @@ const selectedDate = ref({
   totalDays: 1,
 });
 const quantity = ref(1);
+const selectedReservationDate = ref("");
 
 // 工具函数
 const createEmptyUserForm = () => ({ visitorName: "", contactPhone: "" });
@@ -224,6 +226,13 @@ const handlePayClick = ThrottleUtils.createThrottle(async (goodsData) => {
       return;
     }
 
+    // 校验预约日期
+    if (!selectedReservationDate.value) {
+      uni.hideLoading();
+      uni.showToast({ title: "请选择预约日期", icon: "none" });
+      return;
+    }
+
     // 购买的商品id
     const commodityId = goodsData.commodityId;
     // 消费者信息
@@ -234,6 +243,7 @@ const handlePayClick = ThrottleUtils.createThrottle(async (goodsData) => {
     const payWay = "0";
     // 支付渠道 0-app 1-小程序 2-h5
     const paySource = "1";
+    const reservationDate = selectedReservationDate.value; // 预约日期，酒店类型可能不需要，根据实际情况调整
 
     const params = {
       commodityId,
@@ -241,6 +251,7 @@ const handlePayClick = ThrottleUtils.createThrottle(async (goodsData) => {
       payWay,
       paySource,
       consumerInfoEntityList,
+      reservationDate
     };
 
     //酒店类型添加入住时间、离店时间

src/pages/goods/components/GoodPackage/index.vue

@@ -10,7 +10,7 @@
         <view class="title-row ml-4 mb-4">
           <text class="left font-size-14 color-171717">{{ item.name }}</text>
           <view class="sep" aria-hidden="true"></view>
-          <text class="right font-size-14 color-171717">{{ item.count }}</text>
+          <text class="right font-size-14 color-171717">{{ item.count }}{{ item.unit }}</text>
         </view>
         
     </view>