Hooke / meihua-island-book

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
5c24886c 1 parent 1deeb037

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

Inline Side-by-side
Showing 4 changed files with 103 additions and 13 deletions
<!--
* @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
......
<!--
* @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
......
<!--
* @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">
<calendar-select @on-dates-change="onDatesChange" :start-date="start_date" :end-date="end_date"></calendar-select>
<view class="book-cal">
<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}`,
......
......@@ -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>
......