You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
448 lines
11 KiB
448 lines
11 KiB
<template> |
|
<view> |
|
<view v-if="isShow" class="time_mask" @click="close" :class="{'uni-timer-mask-show':timeMaskShow}"></view> |
|
<view v-if="isShow" class="yx_time_slot" :class="{'fadelogIn1':timeMaskShow}"> |
|
<view class="time_top_box"> |
|
<view class="time_close" @click="close">取消</view> |
|
<view class="time_text">{{title}}</view> |
|
<view class="time_comfirm" @click="confirm">确认</view> |
|
</view> |
|
<view class="typelist"> |
|
<view class="typeobj" :class="{'typeobj_hover':typeIndex==index}" v-for="(item,index) in typeList" :key="index" @click="handleType(index)"> |
|
<view class="text">{{item}}</view> |
|
<view class="line"></view> |
|
</view> |
|
</view> |
|
<!-- 时间选择 --> |
|
<view class="yx_timer_sel"> |
|
<swiper class="sel_swiper" :current="typeIndex"> |
|
<swiper-item> |
|
<view> |
|
<picker-view :value="startValue" :indicator-style="indicatorStyle" @change="bindStartChange" class="sel_swiper-item"> |
|
<picker-view-column> |
|
<view class="item FontS_24rpx" v-for="(item,index) in years" :key="index">{{item}}年</view> |
|
</picker-view-column> |
|
<picker-view-column> |
|
<view class="item FontS_24rpx" v-for="(item,index) in months" :key="index">{{item}}月</view> |
|
</picker-view-column> |
|
<picker-view-column> |
|
<view class="item FontS_24rpx" v-for="(item,index) in days" :key="index">{{item}}日</view> |
|
</picker-view-column> |
|
</picker-view> |
|
</view> |
|
</swiper-item> |
|
<swiper-item> |
|
<view> |
|
<picker-view :value="endValue" :indicator-style="indicatorStyle" @change="bindEndChange" class="sel_swiper-item"> |
|
<picker-view-column> |
|
<view class="item FontS_24rpx" v-for="(item,index) in years" :key="index">{{item}}年</view> |
|
</picker-view-column> |
|
<picker-view-column> |
|
<view class="item FontS_24rpx" v-for="(item,index) in months" :key="index">{{item}}月</view> |
|
</picker-view-column> |
|
<picker-view-column> |
|
<view class="item FontS_24rpx" v-for="(item,index) in days" :key="index">{{item}}日</view> |
|
</picker-view-column> |
|
</picker-view> |
|
</view> |
|
</swiper-item> |
|
</swiper> |
|
</view> |
|
|
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
name:"two-date-choose-y-m-d", |
|
props: { |
|
title: { |
|
type: String, |
|
default: () => { |
|
return "选择时间段"; |
|
} |
|
}, |
|
num: { |
|
type: Number, |
|
default: () => { |
|
return 0; |
|
} |
|
}, |
|
startTime: { |
|
type: String, |
|
default: () => { |
|
return ""; |
|
} |
|
}, |
|
endTime: { |
|
type: String, |
|
default: () => { |
|
return ""; |
|
} |
|
}, |
|
}, |
|
data() { |
|
return { |
|
$:this.$, |
|
timeMaskShow:false,//遮罩 |
|
isShow:false,//显示 |
|
typeList:["开始时间","结束时间"], |
|
typeIndex:0,//下标 |
|
startValue:[0,0,0],// |
|
endValue:[0,0,0],// |
|
forNowStartValue:[],// |
|
forNowEndValue:[],// |
|
indicatorStyle: 'height: 50px;', |
|
// timeList:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23], |
|
// 日期数组 |
|
years:[], |
|
months:[], |
|
days:[], |
|
// 当前选中 |
|
currYear:'', |
|
currMonth:'', |
|
currDay:'', |
|
// 改变选择时 |
|
year:'', |
|
month:'', |
|
day:'', |
|
// 星期几 |
|
type:'', // 类型 |
|
courtyardData:'', |
|
}; |
|
}, |
|
mounted() { |
|
}, |
|
methods: { |
|
// 处理选中 |
|
dealChoose(startData,endData){ |
|
let daysNum = 31 |
|
let monthNumArr = [1,3,5,7,8,10,12] |
|
let date = new Date() |
|
let years = [] |
|
let currYear = date.getFullYear() |
|
let months = [] |
|
let currMonth = date.getMonth() + 1 |
|
if(currMonth != 2 && monthNumArr.indexOf(currMonth) != -1){ |
|
daysNum = 31 |
|
} |
|
if(currMonth != 2 && monthNumArr.indexOf(currMonth) == -1){ |
|
daysNum = 30 |
|
} |
|
let days = [] |
|
let currDay = date.getDate() |
|
for (let i = 1990; i <= date.getFullYear(); i++) { |
|
years.push(i) |
|
} |
|
for (let i = 1; i <= 12; i++) { |
|
months.push(i) |
|
} |
|
if(currMonth == 2){ |
|
if(currYear%4 == 0){ |
|
daysNum = 29 |
|
this.day = 29 |
|
}else{ |
|
daysNum = 28 |
|
this.day = 28 |
|
} |
|
} |
|
for (let i = 1; i <= daysNum; i++) { |
|
days.push(i) |
|
} |
|
this.years = years |
|
this.months = months |
|
this.days = days |
|
if(JSON.stringify(startData) != '{}'){ |
|
this.startValue = [this.years.indexOf(Number(startData.year)), startData.month - 1, startData.day - 1] |
|
} |
|
if(JSON.stringify(endData) != '{}'){ |
|
this.endValue = [this.years.indexOf(Number(endData.year)), endData.month - 1, endData.day - 1] |
|
} |
|
}, |
|
// 获取时间 |
|
getDateData () { |
|
let daysNum = 31 |
|
let monthNumArr = [1,3,5,7,8,10,12] |
|
let date = new Date() |
|
let years = [] |
|
let currYear = date.getFullYear() |
|
let months = [] |
|
let currMonth = date.getMonth() + 1 |
|
if(currMonth != 2 && monthNumArr.indexOf(currMonth) != -1){ |
|
daysNum = 31 |
|
} |
|
if(currMonth != 2 && monthNumArr.indexOf(currMonth) == -1){ |
|
daysNum = 30 |
|
} |
|
let days = [] |
|
let currDay = date.getDate() |
|
for (let i = 1990; i <= date.getFullYear(); i++) { |
|
years.push(i) |
|
} |
|
for (let i = 1; i <= 12; i++) { |
|
months.push(i) |
|
} |
|
if(currMonth == 2){ |
|
if(currYear%4 == 0){ |
|
daysNum = 29 |
|
this.day = 29 |
|
}else{ |
|
daysNum = 28 |
|
this.day = 28 |
|
} |
|
} |
|
for (let i = 1; i <= daysNum; i++) { |
|
days.push(i) |
|
} |
|
this.currYear = currYear |
|
this.currMonth = currMonth |
|
this.currDay = currDay |
|
this.years = years |
|
this.months = months |
|
this.days = days |
|
this.startValue = [this.years.indexOf(this.currYear), this.currMonth - 1, this.currDay - 1] |
|
this.endValue = [this.years.indexOf(this.currYear), this.currMonth - 1, this.currDay - 1] |
|
}, |
|
// 判断开始时间是否小于结束时间 |
|
checkTime(time1,time2){ |
|
let timeNew1 = new Date(time1) |
|
let timeNew2 = new Date(time2) |
|
if(timeNew1 > timeNew2){ |
|
return false |
|
} |
|
return true |
|
}, |
|
//看看是不是有两位数 |
|
formatNumber(n) { |
|
n = n.toString() |
|
return n[1] ? n : '0' + n |
|
}, |
|
//开始选择 |
|
bindStartChange(e){ |
|
this.forNowStartValue = e.detail.value |
|
console.log('开始时间',this.forNowStartValue) |
|
}, |
|
//结束选择 |
|
bindEndChange(e){ |
|
this.forNowEndValue = e.detail.value |
|
console.log('结束时间',this.forNowEndValue) |
|
}, |
|
/** |
|
* 关闭弹窗 |
|
*/ |
|
close() { |
|
this.timeMaskShow = false |
|
this.$nextTick(() => { |
|
setTimeout(() => { |
|
this.isShow = false |
|
this.$emit('close') |
|
}, 300) |
|
}) |
|
}, |
|
/** |
|
* 确认按钮 |
|
*/ |
|
confirm() { |
|
if(this.typeIndex==0){ |
|
this.typeIndex = 1 |
|
}else{ |
|
if(this.forNowStartValue.length != 0){ |
|
this.startValue = this.forNowStartValue |
|
} |
|
if(this.forNowEndValue.length != 0){ |
|
this.endValue = this.forNowEndValue |
|
} |
|
let startTime = this.years[this.startValue[0]] + '-' + this.$.dealTimeLength(this.months[this.startValue[1]]) + '-' + this.$.dealTimeLength(this.days[this.startValue[2]]) |
|
let endTime = this.years[this.endValue[0]] + '-' + this.$.dealTimeLength(this.months[this.endValue[1]]) + '-' + this.$.dealTimeLength(this.days[this.endValue[2]]) |
|
if(this.checkTime(startTime,endTime)){ |
|
let timeDatas = { |
|
startTime:startTime, |
|
endTime:endTime, |
|
} |
|
this.$emit('confirm',timeDatas) |
|
this.close() |
|
}else{ |
|
this.$.toast('结束时间要大于开始时间') |
|
} |
|
|
|
} |
|
}, |
|
/** |
|
* 打开日历弹窗 |
|
*/ |
|
open() { |
|
this.getDateData() |
|
this.typeIndex = 0 |
|
this.isShow = true |
|
this.$nextTick(() => { |
|
setTimeout(() => { |
|
this.timeMaskShow = true |
|
}, 50) |
|
}) |
|
}, |
|
//栏目选择 |
|
handleType(index){ |
|
if(this.typeIndex == 0 && index == 1){ |
|
if(this.startTime && this.endTime){ |
|
if(this.startTime && this.endTime){ |
|
let startTimeArr = this.startTime.split('-') |
|
let endTimeArr = this.endTime.split('-') |
|
let startData = { |
|
year:startTimeArr[0], |
|
month:startTimeArr[1], |
|
day:startTimeArr[2], |
|
} |
|
let endData = { |
|
year:endTimeArr[0], |
|
month:endTimeArr[1], |
|
day:endTimeArr[2], |
|
} |
|
this.dealChoose({},endData) |
|
}else{ |
|
this.getDateData() |
|
} |
|
}else{ |
|
this.endValue = [this.years.indexOf(this.currYear),this.currMonth - 1,this.currDay - 1] |
|
} |
|
} |
|
this.typeIndex = index |
|
} |
|
}, |
|
watch:{ |
|
num(){ |
|
if(this.startTime && this.endTime){ |
|
let startTimeArr = this.startTime.split('-') |
|
let endTimeArr = this.endTime.split('-') |
|
let startData = { |
|
year:startTimeArr[0], |
|
month:startTimeArr[1], |
|
day:startTimeArr[2], |
|
} |
|
let endData = { |
|
year:endTimeArr[0], |
|
month:endTimeArr[1], |
|
day:endTimeArr[2], |
|
} |
|
this.dealChoose(startData,endData) |
|
}else{ |
|
this.getDateData() |
|
} |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.time_mask { |
|
position: fixed; |
|
bottom: 0; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
background-color: $uni-bg-color-mask; |
|
transition-property: opacity; |
|
transition-duration: 0.3s; |
|
opacity: 0; |
|
/* #ifndef APP-NVUE */ |
|
z-index: 99; |
|
/* #endif */ |
|
} |
|
.yx_time_slot{ |
|
background-color: #FFFFFF; |
|
width: 100%; |
|
height: 750rpx; |
|
position: fixed; |
|
bottom: calc(var(--window-bottom)); |
|
left: 0; |
|
right: 0; |
|
z-index: 99; |
|
transition-property: transform; |
|
transition-duration: 0.3s; |
|
transform: translateY(460px); |
|
.time_top_box{ |
|
width: 100%; |
|
height: 80rpx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
.time_close,.time_comfirm{ |
|
width: 100rpx; |
|
color: #999999; |
|
font-size: 28rpx; |
|
font-weight: 400; |
|
text-align: center; |
|
} |
|
.time_comfirm{ |
|
color: #4360F7; |
|
} |
|
.time_text{ |
|
flex: 1; |
|
font-size: 30rpx; |
|
font-weight: 800; |
|
text-align: center; |
|
} |
|
} |
|
} |
|
.uni-timer-mask-show{ |
|
opacity: 1; |
|
} |
|
/* 从下往上弹窗动画 */ |
|
.fadelogIn1 { |
|
// -webkit-animation: fadelogIn 0.5s; |
|
// animation: fadelogIn 0.5s; |
|
transform: translateY(0); |
|
} |
|
.typelist{ |
|
width: 100%; |
|
height: 70rpx; |
|
display: flex; |
|
align-items: center; |
|
.typeobj{ |
|
width: 158rpx; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: center; |
|
align-items: center; |
|
.text{ |
|
height: 65rpx; |
|
line-height: 65rpx; |
|
font-size: 28rpx; |
|
color: #333333; |
|
} |
|
.line{ |
|
width: 1rpx; |
|
height: 5rpx; |
|
} |
|
} |
|
.typeobj_hover{ |
|
.text{ |
|
font-weight: 600; |
|
} |
|
.line{ |
|
width: 88rpx; |
|
transition: width .5s; |
|
background-color: #4360F7; |
|
} |
|
} |
|
} |
|
.yx_timer_sel{ |
|
width: 100%; |
|
margin-top: 38rpx; |
|
.sel_swiper{ |
|
// width: 80%; |
|
// margin: 0 auto; |
|
height: 500rpx; |
|
} |
|
.sel_swiper-item{ |
|
height: 500rpx; |
|
.item { |
|
height: 50px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
text-align: center; |
|
} |
|
} |
|
} |
|
</style>
|
|
|