<template>
<view class="timeSelectBox" >
<uni-popup ref="popup" type="bottom">
<view class="timeBOx">
<view class="time-select-popup">
<view class="time-select-popup-header clearfix">
<view class="h4">查看预约时间</view>
<span class="cancle-text color-lightgray" @click="close()">取消</span>
</view>
<view class="time-select-popup-body">
<view class="time-select-popup-body-left">
<view class="time-select-popup-body-left-item" v-for="(timeItem,index) in timeList" :class="{'selected':selectedDate===timeItem.date}" @click="selectTimeList(timeItem)">
<view style="width: 6rpx;height: 30rpx;background:#D53533;position: absolute;left: 0; top: 32rpx;" v-if="selectedDate===timeItem.date" :style="{background:'#'+themeColor}"></view> {{timeItem.date.substring(5)}}
</view>
</view>
<view class="time-select-popup-body-time">
<view class="time-select-popup-body-time-list">
<view v-for="(item) in timeItemList" :key="item.time"
class="time-select-popup-body-time-ltem"
@click="selectTime(`${selectedDate} ${item.time}`,item.type)">
<view class="time-select-popup-body-time-ltem-body"
:class="{'not':item.type!==1,'select':selectedTime===`${selectedDate} ${item.time}`}">
<view class="time1">{{item.time}}</view>
<view class="time2">{{item.type===1?'可预约':item.type===2?'已约满':'已过期'}}</view>
</view>
</view>
</view>
<view style="height: 120rpx;"></view>
</view>
</view>
<view class="time-select-popup-body-button fenxiang newcsbtn" style="width: 100%" :style="{background:'#'+themeColor}" @click="handleSelect">完成</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
export default {
props:['timedata','themeColor','stationID'],
data() {
return {
show: false,
loading: false,
timeList: [],
timeItemList: [],
selectedTime: '',
selectedDate: '',
themeColor:'',
}
},
onLoad(opt) {
},
onShow() {
//this.themeColor = uni.getStorageSync("themeColor");
//console.log("444"+this.themeColor)
},
methods: {
handleSelect(){
this.$emit('changeTime', this.selectedTime);
this.$refs.popup.close();
},
close(){
this.$refs.popup.close();
this.selectedTime=''
},
open(){
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
this.$refs.popup.open('bottom');
this.getOrderTimes()
},
selectTimeList (time) {
console.log(time)
this.timeItemList = time.timeList || []
this.selectedDate = time.date
},
selectTime (time, type) {
if (type !== 1) {
return
}
this.selectedTime = time
},
getOrderTimes(){
uni.showLoading({
title: '加载中'
});
var yyshopInfo = uni.getStorageSync("yyshopInfo");
if(this.stationID){
var cs={
shopId:yyshopInfo.id,
stationID:this.stationID
}
}else{
var cs={
shopId:yyshopInfo.id,
}
}
this.$http('opendetail/getOrderTimes', cs, 'GET').then(res => {
uni.hideLoading();
this.timeList = res.data || []
if (!this.timeList[0]) return
this.timeItemList = this.timeList[0].timeList || []
this.selectedDate = this.timeList[0].date || ''
})
}
}
}
</script>
<style scoped lang="less">
.timeSelectBox{
}
.timeBOx{
width: 750rpx;
height: 55vh;
position: fixed;
bottom: 0;
left: 0;
}
.time-select-popup .time-select-popup-body .time-select-popup-body-time .time-select-popup-body-time-list .time-select-popup-body-time-ltem .time-select-popup-body-time-ltem-body.select{
color: #FF7D30;
}
.time-select-popup-header {
position: relative;
border-bottom: 1px solid #EEEEEE;
padding-top: 10rpx;
height: 90rpx;
line-height: 90rpx;
border-radius: 24rpx 24rpx 0px 0px;
overflow: hidden;
background: #fff;
.h4 {
font-size: 32rpx;
color: #333333;
font-weight: 500;
padding-left: 24rpx;
}
.cancle-text {
position: absolute;
right: 5%;
line-height: 90rpx;
font-size: 28rpx;
color: #999999;
top: 0;
}
}
.time-select-popup-body{
display: flex;
background: #fff;
}
.time-select-popup-body-left{
height: calc(50vh - 120rpx);
overflow-y: auto;
width: 200rpx;
}
.time-select-popup-body-left-item{
width: 168rpx;
height: 94rpx;
display: block;
font-size:26rpx;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(102,102,102,1);
padding-left: 25rpx;
line-height:94rpx;
background:rgba(250,250,250,1);
border-bottom:1px solid rgba(238,238,238,1);
position: relative;
&.selected{
font-size:26rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(51,51,51,1);
background:rgba(255,255,255,1);
&:before{
/* display: block;
content: '';
width: 6rpx;
height: 30rpx;
background:#D53533;
position: absolute;
left: 0;
top: 32rpx; */
}
}
}
.time-select-popup-body-time {
width: 578rpx;
.time-select-popup-body-time-list {
display: flex;
align-content: flex-start;
flex-wrap: wrap;
align-items:baseline;
background-color: rgb(255, 255, 255);
height:calc(50vh - 120rpx);
overflow-y: auto;
.time-select-popup-body-time-ltem{
width: 33.3% ;
padding: 20rpx;
box-sizing: border-box;
text-align: center;
.time-select-popup-body-time-ltem-body{
padding-top: 12px;
color: rgb(153, 153, 153);
border-radius: 10rpx;
height: 80rpx;
border: 2rpx solid #DDDDDD;
}
.time-select-popup-body-time-ltem-body.not{
background-color: #F7F7F7;
height: 80rpx;
border: 2rpx solid #DDDDDD;
cursor: no-drop;
}
.time-select-popup-body-time-ltem-body.select{
background-color: rgb(255, 255, 255);
height: 80rpx;
border: 1px solid #FF0000;
color:#D53533 !important;
position: relative;
&:before{
position: absolute;
content: '';
display: block;
background: url("http://dmsphoto.66km.com.cn/thFiles/5F4D0178-AB5D-491F-906C-414AFDC84FF1.png") 100% 0 no-repeat;
background-size: contain;
top: -2rpx;
right: -2rpx;
height: 50rpx;
width: 50rpx;
}
}
}
}
}
.time1{
font-size: 24rpx;
}
.time2{
font-size: 24rpx;
}
.timeSelect--select .time1{
color: #FF0000;
}
.timeSelect--select .time2{
color: #FF0000;
}
.time-select-popup-body-button{
position: fixed;
bottom: 0;
left: 0;
width: 750rpx;
color: #ffffff;
height: 100rpx;
line-height: 100rpx;
background: #D53533;
font-size: 32rpx;
text-align: center;
}
</style>