hookehuyr

订单日期选择功能完善

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,
......