JP-ChargeTeam51/pages/user/myReservation/reservationListDetails.vue

<template>
	<view >
		<ujp-navbar title="预约单详情" :custom-back="customback" >
		
		</ujp-navbar>
	<!-- 	<view class="iconfont tittle-font">
			&#xe616;
		</view> -->
		<u-alert-tips type="warning" v-if="detail.status==0"  :description="description"></u-alert-tips>
		
 		<view class="reverse-time">
			<view class="time refused" v-if="detail.status==4||detail.status==5||detail.status==6">
					{{detail.statusText}}
				</view> 
			<view class="time" v-else >
				预留{{detail.reserveMinutes}}分钟
				<view class="img-box" >
					<img src="@/assets/img/finished.png" v-if="detail.status==1" alt="">
					<!-- 已取消 -->
					  <img src="../../../static/img/canc.png" v-if="detail.status==3" alt="">  
					<!-- 已完成-->
					 <img src="../../../static/img/f.png" v-if="detail.status==2" alt=""> 
				</view>
			</view>
			<!-- 已取消/已拒绝 -->
			<!-- 	-->
			<view class="details-item">
				<view class="item">
					<view class="item-name">
						预约单号
					</view>
					<view class="item-content">
						{{detail.flowNo}}
					</view>
				</view>
				<view class="item">
					<view class="item-name">
						预计开始充电
					</view>
					<view class="item-content">
						
						{{detail.startTime}}
						
					</view>
				</view>
				<view class="item">
					<view class="item-name">
						预计充电时长
					</view>
					<view class="item-content">
						{{getPercent(detail.estimateMinutes)}}
					</view>
				</view>
			</view>
			
		</view>
		<u-alert-tips type="warning" v-if="detail.status==1"  :description="description"></u-alert-tips>
		
		<!-- 充电桩详情 -->
		<view class="charge-pile">
		<view class="box" @click="gotoUrl('pages/searchPile/stationAndPile/stationDetails?id='+chargingDevice.stationId)">
		
			<view class="name ellipsis">
				{{chargingDevice.stationName}}/{{chargingDevice.name}}
			</view>
			<view class="address ellipsis">
				{{chargingDevice.address}}
			</view>
			<text class="iconfont more">
				&#xe600;
			</text>
		</view>
	
			<view class="details-item">
				<view class="item">
					<view class="item-name">
						预约单生成时间
			
					</view>
					<view class="item-content">
						{{detail.createTime}}
			
					</view>
				</view>
				<view class="item">
					<view class="item-name">
			
						电费单价
			
					</view>
					<view class="item-content">
						{{price.electricityPrice}}元/度
					</view>
				</view>
				<view class="item">
					<view class="item-name">
			
						充电服务费 
					</view>
					<view class="item-content">
						{{price.servicePrice}}元/度
					</view>
				</view>
				
				<view class="item"  v-if="detail.status==3" >
					<view class="item-name" >
							
						取消时间 
					</view>
					<view class="item-content">
						{{detail.updateTime}}
					</view>
				</view>
				
				<template v-if="detail.status==5||detail.status==6" >
					<view class="item"   >
						<view class="item-name" >
								
							过期时间 
						</view>
						<view class="item-content">
							{{detail.updateTime}}
						</view>
					</view>
					<view class="item"   >
						<view class="item-name" >
								
							过期原因 
						</view>
						<view class="item-content">
							{{detail.remark}}
						</view>
					</view>
				</template>
				
				
				
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom" v-if="detail.status==0" >
		<!-- 	<u-button shape='circle' class="refuse-btn">拒绝</u-button>
			<u-button type="success" shape='circle'>确认</u-button>
			 --><!-- 删除订单按钮 -->
		 <u-button shape='circle' 
		 @click="regChangeStatus()"
		 class="cancel-btn">取消预约</u-button>
		</view>
		<view class="bottom2" v-if="detail.status==1" >
		<!-- 	<u-button shape='circle' class="refuse-btn">拒绝</u-button>
			<u-button type="success" shape='circle'>确认</u-button>
			 --><!-- 删除订单按钮 -->
			<u-button size="medium" shape='circle' @click="regChangeStatus()" class="cancel-btn">取消预约</u-button>
			<u-button size="medium" shape='circle' type="success" @click="charge" >开始充电</u-button>
		</view>
	</view>
</template>


<script>
	import * as API from '@/apis/apointment.js'
	
	import {
		newDate,
		hourDistanceArr,
		currentTimeStamp,
		parseUnixTime
	} from '@/utils'
	export default {
		data() {
			return {
				gunNo:"",
				deviceNo:"",
				channelNo:"",
				carNumber:"",
				stationId:"",
				isback:false,
				detail:{},
				price:{},
				chargingDevice:{},
				description: '等待桩主确认预约单，剩余时间04:59:59'
			}
			
		},onLoad(op) {
			//预约充电跳转过来则 返回首页
			if(op.isback){
				this.isback=true
			}
			if(op.notice){
				this.isback=true
			}
			if(op.qr){
				//扫码进入的
			}
			if (op.deviceNo) {
				
			}
			this.id= op.id;
			this.getInfo()
		},
		methods:{
			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;
			},
			charge(){
				uni.navigateTo({
					url:'/pages/searchPile/stationAndPile/chargingPileDetails?isback=1&id='+this.gunNo
				})
			},
			regChangeStatusSuccess(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})	
				
				API.regChangeStatus({
					id:this.id,			
					status:3
				}).then((res) => {
					uni.hideLoading()
					this.getInfo();
					
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			regChangeStatus(){
				
				uni.showModal({
					title:"提示",
					content: "请确认是否取消预约功能",
				
					success: (res1) => {
						if (res1.confirm) {
								this.regChangeStatusSuccess()
						} else if (res1.cancel) {
							//('用户点击取消');
						}
					}
				})
				
				
			},
			getInfo(bl,bl2){
				//(bl)
				if(!bl){
					uni.showLoading({
						title: "加载中",
						mask: true,
					})	
				}
				
				API.myAppointmentDetail({
					id:this.id,			
				
				}).then((res) => {
					if(!bl){
						uni.hideLoading()
					}
					this.detail= res.data.chargingAppointment;
					this.chargingDevice=res.data.chargingDevice;
					this.price=res.data.price;
					
					
					this.stationId= this.chargingDevice.stationId;
					this.deviceNo = this.chargingDevice.deviceNo;
					this.channelNo = res.data.channelNo;
					this.carNumber = res.data.carNumber;
					this.gunNo = res.data.gunNo;
								
								
					if(this.detail.status=="0"){
						//this.description= '等待桩主确认预约单，剩余时间'
						var data=newDate(this.detail.createTime).getTime()
						var c=hourDistanceArr(new Date(),new Date(data+5*60*1000))
					
						this.description= '等待桩主确认预约单，剩余时间'+c[1]+'分'+c[2]+"秒";		
						
						setTimeout(()=>{
							this.getInfo(true);
						},2000)
					}
					if(this.detail.status=="1"){
						if(!bl2){
							this.indexstep()
						}
						
					}
					
					
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
				
			},
			indexstep(){
				//this.description= '等待桩主确认预约单，剩余时间'
				var data=newDate(this.detail.createTime).getTime()
				var c=hourDistanceArr(new Date(),new Date(data+this.detail.reserveMinutes*60*1000))
									
				this.description= c[1]+'分'+c[2]+"秒后预约授权将超时，如超时授权自动取消。";		
				if( c[1]!=0||c[2]!=0){
					setTimeout(()=>{
						this.indexstep()
					},1000)
				
				}else{
					 
					setTimeout(()=>{
						this.getInfo(true,true)
					},5000)
				
				}
				
			},
			customback(){
				if(this.isback){
					uni.reLaunch({
						url:"/pages/index/index"
					})
				}else{
					uni.navigateBack({
						
					})
				}
				
			},
		}
		
	}
</script>

<style lang="scss" scoped>
	
	
	.tittle-font {
			
			font-size: 24px;
			position: fixed;
			top: 12px;
			right: 16px;
			z-index: 99999;
	
		}
		/deep/.u-alert-desc{
			width: 100vw;
			text-align: center;
			color: #ff5a00;
		}
		.reverse-time{
			background-color: #fff;
			padding: 36px 28px 16px;
			.time{
				height: 36px;
				color: rgba(0, 185, 98, 100);
				font-size: 36px;
				text-align: center;
				position: relative;
				.img-box{
					width: 72px;
					height: 72px;
					img{
						width: 72px;
						height: 72px;
						position: absolute;
						top: -12px;
						right: -2px;
					}
				}
			}
			.refused{
				color: #666666;
			}
		}
		.details-item{
			margin-top: 32px;
			.item{
				display: flex;
				justify-content: space-between;
				margin-top: 8px;
			}
		}
		// 充电桩详情
		.charge-pile{
			background-color: #fff;
			margin-top: 12px;
			padding: 12px 28px;
			.box{
				position: relative;
				.more{
					position: absolute;
					top: 9px;
					right: 0px;
					font-size: 24px;
					color: #b3b3b3;
				}
			}
			.name{
				line-height: 18px;
				color: rgba(16, 16, 16, 100);
				font-size: 18px;
				font-weight: 600;
			}
			.ellipsis{
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
			.address{
				line-height: 20px;
				color: rgba(51, 51, 51, 100);
				margin-top: 4px;
			}
			.item{
				margin-top: 20px;
			}
		}
		
		// 按钮
		.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
			// }
		}
		.bottom2{
			width: 100%;
			height: 56px;
			position: fixed;
			bottom: 0;
			background-color: #fff;
			display: flex;
			.refuse-btn{
				background-color: #DBDBDB;
			}
			.u-btn{
				height: 40px;
				margin: auto;
				font-size: 18px;
				
			}
			// .cancel-btn{
			// 	width: 91.4%;
			// 	background-color: #dbdbdb;
			// 	color: #666666
			// }
		}
</style>