charge_miniapp/subPackages/charging/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="https://national-motion.oss-cn-beijing.aliyuncs.com/20251230/9ca38a2aa5784e06b9cac31587b188b3.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">{{ userInfo.accountBalance }}</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('/subPackages/charging/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('/subPackages/coupon/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);
		console.log(this.userInfo, '获取到的用户信息');
		// if (!this.userInfo) {
		// 	this.$app.url.goto('/pages/index/index')
		// 	return;
		// }
	},
	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(); //获取账户信息
			this.checkedStartStatus(); //查询订单状态
		},
		//获取设备的详情信息
		getDeviceInfo(deviceId) {
			this.$api.base("get", "/applet/v1/station/connector/detail", {
				"connectorCode": 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, "温馨提示");
				}
			})
		},
		//切换账户
		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('/subPackages/coupon/coupon-buy/coupon-buy', true);
					}
				});
			}
			//统一下单并启动接口
			this.get_subMessage();
		},
		get_subMessage() {
			let _this = this
			_this.startChangeAndOrder();

		},
		// 主动发起购券操作
		gotoCouponBuy() {
			this.$app.url.goto('/subPackages/coupon/coupon-buy/coupon-buy', true);
		},
		//统一下单并启动接口
		startChangeAndOrder() {
			var obj = {
				orderType: this.deviceInfo.isFirmUser ? 1 : 0, //订单类型 0-平台 1-企业
				equipmentId: this.deviceInfo.equipmentId,
				stationId: this.deviceInfo.stationId,
				couponId: null,
				// equipAuthSeq: '',
				connectorId: this.deviceInfo.connectorCode,
			}
			this.$api.base("post", "/applet/v1/charge/invokeCharge", obj, {}).then(res => {
				console.log(res, '返回数据');
				//下单成功，并进行了订单预充值
				this.orderInfo = res.data;
				if (res.code == "00000") {
					this.$app.url.goto('/subPackages/charging/charging/charging?chargeOrderNo=' + res.data.chargeOrderNo + "&deviceId=" +
						this.deviceInfo.id, false);
				} else {
					this.$app.popup.alert(res.msg, "温馨提示");
				}
			})
		},
	}
}
</script>

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