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.
320 lines
7.4 KiB
320 lines
7.4 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_26rpx" v-for="(item,index) in timeHour" :key="index">{{item}}时</view> |
|
</picker-view-column> |
|
<picker-view-column> |
|
<view class="item FontS_26rpx" v-for="(item,index) in timeMin" :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_26rpx" v-for="(item,index) in timeHour" :key="index">{{item}}时</view> |
|
</picker-view-column> |
|
<picker-view-column> |
|
<view class="item FontS_26rpx" v-for="(item,index) in timeMin" :key="index">{{item}}分</view> |
|
</picker-view-column> |
|
</picker-view> |
|
</view> |
|
</swiper-item> |
|
</swiper> |
|
</view> |
|
|
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
name:"time_slot", |
|
props: { |
|
title: { |
|
type: String, |
|
default: () => { |
|
return "选择上下班时间"; |
|
} |
|
}, |
|
num: { |
|
type: Number, |
|
default: () => { |
|
return 0; |
|
} |
|
}, |
|
chooseTime: { |
|
type: String, |
|
default: () => { |
|
return ""; |
|
} |
|
}, |
|
}, |
|
data() { |
|
return { |
|
$:this.$, |
|
timeMaskShow:false,//遮罩 |
|
isShow:false,//显示 |
|
typeList:["上班时间","下班时间"], |
|
typeIndex:0,//下标 |
|
startValue:[0,0],//默认下标，00时 00分 |
|
endValue:[0,0],//默认下标，00时 00分 |
|
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:[],//分钟可选项 |
|
}; |
|
}, |
|
mounted() { |
|
}, |
|
methods: { |
|
//看看是不是有两位数 |
|
formatNumber(n) { |
|
if(Number(n) < 10){ |
|
return '0' + n |
|
} |
|
return n |
|
}, |
|
//开始选择 |
|
bindStartChange(e){ |
|
this.startValue = e.detail.value |
|
}, |
|
//结束选择 |
|
bindEndChange(e){ |
|
this.endValue = e.detail.value |
|
}, |
|
/** |
|
* 关闭弹窗 |
|
*/ |
|
close() { |
|
this.timeMaskShow = false |
|
this.$nextTick(() => { |
|
setTimeout(() => { |
|
this.isShow = false |
|
this.$emit('close') |
|
}, 300) |
|
}) |
|
}, |
|
/** |
|
* 确认按钮 |
|
*/ |
|
confirm() { |
|
if(this.typeIndex==0){ |
|
this.endValue = [this.startValue[0]+1,0] |
|
this.typeIndex = 1 |
|
}else{ |
|
if(this.startValue[0]<this.endValue[0] || (this.startValue[0]==this.endValue[0]&&this.startValue[1]<this.endValue[1])){ |
|
var time = [ |
|
this.timeHour[this.startValue[0]] + ':' + this.timeMin[this.startValue[1]], |
|
this.timeHour[this.endValue[0]] + ':' + this.timeMin[this.endValue[1]], |
|
] |
|
this.$emit('confirm',time) |
|
this.close() |
|
}else{ |
|
this.$.toast('结束时间要大于开始时间') |
|
} |
|
|
|
} |
|
}, |
|
/** |
|
* 打开日历弹窗 |
|
*/ |
|
open() { |
|
this.typeIndex = 0 |
|
this.isShow = true |
|
this.$nextTick(() => { |
|
setTimeout(() => { |
|
this.timeMaskShow = true |
|
}, 50) |
|
}) |
|
}, |
|
//栏目选择 |
|
handleType(index){ |
|
if(index != this.typeIndex){ |
|
if(index == 1){ |
|
if(this.chooseTime == ''){ |
|
this.endValue = [this.startValue[0]+1,0] |
|
} |
|
} |
|
this.typeIndex = index |
|
} |
|
} |
|
|
|
}, |
|
watch:{ |
|
num(){ |
|
//获取时分 |
|
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)) |
|
} |
|
this.timeHour = timeHour |
|
this.timeMin = timeMin |
|
if(this.chooseTime != ''){ |
|
var timeArr = this.chooseTime.split('-') |
|
var start = timeArr[0] |
|
var end = timeArr[1] |
|
var startHour = start.split(':')[0] |
|
var startMin = start.split(':')[1] |
|
var endHour = end.split(':')[0] |
|
var endMin = end.split(':')[1] |
|
for(let a = 0; a < this.timeHour.length; a++){ |
|
if(startHour == this.timeHour[a]){ |
|
this.startValue[0] = a |
|
} |
|
if(endHour == this.timeHour[a]){ |
|
this.endValue[0] = a |
|
} |
|
} |
|
for(let a = 0; a < this.timeMin.length; a++){ |
|
if(startMin == this.timeMin[a]){ |
|
this.startValue[1] = a |
|
} |
|
if(endMin == this.timeMin[a]){ |
|
console.log('a',a) |
|
this.endValue[1] = a |
|
} |
|
} |
|
} |
|
} |
|
}, |
|
}; |
|
</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; |
|
z-index: 9999; |
|
/* #ifndef APP-NVUE */ |
|
/* #endif */ |
|
} |
|
.yx_time_slot{ |
|
background-color: #FFFFFF; |
|
width: 100%; |
|
height: 750rpx; |
|
position: fixed; |
|
bottom: calc(var(--window-bottom)); |
|
left: 0; |
|
right: 0; |
|
z-index: 99999; |
|
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>
|
|
|