Hooke / meihua-island-book

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
1deeb037 1 parent 05e85938

fix 日历选择组件新增为空显示状态

Inline Side-by-side
Showing 1 changed file with 15 additions and 5 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-21 13:59:23 4 + * @LastEditTime: 2023-12-27 16:26:57
5 * @FilePath: /meihuaApp/src/components/calendarSelect.vue 5 * @FilePath: /meihuaApp/src/components/calendarSelect.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -10,16 +10,21 @@ ...@@ -10,16 +10,21 @@
10 <nut-row gutter="10"> 10 <nut-row gutter="10">
11 <nut-col span="9"> 11 <nut-col span="9">
12 <view style="color: #7D7C7C; font-size: 0.8rem;">入住日期</view> 12 <view style="color: #7D7C7C; font-size: 0.8rem;">入住日期</view>
13 - <view style="color: #6A4925; font-size: 0.85rem; font-weight: bold; margin-top: 0.1rem;">{{ state.checkinDate}} {{ getDayOfWeek(state.checkinDate) }}</view> 13 + <view v-if="state.checkinDate" style="color: #6A4925; font-size: 0.85rem; font-weight: bold; margin-top: 0.1rem;">{{ state.checkinDate }} {{ getDayOfWeek(state.checkinDate) }}</view>
14 + <view v-else style="color: #6A4925; font-size: 0.85rem; font-weight: bold; margin-top: 0.1rem;">请选择入住日期</view>
14 </nut-col> 15 </nut-col>
15 <nut-col span="5"> 16 <nut-col span="5">
16 - <view style="color: #6A4925; margin-top: 15%; font-size: 0.8rem; text-align: center; background-color: #fff; padding: 0.25rem 0; border-radius: 0.5rem;"> 17 + <view v-if="state.checkinDate && state.checkoutDate" style="color: #6A4925; margin-top: 15%; font-size: 0.8rem; text-align: center; background-color: #fff; padding: 0.25rem 0; border-radius: 0.5rem;">
17 共{{ state.betweenDate }}晚 18 共{{ state.betweenDate }}晚
18 </view> 19 </view>
20 + <view v-else style="color: #6A4925; margin-top: 15%; font-size: 0.8rem; text-align: center; background-color: #fff; padding: 0.25rem 0; border-radius: 0.5rem;">
21 + 共0晚
22 + </view>
19 </nut-col> 23 </nut-col>
20 <nut-col span="9"> 24 <nut-col span="9">
21 <view style="color: #7D7C7C; font-size: 0.8rem;">退房日期</view> 25 <view style="color: #7D7C7C; font-size: 0.8rem;">退房日期</view>
22 - <view style="color: #6A4925; font-size: 0.85rem; font-weight: bold; margin-top: 0.1rem;">{{ state.checkoutDate }} {{ getDayOfWeek(state.checkoutDate) }}</view> 26 + <view v-if="state.checkoutDate" style="color: #6A4925; font-size: 0.85rem; font-weight: bold; margin-top: 0.1rem;">{{ state.checkoutDate }} {{ getDayOfWeek(state.checkoutDate) }}</view>
27 + <view v-else style="color: #6A4925; font-size: 0.85rem; font-weight: bold; margin-top: 0.1rem;">请选择退房日期</view>
23 </nut-col> 28 </nut-col>
24 </nut-row> 29 </nut-row>
25 </view> 30 </view>
...@@ -42,6 +47,7 @@ ...@@ -42,6 +47,7 @@
42 47
43 <script setup> 48 <script setup>
44 import { ref, reactive, onMounted, watch } from 'vue' 49 import { ref, reactive, onMounted, watch } from 'vue'
50 +import { getCurrentPageUrl } from "@/utils/weapp";
45 51
46 /** 52 /**
47 * 获取今天和明天日期 53 * 获取今天和明天日期
...@@ -177,9 +183,13 @@ watch( ...@@ -177,9 +183,13 @@ watch(
177 // 如果传入了默认日期，则设置默认日期 183 // 如果传入了默认日期，则设置默认日期
178 if (val.startDate) { 184 if (val.startDate) {
179 state.checkinDate = val.startDate; 185 state.checkinDate = val.startDate;
186 + } else {
187 + state.checkinDate = '';
180 } 188 }
181 if (val.endDate) { 189 if (val.endDate) {
182 state.checkoutDate = val.endDate; 190 state.checkoutDate = val.endDate;
191 + } else {
192 + state.checkoutDate = '';
183 } 193 }
184 if (val.startDate && val.endDate) { 194 if (val.startDate && val.endDate) {
185 state.defaultDate = [val.startDate, val.endDate]; 195 state.defaultDate = [val.startDate, val.endDate];
...@@ -194,7 +204,7 @@ watch( ...@@ -194,7 +204,7 @@ watch(
194 204
195 onMounted(() => { 205 onMounted(() => {
196 // 触发日期改变事件 206 // 触发日期改变事件
197 - 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)) }); 207 + // 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)) });
198 }) 208 })
199 209
200 const openSwitch = (param) => { 210 const openSwitch = (param) => {
......