168 lines
3.8 KiB
Vue
168 lines
3.8 KiB
Vue
<template>
|
|
<view class="home-head" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
|
|
<view class="nav">
|
|
<wd-icon @click='onBack' name="thin-arrow-left" size="35rpx"></wd-icon>
|
|
<text class='nav_title'>旅游度假 预约出行系统</text>
|
|
</view>
|
|
<view class="main">
|
|
<view class="head-title">
|
|
<text class="txt">选择出行日期</text>
|
|
<text class="data">可选</text>
|
|
<text class="rde">12天9晚</text>
|
|
<text class="desc">·所选日期为北京时间</text>
|
|
</view>
|
|
<wd-calendar-view custom-class='data' :panel-height='500' :formatter="formatter" :max-range="7" type="daterange" :show-panel-title='false' v-model="dataTime" @change="handleChange" />
|
|
</view>
|
|
<view class="bottom">
|
|
<view class="desc">09.02-09.13 共12天9晚</view>
|
|
<view class="btn" @click="handleMise">
|
|
下一步
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
// 获取屏幕边界到安全区域距离
|
|
const { safeAreaInsets } = uni.getSystemInfoSync()
|
|
const dataTime = ref([])
|
|
const dataDesc = ref('')
|
|
// 格式化
|
|
const formatter = (day) => {
|
|
const date = new Date(day.date)
|
|
const now = new Date()
|
|
|
|
const year = date.getFullYear()
|
|
const month = date.getMonth()
|
|
const da = date.getDate()
|
|
const nowYear = now.getFullYear()
|
|
const nowMonth = now.getMonth()
|
|
const nowDa = now.getDate()
|
|
|
|
day.bottomInfo = '可约'
|
|
// if (year === nowYear && month === nowMonth && da === nowDa) {
|
|
// day.topInfo = '今天'
|
|
// }
|
|
|
|
if (month === 5 && da === 18) {
|
|
day.topInfo = '618大促'
|
|
}
|
|
|
|
if (month === 10 && da === 11) {
|
|
day.topInfo = '京东双11'
|
|
}
|
|
|
|
if (day.type === 'start') {
|
|
day.topInfo = '出发'
|
|
day.bottomInfo = ''
|
|
}
|
|
if(day.type ==='middle'){
|
|
day.bottomInfo = ''
|
|
}
|
|
if (day.type === 'end') {
|
|
day.topInfo = '结束'
|
|
day.bottomInfo = ''
|
|
}
|
|
|
|
if (day.type === 'same') {
|
|
day.bottomInfo = '开始/结束'
|
|
}
|
|
return day
|
|
}
|
|
|
|
const onBack = ()=>{
|
|
uni.navigateBack({ delta: 1 })
|
|
}
|
|
|
|
const handleMise = ()=>{
|
|
uni.navigateTo({
|
|
url:'/pages/appointment-form/index'
|
|
})
|
|
}
|
|
|
|
const handleChange = ({ value })=>{
|
|
const date = new Date(value[0])
|
|
const now = new Date(value[1])
|
|
|
|
// const year = date.getFullYear()
|
|
const month = date.getMonth()
|
|
const da = date.getDate()
|
|
|
|
// const nowYear = now.getFullYear()
|
|
const nowMonth = now.getMonth()
|
|
const nowDa = now.getDate()
|
|
|
|
|
|
// console.log(nowDa-da);
|
|
dataDesc.value = `${month}.${da}-${nowMonth}.${nowDa}`
|
|
console.log(dataDesc.value)
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.txt{
|
|
color: #181818;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
}
|
|
.head-title{
|
|
padding: 30rpx 20rpx;
|
|
font-size: 24rpx;
|
|
.data{
|
|
color: #787878;
|
|
margin-left: 8rpx;
|
|
}
|
|
.rde{
|
|
color: #F70C47;
|
|
}
|
|
.desc{
|
|
color: #787878;
|
|
}
|
|
}
|
|
.home-head {
|
|
width: 100%;
|
|
height: 574rpx;
|
|
background: linear-gradient(180deg, #92deeb 0%, rgba(216, 216, 216, 0) 100%);
|
|
border-radius: 0px 0px 0px 0px;
|
|
.nav{
|
|
padding: 16rpx 0 16rpx 20rpx;
|
|
.nav_title{
|
|
font-size: 36rpx;
|
|
color: #181818;
|
|
font-weight: bold;
|
|
margin-left: 75rpx;
|
|
}
|
|
}
|
|
}
|
|
.main{
|
|
background: #fff;
|
|
margin: 54rpx 26rpx 0 26rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
::v-deep.wd-month__day.is-start .wd-month__day-container,::v-deep.wd-month__day.is-end .wd-month__day-container{
|
|
background: #FB3158 !important;
|
|
}
|
|
::v-deep.wd-month__day.is-middle .wd-month__day-container{
|
|
background: #FFD4DC !important;
|
|
}
|
|
.bottom{
|
|
.desc{
|
|
margin-left: 38rpx;
|
|
margin-top: 20rpx;
|
|
color: #181818;
|
|
font-size: 24rpx;
|
|
}
|
|
.btn{
|
|
// margin-top: 160rpx;
|
|
margin: 44rpx 80rpx 0 80rpx;
|
|
background: #1170FF;
|
|
border-radius: 50rpx;
|
|
padding: 20rpx 230rpx;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
</style>
|