JP-ChargeTeam51/pages/searchPile/apointment/apointmentRecharge.vue

<template>
	<view>
		<ujp-navbar title="预约充电"></ujp-navbar>
		<!-- 站点详情 -->
		<view class="station-details box">
			<p class="station-name">{{detail.stationName}}</p>
			<view class="details">
				<view class="details-item">
					充电桩类型：{{detail.gunType=='1'?'直流快充':'交流慢充'}}
				</view>
		 
				<view class="details-item">
					名称：{{gun.sortNo}}号/{{detail.deviceName}}枪{{gun.channelNo}}
				</view>
				
				
				<view class="details-item">
					编号：{{id}}
				</view>
			</view>
		</view>

	
		<!-- 预留时长 -->
		<view class="reserved-time box">
			<p>充电桩预留时长</p>
		
			<picker-view class="picker-view"  :value="[value2]"  @change="bindChange2" >
				<picker-view-column  >
					<view class="item"   v-for="(item,i) in  timeList" :key="i">
						<view  >{{item}}分钟</view>
					</view>
				</picker-view-column>
			</picker-view>
			
			
			<view class="end-time">
				预留截止时间：{{endtime1}}
			</view>
		</view>
		<!-- 预计充电时长 -->
		<view class="reserved-time box">
			<p>预计充电时长</p>
			
		<picker-view class="picker-view"  :value="[value1]"  @change="bindChange" >
			<picker-view-column  >
				<view class="item"   v-for="(item,i) in  numList" :key="i">
					<view  >{{getPercent(item)}}</view>
				</view>
			</picker-view-column>
		</picker-view>
		
			<view class="end-time">
				预留充满时间：{{endtime2}}
			</view>
		</view>
		<!-- 预约需知 -->
		<view class="need-know box">
			<p class="name">预约需知</p>
			<p v-html="apointment">
				
			</p>
			
		</view>
		<u-modal v-model="show">
			<view style="padding: 10px;">
				因您近期存在预约超时未前往充电的违约行为，平台为保证每位车主的合理权益，
				对您作出停用预约充电功能1天的处罚。
				您可于<span style="color: #00b962;">{{lockTime}}</span>后使用此功能。
			</view>
			
		</u-modal>

		<view class="bottom">
			<view>
				<u-checkbox-group>
					<u-checkbox active-color="green" v-model="checked" shape="circle" ></u-checkbox>
				</u-checkbox-group>
				我已阅读并同意<span  @click="gotoUrl('pages/article/details?code=YYCDGZ')" style="color:#00B962" >《预约充电规则 》</span>
				
			</view>
			<u-button
			:class="{
				button:!lockStatus,
					buttonlockStatus:lockStatus
			}"
		
			@click="submit()"
			shape="square">提交预约</u-button>
		</view>
	</view>
</template>

<script>
	import {
		
		currentTimeStamp,
		parseUnixTime
	} from '@/utils'
	import * as API from '@/apis/apointment.js'
	import * as newsApi from '@/apis/news.js'
	
	export default {
		data() {
			return {
				
				
				gun:{},
				id:0,
				lockStatus:false,
				lockTime:"",
				detail:{},
				timeList:[],
				numList:[60,90,120,60*5,60*6],
				apointment:"",
				selectTime:15,
				selectNum:60,
				value2:0,
				value1:1,
				show:false,
				checked:false
			}
		},
		onLoad(op) {
			this.id= op.id;
			this.getInfo()
		},
		methods:{
			bindChange(e){
				//(e)
				var index=e.detail.value[0];
				var obj=this.numList[index];
				if(obj){
					this.value1=index
					this.selectNum=obj;
				}
			
			},
			bindChange2(e){
				//()
				
				var index=e.detail.value[0];
				var obj=this.timeList[index];
				if(obj){
					this.value2=index
					this.selectTime=obj;
				}
			},
			submit(){
				if(!this.checked){
					uni.showToast({
						title:"请勾选《预约充电规则》"
					})
					 return
				}
				
				 if(this.lockStatus){
					 return
				 }
				uni.showLoading({
					title: "加载中",
					mask: true,
				})	
				API.submitAppointment({
					gunNo:this.id,			
					waitMinute:this.selectTime,
					chargingMinute:this.selectNum,
				}).then((res) => {
					uni.hideLoading()
					
					 uni.reLaunch({
					 	url:"/pages/user/myReservation/reservationListDetails?id="+res.data+"&isback=1"
					 })
					
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			getInfo(){
				newsApi.findConfigureByKey({
					key:"apointment"
				}).then((res) => {
									
					this.apointment = res.data.value;
				
				}).catch(error => {
					
				})
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})	
				API.information({
					gunNo:this.id,			
				
				}).then((res) => {
					uni.hideLoading()
					this.lockStatus=res.data.lockStatus
					this.lockTime=res.data.lockTime
					this.gun=res.data.gun
					if(this.lockStatus){
						this.show=true;
					}
					this.detail= {
						stationName:res.data.gun.stationName,
						deviceName:res.data.gun.deviceName,
						gunType:res.data.gun.gunType,
					};
					if(res.data.gunShare.reserveMinutes){
						
						this.timeList=res.data.gunShare.reserveMinutes.split(",")
						this.selectTime=this.timeList[0]
					
					}
					
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
				
				
			
				
			},
			getPercent(estimateMinute) {
				var value="";
				 
				var ms =estimateMinute
				if (ms > 0) {
					var Hour = parseInt(Math.floor(ms / 60 ));
					var Fen = parseInt(Math.floor(ms % 60 ));
					if(Hour>0){
						value+=Hour + "小时" 
					}
					if(Fen>0){
						value+=Fen + "分钟" 
					}
					
				}
			
				return value;
			},
		},
		computed:{
			endtime1(){
					var date=new Date().getTime()+this.selectTime*60*1000
					
					return 	parseUnixTime(new Date(date))
			},
			endtime2(){
					var date=new Date().getTime()+this.selectNum*60*1000+this.selectTime*60*1000
					return 	parseUnixTime(new Date(date))
			},
		}
		
	}
	
</script>

<style lang="scss" scoped>
	.picker-view {
			
			height: 100px;
			margin-top: 20rpx;
		}
		.item {
			height: 35px;
			font-size: 24px;
			align-items: center;
			justify-content: center;
			text-align: center;
		}
	page {
		padding-bottom: 191px;
	}

	.box {
		width: 91.4%;
		background-color: #fff;
		margin: 12px auto 0;
		padding: 12px;
		border-radius: 8px;
	}

	// 站点详情
	.station-details {

		.station-name {
			color: rgba(0, 185, 98, 100);
			font-size: 20px;
			line-height: 20px;
		}

		.details {
			width: 100%;
			margin-top: 8px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.details-item {
				width: 95%;
				color: rgba(102, 102, 102, 100);
				line-height: 20px;
				text-align: left;
				margin-top: 4px;
			}
		}
	}

	// 电压详情
	.voltage-details {
		display: flex;
		justify-content: space-around;

		.item-num {
			height: 27px;
			color: rgba(0, 185, 98, 100);
			font-size: 20px;
			text-align: center;
		}

		.item-text {
			text-align: center;
			margin-top: 4px;
		}

		.border {
			height: 36px;
			width: 0;
			border: 1px solid rgba(237, 237, 237, 100);
			margin-top: 8px;

		}
	}

	// 预留时长
	.reserved-time {
		p {
			line-height: 18px;
			color: rgba(0, 185, 98, 100);
			font-size: 16px;
			margin-bottom: 22px;
		}

		.time1 {
			line-height: 33px;
			color: rgba(16, 16, 16, 100);
			font-size: 24px;
			text-align: center;
			margin-top: 8px;
		}

		.time0,
		.time2 {
			line-height: 22px;
			opacity: 0.5;
			color: rgba(16, 16, 16, 100);
			font-size: 16px;
			text-align: center;
			margin-top: 8px;
		}

		.end-time {
			line-height: 20px;
			color: rgba(102, 102, 102, 100);
			font-size: 14px;
			text-align: center;
			margin-top: 13px;
		}
	}

	// 预约需知
	.need-know {
		.name {
			line-height: 18px;
			color: rgba(0, 185, 98, 100);
			font-size: 16px;
			text-align: left;
			margin-bottom: 12px;
		}
		p{
			line-height: 16px;
			color: rgba(102, 102, 102, 100);
			font-size: 14px;
			text-align: left;
			margin-top:8px;
		}
	}
	
	.bottom {
			background-color: #fff;
			
			width: 100%;
		
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 999;
			padding: 12px 16px;
		
			.button {
				border-radius: 50px;
				background-color: rgba(0, 185, 98, 100);
				color: rgba(255, 255, 255, 100);
	        	font-size: 16px;
				margin-top: 14px;
				
			}
			.buttonlockStatus{
				border-radius: 50px;
			
				 background-color: #c1c5c3;
				color: rgba(255, 255, 255, 100);
				
				font-size: 16px;
			}
		
		}
</style>