首页房间选项卡不显示已满状态，日历默认值不传，页面的相关调整

hookehuyr
Commit 5c24886c1f1a5e6d2d6655dc243109b00f17b50e 5c24886c 1 parent 1deeb037
Showing 4 changed files with 103 additions and 13 deletions
src/components/roomCard.vue
src/pages/book/index.vue
src/pages/detail/index.vue
src/pages/index/index.vue
--- a/src/components/roomCard.vue
View file @5c24886
+++ b/src/components/roomCard.vue
View file @5c24886
 <!--
  * @Date: 2023-12-13 13:42:23
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-26 16:14:35
+ * @LastEditTime: 2023-12-27 16:01:27
  * @FilePath: /meihuaApp/src/components/roomCard.vue
  * @Description: 房间详情组件
 -->
@@ -20,7 +20,7 @@
         </nut-col>
       </nut-row>
     </view>
-    <view v-if="!num" class="room-status">
+    <view v-if="!num && props.type !== 'index'" class="room-status">
       <view class="room-status-wrapper">
         <image mode="aspectFill" src="https://cdn.ipadbiz.cn/meihua/icon_checked@2x.png" />
       </view>
@@ -84,6 +84,10 @@ const props = defineProps({
       endDate: '',
     },
   },
+  type: {
+    type: String,
+    default: '',
+  }
 });
 const startDate = ref('');
@@ -111,9 +115,15 @@ const handleTap = () => {
   if (!endDate.value) {
     endDate.value = dates.tomorrow;
   }
+  if (props.type === 'index') { // 首页进入的
+    Taro.navigateTo({
+      url: `../detail/index?id=${id.value}&room_type=${room_type.value}&start_date=&end_date=`,
+    });
+  } else {
     Taro.navigateTo({
       url: `../detail/index?id=${id.value}&room_type=${room_type.value}&start_date=${startDate.value}&end_date=${endDate.value}`,
     });
+  }
 }
 const id = ref(''); // 房间id
--- a/src/pages/book/index.vue
View file @5c24886
+++ b/src/pages/book/index.vue
View file @5c24886
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-26 18:08:01
+ * @LastEditTime: 2023-12-27 15:37:50
  * @FilePath: /meihuaApp/src/pages/book/index.vue
  * @Description: 订房页面
 -->
@@ -9,7 +9,7 @@
   <view class="book-page">
     <view id="book-content" class="book-content">
       <view id="book-cal" class="book-cal">
-        <calendar-select @on-dates-change="onDatesChange" @on-dates-close="onDatesClose"></calendar-select>
+        <calendar-select :start-date="start_date" :end-date="end_date" @on-dates-change="onDatesChange" @on-dates-close="onDatesClose"></calendar-select>
       </view>
       <view class="book-type">
         <!-- <nut-tabs v-model="value" @click="onTabClick" title-scroll title-gutter="10" name="tabName" background="#FFF" color="#4C2E08" animated-time="0">
@@ -37,6 +37,46 @@ import navBar from '@/components/navBar.vue'
 import calendarSelect from '@/components/calendarSelect.vue'
 import roomCard from '@/components/roomCard.vue'
+/**
+ * 获取今天和明天日期
+ */
+const getTodayAndTomorrow = () => {
+  var today = new Date(); // 获取当前日期
+
+  var todayYear = today.getFullYear();
+  var todayMonth = today.getMonth() + 1; // 月份从0开始，所以要加1
+  var todayDay = today.getDate();
+
+  var tomorrow = new Date(today.getTime() + 24 * 60 * 60 * 1000); // 获取明天日期
+
+  var tomorrowYear = tomorrow.getFullYear();
+  var tomorrowMonth = tomorrow.getMonth() + 1; // 月份从0开始，所以要加1
+  var tomorrowDay = tomorrow.getDate();
+
+  // 跨年处理
+  if (tomorrowYear > todayYear) {
+    tomorrowMonth = '01';
+    tomorrowDay = '01';
+  }
+
+  // 跨月处理
+  if (tomorrowMonth > 12) {
+    tomorrowMonth = '01';
+    tomorrowYear = todayYear + 1;
+  }
+
+  // 格式化为两位数
+  todayMonth = todayMonth < 10 ? '0' + todayMonth : todayMonth;
+  todayDay = todayDay < 10 ? '0' + todayDay : todayDay;
+  tomorrowMonth = tomorrowMonth < 10 ? '0' + tomorrowMonth : tomorrowMonth;
+  tomorrowDay = tomorrowDay < 10 ? '0' + tomorrowDay : tomorrowDay;
+
+  return {
+    today: todayYear + '-' + todayMonth + '-' + todayDay,
+    tomorrow: tomorrowYear + '-' + tomorrowMonth + '-' + tomorrowDay
+  };
+}
+
 // const value = ref('0');
 // const tabList = ref([{
@@ -56,6 +96,15 @@ import roomCard from '@/components/roomCard.vue'
 //   key: '4',
 // }]);
+// 调用方法获取今天和明天的日期
+const dates = getTodayAndTomorrow();
+
+const start_date = ref('');
+const end_date = ref('');
+
+start_date.value = dates.today;
+end_date.value = dates.tomorrow;
+
 onMounted(() => {
 });
@@ -140,14 +189,15 @@ export default {
         startDate,
         endDate
       }
-    },
-    onDatesClose () {
       // 重置列表
       this.flag = true;
       this.page = 1;
       this.bookList = [];
       this.getList();
     },
+    onDatesClose () {
+
+    },
     onScrollToLower () {
       if(!this.flag){
         return
--- a/src/pages/detail/index.vue
View file @5c24886
+++ b/src/pages/detail/index.vue
View file @5c24886
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-27 14:21:07
+ * @LastEditTime: 2023-12-27 16:23:40
  * @FilePath: /meihuaApp/src/pages/detail/index.vue
  * @Description: 房间详情页面
 -->
@@ -17,14 +17,15 @@
       <view class="detail-info-content">{{ state.roomInfo.room_num }}室 宜住{{ state.roomInfo.capacity }}人</view>
     </view>
     <!-- 日历选择器 -->
-    <view v-if="showBook" class="book-cal">
+    <view class="book-cal">
-      <calendar-select @on-dates-change="onDatesChange" :start-date="start_date" :end-date="end_date"></calendar-select>
+      <calendar-select @on-dates-change="onDatesChange" :start-date="start_date" :end-date="end_date" @on-dates-close="onDatesClose"></calendar-select>
     </view>
-    <view v-else class="no-calendar-border"></view>
+    <!-- <view v-else class="no-calendar-border"></view> -->
     <!-- END -->
     <view v-if="state.roomInfo.description" class="detail-introduce-title">房间介绍</view>
     <view class="detail-introduce-html">
       <view id="taro_html" v-html="state.roomInfo.description" class="taro_html"></view>
+      <view style="height: 6rem;"></view>
     </view>
     <view class="book-bar">
       <nut-row>
@@ -35,7 +36,7 @@
           </view>
         </nut-col>
         <nut-col :span="6">
-          <view v-if="showBook" class="book-btn" @tap="goToConfirm">预定</view>
+          <view class="book-btn" @tap="goToConfirm">预定</view>
         </nut-col>
       </nut-row>
     </view>
@@ -134,15 +135,27 @@ const onDatesChange = async ({ startDate, endDate, betweenDate, startDateWeek, e
     state.roomInfo = data;
     // 轮播图
     if (state.roomInfo.banner.length) {
+      state.imgData = [];
       state.roomInfo.banner.forEach(item => {
         state.imgData.push({
           src: item
         })
       });
     }
+    if (!state.roomInfo.num) {
+      Taro.showToast({
+        title: '该时段房间已售罄，请重新选择日期',
+        icon: 'none',
+        duration: 3000,
+      });
+    }
   }
 }
+const onDatesClose = async () => {
+
+}
+
 const state = reactive({
   showPreview: false,
   imgData: [],
@@ -164,6 +177,7 @@ onMounted(async () => {
     state.roomInfo = roomData.data;
     // 轮播图
     if (state.roomInfo.banner.length) {
+      state.imgData = [];
       state.roomInfo.banner.forEach(item => {
         state.imgData.push({
           src: item
@@ -175,12 +189,28 @@ onMounted(async () => {
 // 预定房间
 const goToConfirm = async () => {
+  let params = getCurrentPageParam();
+  if (!start_date.value || !end_date.value) {
+    Taro.showToast({
+      title: '请先选择入住时间段',
+      icon: 'none',
+      duration: 3000,
+    });
+    return false;
+  }
+  if (!showBook.value) {
+    Taro.showToast({
+      title: '该时段房间已售罄，请重新选择日期',
+      icon: 'none',
+      duration: 3000,
+    });
+    return false;
+  }
   // 获取用户信息
   const myInfoData = await showMyInfoAPI();
   if (myInfoData.code) {
     state.phone = myInfoData.data.wxapp_user_phone;
   }
-  let params = getCurrentPageParam();
   if (state.phone) {
     Taro.navigateTo({
       url: `/pages/confirm/index?id=${params.id}&start_date=${start_date.value}&end_date=${end_date.value}&between_date=${between_date.value}&start_date_week=${start_date_week.value}&end_date_week=${end_date_week.value}&room_type=${params.room_type}`,
--- a/src/pages/index/index.vue
View file @5c24886
+++ b/src/pages/index/index.vue
View file @5c24886
@@ -16,7 +16,7 @@
       </view>
       <view class="index-title">热门推荐</view>
       <view class="index-list">
-        <room-card v-for="(item, index) in room_list" :key="index" :data="item" />
+        <room-card v-for="(item, index) in room_list" :key="index" :data="item" type="index" />
       </view>
     </scroll-view>
     <view style="height: 6rem;"></view>