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

<template>
	<view>
		<view v-if="chargingRecord.status==2">
			<ujp-navbar title="充电结束">
			</ujp-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="charge-infos">
					<view class="item">
						<view class="title">
							充电金额
						</view>
						<view class="content">
							50.00
						</view>
					</view>
					<view class="item">
						<view class="title">
							充电时长
						</view>
						<view class="content">
							00.00.00
						</view>
					</view>
					<view class="item">
						<view class="title">
							优惠金额
						</view>
						<view class="content discounts">
							-6.00元
						</view>
					</view>
					<view class="item">
						<view class="title">
							会员活动
						</view>
						<view class="content">
							充电服务费包月卡
						</view>
					</view>
				</view> -->
				 <view class="info" >
					<view class="info-name">
						充电时长
					</view>
					<view class="info-text">
						{{getPercent2()}}
					</view>
				</view>
				<view class="info" >
					<view class="info-name">
						充电金额
					</view>
					<view class="info-text">
						{{chargingRecord.actualFee}}元
					</view>
				</view>
				<view class="info"  >
					<view class="info-name">
						优惠券
					</view>
					<view class="info-text" style="color:red">
						{{couponObj&&couponObj.status=='1'?couponObj.text:'未使用'}}
					</view>
				</view>
				<view class="info" v-if="userCardBool" >
					<view class="info-name">
						会员活动
					</view>
					<view class="info-text">
						充电服务费包月卡
					</view>
				</view>
				
				<view class="info" v-if="chargingRecord.remark">
					<view class="info-name">
						结束原因
					</view>
					<view class="info-text">
						{{chargingRecord.remark}}
					</view>
				</view>
				
		
			
			
			<!-- <view
			
			style="
				margin-top: 20px;
				text-align: center;
				padding: 0 45px;
				padding-bottom: 40px;
				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>
				<u-line color="#E6E6E6 100%" length="81%" margin="auto"/>
			<!-- 反馈 -->
			<view class="feedback">
				<view class="title-1">
					您对本次充电服务还满意吗？
				</view>
				<view class="title-2">
					请在下方描述您所遇到的问题，或填写您的反馈意见。我们将对优质内容的反馈者发放奖励！
				</view>
				<textarea value="" v-model="message" placeholder="请填写反馈内容" />
				<u-button class="submit" type="success" @click="submitMessage()">提交</u-button>
			</view>
		</view>

		<view style="background-color: #fff; padding-bottom: 60px;" v-else>
			<ujp-navbar title="充电详情">
			</ujp-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' v-if="waitNum==1">排队中</text>
						<text class='u-progress-info' v-else >前方等待{{waitNum-1}}位</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">
				
				<span  v-if="chargingRecord.status==4">
					可用功率不足，您可以换桩或继续排队等待...
				</span>
				<span v-else>
					{{chargingRecord.statusText}}...
				</span>
			</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>0?detail.balance:0}}元
						<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" style="color:red">
					{{couponObj&&couponObj.useText?couponObj.useText:'未使用'}}
				</view>
			</view>
			<view class="info" v-if="chargingRecord.carNumber">
				<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}}
				</view>
			</view>
			<view class="info">
				<view class="info-name">
					充电桩
				</view>
				<view class="info-text">
					 {{chargingRecord.deviceName}}枪{{chargingRecord.channelNo}} 
					
				</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==0||chargingRecord.status==1||chargingRecord.status==4)?'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>
			
			<u-modal v-model="show2" @confirm="gotoGz" 
			cancel-text="暂不关注"  @cancel="cancelGz"
			confirm-text="前往关注"
			
			 confirm-color="#53b56b"
				:show-cancel-button="true" 
				ref="uModal2" :asyncClose="true" 
				 >
				<view style="padding: 15px;"
				
				>请关注<span style=" color:  #53b56b;">{{projectName}}</span>公众号，以便第一时间收到充电结束消息提醒</view>
			</u-modal>
 			
		</view>
	</view>
</template>


<script>
	import * as API from '@/apis/chargeProcess.js'
	import * as API_weixin from '@/apis/weixin.js'
	import * as userAPI from '@/apis/user.js'
	
	import {
		newDate,
		secondsDistance,
		hourDistanceArr
	} from '@/utils'
	export default {
		data() {
			return {
				message: '',
				elderMode:false,
				timer:'',
				title: '联系客服',
				content: '0716-8123456',
				confirmText: '拨打电话',
				detail:{},
				percent: 0,
				percentValue: 0,
				consumerPhone: "",
				id: "",
				chargingGun: {},
				chargingRecord: {},
				couponObj:{},
				show: false,
				show2: false,
				isReady:true,
				waitNum:'',
				projectName:"",
				userCard:null,
			}
		},
		onLoad(op) {
			this.projectName=process.car.ProjectName;
			
			var plus=this.carhelp.getPersonInfoPlus()
			if(plus){
				this.userCard=plus.userCard;
			}
			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
			}
			

		},
		onShow() {
		
			if(!this.isReady){
				this.isReady=true;
				this.addpercent();
				this.getInfo()
			}
			
		},
		onHide() {
			this.isReady=false;
			console.log("onHide")
			},
		onUnload() {
				console.log("onUnload")
			this.isReady=false;
		},
		onReady() {
			this.elderMode = this.carhelp.get('getElderModeClass')  == '长辈模式';
			if(this.elderMode)
				this.theme('elder')
			else
				this.theme('standard')
				
			this.addpercent()
		},
		computed:{
			userCardBool(){
				if(this.chargingRecord&&this.chargingRecord.userCardId){
					
					return true;
				}
				return false
			}
		},
		methods: {
			submitMessage() {
				if(!this.message) {
					uni.showToast({
						title: "请填写反馈内容",
						icon: "none"
					})
					return
				}
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				userAPI.feedback({content: this.message}).then(response => {
					uni.hideLoading()
					uni.showModal({
						title: '提示',
						content: '提交成功',
						showCancel:false,
						confirmColor: '#19be6b'
					});
					this.message = '';
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			theme(type) {
				
			  if(type == 'elder')	
			  {
				document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
				 
			  }
			  else
			  {
				document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
				 
				  
			  } 
			},
			cancelGz(){
				this.carhelp.setGzDate()
			},
			gotoGz(){
				this.carhelp.setGzDate()
				var url="https://mp.weixin.qq.com/s/mCHz1nNvg0xAICiBeIyKRQ";
				window.location.href=url
				
			},
			gotoMain(i){
				if(i==0){
					uni.reLaunch({
						url:"/pages/index/index"
					})
				}
				if(i==1){
					uni.navigateTo({
					
						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() {
				if(!this.chargingRecord.startTime){
					return '00:00:00'
				}
				var Hour=0;
				var Fen=0;
				var S=0;
				if (this.chargingRecord.status == 1) {
					var second = secondsDistance(newDate(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
					})
				})
			},
			checkSubscribe(){
				API_weixin.checkSubscribe({
					openId: this.carhelp.getOpenId() 
				}).then((res) => {
					
					if(res.data=="0"){
						
						this.show2=true;
					}else{
						this.carhelp.setGzDate() 
					}
					
					//setGzDate
				}).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.chargingRecord)
					this.couponObj= res.data.coupon
					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
							
							
						}
					}else if(this.chargingGun.gunType==2){
						//交流
					}
					if (this.chargingRecord.status == 1) {
						if(this.carhelp.getGzDate()&&!this.show2){
							
							this.checkSubscribe()
							
						}
					}
					
					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==0||this.chargingRecord.status==1||this.chargingRecord.status==4){
					
				}else{
					return
				}
				uni.showModal({
					title: '提示',
					content: '确认结束充电？',
					success: res => {
						if (res.confirm) {
							//付钱  改为组件
							this.confirm()
				
						} else if (res.cancel) {
							//('用户点击取消');
						}
					}
				});
			},
			confirm() {
			
				////(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>
	@import "@/_theme.scss";
	.tittle-font {
		@include themeify{
			font-size: themed('font-size7');
		}
/*		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;
		    margin-top: 20px;
		/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 {
			@include themeify{
				font-size: themed('font-size6');
			}
/*			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);
		@include themeify{
			font-size: themed('font-size3');
			height:themed('font-size6');
		}
/*		font-size: 16px;*/
		text-align: center;
		margin-top: 10px;
	}

	.timer {
		height: 43px;
		color: rgba(51, 51, 51, 100);
		@include themeify{
			font-size: themed('font-size13'); 
		}
/*		font-size: 36px;*/
		text-align: center;
		margin-top: 40px;
	}

	.charged {
/*		height: 20px;*/
		color: rgba(153, 153, 153, 100);
		@include themeify{
			font-size: themed('font-size2'); 
			height:themed('font-size5')
		}
/*		font-size: 14px;*/
		text-align: center;
		margin-top: 4px;
	}

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

		.cost-top {
			line-height: 33px;
			text-align: center;
			@include themeify{
				font-size: themed('font-size7');  
			}
/*			font-size: 24px;*/
			position: relative;

			.cost-font {
				position: absolute;
				top: 0;
				right: -25px;
				color: #ff6200;
				@include themeify{
					font-size: themed('font-size7');  
				}
/*				font-size: 24px*/
			}
		}

		.cost-bottom {
			@include themeify{
				line-height: themed('font-size5');  
			}
/*			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);
			@include themeify{
				font-size: themed('font-size5');  
				height: themed('font-size9');  	
			}
/*			font-size: 20px;*/
			text-align: center;
		}

		.power-text {
/*			height: 20px;*/
			color: rgba(153, 153, 153, 100);
			@include themeify{
				font-size: themed('font-size2');  
				height: themed('font-size5');  	
			}
/*			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 {
			@include themeify{
				line-height: themed('font-size7');   
			}
/*			line-height: 23px;*/
			padding: 13px 0 12px;
			//width: 200px;
			text-align: right;
		}
	}
	.charge-infos{
		padding: 20px 36px;
		margin: 0 auto;
		.item{
			display: flex;
			justify-content: space-between;
			color: rgba(102, 102, 102, 100);
			font-size: 18px;
			margin-bottom: 12px;
			.discounts{
				color:red
			}
		}
	}

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

		 
	}


	.progress-bar2 {
			text-align: center;
			margin-top: 20px;

		/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;
			@include themeify{
				font-size: themed('font-size11');   
			}
/*			font-size: 32px;*/
			padding-left: 16rpx;
			letter-spacing: 2rpx;
			color: rgba(51, 51, 51, 100);

			.progress-text {
				@include themeify{
					font-size: themed('font-size2');   
				}
/*				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);
			@include themeify{
				font-size: themed('font-size7');   
				height:themed('font-size12')
			}
/*			font-size: 24px;*/
			text-align: center;
		}

		.item-text {
			eight: 20px;
			color: rgba(153, 153, 153, 100);
			@include themeify{
				font-size: themed('font-size2');   
			}
/*			font-size: 14px;*/
			text-align: center;
		}
	}

	.bottom {
		background-color: #fff;
		display: flex;
		width: 91.4%;
		padding: 0 16px;
		margin:0 auto 40px;

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

// 反馈
.feedback{
	padding: 20px 36px ;
	.title-1{
		color: rgba(16, 16, 16, 100);
		font-size: 18px;
	}
	.title-2{
		color: rgba(102, 102, 102, 100);
		margin-top: 8px;
		line-height: 20px;
	}
	textarea{
		margin-top: 16px;
		width: 93.5%;
		height: 100px;
		background-color: rgba(228, 228, 228, 100);
		color: rgba(153, 153, 153, 100);
		font-size: 16px;
		border-radius: 12px;
		padding: 12px;
		line-height: 23px;
		
	}
	.submit{
		height: 44px;
		line-height: 26px;
		border-radius: 50px;
		background-color: rgba(0, 185, 98, 100);
		color: rgba(255, 255, 255, 100);
		font-size: 18px;
		margin-top: 16px;
	}
}


</style>