配送时间选择器（uniapp）

直接上干货！！！

子组件代码：

//distributionBox.vue
<uni-popup ref="popup" type="bottom">
    <view class="pBoxUp">			
        <view class="textCenter f32 psTitle border-bottom">
            请选择配送时间
        </view>
        <view class="shopPopup bgff justify-between default-flex">
            <view class="f30 t666 lBox">
                <view v-for="(item,index) in jmhDay" @click="selectLDate(item)" :class="sLDate==item.formatDate?'ed':''" class="boxLDate" 
                    :key="index">{{item.desc}}({{item.name}})
                </view>
            </view>
            <view  >
                <view v-for="(item,index) in timeList" @click="selectRDate(item)" 
                    :class="[sRightDate==item.time?'ed':'',item.disabled?'disabled':'']" :key="index" class="rBox"
                    >
                    {{item.time}}{{item.disabled?' (超出配送时间)':''}}
                </view>
                <view class="empty f28 text-center" style="color: #999;margin-top: 40rpx;" 
                v-if="timeList.length<1">
                    今天没有时间了,看看明天吧
                </view>	
            </view>
        </view>
        <view class="cancelButton" @click="close()">
            取消
        </view>	
    </view>	 
</uni-popup>

<script>
	import {getDate} from '@/static/utils/utils.js'
	export default {
		name:"distributionBox", 
		data() {
			return {
				sendTime:'',
				sRightDate:'',
				sLDate:'',
				jmhDay:'',
				timeList:[
				   {disabled:false,time:'11:00-13:00', id:1},
				   {disabled:false,time:'13:00-15:00', id:2},
				   {disabled:false,time:'15:00-17:00', id:3},
				   {disabled:false,time:'17:00-19:00',id:4},
				   {disabled:false,time:'19:00-21:00',id:5},
				   {disabled:false,time:'21:00-23:00',id:6}
				],
			};
		},
		methods:{ 
			close(){
				this.$refs.popup.close();
			},
			getWeekDate(day){
				var weeks = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六"); 
				var week = weeks[day]; 
				return week;
			}, 
			//获取当前日期的下一天日期
			getNextDay(){  
				var day=this.getWeekDate(new Date().getDay());
				var newDate = /\d{4}-\d{1,2}-\d{1,2}/g.exec(new Date()) 
				var isDay=getDate().fullDate; 
				var nextDay= this.getWeekDate(new Date(new Date().getTime() + 24 * 60 * 60 * 1000).getDay());
				var nDate=getDate(new Date(new Date().getTime()+ 24 * 60 * 60 * 1000)).fullDate;
				console.log(nDate);
				var HDay=this.getWeekDate(new Date(new Date().getTime() + 48 * 60 * 60 * 1000).getDay());
				var hDate=getDate(new Date(new Date().getTime()+ 48 * 60 * 60 * 1000)).fullDate; 
				let d1=hDate.substr(hDate.indexOf('-')+1)   
				this.sLDate=isDay;
				this.selectLDate(1);
				this.jmhDay=[{name:day,id:1,formatDate:isDay,desc:'今天'},{name:nextDay,id:2,formatDate:nDate,desc:'明天'},
				{name:HDay,id:3,formatDate:hDate,desc:d1.substr(0,d1.indexOf('-'))+'月'+d1.substr(d1.indexOf('-')+1)+'日'}] 
			},
			showBox(){
				this.$refs.popup.open();
			},
			selectRDate(item){
				if(item.disabled){ 
					return;
				}
				this.sRightDate=item.time;
				this.sendTime=this.sLDate+" "+item.time;
				this.$refs.popup.close();
				this.$emit('update:getTime', this.sendTime)
			},
			selectLDate(val){
				console.log(val);
				if(val!=1){
					this.sLDate=val.formatDate;
				}
				let t=[{disabled:false,time:'11:00-13:00', id:1 },
					   {disabled:false,time:'13:00-15:00', id:2 },
					   {disabled:false,time:'15:00-17:00', id:3 },
					   {disabled:false,time:'17:00-19:00',id:4},
					   {disabled:false,time:'19:00-21:00',id:5},
					   {disabled:false,time:'21:00-23:00',id:6}]
				if(val.desc=='今天'||val==1){ 
					if(new Date().getHours()<=10){ 
						this.timeList=t;
					}else if(new Date().getHours()<=12){
						t[0].disabled=true;
						 this.timeList=t; 
					}else if(new Date().getHours()<=14){
						t[0].disabled=true;
						t[1].disabled=true;
						 this.timeList=t;  
					}else if(new Date().getHours()<=16){
						t[0].disabled=true;
						t[1].disabled=true;
						t[2].disabled=true;
						this.timeList=t;  
					}else if(new Date().getHours()<=18){
						t[0].disabled=true;
						t[1].disabled=true;
						t[2].disabled=true;
						t[3].disabled=true;
						this.timeList=t;
					}else if(new Date().getHours()<=20){
						t[0].disabled=true;
						t[1].disabled=true;
						t[2].disabled=true;
						t[3].disabled=true;
						t[4].disabled=true;
						this.timeList=t;
					} 
					console.log('最终的时间列表');
					console.log(this.timeList);
				}else{ 
					this.timeList=t;
				} 
				this.sRightDate='';
			},
		}
	}
</script>


<style lang="scss" scoped>
 .pBoxUp{
		background: #f5f5f5;
		.psTitle{
			line-height: 100rpx; 
			text-align: center;
			border-bottom: 1rpx solid #f7f7f7;
		}
		.shopPopup{
			backgound:#ffffff;
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;
		}
		.boxLDate{
			font-size: 24rpx;
			height:80rpx;
			line-height: 80rpx;
			width:273rpx;
			text-align: center;
		}
		.lBox{
			color:#666666;
			background: #f5f5f5;
			font-size: 30rpx;
		}
		.boxLDate.ed{
			color:#1DA337;
			background: #fff;
		}
		.rBox.ed{
			color:#1DA337;
		}
		.rBox{
			width: 239px;
			padding-left: 20rpx;
			font-size: 24rpx;
			color: #333;
			height:80rpx;
			background: #fff;
			line-height: 80rpx;
		}
		.cancelButton{
			font-size: 36rpx;
			color: #999;
			text-align: center;
			height: 100rpx;
			line-height: 100rpx; 
			border-top: 1px solid #e5e5e5;
			background: #FFF;
		}
	}
</style>

工具类：

//utils.js
 
export function getDate(date, AddDayCount = 0) {
  if (!date) {
    date = new Date()
  }
  if (typeof date !== 'object'){
    date = date.replace(/-/g, '/')
  }
  const dd = new Date(date)
  dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
  const y = dd.getFullYear()
  const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
  const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
  return {
    fullDate: y + '-' + m + '-' + d,
    year: y,
    month: m,
    date: d,
    day: dd.getDay()
  }
}

父组件代码：

<view class="align-center justify-between default-flex secondBox" @click="showTime">
     <view class="default-flex align-center">						
          <view class="lImg mr-2">
               <img src="https://yujia-shanghai-bucket.oss-cn-shanghai.aliyuncs.com/small-program/yvmuShop/hTime.png" alt="">
          </view>
          <view class="t666 f28">
               配送时间
          </view>	
     </view>	
     <view class="tDesc">
          <view class="sTime">{{sendTime}}</view>
          <view class="bj"  >
               <img src="https://yujia-shanghai-bucket.oss-cn-shanghai.aliyuncs.com/small-program/yvmuShop/timeEdit.png" alt="">
          </view>
     </view> 
</view>
<view>
    <distribution-box ref="dsbonBox" :getTime.sync='sendTime'></distribution-box>
</view>
 
 
<script>
   //代码在最上面的子组件那一行中
 import distributionBox from '@/components/distributionBox.vue'
 export default {
     components:{
          distributionBox
     },
     data() {
          return {
               sendTime:'',
          }
     },
    onShow(){
         this.$nextTick(()=>{ 
		    this.$refs.dsbonBox.getNextDay();
		 }) 
    },
     methods:{
          showTime(){ 
               this.$refs.dsbonBox.showBox();
          },
     }
 }
 
</script>



<style>
 .bgff{
     background:#ffffff;
 } 
 .justify-between{
     justify-content: space-between;
 } 
 .default-flex{
     display:flex;
 }
.align-center{
  align-items: center;
 
 }
 
.mr-2{
	margin-right: 20rpx;
}
.secondBox{
     padding: 20rpx 30rpx 20rpx 30rpx;
     img{
          width:100%!important;
          height:100%!important;
     }
     image{
          width:100%!important;
          height:100%!important;
     }
     .lImg{
          width: 36rpx;
          height:36rpx;			
     }
     .bj{
          width:30rpx;
          height:30rpx; 
     }
     .tDesc{
          font-size: 28rpx;
          display: flex;
          align-items: center;
          color: #666;
          .sTime{
               margin-right: 20rpx;
          }
     }
}

</style>