charge_miniapp/pages/site-more/site-more.vue

<template>
	<ax-body>
		<image src="@/static/img/page-bg01.png" class="page-background"></image>
		<view class="body" :style="{ '--list-height': `${listHeight}px` }">
			<view class="top-title-box">
				<view class="">
					<view class="title">{{ stationInfo.stationName }}</view>
					<!-- <view class="subtitle" v-html="stationInfo.parkTips"></view> -->
					<view class="subtitle">{{ stationInfo.tips }}</view>
				</view>
				<image class="site-more-topIcon" src="/static/img/site-more-topicon.png" mode=""></image>
			</view>
			<!-- 面包屑 -->
			<view class="crumbs">
				<view class="item">
					<view class="value">{{ stationInfo.idleCount }}</view>
					<view class="name">空闲</view>
				</view>
				<view class="item">
					<view class="value">{{ stationInfo.occupiedCount }}</view>
					<view class="name">占用</view>
				</view>
				<view class="item">
					<view class="value">{{ stationInfo.offlineCount }}</view>
					<view class="name">离线</view>
				</view>
			</view>
			<!-- 数据切换 -->
			<view id="switch" class="switch" @click="another = !another" :class="{ another }">
				<view class="contet">
					<view class="text">电站价格</view>
					<view class="text">充电终端</view>
				</view>
				<view class="bg"></view>
			</view>
			<!-- 终端列表 -->
			<view v-if="another" class="terminals list">
				<view v-for="(item, index) in stationInfo.connectorList" :key="index" @click="goTerminal(item)"
					class="terminal-item">
					<view class="state" :class="[getSatesObj(item).color]">
						<view class="cake">
							<image src="@/static/img/site-icon01.svg" class="icon"></image>
							<view class="name">{{ item.statusName }}</view>
						</view>
					</view>
					<view class="info">
						<view class="name">{{ item.deviceName }}</view>
						<view class="subinfo">电类分类：{{ item.equipmentType }}</view>
						<view class="subinfo">终端编号：{{ item.connectorCode }}</view>
					</view>
				</view>
			</view>
			<!-- 价格列表 -->
			<view v-else class="prices list">
				<view v-for="(item, index) in prices.data.priceList" :key="index" class="price"
					:class="{ active: prices.index == index }">
					<view class="header">
						<view class="icon">{{ item.periodFlagName }}</view>
						<view class="value">{{ item.timePeriod }}</view>
					</view>
					<view class="info">
						<!-- v-if="user_info.firmId===null" -->
						<view class="row" v-if="!prices.data.hasEnterprisePrice">
							<view class="name">抵扣券电价</view>
							<view><text class="value">{{ item.elecPrice }}</text><text class="unit">元/度</text></view>
						</view>
						<view class="operation-price-box" v-else>
							<view class="operation-price">
								<text class="operation-symbol">￥</text>
								<text>{{ item.enterprisePrice }}</text>
							</view>
							<view class="mini-text">元/度</view>
							<view class="operation-price-btn">
								企业专享价
							</view>
							<view class="ordinary-price">{{ item.elecPrice }}</view>
						</view>
						<!-- <view class="row">
							<view class="name">服务费</view>
							<view><text class="value">{{(item.addServicePrice+item.servicePrice).toFixed(4)}}</text><text class="unit">{{item.unit}}</text></view>
						</view> -->
					</view>
					<!-- <view class="footer">
						<view>合计充电价</view>
						<view>{{item.price.toFixed(4)}} {{item.unit}}</view>
					</view> -->
				</view>
			</view>
		</view>
		<view id="underside" class="underside">
			<view class="scan" @click="sacn()">扫码充电</view>
			<ax-ios-indicator min="10"></ax-ios-indicator>
		</view>
	</ax-body>
</template>

<script>
export default {
	onLoad(opts) {
		this.another = !Boolean(opts.show);
		this.getStationsInfo(opts.stationId);
		this.getStationPriceList(opts.stationId);
	},
	mounted() {
		this.$app.act.selectorQuery(this, '#switch,#underside', true).then(res => {
			const s = res.find(i => i.id == 'switch');
			const u = res.find(i => i.id == 'underside');
			const w = uni.getWindowInfo();
			this.listHeight = w.windowHeight - s.top - s.height - u.height;
		});
	},
	data() {
		return {
			user_info: this.$app.storage.get('USER_INFO'),
			another: false,
			listHeight: 0,
			prices: {
				index: 0,
				data: []
			},
			stationInfo: {},
			deviceList: [],//该站点桩列表
			nowPriceTime: {},//当前费用时段信息
		}
	},
	methods: {
		getStationsInfo(stationId) {
			if (!stationId) {
				return;
			}
			this.$api.base("get", "/applet/v1/station/connectors", { "stationId": stationId }, {}).then(res => {
				this.stationInfo = res.data;
				//当前的价格时间断的下标
				for (var i = 0; i < this.prices.data.length; i++) {
					if (this.nowPriceTime.id == this.prices.data[i].id) {
						this.prices.index = i;
						break
					}
				}
			})
		},
		getStationPriceList(stationId) {
			this.$api.base("get", "/applet/v1/station/prices", { "stationId": stationId }, {}).then(res => {
				this.prices.data = res.data;
				// this.nowPriceTime = res.data[this.prices.index];
			})
		},
		getSatesObj(item) {
			//{name:'离线',color:'grey'},{name:'空闲',color:'green'},{name:'占用',color:'blue'}
			var obj = {};
			if (item.status == 2 || item.status == 4) {
				obj = { color: 'blue' };
			} else if (item.deviceStatus == 3) {
				obj = { color: 'orange' };
			} else if (item.deviceStatus == 0) {
				obj = { color: 'grey' };
			} else if (item.deviceStatus == 1) {
				obj = { color: 'green' };
			} else if (item.deviceStatus == 255) {
				obj = { color: 'err' };
			}
			return obj;
		},
		//映射 峰  平  谷
		getPriceLable(type) {
			//时间类型 1 谷 2 平 3 峰
			var str = "";
			switch (type) {
				case 1:
					str = "谷";
					break;
				case 2:
					str = "平";
					break;
				case 3:
					str = "峰";
					break;
			}
			return str;
		},
		settitle(title) {
			uni.setNavigationBarTitle({ title });
		},
		// 跳转充电终端
		goTerminal(item) {
			//设备状态 0：离网1：空闲2：占用（未充电）3：占用（充电中）4：占用（预约锁定）255：故障
			if (item.deviceStatus == 0 || item.deviceStatus == 255) {
				return;
			}
			this.$app.url.goto('/pages/terminal/terminal?deviceId=' + item.id + "&deviceStatus=" + item.deviceStatus);
		},
		//扫一扫
		sacn() {
			this.$app.act.scan().then(res => {
				var paramObj = this.getUrlParams(res.result);
				if (!paramObj || !paramObj.connectorCode) {
					this.$app.popup.alert("二维码不正确。", "温馨提示！");
					return;
				}
				this.getDeviceInfo(paramObj.connectorCode);
			})
		},
		getUrlParams(url) {
			const paramsRegex = /[?&]+([^=&]+)=([^&]*)/gi;
			const params = {};
			let match;
			while (match = paramsRegex.exec(url)) {
				params[match[1]] = match[2];
			}
			return params;
		},
		//通过充电桩编码（sn）获取设备详情
		getDeviceInfo(sn) {
			this.$api.base("post", "/chargeApi/checkDevicesBySn", { "sn": sn }, {}).then(res => {
				console.log("设备信息：", res)
				this.goTerminal(res.device);
			})
		}
	}
}
</script>

<style scoped>
@import url("site-more.css");
</style>