charge_miniapp/pages/new-site/new-site.vue

<template>
	<ax-body>
	<view class="site-body">
		<view class="top-banner">
			<swiper class="banner-swiper" circular :autoplay="true" interval="3000" duration="500" @change="swiperChange">
				<swiper-item class="banner-swiper-item" v-for="item in 4">
					<image class="swiper-item-image" src="/static/img/share.jpg" mode=""></image>
				</swiper-item>
			</swiper>
			<view class="swiper-current">{{bannerIndex}}/5</view>
		</view>
		<view class="site-content">
			<view class="top-site-info">
				<view class="site-title">{{stationInfo.name}}</view>
				<view class="site-text">
					<image src="@/static/img/site-icon03.png" class="icon"></image>
					<view class="item-text">充电减免2小时停车费，超出部分按每小时3元计算</view>
				</view>
			</view>
			<view class="site-location">
				<view class="location-left">
					<view class="left-km">距离您{{stationInfo.params.rangeShow}}</view>
					<view class="left-address">{{stationInfo.addr}}</view>
				</view>
				<view class="location-rihgt"  @click="openLocation()">
					<image src="@/static/img/locate2.svg" class="right-icon"></image>
					<view class="right-nav">导航</view>
				</view>
			</view>
			<view class="site-cost-info">
				<view class="cost-info-title">
					<view class="title-name">费用信息</view>
					<view class="check-info" @click="toPriceAll()">
						<text>查看全部</text>
						<text class="ax ax-iconline i-arrow-right icon"></text>
					</view>
				</view>
				<view class="cost-price-info" v-if="user_info.firmId===null||$app.storage.get('USER_INFO').firmType===0">
					<view class="cost-title">
						<view class="title-left">当前价</view>
						<view class="title-right">惊喜价</view>
					</view>
					<view class="cost-price">
						<text class="symbol">￥</text>
						<text>{{nowPriceTime.price?parseFloat(nowPriceTime.price).toFixed(2):"0.0000"}}</text>
						<text class="cost-price-unit">元/度</text>
					</view>
					<view class="time-cost-price">当前时段：</view>
					<view class="time-cost-number">{{stationInfo.params.priceShow}}</view>
				</view>
				<view class="firm-price-info-box" v-else>
					<view class="current-price-info">
						<view class="current-price-title">当前价</view>
						<view class="current-price">
							<view class="current-price-text"><text class="operation-symbol">￥</text>
							<text>{{parseFloat(nowPriceTime.firmPrice).toFixed(2)}}</text></view>
							<view class="current-price-unit">元/度</view>
						</view>
						<view class="time-current-price">当前时段：</view>
						<view class="time-current-number">{{stationInfo.params.priceShow}}</view>
					</view>
					<view class="firm-price-info">
						<view class="firm-price-title">
							<view class="title-text">企业专享价</view>
							<view class="tags-price">特惠价</view>
						</view>
						<view class="firm-price-box">
							<view class="firm-price-text">{{nowPriceTime.price?parseFloat(nowPriceTime.price).toFixed(4):"0.0000"}}</view>
							<view class="firm-price-unit">元/度</view>
						</view>
						<view class="current-pay-price-box">
							<view class="pay-price">
								<view class="firm-old-price">{{parseFloat(nowPriceTime.firmPrice).toFixed(2)}}元/度</view>
								<view class="discount-price">本单预计省9元</view>
							</view>
							<image class="pay-price-icon" src="/static/img/firm-price.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="stopcar-tips">
					<image class="stopcar-tips-icon" src="@/static/img/site-icon03.png"></image>
					<view class="stopcar-tips-text">
						<view class="tips-text-title">停车参考</view>
						<view class="tips-text-mini">充电减免2小时停车费</view>
					</view>
				</view>
			</view>
			<view class="site-list-card">
				<view class="cost-info-title">
					<view class="title-name">充电终端</view>
					<view class="check-info" @click="toDeiceAll()">
						<text>查看全部</text>
						<text class="ax ax-iconline i-arrow-right icon"></text>
					</view>
				</view>
				<view class="app-flex site-select-tab">
					<view class="select-item" v-for="(item,index) in siteSortList" 
					@click="selectItem(index)"
					:class="{selectItemActive:siteSelectIndex==index}">
					{{item}}
					</view>
				</view>
				<view class="site-list-box">
					<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="site-list-card">
				<view class="cost-info-title">
					<view class="title-name">电站信息</view>
					<view class="check-info">
						<text>查看全部</text>
						<text class="ax ax-iconline i-arrow-right icon"></text>
					</view>
				</view>
				<view class="site-detail-line"></view>
				<view class="site-detail-info">
					<view class="detail-info-item">
						<view class="left-item">营业时间</view>
						<view class="right-item">{{busineHours.busineHours}}</view>
					</view>
					<view class="detail-info-item">
						<view class="left-item">服务提供</view>
						<view class="right-item">{{busineHours.entInfo.name}}</view>
					</view>
					<view class="detail-info-item">
						<view class="left-item">发表提供</view>
						<view class="right-item">{{busineHours.entInfo.name}}</view>
					</view>
					<view class="detail-info-item">
						<view class="left-item">客服热线</view>
						<view class="right-item">{{busineHours.entInfo.tel}}</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:"",//营业时间
				bannerIndex:1,//轮播下标
			}
		},
		methods: {
			swiperChange(e){
				this.bannerIndex=e.detail.current+1
			},
			
			getStationsInfo(){
				this.$api.base("post","/chargeApi/getStationsInfoAndUpdateDecice",{"stationId":this.stationInfo.id},{}).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.busineHours);
					this.entInfo = res.entInfo;
					this.service = res.service;
					this.busineHours = res;
				})
			},
			// 拨打电话
			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",{"sn":sn},{}).then(res=>{
					console.log("设备信息：",res)
					this.goTerminal(res.device);
				})
			}
		}
	}
</script>

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