charge_miniapp/pages/charging/charging.vue

<template>
	<ax-body blank="0" hideIndicatorArea>
		<image src="@/static/img/page-bg01.png" class="page-background"></image>
		<view class="body">
			<view v-if="exiting.visible" class="exiting">
				<view class="app-flex c-center column contet">
					<view class="exiting-title">长按停止按钮结束充电</view>
					<view class="countdown-ring" :class="{active:exiting.lock}" @touchstart="exiting.lock=true"
						@touchend="exiting.lock=false">
						<view class="_half left" @animationend="submitExit()"></view>
						<view class="_half right"></view>
						<view class="_button">
							<view>停止</view>
							<view>充电</view>
						</view>
					</view>
					<view class="close" @click="exiting.visible=false">取消</view>
				</view>
				<view @click="exiting.visible=false" class="mask"></view>
			</view>
			<!-- 计时器 -->
			<view v-if="orderInfo.status == 1" class="timer">
				<view class="value">{{timer.text}}</view>
				<view class="name">充电时间</view>
			</view>
			<!-- 充电动画 -->
			<view class="charge-loading-box" v-if="orderInfo.status == 1">
				<view class="charge-loading">
					<image class="charge-icon" src="../../static/img/charge_loading.svg" mode=""></image>
					<view class="c-loading"></view>
				</view>
			</view>
			<view v-if="orderInfo.status == 0" class="timer">
				<view class="value" style="font-size: 22px;">充电正在启动中......</view>
				<view v-if="isShowBtn" class="name" style="color: red;font-size: 14px;">长时间无法启动可点击“长按结束充电”按钮结束订单。</view>
			</view>
			<!-- 主图 -->
			<view class="app-flex c-center host-graph">
				<image src="@/static/img/charging-01.png" mode="widthFix" class="image"></image>
			</view>
			<!-- 主参数 -->
			<view class="parameter">
				<view class="param">
					<view class="value">{{deviceInfo.current}}</view>
					<view class="name">电流A</view>
				</view>
				<view class="param">
					<view class="value">{{getVolt()}}</view>
					<view class="name">电压V</view>
				</view>
				<view class="param">
					<view class="value">{{deviceInfo.power}}</view>
					<view class="name">功率KW</view>
				</view>
			</view>
			<!-- 统计兰 -->
			<view class="statbar">
				<view class="sta">
					<view class="value">{{statInfo.electricity}}</view>
					<view class="name">电量/度</view>
				</view>
				<view class="split"></view>
				<view class="sta">
					<view class="value">{{statInfo.cost}}</view>
					<view class="name">费用/元</view>
				</view>
			</view>
			<!-- 信息 -->
			<view id="info" class="info">
				<view>
					<view class="cell">
						<view class="lable">订单编号</view>
						<view class="contet">{{orderInfo.id}}</view>
					</view>
					<view class="cell">
						<view class="lable">终端编号</view>
						<view class="contet">{{deviceInfo.deviceNo}}</view>
					</view>
					<view class="cell">
						<view class="lable">充电电站</view>
						<view class="contet">{{deviceInfo.thirdPartyStationName}}</view>
					</view>
					<view class="cell">
						<view class="lable">充电终端</view>
						<view class="contet">{{deviceInfo.deviceName}}</view>
					</view>
				</view>
				<view class="tips">账单信息可能会有所延迟，具体以实际结算为准</view>
				<view>
					<button @click="exiting.visible=true" :disabled="!isShowBtn" class="end">结束充电</button>
					<ax-ios-indicator min="10"></ax-ios-indicator>
				</view>
			</view>
		</view>
	</ax-body>
</template>

<script>
	export default {
		onLoad(opts) {
			console.log("启动充值页面的参数：", opts)
			this.orderInfo.id = opts.orderId;
			this.deviceInfo.id = opts.deviceId;
		},
		onShow() {
			this.getDeviceInfo();
			this.getOrderInfo();
		},
		data() {
			return {
				exiting: {
					visible: false,
					lock: false
				},
				timer: {
					id: 0,
					start: '2024/08/07 09:00:00',
					text: '00：00：00',
					isSatrt: false,
				},
				orderTimer: {
					id: 0,
					isSatrt: false,
					timeInterval: 10, //每隔多少秒查询一次订单(单位秒:s)
				},
				statInfo: {
					electricity: 0,
					cost: 0
				}, //统计信息，电量，费用
				nowPriceTime: {}, //当前价格时间段信息
				deviceInfo: {}, //充电桩的信息
				orderInfo: {
					id: 1
				}, //订单信息
				isShowBtn: true, //是否显示长按结束按钮 
			}
		},
		destroyed() {
			console.log("关闭页面了。。。。。。")
			//关闭页面了，要清除定时器
			clearInterval(this.timer.id);
			clearInterval(this.orderTimer.id);
		},
		methods: {
			//获取设备的详情信息
			getDeviceInfo(deviceId) {
				this.$api.base("post", "/chargeApi/getDevicesDetial", {
					"deviceId": this.deviceInfo.id
				}, {}).then(res => {
					this.deviceInfo = res.device;
					this.nowPriceTime = res.nowPriceTime;

				})
			},
			//是否显示长按结束按钮
			isShowEendBtn(orderTime) {
				var t1 = new Date(orderTime).getTime();
				var t2 = new Date().getTime();
				var t = (t2 - t1) / 1000; //单位秒
				if (t >= 60 || this.orderInfo.status == 1) {
					//启动时间大于一分钟，可以显示长按结束按钮
					this.isShowBtn = true;
				}
			},
			//查询订单详情并进行订单状态的检测
			getOrderInfo() {
				this.$api.base("post", "/chargeApi/queryIsSuccessStop", {
					"id": this.orderInfo.id
				}, {
					loading: false
				}).then(res => {
					this.orderInfo = res.obj.orderInfo;
					this.timer.start = res.obj.orderInfo.startTime.replaceAll("-", "/");
					this.isShowEendBtn(res.obj.orderInfo.startTime.replaceAll("-", "/"));
					//充电的度数
					if (this.orderInfo.totalCharge != null) {
						this.statInfo.electricity = this.orderInfo.totalCharge;
					}

					//费用
					let cost = (this.statInfo.electricity * this.nowPriceTime.price).toFixed(2);
					if (!isNaN(cost) && this.orderInfo.thirdPartyElecfee == 0) {
						//如果后台，第三方返回的电费是0按照自己的方式进行计算
						this.statInfo.cost = cost
					}
					if (!isNaN(this.orderInfo.realCost) && this.orderInfo.thirdPartyElecfee > 0) {
						//如果后台有返回第三方的电费，取后台计算的值
						this.statInfo.cost = this.orderInfo.realCost.toFixed(4);
					}

					if (this.orderInfo.status == 3 || this.orderInfo.status == 5) {
						uni.hideLoading();
						clearInterval(this.timer.id);
						clearInterval(this.orderTimer.id);
						this.$app.url.goto('/pages/order-detail/order-detail?orderId=' + this.orderInfo.id, false);
						return;
					}
					if (this.orderInfo.status == 1 && !this.timer.isSatrt) {
						//状态为充电中
						this.startup();
					}
					if (!this.orderTimer.isSatrt) {
						this.orderTimer.isSatrt = true;
						//开启定时器每隔5s查询订单
						this.startCheckOrderTimer();
					}

				})
			},
			getVolt() {
				if (!this.deviceInfo.power) {
					return 0;
				}
				var v = this.deviceInfo.power / this.deviceInfo.current * 1000;
				return v;
			},
			//启动检测订单的定时器,每隔5S
			startCheckOrderTimer() {
				clearInterval(this.orderTimer.id);
				this.orderTimer.id = setInterval(() => {
					this.getOrderInfo(this.orderInfo.id)
				}, this.orderTimer.timeInterval * 1000);
			},
			// 启动定时器
			startup() {
				const start = new Date(this.timer.start);
				const obj = {
					hour: 0,
					minute: 0,
					second: 0
				};
				const handle = () => {
					this.timer.isSatrt = true;
					const diff = Date.now() - start.getTime();
					obj.hour = Math.floor(diff / 1000 / 60 / 60);
					obj.minute = Math.floor(diff / 1000 / 60 % 60);
					obj.second = Math.floor(diff / 1000 % 60);
					this.timer.text =
						`${String(obj.hour).padStart(2,'0')}：${String(obj.minute).padStart(2,'0')}：${String(obj.second).padStart(2,'0')}`;
					//console.log(diff,Math.floor(diff / 1000 ))
					/* //计算在该功率下，
					var mill = diff / 1000;//充电时间秒
					if(!this.deviceInfo.power){
						return;
					}
					//充电的度数
					this.statInfo.electricity = (this.deviceInfo.power/3600 * mill).toFixed(2);
					//费用
					this.statInfo.cost = (this.statInfo.electricity * this.nowPriceTime.price).toFixed(2); */
				}
				clearInterval(this.timer.id);
				this.timer.id = setInterval(handle, 1000);
				handle();
			},
			// 退出充电
			exit() {
				/* this.$app.popup.toast("测试环境，请等待自动结束")
							return; */
				var _this = this;
				this.$api.base("post", "/chargeApi/stopCharge", {
					"id": this.orderInfo.id
				}, {}).then(res => {
					this.exiting.lock = false;
					clearInterval(this.orderTimer.id);
					this.orderTimer.isSatrt = false;
					this.orderTimer.timeInterval = 2;
					this.$app.popup.loading(true, {
						title: "结算中，请稍候",
						timeout: 120 * 1000
					})
					setTimeout(() => {
						this.getOrderInfo(this.orderInfo.id)
					}, 2000)

					/* clearInterval(this.timer.id);
					clearInterval(this.orderTimer.id);
					this.$app.url.goto('/pages/order-detail/order-detail?orderId='+this.orderInfo.id,false); */
				})
			},
			// 长按动画结束
			submitExit() {
				this.exiting.lock = false;
				this.exiting.visible = false;
				this.exit();
			}
		}
	}
</script>

<style lang="less" scoped>
	@import url("charging.css");

	/* 充电loading动画 */
	.charge-loading-box {
		margin: auto;
		margin-top: 20rpx;
	}

	.charge-loading {
		width: 364rpx;
		height: 36rpx;
		background: #FFFFFF;
		border-radius: 18rpx;
		overflow: hidden;
		position: relative;
	}

	.charge-icon {
		width: 28rpx;
		height: 28rpx;
		z-index: 1000;
		position: absolute;
		left: 20rpx;
		top: 5rpx;
	}

	.c-loading {
		width: 100%;
		height: 100%;
		background: linear-gradient(66deg,
				rgba(139, 243, 251, 0),
				#60C8FE,
				#53D4FF,
				rgba(139, 243, 251, 0.7), );
		border-radius: 18rpx;
		animation: loading 3s linear infinite;
		background-size: 200% 100%;
	}

	@keyframes loading {
		0% {
			background-position: 100% 0;
		}

		100% {
			background-position: -100% 0;
		}
	}
</style>