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="title">{{stationInfo.name}}</view>
			<!-- <view class="subtitle" v-html="stationInfo.parkTips"></view> -->
			<view class="subtitle">充电减免2小时停车费，超出时长部分计时收费</view>
			<!-- 面包屑 -->
			<view class="crumbs">
				<view class="item"><view class="value">{{getStatusNum(1)}}</view><view class="name">空闲</view></view>
				<view class="item"><view class="value">{{getStatusNum(2)}}</view><view class="name">占用</view></view>
				<view class="item"><view class="value">{{getStatusNum(0)}}</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 deviceList" :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 v-else class="prices list">
				<view v-for="(item,index) in prices.data" :key="index" class="price" :class="{active:prices.index==index}">
					<view class="header">
						<view class="icon">{{getPriceLable(item.timeType)}}</view>
						<view class="value">{{item.time}}</view>
					</view>
					<view class="info">
						<view class="row" v-if="!isOperation">
							<view class="name">抵扣券电价</view>
							<view ><text class="value" >{{(item.price).toFixed(4)}}</text><text class="unit" >{{item.unit}}</text></view>
						</view>
						<view class="operation-price-box" v-else>
							<view class="operation-price">
								<text class="operation-symbol">￥</text>
								<text>1.2099</text>
							</view>
							<view class="mini-text">元/度</view>
							<view class="operation-price-btn">
								企业专享价
							</view>
							<view class="ordinary-price">{{(item.price).toFixed(4)}}</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);
		},
		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 {
				isOperation:false,
				another: false,
				listHeight: 0,
				prices:{
					index: 0,
					data: []
				},
				stationInfo : {},
				deviceList: [],//该站点桩列表
				nowPriceTime: {},//当前费用时段信息
			}
		},
		methods: {
			getStationsInfo(stationId){
				if(!stationId){
					return;
				}
				this.$api.base("post","/chargeApi/getStationsInfo",{"stationId":stationId},{}).then(res=>{
					this.deviceList = res.devices;
					this.prices.data = res.prices;
					this.nowPriceTime = res.nowPriceTime;
					this.stationInfo = res.stationInfo;
					//当前的价格时间断的下标
					for(var i = 0; i < this.prices.data.length; i++){
						if(this.nowPriceTime.id == this.prices.data[i].id){
							this.prices.index = i;
							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;
			},
			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>