Feat:：调整时间选择器

pkg_product/views/groupBuyDetails.vue

@@ -133,10 +133,20 @@
         <view class="buy-btn" @click="bookNow">立即购买</view>
       </view>
     </view>
-    <Calendar ref="calendar"
+    <!-- <Calendar ref="calendar"
       :minDay="detail.minBookingDays"
       @dateSelected="handleDateSelected"
-    ></Calendar>
+    ></Calendar> -->
+    <DateRangePicker
+      ref="dateRangePicker"
+      v-model="dateRange"
+      :show="showDatePicker"
+      :minBookingDays="detail.minBookingDays"
+      :travelGroupProductId="detail.id"
+      @update:show="showDatePicker = false"
+      @input="handleDateSelected" 
+    >
+    </DateRangePicker>
   </view>
 </template>
 
@@ -144,13 +154,17 @@
 import { getJiaLouProductDetail, getJiaLouCalendar,getJiaLouBookingRules } from '@/api/qianxian'
 import {getGiftCardSendBackground} from "@/api/gift"
 import Calendar from '../components/Calendar.vue'
+import DateRangePicker from '@/components/DateRangePicker/DateRangePicker.vue'
 export default {
   name: 'GroupBuyDetails',
   components: {
-    Calendar
+    Calendar,
+    DateRangePicker
   },
   data() {
     return {
+      dateRange: [null, null],
+      showDatePicker: false,
       webUrl: this.$VUE_APP_RESOURCES_URL,
       giftBg: '',
       id: '',
@@ -187,12 +201,10 @@ export default {
       })
     },
     handleDateSelected(dateRange) {
-      console.log(dateRange, 'dateRange');
+      this.dateRange = dateRange
-      
-      this.rangeDate = dateRange
     },
     handleDate() {
-      this.$refs.calendar.showCalendar(this.calendar)
+      this.showDatePicker = true
     },
     /**
      * 获取产品可预约日期
@@ -284,7 +296,7 @@ export default {
       })
     },
     bookNow() {
-      uni.navigateTo({ url: '/pkg_product/views/submitOrder?id=' + this.id + '&orderStartDate=' + this.rangeDate.startDate + '&orderEndDate=' + this.rangeDate.endDate })
+      uni.navigateTo({ url: '/pkg_product/views/submitOrder?id=' + this.id + '&orderStartDate=' + this.dateRange[0] + '&orderEndDate=' + this.dateRange[1] })
     },
     /**
      * 查找指定日期的预约状态

pkg_product/views/sojoumOrderDetails.vue

@@ -112,6 +112,7 @@
     </view>
     <view
       class="gift-wrap"
+      v-if="orderInfo.giftCardInfo > 0"
     >
       <view class="v12-justify-between v12-align-center">
         <view class="v12-font-28 v12-font-bold v12-align-center">
@@ -140,28 +141,42 @@
         <button class="btn v12-primary-border v12-primary-text modify-time" @click="modifyStayTime">修改入住时间</button>
         <button class="btn v12-primary-border v12-primary-text refund" @click="applyRefund">申请退款</button>
       </view>
-      <view class="v12-align-center" v-if="orderInfo._status && ['1','2'].includes(orderInfo._status._type)">
+      <view class="v12-align-center" v-if="!orderInfo._status && ['1','2'].includes(orderInfo._status._type)">
         <button class="btn v12-dark-border v12-dark-text modify-time" @click="showPhoneDialog('phone')">联系商家</button>
       </view>
     </view>
-    <Calendar
+    <!-- <Calendar
      ref="calendar"
      :minDay="orderInfo.minBookingDays"
      @dateSelected="handleDateSelected">
-    </Calendar>
+    </Calendar> -->
+    <DateRangePicker
+      ref="dateRangePicker"
+      v-model="dateRange"
+      :show="showDatePicker"
+      :minBookingDays="orderInfo.minBookingDays"
+      :travelGroupProductId="orderInfo.travelGroupOrderInfo.travelGroupProduct.id"
+      @update:show="showDatePicker = false"
+      @input="handleDateSelected" 
+    >
+    </DateRangePicker>
   </view>
 </template>
 
 <script>
 import { fetchSojoumOrderDetail,sojoumOrderCheckInTime, sojoumOrderCalendar } from "@/api/sojoumOrder";
 import Calendar from "../components/Calendar.vue";
+import DateRangePicker from '@/components/DateRangePicker/DateRangePicker.vue'
 export default {
   components: {
-    Calendar
+    Calendar,
+    DateRangePicker
   },
   data() {
     return {
       webUrl: this.$VUE_APP_RESOURCES_URL,
+      dateRange: [null, null],
+      showDatePicker: false,
       key: '',
       popContent: '',
       title: '',
@@ -180,6 +195,31 @@ export default {
     this.getSojoumOrderDetail();
   },
   methods: {
+    handleDateRangeChange(dates) {
+      // if (dates && dates.length === 2) {
+      //   [this.form.checkInDate, this.form.checkOutDate] = dates
+      // }
+      const params = {
+        orderId: this.key,
+        orderStartDate: dates[0],
+        orderEndDate: dates[1]
+      }
+      uni.showLoading({
+        title: '加载中...',
+        mask: true,
+      })
+      sojoumOrderCheckInTime(params).then(res => {
+        if (res.status === 200) {
+          uni.showToast({
+            title: '入住时间修改成功',
+            icon: 'success'
+          })
+          this.getSojoumOrderDetail();
+        }
+      }).finally(() => {
+        uni.hideLoading();
+      })
+    },
     getDaysCount() {
       // 根据开始日期和结束日期计算天数
       const startDate = new Date(this.orderInfo.travelGroupOrderInfo.orderStartDate);
@@ -191,8 +231,8 @@ export default {
     handleDateSelected(dateRange) {
       const params = {
         orderId: this.key,
-        orderStartDate: dateRange.startDate,
+        orderStartDate: dateRange[0],
-        orderEndDate: dateRange.endDate
+        orderEndDate: dateRange[1]
       }
       uni.showLoading({
         title: '加载中...',
@@ -316,7 +356,7 @@ export default {
     },
     modifyStayTime() {
       // 这里可以添加修改入住时间的逻辑，比如打开日期选择器
-      this.getMonthDay();
+      this.showDatePicker = true;
     },
     applyRefund() {
       // 这里可以添加申请退款的逻辑，比如跳转到退款页面