jp-charge/pagesFinance/user/myPile.vue

<template>
	<view>
		<ujp-navbar title="充电桩设置"></ujp-navbar>

		<view class="options">

			<u-cell-group>

				<u-cell-item title="开放共享" :arrow="false">

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



				</u-cell-item>

				<u-cell-item title="开放预约" :arrow="false">
					<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>
				</u-cell-item>

				<u-cell-item title="预约自动确认" :arrow="false">
					<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>
				</u-cell-item>

 				
				
				<u-cell-item :arrow="false" class="time-cell border-bottom" title="允许预约日期">
				
				</u-cell-item>
				
				<view class="" style="padding-left: 16px;">
					<u-checkbox-group  shape="square">
				
						<u-checkbox  
						 	
						 v-for="(item, index) in weekList" :key="index" :name="item.value"
						 v-model="item.checked"  @change="checkboxChange(item,$event)" 
							:disabled="item.disabled" active-color="#00b962">
				
							{{item.name}}
				
						</u-checkbox>
					</u-checkbox-group>
				
				</view>
				
				<u-picker mode="time" @confirm="confirm"  v-model="show" 
				:defaultTime="showTime"
				:params="params"></u-picker>


				<u-cell-item title="预约开始时段" :value="detail.shareStartTime" @click="showTimeBtn(0)" ></u-cell-item>
				<u-cell-item title="预约结束时段" :value="detail.shareEndTime" @click="showTimeBtn(1)" ></u-cell-item>

				<u-cell-item :arrow="false" class="time-cell border-bottom" title="预约时长选项">




				</u-cell-item>



				<view class="" style="padding-left: 16px;">
					<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>


			</u-cell-group>

		</view>
		<!-- 底部按钮 -->
		<view class="bottom">
		<!-- 	<u-button shape='circle' class="refuse-btn">拒绝</u-button>
			<u-button type="success" shape='circle'>确认</u-button> -->
			<!-- 删除订单按钮 -->
		 <u-button shape='circle' type="success" @click="submit"  >保存</u-button> 
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/finance.js'
	
	export default {
		data() {
			return {
				showTimeType:"",
				showTime:"",
				show:false,
				params: {
									year: false,
									month: false,
									day: false,
									hour: true,
									minute: true,
									second: false
								},
								
				detail:{
				
				},
				
				list2: [{
						value:"1",
						name: "是"
					},
					{
						value:"0",
						name: "否"
					}
				],
				weekList: [
					{
						value:"1",
						name: "周一"
					},
					{
						value:"2",
						name: "周二"
					},
					{
						value:"3",
						name: "周三"
					},
				
					{
						value:"4",
						name: "周四"
					},
					{
						value:"5",
						name: "周五"
					},
					{
						value:"6",
						name: "周六"
					},
				
					{
						value:"7",
						name: "周日"
					}
				],
				timeList: [
					{
						value:"10",
						name: "10分钟"
					},
					{
						value:"20",
						name: "20分钟"
					},
					{
						value:"30",
						name: "30分钟"
					}
				]
			}
		},
		onLoad(op){
			
			this.id=op.id;
			this.getInfo()
		},
		methods: {
			checkboxChange(item,e){
				item.checked=e.value
				this.$forceUpdate()
				console.log(e)
			},
			confirm(e){
				
				var type=this.showTimeType;
				var time=e.hour+":"+e.minute;
				if(type==0){
					
					if(this.detail.shareEndTime){
						var time1=new Date("2020-1-1 "+time)
						var time2=new Date("2020-1-1 "+this.detail.shareEndTime)
						if(time1>time2){
							this.detail.shareEndTime=null;
						}
					}
					this.detail.shareStartTime=time
				}
				if(type==1){
					
					if(this.detail.shareStartTime){
						var time1=new Date("2020-1-1 "+time)
						var time2=new Date("2020-1-1 "+this.detail.shareStartTime)
						if(time1<time2){
							uni.showToast({
								title:"结束时间不可小于开始时间"
							})
							return
						}
					}
					
					this.detail.shareEndTime=time
				}
			},
			showTimeBtn(type){
				this.showTimeType=type;
				console.log(type)
				if(type=="0"){
					this.showTime=this.detail.shareStartTime
				}
				if(type=="1"){
					this.showTime=this.detail.shareEndTime
				}
				if(!this.showTime){
					this.showTime=new Date().getHours()+":"+new Date().getMinutes()
				}
				this.show=true;
			},
			submit(){
				
				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();
				if(!this.detail.shareStartTime){
					this.detail.shareStartTime=""
				}
				if(!this.detail.shareEndTime){
					this.detail.shareEndTime=""
				}
				var weekTime=[this.detail.shareStartTime,this.detail.shareEndTime]
				
				if(this.detail.enableAppointment){
					if(weekDay==""){
						uni.showToast({
							title:"开放预约功能需要选择预约日期"
						})
						return
					}
					
					if(!weekTime[0]){
						uni.showToast({
							title:"开放预约功能需要预约开始时间"
						})
						return
					}
					if(!weekTime[1]){
						uni.showToast({
							title:"开放预约功能需要预约结束时间"
						})
						return
					}
					if(reserveMinutes==""){
						uni.showToast({
							title:"开放预约功能需要选择预约时长"
						})
						return
					}
					
						console.log(	this.detail	)
				}
				this.detail.weekDay=weekDay
				
				this.detail.weekTime=weekTime.join();
				
				this.detail.reserveMinutes=reserveMinutes
				uni.showLoading({
					title:"加载中",mask:true,
				})
				API.saveGunShare(this.detail).then((res) => {
					
					uni.hideLoading()
					uni.showModal({
						title:"提示",
						content:"操作成功",
						showCancel:false,
						success:()=>{
							uni.navigateBack({
								
							})
						}
					})
					
				}).catch(error => {
						uni.showToast({
							
							title:error
						})
				})
			},
			getInfo(){
				uni.showLoading({
					title:"加载中",mask:true,
				})
				API.gunShareDetail({
					gunId:this.id
				}).then((res) => {
					this.detail={};
					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.shareWeekDay){
						var sz=this.detail.shareWeekDay.split(",")
						for(var i in this.weekList){
							var item=this.weekList[i]
						
							if(sz.indexOf(item.value)!=-1){
								item.checked=true;
							}
						}
					}
					
					console.log(this.detail)
					uni.hideLoading()
					 
				}).catch(error => {
						uni.showToast({
							
							title:error
						})
				})
			}
		}
	}
</script>

<style lang="scss">
	/deep/.u-cell_title {

		width: 30% !important;
	}

	/deep/ .u-cell {
		line-height: 20px;
		padding: 12px 20px 12px 0;
		margin-left: 12px;
	}

	/deep/.u-radio-group {
		justify-content: start !important;
	}

	/deep/.u-radio-group:last-child {

		justify-content: space-between !important;
		padding: 0 0 10px 0px;
	}


	/deep/.u-cell__value {

		text-align: left;

		color: #101010;

		font-size: 16px
	}

	/deep/.u-radio-group {
		line-height: 30px;
		width: 100%;
		display: flex;
		justify-content: space-around;

	}



	/deep/.border-bottom:after {
		border-bottom-width: 0px !important;



	}
	
	
// 按钮
.bottom{
	width: 100%;
	height: 56px;
	position: fixed;
	bottom: 0;
	background-color: #fff;
	display: flex;
	.refuse-btn{
		background-color: #DBDBDB;
	}
	.u-btn{
		width: 91.4%;
		height: 40px;
		margin: auto;
		font-size: 18px;
		
	}
	.cancel-btn{
		width: 91.4%;
		background-color: #dbdbdb;
		color: #666666
	}
}
</style>