Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
meihua-island-book
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
hookehuyr
2023-12-27 16:30:49 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
1deeb0371c589ccc30adf0a18f706b1b27c3b9f3
1deeb037
1 parent
05e85938
fix 日历选择组件新增为空显示状态
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
15 additions
and
5 deletions
src/components/calendarSelect.vue
src/components/calendarSelect.vue
View file @
1deeb03
<!--
* @Date: 2023-12-14 10:04:23
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-2
1 13:59:23
* @LastEditTime: 2023-12-2
7 16:26:57
* @FilePath: /meihuaApp/src/components/calendarSelect.vue
* @Description: 文件描述
-->
...
...
@@ -10,16 +10,21 @@
<nut-row gutter="10">
<nut-col span="9">
<view style="color: #7D7C7C; font-size: 0.8rem;">入住日期</view>
<view style="color: #6A4925; font-size: 0.85rem; font-weight: bold; margin-top: 0.1rem;">{{ state.checkinDate}} {{ getDayOfWeek(state.checkinDate) }}</view>
<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>
<view v-else style="color: #6A4925; font-size: 0.85rem; font-weight: bold; margin-top: 0.1rem;">请选择入住日期</view>
</nut-col>
<nut-col span="5">
<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;">
<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;">
共{{ state.betweenDate }}晚
</view>
<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;">
共0晚
</view>
</nut-col>
<nut-col span="9">
<view style="color: #7D7C7C; font-size: 0.8rem;">退房日期</view>
<view style="color: #6A4925; font-size: 0.85rem; font-weight: bold; margin-top: 0.1rem;">{{ state.checkoutDate }} {{ getDayOfWeek(state.checkoutDate) }}</view>
<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>
<view v-else style="color: #6A4925; font-size: 0.85rem; font-weight: bold; margin-top: 0.1rem;">请选择退房日期</view>
</nut-col>
</nut-row>
</view>
...
...
@@ -42,6 +47,7 @@
<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { getCurrentPageUrl } from "@/utils/weapp";
/**
* 获取今天和明天日期
...
...
@@ -177,9 +183,13 @@ watch(
// 如果传入了默认日期,则设置默认日期
if (val.startDate) {
state.checkinDate = val.startDate;
} else {
state.checkinDate = '';
}
if (val.endDate) {
state.checkoutDate = val.endDate;
} else {
state.checkoutDate = '';
}
if (val.startDate && val.endDate) {
state.defaultDate = [val.startDate, val.endDate];
...
...
@@ -194,7 +204,7 @@ watch(
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)) });
//
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)) });
})
const openSwitch = (param) => {
...
...
Please
register
or
login
to post a comment