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.
198 lines
3.6 KiB
198 lines
3.6 KiB
<template>
|
|
<van-popup
|
|
v-model:show="showBottom"
|
|
round
|
|
position="bottom"
|
|
@close="close"
|
|
:style="{ height: '75%' }"
|
|
>
|
|
|
|
<view class="box">
|
|
|
|
<view class="title">
|
|
{{ title }}
|
|
</view>
|
|
|
|
<view class="date-list">
|
|
<view class="date-item"
|
|
v-for="(item, index) in dateList"
|
|
@click="selectDate(item, index)">
|
|
<view>
|
|
{{ item.format('dddd') }}
|
|
</view>
|
|
<view :class="{act : i == index}">
|
|
{{ item.format('MM-DD') }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view style="display: flex;justify-content: center;" v-if="loading">
|
|
<van-loading />
|
|
</view>
|
|
|
|
<view class="time-list" v-else-if="timeList.length">
|
|
<view class="time-content">
|
|
<view
|
|
:class="{'time-item' : true,
|
|
no : item.isDelete != 'Y' ||
|
|
isDelete({time : item, date : dateList[i]})}"
|
|
v-for="(item, index) in timeList"
|
|
@click="selectTime({time : item, date : dateList[i]})">
|
|
<view>
|
|
{{ item.timeName }}
|
|
</view>
|
|
<view class="status">
|
|
{{ item.isDelete != 'Y' ? '未开启' :
|
|
isDelete({time : item, date : dateList[i]}) ? '过时' : '空闲'}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<van-empty v-else image="/static/empty/data.png" image-size="400rpx">
|
|
<template #description>
|
|
<view style="color: white;">
|
|
暂无服务时间数据
|
|
</view>
|
|
</template>
|
|
</van-empty>
|
|
|
|
</view>
|
|
|
|
</van-popup>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name:"selectTime",
|
|
props : ['show', 'title', 'dateList', 'timeList', 'loading'],
|
|
|
|
data() {
|
|
return {
|
|
showBottom : false,
|
|
i : 0
|
|
};
|
|
},
|
|
onShow(){
|
|
this.getAddressList();
|
|
},
|
|
methods : {
|
|
isDelete(e){
|
|
let day = e.date.format('YYYY-MM-DD')
|
|
let selectTime = this.dayjs(`${day} ${e.time.timeName}`)
|
|
let nowTime = this.dayjs()
|
|
|
|
if(selectTime.isBefore(nowTime)){
|
|
return true
|
|
}
|
|
|
|
if(e.time.isDelete != 'Y'){
|
|
return true
|
|
}
|
|
|
|
return false
|
|
},
|
|
selectTime(e){
|
|
if(this.isDelete(e)){
|
|
return
|
|
}
|
|
this.$emit('select', e)
|
|
},
|
|
selectDate(e, index){
|
|
this.i = index
|
|
this.$emit('selectDate', e)
|
|
},
|
|
close(){
|
|
this.$emit('close')
|
|
}
|
|
},
|
|
watch: {
|
|
show: {
|
|
handler (newValue, oldValue) {
|
|
this.showBottom = newValue
|
|
},
|
|
immediate: true
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.box{
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(#57CAA0, #55B16E);
|
|
box-sizing: border-box;
|
|
padding: 40rpx;
|
|
.title{
|
|
font-size: 32rpx;
|
|
text-align: center;
|
|
color: #fff;
|
|
}
|
|
.date-list{
|
|
display: flex;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
overflow-x: scroll;
|
|
padding: 30rpx 0;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
.date-item{
|
|
flex-shrink: 0;
|
|
padding: 0 10rpx;
|
|
&>view{
|
|
padding: 6rpx 10rpx;
|
|
}
|
|
.act{
|
|
background-color: #fff;
|
|
color: #55B16E;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.time-list{
|
|
width: 100%;
|
|
font-size: 24rpx;
|
|
overflow: hidden;
|
|
height: calc(100% - 200rpx);
|
|
overflow-y: scroll;
|
|
.time-content{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.time-item{
|
|
padding: 10rpx;
|
|
background-color: #fff;
|
|
width: calc(25% - 20rpx);
|
|
box-sizing: border-box;
|
|
margin: 10rpx;
|
|
border-radius: 16rpx;
|
|
|
|
view{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.status{
|
|
color: #56BD86;
|
|
}
|
|
&.no{
|
|
background-color: #E4E4E4;
|
|
color: #CCCCCC;
|
|
.status{
|
|
color: #EBA44B;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.act{
|
|
background-color: #fff;
|
|
color: #55B16E;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|