recycapp/components/appointTime.vue

<template> 
	<view class="content">
		<u-popup :show="dateShow" @open="open" :round="30">
			<view class="popBox">
				<view class="flex-between" style="padding: 0 49rpx;">
					<text class="cancleTitle">预约上门时间</text>
					<u-icon name="close" color="#333333" size="16" bold @click="close"></u-icon>
				</view>
				<view class="tipLabel">请确保您与客户联系确认过上门服务时间哦~</view>
				<view class="flex-between">
					<view class="leftBox">
						<view @click="leftClick(index)" class="leftEle flex-center" :class="{checkLeft: leftIndex==index}" v-for="(item,index) in yuyue_time[0]">
							{{item}}
						</view>
					</view>
					<view class="rightBox">
						<view @click="rightClick(index)" class="rightEle" v-for="(item,index) in rightList">
							{{item}}
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		components: {   },
		data() {
			return { 
				useraddress:{},
				id:0, 
				xieyi:'',
				address_id:0,
				weight:-1 ,
				typeinfo:'',
				detail:[],
				remark:'',
				weightlist:[],
				index:[0,0],
				timeflag:'',
				yuyue_time:[],
				dateShow: false,
				leftIndex: 0,
				rightList: []
			}
		},
		onShow() {
			 this.getdata()
			 let user_address = uni.getStorageSync('user_address');  
		 
			 if (user_address) {
			 	this.useraddress = user_address;
			 	this.address_id = user_address.id;  
			 	uni.removeStorageSync('user_address');  
			 }
		},
		onHide() {  
		},
		mounted(){
			console.log('ddddddddddff')
			this.getdata()
		},
		onLoad(options) { 
			console.log('dddddddddd')
			this.id = options.id;
			 this.getdata()
			 
			
			var token = uni.getStorageSync('userToken');  
			if (token) {
				this.userDefaultaddress(); 
			}
			
		}, 
		onReachBottom (){
			 
		},
		methods: {  
			open(){
				this.dateShow = true;
			},
			close(){
				this.dateShow = false;
			},
			leftClick(num){
				this.leftIndex = num
				// let arr = this.rightList
				// this.rightList = []
				// setTimeout(()=>{
				// 	this.rightList = arr
				// },50)
			},
			rightClick(index){
				// this.$emit('checkTime',{
				// 	date:this.yuyue_time[0][this.leftIndex],
				// 	time: this.rightList[index]
				// })
				this.$emit('checkTime',this.yuyue_time[0][this.leftIndex]+'-'+this.rightList[index])
				this.dateShow = false
			},
			userDefaultaddress() {
				this.$api.userDefaultAddress({}, res => {
					if (res.code ==1) {
						if(res.data){
							this.useraddress = res.data;
							this.address_id = this.useraddress.id;
						}
						
					}
				});
			},
			goAddress() {
				var token = uni.getStorageSync('userToken');  
				if (!token) {
					uni.navigateTo({
						url: '/pages/login/login'
					});  
				}else{
					uni.navigateTo({
						url: '/pages/address/list?type=order'
					});
				} 
			}, 
			toshow() {
				this.$refs.lvvpopref.show();
			}, 
			toclose() { 
				this.$refs.lvvpopref.close();
			},
			changeWeight(e){
				this.weight=e;console.log(e);
			}, 
			bindPickerChange(e) { 
				this.index = e.detail.value
				let left = e.detail.value[0]
				let right = e.detail.value[1] 
				if(this.yuyue_time[1].length ==0){ 
					this.timeflag = this.yuyue_time[0][left]    
				}else{ 
					this.timeflag = this.yuyue_time[0][left] +'-'+this.yuyue_time[1][right] 
				}
			},
			getdata(){
				let data = {
					id:this.id
				}
				this.$api.typeinit(data,res=>{ 
					if(res.code == '1'){
						this.yuyue_time = res.data.yuyue_time
						this.rightList = res.data.yuyue_time[1]
						this.typeinfo= res.data.typeinfo
						this.weightlist= res.data.weight
						this.detail= res.data.detail  
						this.xieyi=res.data.xieyi 
					}
				})
			},
			createOrder(){ 
				  if(this.weight =='-1'){ 
					  uni.showToast({	icon: "none",	title: '请选择预约重量'     }) 
					 return false;
				}if(this.address_id ==0 || !this.address_id ){ 
					  uni.showToast({	icon: "none",	title: '请选择回收地址'     })  
						return false;
				} if(this.timeflag ==''){ 
					  uni.showToast({	icon: "none",	title: '请选择回收时间'    })  
					return false;
				} 
				let data = {
					id:this.id,
					order_time:this.timeflag,
					weight:this.weightlist[this.weight],
					address_id:this.address_id,
					remark:this.remark,
				}
				this.$api.addorder(data,res=>{ 
					uni.showToast({
						title: res.msg,
						icon: 'none'
					}) 
					if(res.code == '1'){
						 
						setTimeout(function() {
							uni.switchTab({
								url: '/pages/order/order'
							})
						}, 1500)
					} else {
						 
					}
				})
			}, 
		}
	}
</script>

<style lang="scss">
	page {
	    background: #eee;
	}
	.popBox{
		padding: 58rpx 0 0;
	}
	.tipLabel{
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		padding: 0 49rpx;
		margin-top: 10rpx;
		margin-bottom: 20rpx;
	}
	.leftBox{
		width: 250rpx;
		.leftEle{
			width: 100%;
			height: 120rpx;
			background: #F1F1F1;
			font-weight: 500;
			font-size: 30rpx;
			color: #000000;
		}
	}
	.rightBox{
		flex: 1;
		height: 720rpx;
		overflow: auto;
		.rightEle{
			width: 100%;
			height: 120rpx;
			line-height: 120rpx;
			padding-left: 88rpx;
		}
	}
	.checkLeft{
		background: #fff!important;
	}
</style>