charge_miniapp/pages/terminal/terminal.vue

<template>
	<ax-body blank="0">
		<image src="@/static/img/page-bg01.png" class="page-background"></image>
		<view class="body" :class="{ visit }">
			<!-- 主图 -->
			<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">{{ deviceInfo.currentVoltage || '0' }}</view>
					<view class="name">电压V</view>
				</view>
				<view class="param">
					<view class="value">{{ deviceInfo.power }}</view>
					<view class="name">功率KW</view>
				</view>
			</view>
			<view v-if="!visit" class="block">
				<view class="card">
					<view class="title">
						<text>我的抵扣券</text>
						<view class="more" v-if="isEc">
							<view class="switch" :class="{ 'personal': personal == 1 }"><text
									@click="changeAccount(1)">个人</text><text @click="changeAccount(2)">集团</text></view>
						</view>
					</view>
					<view class="coupon-image-card"
						:style="{ backgroundImage: `url(${personal == 1 ? selectedImg : defaultImg})` }">
						<view class="coupon-title">充电抵扣券</view>
						<view class="price-info">
							<view class="price-numer">{{ accountInfo.balance }}</view>
							<view class="price-text">剩余可抵扣充电余量</view>
						</view>
						<view class="shop-coupon-btn"
							:style="{ backgroundColor: personal == 1 ? '#FF6457' : '#3EB6F8' }" @click="gotoCouponBuy">
							立即购券</view>
					</view>
					<!-- 					<view class="coupon" :class="{'personal':personal==1}">
						<view class="name">{{personal == 1?'充电抵扣券':'集团抵扣券'}}</view>
						<view class="feature"><view class="line"></view></view>
						<view class="info">
							<view class="value">{{accountInfo.balance}}</view>
							<view class="describe">剩余可抵扣充电费用 (元)</view>
						</view>
					</view> -->
				</view>
			</view>
			<view class="block">
				<view class="card">
					<view class="title">
						<text>费用信息</text>
						<view @click="$app.url.goto('/pages/site-more/site-more?show=1&stationId=' + stationInfo.id)"
							class="more"><text>价格详情</text>
							<icon class="ax-iconline i-arrow-right icon"></icon>
						</view>
					</view>
					<view class="cell">
						<view class="lable">{{ personal == 1 ? '当前电价' : '集团折扣价' }}</view>
						<view class="contet app-flex middle">
							<view v-if="personal == 1"><text class="money">{{ deviceInfo.currentPrice }}</text><text>
									元/度</text></view>
							<view v-else>
								<text class="obsolete">
									{{ deviceInfo.enterprisePrice }} 元/度
								</text>
								<text class="money">{{ getCurrEcPrice() }}</text><text> 元/度</text>
							</view>
						</view>
					</view>
					<view class="cell" v-if="discountInfo && personal == 1">
						<view class="lable">优惠</view>
						<view class="contet app-flex middle">
							<view>{{ discountInfo.temp3 }}<text class="money">{{ discountInfo.discount ?
								parseFloat(discountInfo.discount).toFixed(4) : "0.0000" }}</text><text>
									元/度</text></view>
						</view>
					</view>
					<view class="cell" v-if="deviceInfo.isFirmUser">
						<view class="lable">企业专享价</view>
						<view class="contet app-flex middle">
							<view><text class="money">{{ deviceInfo.enterprisePrice }}</text><text>
									元/度</text></view>
						</view>
					</view>
					<view class="cell">
						<view class="lable">当前时段</view>
						<view class="contet">{{ deviceInfo.currentPeriodDesc }}</view>
					</view>
					<view class="cell">
						<view class="lable">停车参考</view>
						<view class="contet">{{ deviceInfo.parkingTips }}</view>
					</view>
				</view>
			</view>
			<view class="block">
				<view class="card">
					<view class="title">终端信息</view>
					<view class="cell">
						<view class="lable">终端状态</view>
						<view class="contet">{{ deviceInfo.statusName }}</view>
					</view>
					<view class="cell">
						<view class="lable">终端编号</view>
						<view class="contet">{{ deviceInfo.connectorCode }}</view>
					</view>
					<view class="cell">
						<view class="lable">充电电站</view>
						<view class="contet">{{ deviceInfo.stationName }}</view>
					</view>
					<view class="cell">
						<view class="lable">充电终端</view>
						<view class="contet">{{ deviceInfo.connectorName }}</view>
					</view>
					<view class="cell">
						<view class="lable">车位编号</view>
						<view class="contet">{{ deviceInfo.parkNo ? deviceInfo.parkNo : "无" }}</view>
					</view>
				</view>
			</view>

			<!-- 信息 -->
			<view class="footer">
				<view class="tips">账单信息可能会有所延迟，具体以实际结算为准</view>
				<view>
					<button @click="startup()" class="startup">启动终端充电</button>
					<ax-ios-indicator min="10"></ax-ios-indicator>
				</view>
			</view>
		</view>
		<ax-popup ref="filter" position="" maskType="black" maskEnable>
			<view class="Modal-tips">
				<view class="tips-icon">!</view>
				<view class="icon-title">温馨提示</view>
				<view class="tips-text" v-if="payment_msg != null">
					您有一笔超充订单{{ (payment_msg.maspAmount + payment_msg.maspRealAmount).toFixed(2) }}元待补缴</view>
				<view class="tips-btn">
					<view class="cancel-btn" @click="$refs.filter.close()">取消</view>
					<view class="confirm-btn" @click="$app.url.goto('/pages/coupon-buy/coupon-buy')">购券并补缴</view>
				</view>
			</view>
		</ax-popup>
	</ax-body>
</template>

<script>
export default {
	onLoad(opts) {
		console.log("参数信息：", opts)
		/**
		 * 判断终端是否占用状态
		 * 判断占用终端设备的是不是用户自己
		 */
		this.deviceId = opts.deviceId
		this.deviceStatus = opts.deviceStatus

	},
	onShow() {
		this.queryInChange(this.deviceId, this.deviceStatus);
		/**
		 * 刷新用户信息
		 */
		this.userInfo = this.$app.storage.get(this.$config.keyname.userInfo);
		if (!this.userInfo.phone) {
			this.$app.url.goto('/pages/login/login')
			return;
		}
		// this.$api.login({
		// 	"checkStatus": 1
		// }).then(() => {
		// 	this.userInfo = this.$app.storage.get(this.$config.keyname.userInfo);
		// 	if (this.userInfo.ecId) {
		// 		//查询该集团账户是否正常使用。
		// 		this.$api.base("post", "/chargeApi/queryEcInfo", {
		// 			"ecId": this.userInfo.ecId
		// 		}, {}).then(res => {
		// 			if (res.ecInfo && res.ecInfo.ecStatus == 1) {
		// 				this.isEc = true;
		// 			}
		// 		})
		// 	}
		// })
	},
	mounted() {
		this.get_paymentMsg()
		setTimeout(() => {
			if (this.payment_msg != null) {
				this.$refs.filter.open()
			}
		}, 500)


	},
	data() {
		return {
			payment_msg: null,
			deviceId: 0,
			deviceStatus: 0,
			visit: '',
			personal: 1, // 1 个人订单 2 集团订单
			isEc: false, //是否集团的用户
			nowPriceTime: {}, //当前价格时间段信息
			deviceInfo: {}, //充电桩的信息
			accountInfo: { //账户信息
				balance: 0, //可用抵用券余额
			},
			userInfo: {},
			stationInfo: {}, //站点信息
			orderInfo: {}, //临时订单信息
			checkNum: 0, //检测订单状态次数
			ecInfo: {}, //集团信息
			discountInfo: null, //优惠信息
			selectedImg: 'https://hyxhsh.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/AwQTRxpEMqOG50293e26d86888b3e0f7324c429d2019.png/1.png',
			defaultImg: 'https://hyxhsh.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/SPh1u3KAqte830a107b2e3c5033b1d1027516d84d780.png/1.png'
		}
	},
	methods: {
		//通过用户id查询是否还有在充电中的订单
		queryInChange(deviceId, deviceStatus) {
			if (deviceStatus == 3 || deviceStatus == 4) {
				//占用充电状态；终端占用且不是自己,进入访问模式
				this.visit = true;
			}
			this.getDeviceInfo(deviceId); //获取设备、站的详情信息
			this.getAccountInfo(); //获取账户信息
		},
		//获取设备的详情信息
		getDeviceInfo(deviceId) {
			this.$api.base("get", "/applet/v1/station/connector/detail", {
				"connectorId": deviceId
			}, {}).then(res => {
				this.deviceInfo = res.data;
				this.nowPriceTime = res.nowPriceTime;
				this.stationInfo = res.stationInfo;
				if (res.discountInfo) {
					this.discountInfo = res.discountInfo
				}
				if (this.deviceInfo.tipsStatus == 1) {
					this.$app.popup.alert(this.deviceInfo.tipsContent, "温馨提示");
				}
			})
		},
		// get_paymentMsg() {
		// 	// maspStatus（1:待补缴，2：已补缴）realPredictServiceCost平台；maspAmount第三方
		// 	this.$api.base("post", "/chargeApi/queryOrderList-arrearage", {}, {}).then(res => {
		// 		this.payment_msg = res.data
		// 	})
		// },
		//获取账户信息
		// getAccountInfo() {
		// 	if (this.personal == 1) {
		// 		//获取个人账户信息
		// 		this.$api.base("post", "/chargeApi/getUserAccount", {}, {}).then(res => {
		// 			this.accountInfo.balance = res.userAccount.balance;
		// 		})
		// 	} else {
		// 		//获取集团账户信息
		// 		this.$api.base("post", "/chargeApi/getEcUserAccount", {}, {
		// 			error: false
		// 		}).then(res => {
		// 			this.ecInfo = res.ecInfo;
		// 			this.accountInfo.balance = res.ecUserAccount.balance;
		// 		}).catch(err => {
		// 			this.accountInfo.balance = 0;
		// 			this.$app.popup.alert(err.msg, "温馨提示");
		// 		})
		// 	}
		// },
		//切换账户
		changeAccount(type) {
			if (this.personal == type) {
				return;
			}
			this.personal = type;
			this.getAccountInfo();
		},
		//当前集团折扣价
		getCurrEcPrice() {

			if (!this.nowPriceTime) {
				return 0;
			}
			var currEcP = this.nowPriceTime.price;
			if (this.ecInfo && this.ecInfo.ecDiscount) {

				var realServicePrice = this.nowPriceTime.servicePrice
				if (this.stationInfo.contractServicePrice) {
					realServicePrice = this.stationInfo.contractServicePrice
				}

				currEcP = (this.nowPriceTime.electrovalence + realServicePrice + this.nowPriceTime.addServicePrice *
					this.ecInfo.ecDiscount / 100);
			}
			console.log("dddd", currEcP)
			if (currEcP) {
				currEcP = currEcP.toFixed(2);
			}
			return Number(currEcP).toFixed(4);
		},
		//转换出电压值
		getVolt() {
			if (!this.deviceInfo.power) {
				return 0;
			}
			var v = this.deviceInfo.power / this.deviceInfo.current * 1000;
			return v;
		},
		startup() {

			if (this.visit) {
				this.$app.popup.alert("该充电枪被占用或存在异常，请重新尝试或更换其他充电枪。", "温馨提示");
				return;
			}

			//判断账户余额是否大于两元
			if (this.deviceInfo.availableBalance <= 3) {
				return this.$app.popup.confirm("无法启动充电，抵扣余量需大于3元，请先购买充电券！", "温馨提示！", {
					confirmText: "立即购券"
				}).then(confirm => {
					if (confirm) {
						this.$app.url.goto('/pages/coupon-buy/coupon-buy', true);
					}
				});
			}
			//统一下单并启动接口
			this.get_subMessage();
		},
		get_subMessage() {
			let _this = this
			uni.requestSubscribeMessage({
				tmplIds: ['03bv7QSrzH4DSjmNsI9P0lq0Vj3sBwpN5mgfZln7Rc4'],
				success(res) {
					_this.startChangeAndOrder();
				}
			})
		},
		// 主动发起购券操作
		gotoCouponBuy() {
			this.$app.url.goto('/pages/coupon-buy/coupon-buy', true);
		},
		//统一下单并启动接口
		startChangeAndOrder() {
			var obj = {
				orderType: this.deviceInfo.isEcUser ? 1 : 0, //订单类型 0-平台 1-企业
				equipmentId: this.deviceInfo.equipmentId,
				stationId: this.deviceInfo.stationId,
				couponId: null,
				equipAuthSeq: '',
				connectorId: ''
			}
			this.$api.base("post", "/applet/v1/charge/invokeCharge", obj, {}).then(res => {
				//下单成功，并进行了订单预充值
				this.orderInfo = res.orderInfo;
				if (res.flg && res.flg == 1) {
					//用户有充电中的订单
					this.$app.popup.confirm("您有一个进行中充电订单，不可再次启动。", null, {
						showCancel: false,
						confirmText: "查看订单"
					}).then(cres => {
						this.$app.url.goto('/pages/charging/charging?orderId=' + this.orderInfo.id +
							"&deviceId=" + this.deviceInfo.id, false);
					});
				} else {
					//正常启动充电订单
					this.$app.url.goto('/pages/charging/charging?orderId=' + this.orderInfo.id + "&deviceId=" +
						this.deviceInfo.id, false);
				}
			})
		},
		// 延迟5s查询一下订单，看看是否真的启动成功
		checkedStartStatus() {
			this.$api.base("post", "/chargeApi/checkedStartStatus", {
				"id": this.orderInfo.id
			}, {}).then(res => {

				if (res.code == 0) {
					var respObj = res.obj;
					if (respObj.code == 200) {
						if (respObj.status == 1) {
							uni.hideLoading();
							//状态为1说明正常启动
							this.$app.url.goto('/pages/charging/charging?orderId=' + this.orderInfo.id +
								"&deviceId=" + this.deviceInfo.id, false);
						} else {
							//其他状态，说明充电桩，未启动。或其他问题，需要再次进行进行验证
							if (this.checkNum < 20) {
								this.checkNum = this.checkNum + 1;
								//延迟2s查询一下订单，看看是否真的启动成功
								setTimeout(() => this.checkedStartStatus(), 2000);
							}
						}

					} else {
						uni.hideLoading();
						this.$app.popup.alert(respObj.msg, "温馨提示");
					}

				} else {
					uni.hideLoading();
				}
			})
		},
	}
}
</script>

<style scoped>
@import url("terminal.css");
</style>