fix 日期选择后相关页面逻辑优化

hookehuyr
Commit bbe26b5939c7790873540d84889f2c56bdafea7e bbe26b59 1 parent 4cc0cbe2
Showing 4 changed files with 140 additions and 14 deletions
src/components/calendarSelect.vue
src/components/roomCard.vue
src/pages/book/index.vue
src/pages/detail/index.vue
--- a/src/components/calendarSelect.vue
View file @bbe26b5
+++ b/src/components/calendarSelect.vue
View file @bbe26b5
 <!--
  * @Date: 2023-12-14 10:04:23
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-21 12:21:07
+ * @LastEditTime: 2023-12-21 13:59:23
  * @FilePath: /meihuaApp/src/components/calendarSelect.vue
  * @Description: 文件描述
 -->
@@ -41,7 +41,7 @@
 </template>
 <script setup>
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted, watch } from 'vue'
 /**
  * 获取今天和明天日期
@@ -145,6 +145,17 @@ const dates = getTodayAndTomorrow();
 const emit = defineEmits(['on-dates-change']);
+const props = defineProps({
+  startDate: {
+    type: String,
+    default: '',
+  },
+  endDate: {
+    type: String,
+    default: '',
+  },
+});
+
 const state = reactive({
   startDate: dates.today,
   endDate: '',
@@ -160,7 +171,29 @@ const themeVars = reactive({
   primaryColorEnd: '#6A4925'
 });
+watch(
+  () => props,
+  (val) => {
+    // 如果传入了默认日期，则设置默认日期
+    if (val.startDate) {
+      state.checkinDate = val.startDate;
+    }
+    if (val.endDate) {
+      state.checkoutDate = val.endDate;
+    }
+    if (val.startDate && val.endDate) {
+      state.defaultDate = [val.startDate, val.endDate];
+      state.betweenDate = getDayDifference(val.startDate, val.endDate);
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+);
+
 onMounted(() => {
+  // 触发日期改变事件
   emit('on-dates-change', { startDate: state.checkinDate, endDate: state.checkoutDate, betweenDate: state.betweenDate, startDateWeek: JSON.stringify(getDayOfWeek(state.checkinDate)), endDateWeek: JSON.stringify(getDayOfWeek(state.checkoutDate)) });
 })
--- a/src/components/roomCard.vue
View file @bbe26b5
+++ b/src/components/roomCard.vue
View file @bbe26b5
 <!--
  * @Date: 2023-12-13 13:42:23
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-21 11:09:22
+ * @LastEditTime: 2023-12-21 13:57:59
  * @FilePath: /meihuaApp/src/components/roomCard.vue
  * @Description: 房间详情组件
 -->
@@ -29,7 +29,7 @@
 </template>
 <script setup>
-import { ref, defineProps, onMounted } from 'vue'
+import { ref, defineProps, onMounted, watch } from 'vue'
 import Taro from '@tarojs/taro'
 const props = defineProps({
@@ -37,16 +37,39 @@ const props = defineProps({
     type: Object,
     default: {},
   },
+  calenderInfo: {
+    type: Object,
+    default: {
+      startDate: '',
+      endDate: '',
+    },
+  },
 });
+const startDate = ref(props.calenderInfo.startDate);
+const endDate = ref(props.calenderInfo.endDate);
+
+watch(
+  () => props.calenderInfo,
+  (val) => {
+    startDate.value = val.startDate;
+    endDate.value = val.endDate;
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+);
+
 const handleTap = () => {
   Taro.navigateTo({
-    url: '../detail/index?id=123',
+    url: `../detail/index?id=abc&start_date=${startDate.value}&end_date=${endDate.value}`,
   })
 }
 onMounted(() => {
-  console.warn('房间详情的属性', props.data);
+  // console.warn('选择的日期', props.calenderInfo);
+  // console.warn('房间详情的属性', props.data);
 })
 </script>
--- a/src/pages/book/index.vue
View file @bbe26b5
+++ b/src/pages/book/index.vue
View file @bbe26b5
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-20 16:31:30
+ * @LastEditTime: 2023-12-21 13:13:32
  * @FilePath: /meihuaApp/src/pages/book/index.vue
  * @Description: 文件描述
 -->
@@ -19,7 +19,7 @@
         <view v-if="showContent" class="book-list">
           <scroll-view ref="refScrollView" :style="scrollStyle" :scroll-y="true" :scroll-with-animation="true" @scrolltolower="onScrollToLower">
             <view v-for="(item, index) in bookList" :key="index">
-              <room-card :key="index" :status="item.status"></room-card>
+              <room-card :key="index" :data="item" :calender-info="calenderInfo"></room-card>
               <view v-if="index === bookList.length - 1" style="height: 2rem;"></view>
             </view>
           </scroll-view>
@@ -37,8 +37,13 @@ import navBar from '@/components/navBar.vue'
 import calendarSelect from '@/components/calendarSelect.vue'
 import roomCard from '@/components/roomCard.vue'
+const calenderInfo = ref({});
 const onDatesChange = ({ startDate, endDate }) => {
-  console.warn(startDate, endDate);
+  // console.warn(startDate, endDate);
+  calenderInfo.value = {
+    startDate,
+    endDate
+  }
 }
 const value = ref('0');
--- a/src/pages/detail/index.vue
View file @bbe26b5
+++ b/src/pages/detail/index.vue
View file @bbe26b5
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-21 11:45:01
+ * @LastEditTime: 2023-12-21 13:44:02
  * @FilePath: /meihuaApp/src/pages/detail/index.vue
  * @Description: 房间详情页面
 -->
@@ -18,7 +18,7 @@
     </view>
     <!-- 日历选择器 -->
     <view v-if="showBook" class="book-cal">
-      <calendar-select @on-dates-change="onDatesChange"></calendar-select>
+      <calendar-select @on-dates-change="onDatesChange" :start-date="start_date" :end-date="end_date"></calendar-select>
     </view>
     <view v-else class="no-calendar-border"></view>
     <!-- END -->
@@ -49,9 +49,62 @@ import { ref, computed, reactive, onMounted } from "vue";
 import calendarSelect from '@/components/calendarSelect.vue'
 import { getCurrentPageParam } from "@/utils/weapp";
-onMounted(() => {
+/**
-  console.warn('id', getCurrentPageParam().id);
+ * 获取日期星期几
-});
+ * @param {String} dateString 日期字符串
+ */
+const getDayOfWeek = (dateString) => {
+  var dateParts = dateString.split('-');
+  var year = parseInt(dateParts[0]);
+  var month = parseInt(dateParts[1]) - 1; // 月份从 0 开始，所以要减去 1
+  var day = parseInt(dateParts[2]);
+
+  var date = new Date(year, month, day);
+  var dayOfWeek = date.getDay();
+
+  // 定义星期几的名称数组
+  var days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+
+  return days[dayOfWeek];
+}
+
+/**
+ * 计算日期间隔
+ * @param {*} startDate
+ * @param {*} endDate
+ */
+const getDayDifference = (startDate, endDate) => {
+  var startParts = startDate.split('-');
+  var startYear = parseInt(startParts[0]);
+  var startMonth = parseInt(startParts[1]) - 1; // 月份从 0 开始，所以要减去 1
+  var startDay = parseInt(startParts[2]);
+
+  var endParts = endDate.split('-');
+  var endYear = parseInt(endParts[0]);
+  var endMonth = parseInt(endParts[1]) - 1; // 月份从 0 开始，所以要减去 1
+  var endDay = parseInt(endParts[2]);
+
+  var startDateObj = new Date(startYear, startMonth, startDay);
+  var endDateObj = new Date(endYear, endMonth, endDay);
+
+  // 跨年处理
+  if (endYear > startYear) {
+    endDateObj.setFullYear(endYear);
+  }
+
+  // 跨月处理
+  if (endMonth > startMonth || (endMonth === startMonth && endDay > startDay)) {
+    endDateObj.setMonth(endMonth);
+  }
+
+  // 计算两个日期之间的时间差（毫秒数）
+  var timeDiff = endDateObj.getTime() - startDateObj.getTime();
+
+  // 将时间差转换为天数
+  var dayDiff = Math.floor(timeDiff / (1000 * 3600 * 24));
+
+  return dayDiff;
+}
 const taro_html = ref('<div>123</div>');
@@ -77,6 +130,18 @@ const onDatesChange = ({ startDate, endDate, betweenDate, startDateWeek, endDate
   between_date.value = betweenDate;
 }
+onMounted(() => {
+  let params = getCurrentPageParam();
+  console.warn('id', params.id);
+  console.warn('start_date', params.start_date);
+  console.warn('end_date', params.end_date);
+  start_date.value = params.start_date;
+  end_date.value = params.end_date;
+  between_date.value = getDayDifference(params.start_date, params.end_date);
+  start_date_week.value = JSON.stringify(getDayOfWeek(params.start_date));
+  end_date_week.value = JSON.stringify(getDayOfWeek(params.end_date));
+});
+
 const page = ref(1);
 const goToConfirm = () => {