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

<template>
	<view>
		<u-navbar title="预约充电"></u-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">
					桩号：{{detail.deviceName}}
				</view>
				<view class="details-item">
					枪号：{{id}}
				</view>
			</view>
		</view>

	
		<!-- 预留时长 -->
		<view class="reserved-time box">
			<p>充电桩预留时长</p>
			<template v-for="(item,i) in  timeList">
				<view :key="i" @click="selectTime=item" :class="{
					time1:selectTime==item,
					time2:selectTime!=item
				}">
					{{item}}分钟
				</view>
			</template>
			
		
			<view class="end-time">
				预留截止时间：{{endtime1}}
			</view>
		</view>
		<!-- 预计充电时长 -->
		<view class="reserved-time box">
			<p>充电桩预留时长</p>
			<template v-for="(item,i) in  numList">
				<view :key="i" @click="selectNum=item" :class="{
					time1:selectNum==item,
					time0:selectNum!=item
				}">
					{{getPercent(item)}}
				</view>
			</template>
		
			<view class="end-time">
				预留截止时间：{{endtime2}}
			</view>
		</view>
		<!-- 预约需知 -->
		<view class="need-know box">
			<p class="name">预约需知</p>
			<p v-html="apointment">
				
			</p>
			
		</view>
		
		<view class="bottom">
			<u-button class="button" 
			@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 {
				id:0,
				detail:{},
				timeList:[],
				numList:[60,90,120,0],
				apointment:"",
				selectTime:15,
				selectNum:60,
				
			}
		},
		onLoad(op) {
			this.id= op.id;
			this.getInfo()
		},
		methods:{
			submit(){
				 
				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/preengaged/preengagedListDetails?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.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]
						if(this.timeList.indexOf("30")>-1){
							this.selectTime='30'
						}
					}
					
				}).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 + "小时" 
					}
					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
						return 	parseUnixTime(new Date(date))
			},
		}
		
	}
	
</script>

<style lang="scss" scoped>
	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: 42px;
		}

		.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%;
			height: 64px;
			line-height: 64px;
			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;
				
			}
		
		}
</style>