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.
462 lines
12 KiB
462 lines
12 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="yx_timer_sel"> |
|
<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-column> |
|
<view class="item FontS_24rpx" v-for="(item,index) in timeHour" :key="index">{{item}}时</view> |
|
</picker-view-column> |
|
<picker-view-column> |
|
<view class="item FontS_24rpx" v-for="(item,index) in timeMin" :key="index">{{item}}分</view> |
|
</picker-view-column> |
|
</picker-view> |
|
</view> |
|
|
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
name:"one-date-choose-y-m-d-h-m", |
|
props: { |
|
title: { |
|
type: String, |
|
default: () => { |
|
return "选择时间"; |
|
} |
|
}, |
|
nowTime:{ |
|
type: String, |
|
default: () => { |
|
return ""; |
|
} |
|
}, |
|
num:{ |
|
type: Number, |
|
default: () => { |
|
return 0; |
|
} |
|
} |
|
}, |
|
data() { |
|
return { |
|
$:this.$, |
|
timeMaskShow:false,//遮罩 |
|
isShow:false,//显示 |
|
typeIndex:0,//下标 |
|
startValue:[0,0,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], |
|
timeHour:[], |
|
timeMin:[],//分钟可选项 |
|
// 日期数组 |
|
years:[], |
|
months:[], |
|
days:[], |
|
// 当前选中 |
|
currYear:'', |
|
currMonth:'', |
|
currDay:'', |
|
currHour:'', |
|
currMin:'', |
|
// 改变选择时 |
|
year:'', |
|
month:'', |
|
day:'', |
|
hour:'', |
|
min:'', |
|
// 星期几 |
|
type:'', // 类型 |
|
courtyardData:'', |
|
}; |
|
}, |
|
mounted() { |
|
}, |
|
methods: { |
|
// 处理选中 |
|
dealChoose(year,month,day,hour,min){ |
|
let daysNum = 31 |
|
let monthNumArr = [1,3,5,7,8,10,12] |
|
let date = new Date() |
|
let years = [] |
|
let currYear = Number(year) |
|
let months = [] |
|
let currMonth = Number(month) |
|
if(currMonth != 2 && monthNumArr.indexOf(currMonth) != -1){ |
|
daysNum = 31 |
|
} |
|
if(currMonth != 2 && monthNumArr.indexOf(currMonth) == -1){ |
|
daysNum = 30 |
|
} |
|
let days = [] |
|
let currDay = day |
|
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) |
|
} |
|
//获取时分 |
|
let timeHour = [] |
|
let timeMin = [] |
|
for (let i = 0; i < 24; i++) { |
|
timeHour.push(this.formatNumber(i)) |
|
} |
|
for (let i = 0; i < 60; i++) { |
|
timeMin.push(this.formatNumber(i)) |
|
} |
|
let currHour = hour |
|
let currMin = min |
|
this.currYear = currYear |
|
this.currMonth = currMonth |
|
this.currDay = currDay |
|
this.currHour = Number(currHour) |
|
this.currMin = Number(currMin) |
|
this.years = years |
|
this.months = months |
|
this.days = days |
|
this.timeHour = timeHour |
|
this.timeMin = timeMin |
|
console.log('this.years.indexOf(this.currYear)',this.years.indexOf(this.currYear)) |
|
console.log('this.years.indexOf(this.currYear)',this.currYear) |
|
this.startValue = [this.years.indexOf(this.currYear), this.currMonth - 1, this.currDay - 1,this.currHour, this.currMin] |
|
}, |
|
// 获取时间 |
|
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) |
|
} |
|
//获取时分 |
|
let timeHour = [] |
|
let timeMin = [] |
|
for (let i = 0; i < 24; i++) { |
|
timeHour.push(this.formatNumber(i)) |
|
} |
|
for (let i = 0; i < 60; i++) { |
|
timeMin.push(this.formatNumber(i)) |
|
} |
|
let currHour = date.getHours() |
|
let currMin = date.getMinutes() |
|
this.currYear = currYear |
|
this.currMonth = currMonth |
|
this.currDay = currDay |
|
this.currHour = Number(currHour) |
|
this.currMin = Number(currMin) |
|
this.years = years |
|
this.months = months |
|
this.days = days |
|
this.timeHour = timeHour |
|
this.timeMin = timeMin |
|
this.startValue = [this.years.indexOf(this.currYear), this.currMonth - 1, this.currDay - 1,this.currHour, this.currMin] |
|
}, |
|
// 重新处理天数 |
|
getDayAgain(dateArr){ |
|
if((this.years[dateArr[0]] == this.currYear) && (this.months[dateArr[1]] == this.currMonth) && (this.days[dateArr[2]] == this.currDay) && (this.timeHour[dateArr[3]] == this.currHour) && (this.timeMin[dateArr[4]] == this.currMin)){ |
|
return |
|
} |
|
this.year = this.years[dateArr[0]] |
|
this.month = this.months[dateArr[1]] |
|
this.day = this.days[dateArr[2]] |
|
this.hour = this.days[dateArr[3]] |
|
this.min = this.days[dateArr[4]] |
|
let daysNum = 31 |
|
let monthNumArr = [1,3,5,7,8,10,12] |
|
const days = [] |
|
if(this.month == 2){ |
|
if(this.year%4 == 0){ |
|
daysNum = 29 |
|
this.day = 29 |
|
}else{ |
|
daysNum = 28 |
|
this.day = 28 |
|
} |
|
} |
|
if(this.month != 2 && monthNumArr.indexOf(this.month) != -1){ |
|
daysNum = 31 |
|
} |
|
if(this.month != 2 && monthNumArr.indexOf(this.month) == -1){ |
|
daysNum = 30 |
|
if(this.day > 30){ |
|
this.day = 30 |
|
} |
|
} |
|
//获取时分 |
|
let timeHour = [] |
|
let timeMin = [] |
|
for (let i = 0; i < 24; i++) { |
|
timeHour.push(this.formatNumber(i)) |
|
} |
|
for (let i = 0; i < 60; i++) { |
|
timeMin.push(this.formatNumber(i)) |
|
} |
|
for (let i = 1; i <= daysNum; i++) { |
|
days.push(i) |
|
} |
|
this.timeHour = timeHour |
|
this.timeMin = timeMin |
|
this.days = days |
|
}, |
|
// 判断开始时间是否小于结束时间 |
|
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 |
|
this.getDayAgain(e.detail.value) |
|
console.log('开始时间',this.forNowStartValue) |
|
}, |
|
/** |
|
* 关闭弹窗 |
|
*/ |
|
close() { |
|
this.timeMaskShow = false |
|
this.$nextTick(() => { |
|
setTimeout(() => { |
|
this.isShow = false |
|
this.$emit('close') |
|
}, 300) |
|
}) |
|
}, |
|
/** |
|
* 确认按钮 |
|
*/ |
|
confirm() { |
|
if(this.forNowStartValue.length != 0){ |
|
this.startValue = this.forNowStartValue |
|
} |
|
let startTime = this.years[this.startValue[0]] + '-' + this.$.dealTimeLength(this.months[this.startValue[1]]) + '-' + this.$.dealTimeLength(this.days[this.startValue[2]]) + ' ' + this.$.dealTimeLength(this.timeHour[this.startValue[3]]) + ':' + this.$.dealTimeLength(this.timeMin[this.startValue[4]]) |
|
this.$emit('confirm',startTime) |
|
this.close() |
|
}, |
|
/** |
|
* 打开日历弹窗 |
|
*/ |
|
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.$.getData('endTimeTZ')){ |
|
this.endValue = this.$.getData('endTimeTZ') |
|
}else { |
|
this.endValue = [this.years.indexOf(this.currYear),this.currMonth - 1,this.currDay - 1,this.currHour + 1,this.currMin] |
|
} |
|
} |
|
this.typeIndex = index |
|
} |
|
}, |
|
watch:{ |
|
num(){ |
|
// 默认选中时间 |
|
if(this.nowTime){ |
|
let timeArr = this.nowTime.split(' ') |
|
console.log('timeArr',timeArr) |
|
let date = timeArr[0] |
|
let time = timeArr[1] |
|
let year = date.split('-')[0] |
|
let month = date.split('-')[1] |
|
let day = date.split('-')[2] |
|
let hour = time.split(':')[0] |
|
let min = time.split(':')[1] |
|
this.dealChoose(year,month,day,hour,min) |
|
}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>
|
|
|