JP-ChargeTeam51/pages/searchPile/chargeProcess/dcCharging.vue

<template>
	<view>
		<view v-if="chargingRecord.status==2">
			<u-navbar title="充电结束">
			</u-navbar>
			<view class="progress-bar2">
				<u-circle-progress width="400" active-color="green" duration='20'  :percent="100" border-width="20">
					<view class="u-progress-content">
						 
						<text class='u-progress-info' v-if="chargingGun.gunType==1">
							<p style="text-align: center;">{{chargingRecord.endSoc}}%</p>
							<p class="progress-text">当前电量</p>
						</text>
						
						<text class='u-progress-info' v-if="chargingGun.gunType==2">
							<p style="text-align: center;">{{chargingRecord.electricQuantity/10000}}</p>
							<p class="progress-text">已充电量(度)</p>
						</text>
						
					</view>

					
				</u-circle-progress>
			</view>

			<view class="time-price">
				<view class="item">
					<view class="item-num">
						{{getPercent2()}}
					</view>
					<view class="item-text">
						充电时长
					</view>
				</view>
				<view class="item">
					<view class="item-num">
						{{chargingRecord.actualFee}}元
					</view>
					<view class="item-text">
						充电金额
					</view>
				</view>
			</view>
			
			<view 
			 v-if="chargingRecord.remark"
			style="
				margin-top: 20px;
				text-align: center;
			">
				结束原因：{{chargingRecord.remark}}
			</view>
			<view
			
			style="
				margin-top: 20px;
				text-align: center;
				padding: 0 65px;
				color:#9e9e9e;
			">
				<span style="color: red;">*</span>实际充电金额与所选金额会略有出入，最终结算金额将以实际充入电量为准。
			</view>
			
			<view class="bottom">
				<u-button size="default" shape="circle" @click="gotoMain(0)"  >返回首页</u-button>
				<u-button size="default" shape="circle" @click="gotoMain(1)">查看订单详情</u-button>
			</view>
		</view>

		<view style="background-color: #fff; padding-bottom: 60px;" v-else>
			<u-navbar title="充电详情">
			</u-navbar>
			<view class="iconfont tittle-font" @click="show = true">
				&#xe616;
			</view>

			<view class="progress-bar">
				<u-circle-progress width="440" active-color="green" :percent="percent?percent:percentValue" border-width="50">

					
					<view class="u-progress-content" v-if="chargingRecord.status==4">
						<text class='u-progress-info'>前方等待{{waitNum}}位</text>
					</view>
					<view class="u-progress-content" v-else-if="chargingGun.gunType==1">
						
						<text class='u-progress-info'>{{percent}}%</text>
					</view>
					<view class="u-progress-content" v-else-if="chargingGun.gunType==2">
						
						<text class='u-progress-info'>{{chargingRecord.statusText}}...</text>
					</view>
					<view class="bot"></view>
				</u-circle-progress>
			</view>
			<view class="starting"  v-if="chargingGun.gunType==1">
				{{chargingRecord.statusText}}...
			</view>


			<view class="timer">
				{{timer}}
			</view>
			<view class="charged">
				已充电{{chargingGun.kwh}}度
			</view>
			<view class="cost">
				<view class="">
					<view class="cost-top">
						{{chargingRecord.dueFee?chargingRecord.dueFee:0}}元
					</view>
					<view class="cost-bottom">
						实时费用
					</view>
				</view>
				<view class="line"></view>
				<view class="">
					<view class="cost-top">
						{{detail.balance}}元
						<view class="iconfont cost-font" @click="gotoUrl('pages/user/finance/recharge')" >&#xe633;</view>
					</view>
					<view class="cost-bottom">
						账户余额
					</view>
				</view>
			</view>
			<view class="power">
				<view>
					<view class="power-num">
						{{chargingRecord.chargeVoltage?chargingRecord.chargeVoltage:0}}v
					</view>
					<view class="power-text">
						电压
					</view>
				</view>
				<view class="line"></view>
				<view>
					<view class="power-num">
						{{chargingRecord.chargingPower?chargingRecord.chargingPower/1000:0}}kW
					</view>
					<view class="power-text">
						功率
					</view>
				</view>
				<view class="line"></view>
				<view>
					<view class="power-num">
						{{chargingRecord.chargeAmpere?chargingRecord.chargeAmpere:0}}A
					</view>
					<view class="power-text">
						电流
					</view>
				</view>
			</view>
			<view class="info">
				<view class="info-name">
					充电车辆
				</view>
				<view class="info-text">
					{{chargingRecord.carNumber}}
				</view>
			</view>
			<view class="info">
				<view class="info-name">
					站点
				</view>
				<view class="info-text">
					{{chargingRecord.stationName}} / {{chargingRecord.deviceNo}}
				</view>
			</view>
			<view class="info" v-if="false">
				<view class="info-name">
					占位费说明
				</view>
				<view class="info-text">
					停止充电后30分钟即开始收取占位费用，1元/分钟
				</view>
			</view>
			<view class="bottom2" >
				<u-button type="primary"  @click="submit"
				 :style="chargingRecord.status==1?'background-color: #00b962':'background-color: #9be6c2;'"
				 shape="circle" >结束充电</u-button>
			</view>

			<u-modal v-model="show" @confirm="confirmPhone" :confirm-text="confirmText" confirm-color="#606266"
				:show-cancel-button="true" ref="uModal" :asyncClose="true" :title="title" :content="consumerPhone">
			</u-modal>

		</view>
	</view>
</template>


<script>
	import * as API from '@/apis/chargeProcess.js'
	import {
		secondsDistance,
		hourDistanceArr
	} from '@/utils'
	export default {
		data() {
			return {
				timer:'',
				title: '联系客服',
				content: '0716-8123456',
				confirmText: '拨打电话',
				detail:{},
				percent: 0,
				percentValue: 0,
				consumerPhone: "",
				id: "",
				chargingGun: {},
				chargingRecord: {},
				show: false,
				isReady:true,
				waitNum:'',
			}
		},
		onLoad(op) {
			if (op.id) {
				this.id = op.id;
				this.init()
				this.getInfo()
			}
			var consumerPhone = this.carhelp.getConfig().consumerPhone
			// img="https://yktwechat.xiaoxinda.com/config/xxd2021.jpg"		
			if (consumerPhone) {
				this.consumerPhone = consumerPhone
			}

		},
		onUnload() {
			this.isReady=false;
		},
		onReady() {
			this.addpercent()
		},
		methods: {
			gotoMain(i){
				if(i==0){
					uni.reLaunch({
						url:"/pages/index/index"
					})
				}
				if(i==1){
					uni.redirectTo({
						url:"/pages/record/details?id="+this.id
					})
				}
			},
			addpercent(){
				this.timer=this.getPercent()
				if(this.isReady){
					setTimeout(()=>{	
						this.percentValue++;
						if(this.percentValue>=100){
							this.percentValue=0;
						}
						this.addpercent()
					},100)
				}
			},
			getPercent2() {
				var ms=this.chargingRecord.chargingMinute*60;
				
				var Hour = parseInt(Math.floor(ms / (60 * 60)));
				var Fen = parseInt(Math.floor(ms % (60 * 60) / 60));
				var S = parseInt(Math.floor(ms % (60) ));
				
				var obj = (Hour > 9 ? "" : "0") + Hour + ":" + (Fen > 9 ? "" : "0") + Fen+ ":" + (S > 9 ? "" : "0") + S
				 
			
				return obj;
			},
			getPercent() {
				var Hour=0;
				var Fen=0;
				var S=0;
				if (this.chargingRecord.status == 1) {
					var second = secondsDistance(this.chargingRecord.startTime);
				
				var ms=second;
				
				 Hour = parseInt(Math.floor(ms / (60 * 60)));
				 Fen = parseInt(Math.floor(ms % (60 * 60) / 60));
				 S = parseInt(Math.floor(ms % (60) ));
				
				 }
				 var obj = (Hour > 9 ? "" : "0") + Hour + ":" + (Fen > 9 ? "" : "0") + Fen+ ":" + (S > 9 ? "" : "0") + S
				 
			
				return obj;
			},
			init() {
				 
			
				API.personalCenter().then((res) => {
					this.detail = res.data
					 
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			confirmPhone() {
				this.show = false;
				uni.makePhoneCall({
					phoneNumber: this.consumerPhone //仅为示例
				});
			},
			getInfo() {
				// uni.showLoading({
				// 	title: "加载中",
				// 	mask: true,
				// })
				API.chargingDetail({
					id: this.id
				}).then((res) => {
					this.chargingRecord = res.data.chargingRecord

					this.chargingGun = res.data.chargingGun
					this.waitNum=res.data.chargingRecord.waitNum;
					this.isReady = true;
					//直流
					if(this.chargingGun.gunType==1){
						
						if (this.chargingRecord.status == 1) {
							this.percent=this.chargingGun.soc
							// var second = secondsDistance(this.chargingRecord.startTime);
							// var percent = (second / 60) / this.chargingRecord.estimateMinute * 100;
							// console.log(this.percent)
							// var sum=this.chargingGun.chargeTimeSec/60+this.chargingGun.remainMin;
							// if(sum){
							// 	this.percent=this.chargingGun.chargeTimeSec/60/sum*100	
							// }
							
						}
					}else if(this.chargingGun.gunType==2){
						//交流
					}
					if(this.isReady&&this.chargingRecord.status!=2){
						var time=500;
						if(this.chargingRecord.status==0){
							
						}else{
							time=3000;
							this.init();
						}
						
						setTimeout(()=>{
							this.getInfo();
						},time)
					}
					uni.hideLoading()

				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			submit() {
				if(this.chargingRecord.status!=1){
					return
				}
				uni.showModal({
					title: '提示',
					content: '确认结束充电？',
					success: res => {
						if (res.confirm) {
							//付钱  改为组件
							this.confirm()
				
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			confirm() {
			
				//console.log(JSON.stringify(this.submitForm))
				
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
			
				//this.submitForm.deviceNo = this.detail.deviceNo;
				API.stopCarCharging({
					chargingRecordId:this.chargingRecord.id
				}).then((res) => {
					this.getInfo()
				}).catch(error => {
					
					uni.showToast({
						title: error
					})
			
				})
			},

		}

	}
</script>
<style>
	page {
		background: #fff;
		padding-bottom: 50px;
	}
</style>
<style lang="scss" scoped>
	.tittle-font {
		font-size: 24px;
		position: fixed;
		top: 12px;
		right: 16px;
		z-index: 99999;

	}

	.bot {
		width:100%;
		height:0;
		padding-top: 100%;
		border: 2px #00b962 dotted;
		border-radius:100%;
		box-sizing: border-box;
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px;
		margin: auto;
	}

	.progress-bar {

		text-align: center;

		/deep/.u-circle-progress {
			
			position: relative;
			// min-width:220px;
			// min-height: 220px;
		}

		.u-progress-content {
			display: flex;
			align-items: center;
			justify-content: center;
		}


		.u-progress-dot {
			width: 16rpx;
			height: 16rpx;
			border-radius: 50%;
			background-color: #fb9126;
		}

		.u-progress-info {
			font-size: 22px;
			padding-left: 16rpx;
			letter-spacing: 2rpx;
			color: rgba(51, 51, 51, 100);
		}

		/deep/.u-progress-dot[data-v-05b104e0] {
			display: none;
		}

		/deep/.u-circle-progress[data-v-cab6fc66] {
			margin: 30px;
		}

	}

	.starting {
		height: 22px;
		color: rgba(0, 185, 98, 100);
		font-size: 16px;
		text-align: center;
	}

	.timer {
		height: 43px;
		color: rgba(51, 51, 51, 100);
		font-size: 36px;
		text-align: center;
		margin-top: 40px;
	}

	.charged {
		height: 20px;
		color: rgba(153, 153, 153, 100);
		font-size: 14px;
		text-align: center;
		margin-top: 4px;
	}

	.cost {
		// width: 50%;
		padding: 0 90px;
		margin-top: 16px;
		display: flex;
		justify-content: space-between;

		.cost-top {
			line-height: 33px;
			text-align: center;
			font-size: 24px;
			position: relative;

			.cost-font {
				position: absolute;
				top: 0;
				right: -25px;
				color: #ff6200;
				font-size: 24px
			}
		}

		.cost-bottom {
			line-height: 20px;
			color: #999999;
			text-align: center;
		}
	}

	.line {
		width: 0;
		height: 36px;
		border: 1px solid rgba(237, 237, 237, 100);
		margin-top: 10px;
		background-color: #ededed;
	}

	.power {
		display: flex;
		justify-content: space-around;
		padding: 0 55px;
		margin-top: 40px;

		.power-num {
			height: 27px;
			color: rgba(51, 51, 51, 100);
			font-size: 20px;
			text-align: center;
		}

		.power-text {
			height: 20px;
			color: rgba(153, 153, 153, 100);
			font-size: 14px;
			text-align: center;
		}
	}

	.info {
		display: flex;
		justify-content: space-between;
		margin: 0 40px;
		// height: 48px;
		line-height: 48px;
		background-color: rgba(255, 255, 255, 100);
		color: rgba(16, 16, 16, 100);
		border-bottom: 1px solid #ededed;

		.info-text {
			line-height: 23px;
			padding: 13px 0 12px;
			width: 200px;
			text-align: right;
		}
	}

	.bottom2 {
	
		padding: 12px 20px;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;

		 
	}


	.progress-bar2 {
			text-align: center;


		/deep/.u-circle-progress {
		//	margin-left: 23.3% !important;
			position: relative;

		}

		.u-progress-content {
			display: flex;
			align-items: center;
			justify-content: center;
		}


		.u-progress-dot {
			width: 16rpx;
			height: 16rpx;
			border-radius: 50%;
			background-color: #fb9126;
		}

		.u-progress-info {
			display: block;
			font-size: 32px;
			padding-left: 16rpx;
			letter-spacing: 2rpx;
			color: rgba(51, 51, 51, 100);

			.progress-text {
				font-size: 14px;
				text-align: center;
				color: #666666;
			}
		}

		/deep/.u-progress-dot[data-v-05b104e0] {
			display: none;
		}

		/deep/.u-circle-progress[data-v-cab6fc66] {
			margin: 30px;
		}

	}

	.time-price {
		display: flex;
		justify-content: space-between;
		padding: 0 65px;

		.item-num {
			height: 33px;
			color: rgba(51, 51, 51, 100);
			font-size: 24px;
			text-align: center;
		}

		.item-text {
			eight: 20px;
			color: rgba(153, 153, 153, 100);
			font-size: 14px;
			text-align: center;
		}
	}

	.bottom {
		display: flex;
		width: 91.4%;
		padding: 12px 16px;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;

		.u-size-default {
			border: 1px solid rgba(0, 185, 98, 100);
			color: #00b962;	
			width: 44%;
		}
	}
</style>