jp-charge/components/chargingGunSetup.vue

<template>
	<view>
		

		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#101010"></u-tabs>
		
		<u-modal v-model="show2" @confirm="submitApi()" :show-cancel-button='true' title="以下预约时段存在问题:" :confirm-text="'继续提交'" >
			<view style="padding: 15px;text-align: center;">
				<!-- <p style="padding-bottom: 10px;">以下预约时段存在问题:</p> -->
				<p v-for="(item,i) in errorlist" :key="i" >
					{{item.name}}{{item.value}}
				</p>
			</view>
		</u-modal>

	<u-select v-model="show" :title="'开始时间-结束时间'"
	mode="mutil-column-auto" :list="listmutilcolumnauto" :default-value="defaultTime" @confirm="confirm"></u-select>

		<!-- <udoublepicker v-model="show" 
		:defaultTime="defaultTime" 
		:defaultTime2="defaultTime2"
		 @confirm="confirm" ></udoublepicker> -->

<!-- 开放共享 -->
		<view class="" v-if="current==0">
			<view class="share-set" >
				<view class="title">
					开放共享
				</view>
				<view class="">
					<u-radio-group v-model="detail.enableShare" >
					
						<u-radio  v-for="(item, index) in list2" :key="index+'a'" :name="item.value"
							:disabled="item.disabled" active-color="#00b962">
					
							{{item.name}}
					
						</u-radio>
					
					</u-radio-group>
				</view>
			
			</view>
		
		</view>
		<!-- 预约设置 -->
		<view class="" v-if="current==1">
			<view class="share-set" >
				<view class="title">
					开放预约
				</view>
				<view class="">
					<u-radio-group  v-model="detail.enableAppointment" >
					
						<u-radio  v-for="(item, index) in list2" :key="index+'b'" :name="item.value"
							:disabled="item.disabled" active-color="#00b962">
					
							{{item.name}}
					
						</u-radio>
					
					</u-radio-group>
					
				</view>
			
			</view>
			<view class="share-set" >
				<view class="title">
					预约自动确认
				</view>
				<view class="">
					<u-radio-group  v-model="detail.autoConfirm" >
					
						<u-radio   v-for="(item, index) in list2" :key="index+'c'" :name="item.value"
							active-color="#00b962">
					
							{{item.name}}
					
						</u-radio>
					
					</u-radio-group>
					
				</view>
			
			</view>
			<!-- 预留时长选项 -->
			<view class="time-options">
				<view class="title">
					预留时长选项
				</view>
					<view class="radio-box">
						<u-checkbox-group  shape="square">
						
							<u-checkbox   v-for="(item, index) in timeList"
							 	v-model="item.checked"  @change="checkboxChange(item,$event)" 
								:key="index" :name="item.value"
								:disabled="item.disabled" active-color="#00b962">
						
								{{item.name}}
						
							</u-checkbox>
						</u-checkbox-group>
						
					</view>
			</view>
			 
		</view>
		
		<!-- 开发时间设置 -->
		<view class="main"  >
			<view class="title">
				{{current?'预约':'共享'}}时段 <span style="
					float: right;
					color: #53b56b;
					font-size: 14px;
				"
				@click="copy"
				v-show="current==1">
				<u-icon name="file-text"></u-icon>
				同步共享设置</span>
			</view>
			<view class="item" v-for="(item,i) in  weekSz" :key="i">
				<view class="switch">
					<view class="week">
						{{item}} <!-- {{weekOpenSz[i].lookcollect}} -->
					</view>
					<u-switch v-model="weekOpenSz[i].op" @change="change2($event,i)" size="40" active-color="#00b962"></u-switch>
				</view>
				
				<view class="frame-box"   v-for="(item2,index) in  weekOpenSz[i].list"  :key="index">
					<view class="time-frame">
						<view class="frame-title">
							开放时段 
						</view>
						<view class="time" @click="showDbTime(item2,index,i)">
							{{item2.startTime }} 至 {{item2.endTime}}
						</view>
						<view class="iconfont more" @click="showDbTime(item2,index,i)" >
							&#xe600;
						</view>
					</view>
					<view class="img" 
					
					v-if="index==0&&weekOpenSz[i].list.length==2" >
						<img src="../assets/img/add.png" alt="">
					</view>
					<view class="img" 
					
					 v-else-if="index==1" >
						<img 
						 @click="delItem(i)"
						src="../assets/img/sub.png" alt="">
					</view>
					<view class="img" 
					
					v-else >
						<img 
						@click="addItem(i)"
						src="../assets/img/add1.png" alt="">
					</view>
				</view>
				
			</view>
			
		</view>
		<!-- 底部 -->
		<view class="bottom">
			<view class="radio-box">
				
				
				
				<u-checkbox-group>
					<u-checkbox  v-model="detail.changeOther" shape="circle" ></u-checkbox>
				</u-checkbox-group>
				
				<text class="text">将该设置同步到其他充电枪</text>
			</view>
				<u-button class="save" type="primary" @click="submit"  >保存</u-button>
		</view>

	</view>
</template>

<script>
	import udoublepicker from '@/components/u-double-picker.vue'
	import * as API from '@/apis/finance.js'
	
	export default {
		components: {
			udoublepicker
		},
		data() {
			return {
				listmutilcolumnauto:[],
				list2: [{
						value:"1",
						name: "是"
					},
					{
						value:"0",
						name: "否"
					}
				],
				errorlist:[],
				detail:{
				
				},
				weekSz:[
					'周一','周二','周三','周四',
					'周五','周六','周日',
				],
				weekOpenSzData:[
					[{
						op:0,
						list:[]
					},
					{
						op:0,
						list:[]
					},
					{
						op:0,
						list:[]
					},
					{
						op:0,
						list:[]
					},
					{
						op:0,
						list:[]
					},
					{
						op:0,
						list:[]
					},
					{
						op:0,
						list:[]
					}],[
						{
							op:0,
							list:[]
						},
						{
							op:0,
							list:[]
						},
						{
							op:0,
							list:[]
						},
						{
							op:0,
							list:[]
						},
						{
							op:0,
							list:[]
						},
						{
							op:0,
							list:[]
						},
						{
							op:0,
							list:[]
						}
					]
				],
				obj1:[],
				obj2:[],
				show:false,
				show2:false,
				list: [{
					name: '共享设置'
				}, {
					name: '预约设置'
				}],
				
				shareList: [{
						name: '是',
						disabled: false
					},
					{
						name: '否',
						disabled: false
					}
				],
				timeList: [
					{
						value:"10",
						name: "10分钟"
					},
					{
						value:"20",
						name: "20分钟"
					},
					{
						value:"30",
						name: "30分钟"
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '',
				current: 0,
				checked:false,
				defaultTime:[],
				defaultTime2:'',
				selectIndex:0,
				selectI:0,
			}
		},
		props:{
		
			id: 0
		},
		onLoad(op){
			//this.id=op.id;
		
		},
		computed:{
			weekOpenSz(){
				
				return this.weekOpenSzData[this.current]
			}
		}
		,mounted(){
			
			this.initlistmutilcolumnauto();
			this.getInfo()
		},
		methods: {
			
			initlistmutilcolumnauto(){
				
				function	formatNumber(num) {
					return +num < 10 ? '0' + num : String(num);
				}
				function	getSz(obj,ivalue,jvalue) {
					
					if(jvalue==0){
						var item={
							value:ivalue*100+30,
							label:formatNumber(ivalue)+":30",
						}
						obj.children.push(item)
					}
					
					for(var i=ivalue+1;i< 24;i++){
						for(var j=0;j< 2;j++){
							var item={
								value:i*100+j*30,
								label:formatNumber(i)+":"+(j==0?'00':'30'),
							}
							obj.children.push(item)
							
						}
					}
					
						var item={
							value:24*100,
							label:formatNumber(24)+":00",
						}
						obj.children.push(item)
					
					return obj.children;
				}
				this.listmutilcolumnauto=[]
				for(var i=0;i< 24;i++){
					for(var j=0;j< 2;j++){
						var obj={
							value:i*100+j*30,
							label:formatNumber(i)+":"+(j==0?'00':'30'),
							children:[]
						}
						obj.children=getSz(obj,i,j)
						this.listmutilcolumnauto.push(obj)
					}
				}
				console.log(this.listmutilcolumnauto);
			},
			copy(){
				var list= this.weekOpenSzData[1]
				 for(var i in  list){
					 var obj1=  this.weekOpenSzData[1][i]
					var obj0=  this.weekOpenSzData[0][i]
					obj1.op=obj0.op;
					obj1.list=[];
					for(var j in  obj0.list){
						var item=obj0.list[j]
						var newObj=Object.assign({},item)
						obj1.list.push(newObj);
					}
					
					
				 }
				
				
				this.$nextTick(()=>{
					 this.$forceUpdate()
				})
			},
			
			checkoverflow(){
				
				function getTime(time){
					var c=(time=='24:00')?"2020/01/02 00:00:00":"2020/01/01 "+time
					var gettime= new Date(c).getTime()
					return gettime;
				}
				var step =false;
				this.errorlist=[];
				
				var list= this.weekOpenSzData[1]
				 for(var i in  list){
					//预约
					var obj1=  this.weekOpenSzData[1][i]
					//开放
					var obj0=  this.weekOpenSzData[0][i]
					//obj1.op=obj0.op;
					//obj1.list=[];
					
					if(obj1.op&&!obj0.op){
						this.errorlist.push({
							name:this.weekSz[i],
							value:"未开启共享"
						})
					}else if(obj1.op==0&&obj0.op==0){
						
					} else{
						var optionList=[];
						if(obj0.list.length==2){
							//判断是否有交集
							var startTime1=getTime(obj0.list[1].startTime);
							var endTime1=getTime(obj0.list[1].endTime);
							
							var startTime0=getTime(obj0.list[0].startTime);
							var endTime0=getTime(obj0.list[0].endTime);
							
							
							if(startTime1>=startTime0&&endTime1<=endTime0){
								optionList.push(obj0.list[0]);//并集
								obj0.lookcollect="并集"
								
							}else if(startTime1<=startTime0&&endTime1>=endTime0){
								optionList.push(obj0.list[1]);//并集
								obj0.lookcollect="并集"
								
							}
							else  if(endTime0<startTime1&&endTime0<=endTime1){
								//不相交
								optionList=obj0.list;
								obj0.lookcollect="不相交"
								
							}else  if(endTime1<startTime0&&endTime1<=endTime0){
								//不相交
								
								obj0.lookcollect="不相交"
								optionList=obj0.list;
							}else{
								obj0.lookcollect="交集"
								
								//交集
								if(startTime0<startTime1){
									optionList.push({
										startTime:obj0.list[0].startTime,
										endTime:obj0.list[1].endTime
									});
								}else{
									optionList.push({
										startTime:obj0.list[1].startTime,
										endTime:obj0.list[0].endTime
									});
								}
								
							}
							
							// if(){
							// 	optionList.push({
							// 		startTime:obj0.list[1].startTime
							// 		endTime:obj0.list[1].startTime
							// 	})
							// }
							
						}else{
							optionList=obj0.list;
						}
						
						
						for(var j in  obj1.list){
						
							var item1=obj1.list[j]
							var bl=true;
							for(var k in  optionList){
								var item2=optionList[k];
								var startTime1=getTime(item1.startTime);
								var endTime1=getTime(item1.endTime);
								
								var startTime0=getTime(item2.startTime);
								var endTime0=getTime(item2.endTime);
								
								if(startTime1>=startTime0&&endTime1<=endTime0){
									
									bl=false;
								}
							}
							if(bl){
								this.errorlist.push({
									name:this.weekSz[i],
									value:"不在共享开放时段"
								})
							}
						}
					}
				
					
					//this.weekOpenSzData[0][i]=obj0
					
				 }
				 
				 if(this.errorlist.length==0){
					
					 this.submitApi()
				 }else{
					 this.show2=true;
				 }
				 
			},
			submit(){
				this.detail.sharedWeekSetting=""
				this.detail.reserveWeekSetting=""
				
				var list = this.weekOpenSzData[0];
				var listJson=[]
				for(var i in list){
					var obj=list[i];
					listJson=listJson.concat(obj.list);
				}
				this.detail.sharedWeekSetting=JSON.stringify(listJson)
				
				if(this.detail.enableShare=="1"){
				
					if(listJson.length==0){
						uni.showToast({
							title:"开放共享功能需要添加【共享时段】"
						})
						return
					}
				}
				// var sz=[]
				// for(var i in this.weekList){
				// 	var item=this.weekList[i]
				// 	if(item.checked){
				// 		sz.push(item.value)
				// 	}
				// }
				// var weekDay=sz.join();
				
				
				var sz2=[]
				for(var i in this.timeList){
					var item=this.timeList[i]
					if(item.checked){
						sz2.push(item.value)
					}
				}
				var reserveMinutes=sz2.join();
				this.detail.reserveMinutes=reserveMinutes
				
				var list = this.weekOpenSzData[1];
				var listJson=[]
				for(var i in list){
					var obj=list[i];
					listJson=listJson.concat(obj.list);
				}
				this.detail.reserveWeekSetting=JSON.stringify(listJson)
				if(this.detail.autoConfirm==null){
					this.detail.autoConfirm=false
				}
				if(this.detail.enableAppointment=="1"){
					
				
					if(listJson.length==0){
						uni.showToast({
							title:"开放预约功能需要添加【预约时段】"
						})
						return
					}
					 
					if(reserveMinutes==""){
						uni.showToast({
							title:"开放预约功能需要选择【预留时长】"
						})
						return
					}
					this.checkoverflow()
					
					
				}else{
					this.submitApi()
				}
				
			},
			submitApi(){
				uni.showLoading({
					title:"加载中",mask:true,
				})
				API.saveGunShare(this.detail).then((res) => {
					
					uni.hideLoading()
					uni.showToast({
						title:"操作成功"
					})
					this.$emit("submitsetup")
					
				}).catch(error => {
						uni.showToast({
							
							title:error
						})
				})
			},
			getInfo(){
				uni.showLoading({
					title:"加载中",mask:true,
				})
				API.gunShareDetail({
					gunId:this.id
				}).then((res) => {
					this.detail={};
					this.detail.sharedSettingList=res.data.sharedSettingList
					this.detail.reserveSettingList=res.data.reserveSettingList
					var obj=res.data.gunShare;
					
					for(var i in obj){
						
						if(obj[i]===true){
							this.detail[i]="1";
						}else if(obj===false){
							this.detail[i]="0";
						}else {
							this.detail[i]=obj[i];
						}
					}
					
					if(this.detail.reserveMinutes){
						var sz=this.detail.reserveMinutes.split(",")
						for(var i in this.timeList){
							var item=this.timeList[i]
						
							if(sz.indexOf(item.value)!=-1){
								item.checked=true;
							}
						}
					}
					
					if(this.detail.sharedSettingList.length){
						
						var list=this.detail.sharedSettingList;
						var weekOpenSzDataList=this.weekOpenSzData[0]
						for(var i in list){
							var obj={
								weekDay:list[i].weekDay,
								startTime:list[i].startTime,
								endTime:list[i].endTime
							}
							weekOpenSzDataList[parseInt(list[i].weekDay)-1].op=1;
							weekOpenSzDataList[parseInt(list[i].weekDay)-1].list.push(obj)
						}
					}
					if(this.detail.reserveSettingList.length){
						var list=this.detail.reserveSettingList;
						var weekOpenSzDataList=this.weekOpenSzData[1]
						for(var i in list){
							var obj={
								weekDay:list[i].weekDay,
								startTime:list[i].startTime,
								endTime:list[i].endTime
							}
							weekOpenSzDataList[parseInt(list[i].weekDay)-1].op=1;
							weekOpenSzDataList[parseInt(list[i].weekDay)-1].list.push(obj)
						}
					}
				
					uni.hideLoading()
					 
				}).catch(error => {
						uni.showToast({
							
							title:error
						})
				})
			},
			checkboxChange(item,e){
				item.checked=e.value
				this.$forceUpdate()
				console.log(e)
			},
			confirm(e){
				console.log(e)
				
				
				var obj=this.weekOpenSz[this.selectI].list[this.selectIndex];
				obj.startTime=e[0].label;
				obj.endTime=e[1].label;
			},
			showDbTime(item,index,i){
				this.show=true;
				this.selectI=i
				this.selectIndex=index
				var sz=[];
				for(var i in this.listmutilcolumnauto){
					var obj=this.listmutilcolumnauto[i]
					if(obj.label==item.startTime){
						sz.push(parseInt(i))
						
						for(var j in obj.children){
							var ob=obj.children[j]
							if(ob.label==item.endTime){
								sz.push(parseInt(j))
							}
						}
					}
				}
				this.defaultTime=sz;
				console.log(sz)
			},
			change(index) {
				this.current = index;
			},
			change2(index,szindex) {
				
				if(index){
					
					if(this.weekOpenSz[szindex].list.length==0){
						this.weekOpenSz[szindex].list.push({
							weekDay:szindex+1,
							startTime:'00:00',
							endTime:'08:00'
						})
					}	
				}else{
					this.weekOpenSz[szindex].list=[]
				}
			},
			addItem(szindex){
				this.weekOpenSz[szindex].list.push({
					weekDay:szindex+1,
					startTime:'20:00',
					endTime:'24:00'
				})
			},
			delItem(szindex){
				this.weekOpenSz[szindex].list.pop()
			}
			
		}
	}
</script>


<style lang="scss" scoped>
	page {
		background-color: #f3f4f7;
		padding-bottom: 147px;
	}

	::v-deep.u-tabs-scorll-flex {
		width: 56.2%;
		margin: 0 auto;
	}

	::v-deep.u-tab-bar {
		background-color: #0076ff !important;
		width: 28% !important;
		left: -19px;
		bottom: -3px;
	}
	// 开发共享
	.share-set{
		width: 100%;
		background-color: #fff;
		display: flex;
		padding: 8px 16px;
		.title{
			width: 28%;
			margin-right: 41px;
			line-height: 27px;
		}
		::v-deep.u-radio{
			margin-right: 20px
		}
		border-top: 1px solid  rgba(242, 242, 242, 100);
		border-bottom: 1px solid  rgba(242, 242, 242, 100);
	}
	// 每周开放时间段设置
	.main{
		padding-bottom:100px ;
		.title{
			line-height: 16px;
			color: rgba(16, 16, 16, 100);
			font-size: 16px;
			padding: 12px 16px;
		}
		.item{
			width: 91.4%;
			padding: 32rpx;
			line-height: 20px;
			border-radius: 8px;
			background-color: rgba(255, 255, 255, 100);
			color: rgba(16, 16, 16, 100);
			font-size: 14px;
			text-align: center;
			margin: 0   24rpx;
			.switch{
				display: flex;
				justify-content: space-between;
			
				border-bottom: 1px solid rgba(229, 231, 234, 100);
			}
			.frame-box{
				display: flex;
				justify-content: space-between;
			}
			.time-frame{
				padding-top: 11px;
				display: flex;
				justify-content: start;
				.time{
					margin-left: 25px;
				}
				.more{
					margin-left: 8px;
					color: #b3b3b3;
					font-size: 24px
				}
			}
			.img{
				width: 24px;
				height: 24px;
				
				img{
					margin-top: 10px;
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	
	
	// 预约时长选项
	.time-options{
		width: 100%;
		padding: 14px 0 14px 16px;
		background-color: #fff;
		
		.radio-box{
			margin-top: 12px;
			::v-deep.u-checkbox-group {
				width: 100%;
				display: flex;
				justify-content: space-between;
			}
		}
	}
	
	// 底部
	.bottom{
		width: 100%;
		padding: 12px 16px ;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
	
		.radio-box{
			height: 16px;
			margin-bottom: 10px;
		
			::v-deep.uni-radio-input{
				width: 14px;
				height: 14px;
			}
		}
		.save{
			
			line-height: 40px;
			
			border-radius: 50px;
			background-color: rgba(24, 90, 198, 100);
			color: rgba(255, 255, 255, 100);
			font-size: 18px;
			text-align: center;
			
		}
	}
</style>