Showing
5 changed files
with
86 additions
and
29 deletions
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2023-12-14 10:04:23 | 2 | * @Date: 2023-12-14 10:04:23 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2023-12-15 10:48:55 | 4 | + * @LastEditTime: 2023-12-21 11:34:17 |
| 5 | * @FilePath: /meihuaApp/src/components/calendarSelect.vue | 5 | * @FilePath: /meihuaApp/src/components/calendarSelect.vue |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | --> | 7 | --> |
| ... | @@ -161,6 +161,7 @@ const themeVars = reactive({ | ... | @@ -161,6 +161,7 @@ const themeVars = reactive({ |
| 161 | }); | 161 | }); |
| 162 | 162 | ||
| 163 | onMounted(() => { | 163 | onMounted(() => { |
| 164 | + 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)) }); | ||
| 164 | }) | 165 | }) |
| 165 | 166 | ||
| 166 | const openSwitch = (param) => { | 167 | const openSwitch = (param) => { |
| ... | @@ -180,7 +181,7 @@ const setChooseValue = (param) => { | ... | @@ -180,7 +181,7 @@ const setChooseValue = (param) => { |
| 180 | state.checkoutDate = param[1][3]; | 181 | state.checkoutDate = param[1][3]; |
| 181 | state.defaultDate = [state.checkinDate, state.checkoutDate]; | 182 | state.defaultDate = [state.checkinDate, state.checkoutDate]; |
| 182 | state.betweenDate = getDayDifference(state.checkinDate, state.checkoutDate); | 183 | state.betweenDate = getDayDifference(state.checkinDate, state.checkoutDate); |
| 183 | - emit('on-dates-change', { startDate: state.checkinDate, endDate: state.checkoutDate }); | 184 | + 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)) }); |
| 184 | }; | 185 | }; |
| 185 | 186 | ||
| 186 | 187 | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2023-12-13 13:42:23 | 2 | * @Date: 2023-12-13 13:42:23 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2023-12-20 10:57:44 | 4 | + * @LastEditTime: 2023-12-21 11:09:22 |
| 5 | * @FilePath: /meihuaApp/src/components/roomCard.vue | 5 | * @FilePath: /meihuaApp/src/components/roomCard.vue |
| 6 | * @Description: 房间详情组件 | 6 | * @Description: 房间详情组件 |
| 7 | --> | 7 | --> |
| ... | @@ -11,12 +11,12 @@ | ... | @@ -11,12 +11,12 @@ |
| 11 | <view class="room-info"> | 11 | <view class="room-info"> |
| 12 | <nut-row> | 12 | <nut-row> |
| 13 | <nut-col span="18" class="room-info-left"> | 13 | <nut-col span="18" class="room-info-left"> |
| 14 | - <view style="color: #0B0B0B; font-weight: bold;">非凡魅力豪华总统套房</view> | 14 | + <view class="room-info-title">非凡魅力豪华总统套房</view> |
| 15 | - <view style="color: #7D7C7C; font-size: 0.8rem;">两室 宜住3人</view> | 15 | + <view class="room-info-desc">两室 宜住3人</view> |
| 16 | </nut-col> | 16 | </nut-col> |
| 17 | <nut-col span="6" class="room-info-right"> | 17 | <nut-col span="6" class="room-info-right"> |
| 18 | - <view style="float: right; color: #EB2E2E; font-weight: bold; font-size: 1.1rem;">¥980</view> | 18 | + <view class="room-info-discount">¥980</view> |
| 19 | - <view style="float: right; color: #7D7C7C; font-size: 0.8rem; text-decoration: line-through;">¥1280</view> | 19 | + <view class="room-info-price">¥1280</view> |
| 20 | </nut-col> | 20 | </nut-col> |
| 21 | </nut-row> | 21 | </nut-row> |
| 22 | </view> | 22 | </view> |
| ... | @@ -33,9 +33,9 @@ import { ref, defineProps, onMounted } from 'vue' | ... | @@ -33,9 +33,9 @@ import { ref, defineProps, onMounted } from 'vue' |
| 33 | import Taro from '@tarojs/taro' | 33 | import Taro from '@tarojs/taro' |
| 34 | 34 | ||
| 35 | const props = defineProps({ | 35 | const props = defineProps({ |
| 36 | - status: { | 36 | + data: { |
| 37 | - type: String, | 37 | + type: Object, |
| 38 | - default: '', | 38 | + default: {}, |
| 39 | }, | 39 | }, |
| 40 | }); | 40 | }); |
| 41 | 41 | ||
| ... | @@ -46,7 +46,7 @@ const handleTap = () => { | ... | @@ -46,7 +46,7 @@ const handleTap = () => { |
| 46 | } | 46 | } |
| 47 | 47 | ||
| 48 | onMounted(() => { | 48 | onMounted(() => { |
| 49 | - console.warn('房间详情的状态属性', props.status); | 49 | + console.warn('房间详情的属性', props.data); |
| 50 | }) | 50 | }) |
| 51 | 51 | ||
| 52 | </script> | 52 | </script> |
| ... | @@ -66,6 +66,28 @@ onMounted(() => { | ... | @@ -66,6 +66,28 @@ onMounted(() => { |
| 66 | } | 66 | } |
| 67 | .room-info { | 67 | .room-info { |
| 68 | padding: 0.5rem; | 68 | padding: 0.5rem; |
| 69 | + .room-info-left { | ||
| 70 | + .room-info-title { | ||
| 71 | + color: #0B0B0B; font-weight: bold; | ||
| 72 | + } | ||
| 73 | + .room-info-desc { | ||
| 74 | + color: #7D7C7C; font-size: 0.8rem; | ||
| 75 | + } | ||
| 76 | + } | ||
| 77 | + .room-info-right { | ||
| 78 | + .room-info-discount { | ||
| 79 | + float: right; | ||
| 80 | + color: #EB2E2E; | ||
| 81 | + font-weight: bold; | ||
| 82 | + font-size: 1.1rem; | ||
| 83 | + } | ||
| 84 | + .room-info-price { | ||
| 85 | + float: right; | ||
| 86 | + color: #7D7C7C; | ||
| 87 | + font-size: 0.8rem; | ||
| 88 | + text-decoration: line-through; | ||
| 89 | + } | ||
| 90 | + } | ||
| 69 | } | 91 | } |
| 70 | .room-status { | 92 | .room-status { |
| 71 | width: 100%; | 93 | width: 100%; | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2022-09-19 14:11:06 | 2 | * @Date: 2022-09-19 14:11:06 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2023-12-20 15:13:49 | 4 | + * @LastEditTime: 2023-12-21 11:31:46 |
| 5 | * @FilePath: /meihuaApp/src/pages/confirm/index.vue | 5 | * @FilePath: /meihuaApp/src/pages/confirm/index.vue |
| 6 | * @Description: 确认订单页面 | 6 | * @Description: 确认订单页面 |
| 7 | --> | 7 | --> |
| ... | @@ -33,7 +33,7 @@ | ... | @@ -33,7 +33,7 @@ |
| 33 | <nut-col span="9" class="calendar-select-left"> | 33 | <nut-col span="9" class="calendar-select-left"> |
| 34 | <view class="text">入住日期</view> | 34 | <view class="text">入住日期</view> |
| 35 | <view class="date"> | 35 | <view class="date"> |
| 36 | - {{ booking_info.check_in.year }}.{{ booking_info.check_in.month }}.{{ booking_info.check_in.day }} 星期{{ booking_info.check_in.day_of_week }} | 36 | + {{ booking_info.check_in.year }}.{{ booking_info.check_in.month }}.{{ booking_info.check_in.day }} {{ booking_info.check_in.day_of_week }} |
| 37 | </view> | 37 | </view> |
| 38 | </nut-col> | 38 | </nut-col> |
| 39 | <nut-col span="5" class="calendar-select-center"> | 39 | <nut-col span="5" class="calendar-select-center"> |
| ... | @@ -42,7 +42,7 @@ | ... | @@ -42,7 +42,7 @@ |
| 42 | <nut-col span="9" class="calendar-select-right"> | 42 | <nut-col span="9" class="calendar-select-right"> |
| 43 | <view class="text">退房日期</view> | 43 | <view class="text">退房日期</view> |
| 44 | <view class="date"> | 44 | <view class="date"> |
| 45 | - {{ booking_info.check_out.year }}.{{ booking_info.check_out.month }}.{{ booking_info.check_out.day }} 星期{{ booking_info.check_out.day_of_week }} | 45 | + {{ booking_info.check_out.year }}.{{ booking_info.check_out.month }}.{{ booking_info.check_out.day }} {{ booking_info.check_out.day_of_week }} |
| 46 | </view> | 46 | </view> |
| 47 | </nut-col> | 47 | </nut-col> |
| 48 | </nut-row> | 48 | </nut-row> |
| ... | @@ -151,16 +151,16 @@ import payCard from '@/components/payCard.vue' | ... | @@ -151,16 +151,16 @@ import payCard from '@/components/payCard.vue' |
| 151 | const booking_info = ref({ | 151 | const booking_info = ref({ |
| 152 | days: 1, // 入住天数 | 152 | days: 1, // 入住天数 |
| 153 | check_in: { | 153 | check_in: { |
| 154 | - year: '2023', | 154 | + year: '', |
| 155 | - month: '12', | 155 | + month: '', |
| 156 | - day: '07', | 156 | + day: '', |
| 157 | - day_of_week: '四' | 157 | + day_of_week: '' |
| 158 | }, | 158 | }, |
| 159 | check_out: { | 159 | check_out: { |
| 160 | - year: '2023', | 160 | + year: '', |
| 161 | - month: '12', | 161 | + month: '', |
| 162 | - day: '08', | 162 | + day: '', |
| 163 | - day_of_week: '五' | 163 | + day_of_week: '' |
| 164 | }, | 164 | }, |
| 165 | }); | 165 | }); |
| 166 | 166 | ||
| ... | @@ -192,8 +192,24 @@ const show_pay = ref(false); | ... | @@ -192,8 +192,24 @@ const show_pay = ref(false); |
| 192 | const payData = ref({}); | 192 | const payData = ref({}); |
| 193 | 193 | ||
| 194 | onMounted(() => { | 194 | onMounted(() => { |
| 195 | - const { id } = getCurrentPageParam(); | 195 | + const { id, start_date, end_date, between_date, start_date_week, end_date_week } = getCurrentPageParam(); |
| 196 | - console.log(id); | 196 | + // console.log(id, start_date, end_date, between_date, start_date_week, end_date_week ); |
| 197 | + booking_info.value.days = between_date; | ||
| 198 | + let check_in = start_date.split('-'); | ||
| 199 | + let check_out = end_date.split('-'); | ||
| 200 | + // | ||
| 201 | + booking_info.value.check_in = { | ||
| 202 | + year: check_in[0], | ||
| 203 | + month: check_in[1], | ||
| 204 | + day: check_in[2], | ||
| 205 | + day_of_week: JSON.parse(start_date_week) | ||
| 206 | + } | ||
| 207 | + booking_info.value.check_out = { | ||
| 208 | + year: check_out[0], | ||
| 209 | + month: check_out[1], | ||
| 210 | + day: check_out[2], | ||
| 211 | + day_of_week: JSON.parse(end_date_week) | ||
| 212 | + } | ||
| 197 | }); | 213 | }); |
| 198 | 214 | ||
| 199 | const goPay = () => { | 215 | const goPay = () => { | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2022-09-19 14:11:06 | 2 | * @Date: 2022-09-19 14:11:06 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2023-12-20 11:19:46 | 4 | + * @LastEditTime: 2023-12-21 11:21:04 |
| 5 | * @FilePath: /meihuaApp/src/pages/detail/index.vue | 5 | * @FilePath: /meihuaApp/src/pages/detail/index.vue |
| 6 | * @Description: 房间详情页面 | 6 | * @Description: 房间详情页面 |
| 7 | --> | 7 | --> |
| ... | @@ -63,15 +63,25 @@ const showBook = computed(() => { | ... | @@ -63,15 +63,25 @@ const showBook = computed(() => { |
| 63 | return book_status.value !== '已约满' | 63 | return book_status.value !== '已约满' |
| 64 | }); | 64 | }); |
| 65 | 65 | ||
| 66 | -const onDatesChange = ({ startDate, endDate }) => { | 66 | +const start_date = ref(''); |
| 67 | - console.warn(startDate, endDate); | 67 | +const end_date = ref(''); |
| 68 | +const between_date = ref(''); | ||
| 69 | +const start_date_week = ref(''); | ||
| 70 | +const end_date_week = ref(''); | ||
| 71 | + | ||
| 72 | +const onDatesChange = ({ startDate, endDate, betweenDate, startDateWeek, endDateWeek }) => { | ||
| 73 | + start_date.value = startDate; | ||
| 74 | + end_date.value = endDate; | ||
| 75 | + start_date_week.value = startDateWeek; | ||
| 76 | + end_date_week.value = endDateWeek; | ||
| 77 | + between_date.value = betweenDate; | ||
| 68 | } | 78 | } |
| 69 | 79 | ||
| 70 | const page = ref(1); | 80 | const page = ref(1); |
| 71 | 81 | ||
| 72 | const goToConfirm = () => { | 82 | const goToConfirm = () => { |
| 73 | Taro.navigateTo({ | 83 | Taro.navigateTo({ |
| 74 | - url: '/pages/confirm/index?id=123', | 84 | + url: `/pages/confirm/index?id=123&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}`, |
| 75 | }) | 85 | }) |
| 76 | } | 86 | } |
| 77 | 87 | ... | ... |
| ... | @@ -16,7 +16,7 @@ | ... | @@ -16,7 +16,7 @@ |
| 16 | </view> | 16 | </view> |
| 17 | <view class="index-title">热门推荐</view> | 17 | <view class="index-title">热门推荐</view> |
| 18 | <view class="index-list"> | 18 | <view class="index-list"> |
| 19 | - <room-card v-for="(item, index) in 5" :key="index" /> | 19 | + <room-card v-for="(item, index) in room_list" :key="index" :data="item" /> |
| 20 | </view> | 20 | </view> |
| 21 | </scroll-view> | 21 | </scroll-view> |
| 22 | <view style="height: 6rem;"></view> | 22 | <view style="height: 6rem;"></view> |
| ... | @@ -140,11 +140,19 @@ export default { | ... | @@ -140,11 +140,19 @@ export default { |
| 140 | const navHeight = await $('#navbar-page').height(); | 140 | const navHeight = await $('#navbar-page').height(); |
| 141 | this.indexCoverHeight = windowHeight - navHeight; | 141 | this.indexCoverHeight = windowHeight - navHeight; |
| 142 | }, 500); | 142 | }, 500); |
| 143 | + // | ||
| 144 | + for (let index = 0; index < 5; index++) { | ||
| 145 | + this.room_list.push({ | ||
| 146 | + id: index, | ||
| 147 | + status: 'enable' | ||
| 148 | + }) | ||
| 149 | + } | ||
| 143 | }, | 150 | }, |
| 144 | data() { | 151 | data() { |
| 145 | return { | 152 | return { |
| 146 | indexCoverHeight: 0, | 153 | indexCoverHeight: 0, |
| 147 | scrollTop: 0, | 154 | scrollTop: 0, |
| 155 | + room_list: [], | ||
| 148 | flag: true, | 156 | flag: true, |
| 149 | page: 0, | 157 | page: 0, |
| 150 | limit: 10, | 158 | limit: 10, | ... | ... |
-
Please register or login to post a comment