charge_miniapp/pages/site/site.vue

<template>
	<ax-body>
		<view class="body app-hide-scrollbar">
			<!-- 顶部 -->
			<view class="top">
				<view class="site-base">
					<view class="site-name">{{ stationInfo.name }}</view>
					<view class="site-parkade">充电减免2小时停车费，超出部分按每小时3元计算</view>
				</view>
				<view class="location">
					<view class="info app-flex-one">
						<view class="name">距离您{{ stationInfo.params.rangeShow }}</view>
						<view class="subname">{{ stationInfo.addr }}</view>
					</view>
					<view @click="openLocation()" class="info app-flex c-center column">
						<image src="@/static/img/locate2.svg" class="icon"></image>
						<view class="txt">导航</view>
					</view>
					<image src="@/static/img/site-bg01.png" class="bg"></image>
				</view>
				<image src="@/static/img/logo.svg" class="logo" mode="widthFix"></image>
			</view>
			<!-- 费用信息 -->
			<view class="card">
				<view class="card-title">
					<text>费用信息</text>
					<view @click="toPriceAll()" class="more">
						<text>查看全部</text>
						<text class="ax ax-iconline i-arrow-right icon"></text>
					</view>
				</view>
				<view class="info-cell">
					<image src="@/static/img/site-icon02.png" class="icon"></image>
					<text>当前时段：</text><text>{{ stationInfo.params.priceShow }}</text>
				</view>
				<view class="info-cell">
					<image src="@/static/img/site-icon03.png" class="icon"></image>
					<text>停车参考：</text><text>充电减免2小时停车费</text>
				</view>
				<view class="current-price">
					<view class="bg5">
						<view class="text">当前价</view>
						<image src="@/static/img/site-bg05.svg" class="bg" mode="heightFix"></image>
					</view>
					<!-- v-if="user_info.firmId===null" -->
					<view class="price-wrap"
						v-if="user_info.firmId === null || $app.storage.get('USER_INFO').firmType === 0">
						<view class="price">
							<text class="symbol">￥</text>
							<text>{{ nowPriceTime.price ? parseFloat(nowPriceTime.price).toFixed(4) : "0.0000" }}</text>
						</view>
						<view class="unit">元/度</view>
					</view>
					<view class="price-wrap" v-else>
						<view class="operation-price">
							<text class="operation-symbol">￥</text>
							<text>{{ parseFloat(nowPriceTime.firmPrice).toFixed(4) }}</text>
						</view>
						<view class="mini-text">元/度</view>
						<view class="operation-price-btn">
							企业专享价
						</view>
						<view class="ordinary-price">
							{{ nowPriceTime.price ? parseFloat(nowPriceTime.price).toFixed(4) : "0.0000" }}</view>
					</view>
				</view>
			</view>
			<!-- 充电终端 -->
			<view class="card">
				<view class="card-title">
					<text>充电终端</text>
					<view @click="toDeiceAll()" class="more">
						<text>查看全部</text>
						<text class="ax ax-iconline i-arrow-right icon"></text>
					</view>
				</view>
				<view class="bread">
					<view class="bread-item">
						<view class="value">{{ getStatusNum(1) }}</view>
						<view class="name">空闲</view>
					</view>
					<view class="bread-item">
						<view class="value">{{ getStatusNum(2) }}</view>
						<view class="name">占用</view>
					</view>
					<view class="bread-item">
						<view class="value">{{ getStatusNum(0) }}</view>
						<view class="name">离线</view>
					</view>
				</view>
				<view class="terminals">
					<view v-for="(item, index) in terminals" :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">{{ getSatesObj(item).name }}</view>
							</view>
						</view>
						<view class="info">
							<view class="name">{{ item.deviceName }}</view>
							<view class="subinfo">电类分类：{{ getdeviceTypeName(item.eType) }}</view>
							<view class="subinfo">终端编号：{{ item.deviceNo }}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 扫码充电 -->
			<view class="footer">
				<view class="bg5">
					<view class="text">
						<view>中数电动</view>
						<view>特惠价</view>
					</view>
					<image src="@/static/img/site-bg05.svg" class="bg" mode="heightFix"></image>
				</view>
				<view class="price-wrap">
					<view class="price">
						<text class="symbol">￥</text>
						<!-- v-if="nowPriceTime.firmPrice===null" -->
						<text v-if="nowPriceTime.firmPrice === null || $app.storage.get('USER_INFO').firmType === 0">{{
							nowPriceTime.price ? nowPriceTime.price.toFixed(4) : "0.0000" }}</text>
						<text v-else>{{ parseFloat(nowPriceTime.firmPrice).toFixed(4) }}</text>
					</view>
					<view class="unit">{{ nowPriceTime.unit }}</view>
				</view>
				<view @click="sacn()" class="scan">扫码充电</view>
			</view>
		</view>
	</ax-body>
</template>

<script>
export default {
	onLoad: function (option) {
		console.log(option); //打印出上个页面传递的参数。
		this.stationInfo = JSON.parse(option.item);
		if (this.stationInfo.pictures) {
			//添加站点图片
			var imgArr = this.stationInfo.pictures.split(",");
			if (imgArr.length > 0) {
				this.tops = imgArr;
			}
		}
		this.getStationsInfo();
		this.getConfigStationInfo();
	},
	mounted() {
		this.$app.act.selectorQuery(this, '#footer').then(res => {
			const win = uni.getWindowInfo();
			const tHight = win.windowWidth * 9 / 16;
			this.mainHeight = win.windowHeight - tHight - res.height + 10;
		});
	},
	data() {
		return {
			user_info: this.$app.storage.get('USER_INFO'),
			mainHeight: 0,
			tops: ["../../static/img/$temp-site.png"],
			another: false,
			terminals: [],
			entInfo: {
				title: '服务提供',
				name: '华能贵州盘州市风电有限责任公司',
				code: '915205555155625655',
				tel: '0851-8815158',
				businessLicenceUrl: "/static/img/$temp-site01.jpg"
			},
			stationInfo: "",//站点信息
			deviceList: [],//该站点桩列表
			timePricesList: [],//费用时段列表
			nowPriceTime: {},//当前费用时段信息
			service: {
				tel: '400-0000-0000',
				work: '09:00 至 18:00'
			},
			busineHours: "",//营业时间
		}
	},
	methods: {
		getStationsInfo() {
			this.$api.base("post", "/chargeApi/getStationsInfoAndUpdateDecice", { "stationId": this.stationInfo.stationId }, {}).then(res => {
				this.deviceList = res.devices;
				this.timePricesList = res.prices;
				this.nowPriceTime = res.nowPriceTime;
				//只显示三个设备信息
				for (var i = 0; i < this.deviceList.length; i++) {
					this.terminals.push(this.deviceList[i]);
					if (i == 2) {
						break;
					}
				}
			})
		},
		//获取桩状态的数量
		getStatusNum(status) {
			var num = 0;
			//设备状态 0：离网1：空闲2：占用（未充电）3：占用（充电中）4：占用（预约锁定）255：故障
			for (var i = 0; i < this.deviceList.length; i++) {
				var device = this.deviceList[i];
				if (status == 2) {
					if (device.deviceStatus == 2 || device.deviceStatus == 3 || device.deviceStatus == 4) {
						num++;
						continue;
					}
				}
				if (device.deviceStatus == status) {
					num++;
				}
			}
			return num;
		},
		getSatesObj(item) {
			//{name:'离线',color:'grey'},{name:'空闲',color:'green'},{name:'占用',color:'blue'}
			var obj = {};
			if (item.deviceStatus == 2 || item.deviceStatus == 4) {
				obj = { name: '占用', color: 'blue' };
			} else if (item.deviceStatus == 3) {
				obj = { name: '充电中', color: 'orange' };
			} else if (item.deviceStatus == 0) {
				obj = { name: '离线', color: 'grey' };
			} else if (item.deviceStatus == 1) {
				obj = { name: '空闲', color: 'green' };
			} else if (item.deviceStatus == 255) {
				obj = { name: '故障', color: 'err' };
			}
			return obj;
		},
		//获取充电桩设备类型
		getdeviceTypeName(type) {
			//电类型 1：直流设备；2：交流设备3：交直流一体设备；4：无线设备；5：其他
			var str = "";
			switch (type) {
				case "1":
					str = "直流设备";
					break
				case "2":
					str = "交流设备";
					break
				case "3":
					str = "交直流一体设备";
					break
				case "4":
					str = "无线设备";
					break
				case "5":
					str = "其他";
					break
			}
			return str;
		},
		//映射 峰  平  谷
		getPriceLable(type) {
			//时间类型 1 谷 2 平 3 峰
			var str = "";
			switch (type) {
				case 1:
					str = "谷";
					break;
				case 2:
					str = "平";
					break;
				case 3:
					str = "峰";
					break;
			}
			return str;
		},
		//获取配置文件信息
		getConfigStationInfo() {
			this.$api.static(this.$config.url.configUrl + "stationConfi.json").then(res => {
				console.log("获取的配置文件信息:", res);
				this.entInfo = res.entInfo;
				this.service = res.service;
				this.busineHours = res.busineHours;
			})
		},
		// 拨打电话
		callPhone(phone) {
			this.$app.act.callPhone(phone);
		},
		// 打开客服
		openCustomerService() {
			this.$refs.service.open();
		},
		// 打开服务提供
		openEnt_Serve() {
			this.entInfo.title = '服务提供';
			this.$refs.entInfo.open();
		},
		// 打开发票提供
		openEnt_Invoicing() {
			this.entInfo.title = '发票提供';
			this.$refs.entInfo.open();
		},
		// 关闭企业弹窗
		closeEnt() {
			this.$refs.entInfo.close();
		},
		// 关闭服务弹窗
		closeService() {
			this.$refs.service.close();
		},
		// 打开地图
		openLocation() {
			uni.openLocation({
				latitude: Number(this.stationInfo.lat),
				longitude: Number(this.stationInfo.lng),
			});
		},
		// 跳转充电终端
		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);
		},
		//去查看全部电站
		toDeiceAll() {
			var strList = JSON.stringify(this.timePricesList);
			var currPriceId = this.nowPriceTime.id
			this.$app.url.goto('/pages/site-more/site-more?stationId=' + this.stationInfo.id)
		},
		//去查看全部电价
		toPriceAll() {
			this.$app.url.goto('/pages/site-more/site-more?show=1&stationId=' + this.stationInfo.id)
		},
		//扫一扫
		sacn() {
			this.$app.act.scan().then(res => {
				console.log(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", { "connectorCode": sn }, {}).then(res => {
				console.log("设备信息：", res)
				this.goTerminal(res.device);
			})
		}
	}
}
</script>

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