wxThird/components/timeSelect/timeSelect.vue

<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>