|
|
|
@ -1,12 +1,82 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<tm-drawer placement="bottom" okText='确认' v-model:show="show" @close="close">
|
|
|
|
|
<tm-drawer placement="bottom" okText='确认' :show="show" :height="1054" :hideHeader=true>
|
|
|
|
|
<div class="container">
|
|
|
|
|
<tm-icon name="tmicon-times-circle" color="#ccc" class="icon-close" @click="close"></tm-icon>
|
|
|
|
|
<div class="title">请选择参观日期</div>
|
|
|
|
|
<tm-divider color="#868686"></tm-divider>
|
|
|
|
|
<div>当前年月日:{{ currentDate }}</div>
|
|
|
|
|
<tm-divider color="#868686"></tm-divider>
|
|
|
|
|
<div class="date-box">
|
|
|
|
|
<div class="date-box-item" v-for="(item, index) in dateList" :key="index">
|
|
|
|
|
<div :class="[index === currentIndex ? 'active' : '', 'date-box-item-day']"
|
|
|
|
|
@click="chooseDatehandle($event, item.date, index)">
|
|
|
|
|
<div :style="{ fontSize: '30rpx', fontWeight: '600' }">{{ item.date }}日·周{{
|
|
|
|
|
dayChineseMap[item.week] }}
|
|
|
|
|
</div>
|
|
|
|
|
<div style="font-size: 22rpx;">*可预约</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="font-size: 30rpx;color:#F7963B ;">{{ dayjs().format('MM-DD') + '日' == item.date
|
|
|
|
|
? '今日' : '明天' }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="more-date" @click="changeMoreDate">
|
|
|
|
|
<div style="font-size: 30rpx;width: 100rpx;">选择更多日期</div>
|
|
|
|
|
<div>
|
|
|
|
|
<tm-icon name="tmicon-angle-right" :fontSize="26" color="#fff"></tm-icon>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<tm-divider color="#868686"></tm-divider>
|
|
|
|
|
<div class="title">请选择参观日期</div>
|
|
|
|
|
<div class="time-box">
|
|
|
|
|
<div class="time-box-item">
|
|
|
|
|
<div :style="{ fontWeight: '600' }">08:00入场</div>
|
|
|
|
|
<div :style="{ fontSize: '22rpx', }">*不可选</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="time-box-item">
|
|
|
|
|
<div :style="{ fontWeight: '600' }">08:00入场</div>
|
|
|
|
|
<div :style="{ fontSize: '22rpx', }">*不可选</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="time-box-item">
|
|
|
|
|
<div :style="{ fontWeight: '600' }">08:00入场</div>
|
|
|
|
|
<div :style="{ fontSize: '22rpx', }">*不可选</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="time-box-item">
|
|
|
|
|
<div :style="{ fontWeight: '600' }">08:00入场</div>
|
|
|
|
|
<div :style="{ fontSize: '22rpx', }">*不可选</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="time-box-item">
|
|
|
|
|
<div :style="{ fontWeight: '600' }">08:00入场</div>
|
|
|
|
|
<div :style="{ fontSize: '22rpx', }">*不可选</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="time-box-item">
|
|
|
|
|
<div :style="{ fontWeight: '600' }">08:00入场</div>
|
|
|
|
|
<div :style="{ fontSize: '22rpx', }">*不可选</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<tm-divider color="#868686"></tm-divider>
|
|
|
|
|
<div class="tips">
|
|
|
|
|
<div>*参观当日需要携带游客本人身份证件</div>
|
|
|
|
|
<div> *入馆时间:</div>
|
|
|
|
|
<div>
|
|
|
|
|
工作日08:30-18:00、节假日/双休09:00-20:00(具体时间以景区为准)
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<tm-divider color="#868686"></tm-divider>
|
|
|
|
|
<div style="margin: auto;">
|
|
|
|
|
<tm-button color="#000000" :width="436" :height="60" :round="25">确定</tm-button>
|
|
|
|
|
</div>
|
|
|
|
|
<tm-calendar format="YYYY-MM-DD" @confirm="comfirmCal" color="#F7963B" v-model:show="isMoreDate" update:show
|
|
|
|
|
:start="[dayjs()]" :end="[endDate]"></tm-calendar>
|
|
|
|
|
</div>
|
|
|
|
|
</tm-drawer>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
import { defineProps, onMounted, defineEmits, watch } from 'vue'
|
|
|
|
|
import { defineProps, ref, defineEmits, watch, onMounted, computed } from 'vue'
|
|
|
|
|
import dayjs from 'dayjs'
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
show: {
|
|
|
|
|
type: Boolean,
|
|
|
|
@ -15,11 +85,143 @@ const props = defineProps({
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const emits = defineEmits(["update:show"]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let currentIndex = ref(-1)
|
|
|
|
|
let currentDate = ref('')
|
|
|
|
|
let isMoreDate = ref(false)
|
|
|
|
|
const dayChineseMap = ['日', '一', '二', '三', '四', '五', '六'];
|
|
|
|
|
let dateList = ref([
|
|
|
|
|
{
|
|
|
|
|
date: dayjs().format('MM-DD'),
|
|
|
|
|
week: dayjs().day(),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
date: dayjs().add(1, 'day').format('MM-DD'),
|
|
|
|
|
week: dayjs().add(1, 'day').day(),
|
|
|
|
|
}
|
|
|
|
|
])
|
|
|
|
|
const chooseDatehandle = (e, date, index) => {
|
|
|
|
|
currentDate.value = dayjs().year() + '-' + date
|
|
|
|
|
currentIndex.value = index
|
|
|
|
|
}
|
|
|
|
|
const close = () => {
|
|
|
|
|
emits("update:show", false);
|
|
|
|
|
}
|
|
|
|
|
const changeMoreDate = () => {
|
|
|
|
|
isMoreDate.value = true
|
|
|
|
|
}
|
|
|
|
|
const endDate = computed(() => {
|
|
|
|
|
const lastDayOfMonth = dayjs().endOf('month');
|
|
|
|
|
const year = lastDayOfMonth.year();
|
|
|
|
|
const month = lastDayOfMonth.month() + 1;
|
|
|
|
|
const date = lastDayOfMonth.date();
|
|
|
|
|
return dayjs(year + '-' + month + '-' + date).add(2, 'month');
|
|
|
|
|
});
|
|
|
|
|
const comfirmCal = (date) => {
|
|
|
|
|
currentDate.value = date[0].split('/').join('-')
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped></style>
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.container {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
padding: 30rpx 32rpx;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
|
|
.icon-close {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 20rpx;
|
|
|
|
|
top: 20rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
font-size: 36rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.date-box {
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
margin: 20rpx 0;
|
|
|
|
|
|
|
|
|
|
.date-box-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.date-box-item-day {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
margin-right: 20rpx;
|
|
|
|
|
height: 100rpx;
|
|
|
|
|
border-radius: 32rpx;
|
|
|
|
|
border: 1px solid #F7963B;
|
|
|
|
|
padding: 20rpx 18rpx;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
width: 240rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.active {
|
|
|
|
|
background: #F7963B;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.more-date {
|
|
|
|
|
display: flex;
|
|
|
|
|
padding: 20rpx 18rpx;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: start;
|
|
|
|
|
height: 100rpx;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
border-radius: 32rpx;
|
|
|
|
|
color: #fff;
|
|
|
|
|
background-color: #F7963B;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.time-box::-webkit-scrollbar {
|
|
|
|
|
display: none;
|
|
|
|
|
/* 对于Webkit浏览器 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.time-box {
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
overflow-x: auto;
|
|
|
|
|
margin-top: 20rpx;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
-ms-overflow-style: none;
|
|
|
|
|
/* 对于IE和Edge */
|
|
|
|
|
scrollbar-width: none;
|
|
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
|
|
|
|
|
/* 对于Firefox */
|
|
|
|
|
.time-box-item {
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
font-size: 30rpx;
|
|
|
|
|
padding: 20rpx;
|
|
|
|
|
margin-right: 20rpx;
|
|
|
|
|
border-radius: 32rpx;
|
|
|
|
|
border: 1rpx solid #F7963B;
|
|
|
|
|
width: 188rpx;
|
|
|
|
|
height: 114rpx;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tips {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
color: #B29E92;
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|