jp-charge/pages/index/index.vue

<template>
	<view>
		<ujp-navbar title="充电中" :is-back="false">
			<view class="slot-wrap">
				<view class="navbar-left"></view>
				<view class="navbar-right" @click="f5(true)" style="    color: #1d7cff;">
					<u-icon name="shuaxin" custom-prefix="custom-icon" color="#1677ff" size="40"></u-icon>刷新
				</view>
			</view>
		</ujp-navbar>
		<view class="chargeInfoNull" v-if="list.length==0">
			<img height="80" width="80" src="@/assets/img/ddc.png" alt="">
			<p>暂无充电车辆</p>
		</view>


		<swiper class="swiper" :current="current" @change="changeswiper" style="    height: 700px;"
			v-if="list.length!=0">
			<swiper-item v-for="(item,i) in list" :key="i">
				<view class="chargeInfo">
					<view class="chargeInfo-text">
						<p>桩名：{{item.deviceName}}</p>
						<p>桩号：{{item.deviceNo}}</p>
					</view>
					<view class="chargeInfo-btn">
						通道:{{item.channelNo}}
					</view>
				</view>
				<view class="chargeImg">
					<img v-if="item.status==0" src="@/assets/img/charge-0.png" alt="">
					<img v-if="item.status==1" src="@/assets/img/charge-1.png" alt="">
					<img v-if="item.status==2" src="@/assets/img/charge-2.png" alt="">
					<img v-if="item.status==3" src="@/assets/img/charge-3.png" alt="">
					<div class="JPTIME JPTIME1" v-if="item.status==0||item.status==3" v-text="showtime[i]"></div>

				</view>
				<view class="chargeTime" v-if="item.status==3">
					<h1>关闭中...</h1>

				</view>
				<view class="chargeTime" v-if="item.status==0">
					<h1>启动中...</h1>
					请在2分钟内接入电源！
				</view>
				<view class="chargeTime" v-if="item.status==2">
					<h1>充电结束</h1>
					{{item.updateTime}}{{item.remark?':'+item.remark:''}}
				</view>
				<view class="chargeTime" v-if="item.status==1">
					<p v-if="item.templateCode==3&&item.estimateFee<=5">预充金额:{{item.estimateFee?item.estimateFee+'元':'充满自停'}}</p>
					<p v-if="item.templateCode!=3" >剩余时长<span>({{getPercent(item).time}})</span></p>
					
					<u-line-progress v-if="(item.templateCode==3&&item.estimateFee<=5)||item.templateCode!=3" active-color="#ececec" height="48" :percent="getPercent(item).percent">
						<div style="     
						border-radius: 100px;
						 min-width: 100px;  width: 100%;background-color: rgba(51, 136, 255, 100);height: 8px;">
							&nbsp;
							<div class="" style="float: right;
										
										padding: 0 8px;
										border-radius: 100px;
										background-color: rgba(51, 136, 255, 100);
										color: rgb(255, 255, 255);
										font-size: 12px;
										text-align: center;
										font-family: -apple-system;
										top: -5px;
										position: relative;							
							">{{getPercent(item).value}}</div>
						</div>


					</u-line-progress>
				</view>
				<view class="chargeData">
					<view class="chargeData-item">
						<u-icon name="jiagebaohu" custom-prefix="custom-icon" color="#1677ff" size="56"></u-icon>
						<h2 v-if="item.templateCode==3">{{item.dueFee?(item.dueFee):0}}元</h2>
						
						<h2 v-else >{{item.actualFee?(item.actualFee):0}}元</h2>
						<p>消费金额</p>
					</view>
					<view class="chargeData-item">
						<u-icon name="dian" custom-prefix="custom-icon" color="#1677ff" size="56"></u-icon>
						<h2>{{item.chargingPower?item.chargingPower:0}}W</h2>
						<p>充电功率</p>
					</view>
				</view>
				<view class="chargeBtn">
					<view class="chargeBtn-item" v-if="item.status==1||item.status==0" @click="returnMoney(item)">终止并退款
					</view>
					<view class="chargeBtn-item" v-if="item.status==2" @click="f5(true)">刷新</view>
					<view class="chargeBtn-item" v-if="item.templateCode!=3" @click="showTips(item)">费用说明</view>
				</view>

				<view class="chargeNext">{{i+1}}/{{list.length}}</view>
			</swiper-item>




		</swiper>
		<u-modal v-model="showmodel" title="费用说明">
			
			
			<p v-for="(item,i) in showitem" class="showmodel" :key="i">{{item.minPower}}W-{{item.maxPower}}W
				<span>{{item.price}}元每小时</span></p>
				
			<p style="    padding: 20rpx;" v-if="(showObj.electricityPrice&&showObj.servicePrice)">
			电费单价：{{showObj.electricityPrice}}元/千瓦时;服务费单价：{{showObj.servicePrice}}元/千瓦时	</p>

		<p style="    padding: 15px;" v-if="roundingMinute!=null&&roundingMinute!=-1">超过{{roundingMinute}}分钟，按1小时记，不足{{roundingMinute}}分钟，不计费</p>
			<p style="    padding: 15px;" v-if="showitem.length==0">无费用说明或为免费充电模式</p>
	

		</u-modal>
		<Tabbar :current="0" ref="tabbarMain"  :id="id"></Tabbar>
	</view>
</template>

<script>
	import Tabbar from '@/components/Tabbar.vue'
	import * as API from '@/apis/index.js'
	import {
		secondsDistance,
		hourDistanceArr
	} from '@/utils'
	export default {
		data() {
			return {
				k: 0,
				id: "",
				current: "0",
				showmodel: false,
				showObj:{},
				showitem: [],
				percent: 0,
				list: [],
				showtime: {},
				isReady: false,
				isCharge: false,
				roundingMinute:-1,
				detail: {

				},
				detailIng: {

				},
				setTimeoutId: ""
			}
		},
		onLoad(op) {
			if (op.k) {
				this.k = op.k;
				//如果是扫码 ，或者登陆进来的， 并且没有充电，就跳转到充电页面  k= null
				//如果是在系统内部访问的，  k=1  不跳转；
			}
			
			if (op.id) {
				this.id = op.id;
				this.carhelp.set("qr-default-id",op.id);
			}else{
				//用于支付后返回系统  -- 点金计划
				this.id =this.carhelp.get("qr-default-id");
			}
			uni.showLoading({
				title: "加载中",
				mask: true,
			})
			this.init(op.phone)
			setInterval(this.formatDate, 500);

		},
		beforeDestroy() {
			if (this.formatDate) {
				clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
			}
		},
		methods: {
			
			changeswiper(e) {
				this.current = e.detail.current;
			},
			formatDate() {
				for (var i in this.list) {
					var obj = this.list[i];
					var second = 0;

					if (obj.status == 0) {
						second = secondsDistance(obj.createTime);
					}
					if (obj.status == 3) {
						second = secondsDistance(obj.updateTime);
					}
					//obj.showtime=this.getShowTime(obj);
					var ms = 60 * 2 - second;
					if (ms > 0) {
						var Hour = parseInt(Math.floor(ms / (60)));
						var Fen = parseInt(Math.floor(ms % 60));
						this.showtime[i] = (Hour > 9 ? "" : "0") + Hour + ":" + (Fen > 9 ? "" : "0") + Fen

					} else {
						this.showtime[i] = "00:00";
					}

					this.$forceUpdate()

				}
			},
			getPercent1(item) {
				var obj = {
				
				}
				if (item.status == 1) {
				
					var second = secondsDistance(item.startTime);
					if (second > 0) {
				
						obj.percent = (second / 60) / item.estimateMinute * 100;
						var ms = item.estimateMinute * 60 - second
						if (ms > 0) {
							var Hour = parseInt(Math.floor(ms / (60 * 60)));
							var Fen = parseInt(Math.floor(ms % (60 * 60) / 60));
							var miao =ms%60 ;
							obj.value = "充电中"
							obj.time = (Hour > 9 ? "" : "0") + Hour + ":" + (Fen > 9 ? "" : "0") + Fen+":"+miao
						}
				
					}
				}
				if (item.status == 0) {
					obj.value = "启动中"
					obj.percent = "50";
				}
				if (item.status == 2) {
					obj.value = "关闭中"
					obj.percent = "50";
				}
				//特殊情况默认值
				if (!obj.time) {
					obj.time = "00:00:00"
				}
				if (!obj.percent) {
					obj.percent = "100";
				}
				
				return obj;
			},
			getPercent3(item) {
				
				var obj = {
				
				}
				if (item.status == 1) {
					obj.percent=item.dueFee/item.estimateFee*100
					
					obj.value = "充电中（"+parseInt(obj.percent)+'%）'
					obj.time = ""
					if(obj.percent<25){
						obj.percent=25
					}
					
				}
				if (item.status == 0) {
					obj.value = "启动中"
					obj.percent = "50";
				}
				if (item.status == 2) {
					obj.value = "关闭中"
					obj.percent = "50";
				}
				
				if (!obj.percent) {
					obj.percent = "100";
				}
				obj.time = ""
				return obj;
			},
			getPercent(item) {
				if(!item){
					return {}
				}
				if(item.templateCode==3){
					return this.getPercent3(item)
				}else{
					return this.getPercent1(item)
				}
			},
			showTips(item) {
				this.showmodel = true;
				this.roundingMinute=item.roundingMinute;
				if(this.roundingMinute==null){
					this.roundingMinute=5;
				}
				this.showitem = item.chargingPriceList;
				this.showObj=item
			},
			returnMoney(item) {

				uni.showModal({
					title: '停止充电确认',
					showCancel: true,
					content: '您确定要停止充电吗？停止后将不再充电并退款到余额',
					success: res => {
						if (res.confirm) {
							this.stopCharging(item)

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			stopCharging(item) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var data = {
					chargingRecordId: item.id,
					channelNo: item.channelNo,
					deviceNo: item.deviceNo,
				};
				API.stopCharging(data).then((res) => {
					this.f5(true)
				}).catch(error => {

					uni.showToast({
						title: error
					})
				})
			},
			init(phone) {
				if (!phone) {
					phone = ""
				}
				// uni.showLoading({
				// 	title: "加载中",
				// 	mask: true,
				// })
				var data = {
					phone: phone
				};
				API.findChargeData(data).then((res) => {

					if (res.data.chargingRecordList.length != this.list.length) {
						this.current = 0;
					}

					this.list = res.data.chargingRecordList;
					this.isCharge = res.data.isCharge;
					this.isReady = true;
					
					if (!this.isCharge && this.k != 1) {
						if( this.id){
							this.gotoUrl("pages/charge/index?id=" + this.id)
						}else{
								uni.hideLoading()							
						}
						return
					} else {
						uni.hideLoading()
					}
					if (this.list.length > 0) {
						//防止定时器重复调用
						if (this.setTimeoutId == "") {
							for (var i in this.list) {
								var item = this.list[i];
								
								if (item.status == 0 || item.status == 3) {
									this.setTimeoutId = setTimeout(() => {
										this.setTimeoutId = "";
										this.f5()
									}, 5 * 1000)
								} else if (item.status == 1 && item.startTime) {
									
									var second = secondsDistance(item.startTime);
									var ms = item.estimateMinute * 60 - second
									console.log(ms)
									if (ms < 60 * 10) {
										
									}
									this.setTimeoutId = setTimeout(() => {
										this.setTimeoutId = "";
										this.f5()
									}, 5 * 1000)
								}
							}
						}
					} else {
						this.setTimeoutId = ""
					}

				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			f5(bl) {

				if (bl) {
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
				}
				this.k = 1;
				this.init()
			},
		},
		components: {
			Tabbar

		},
		onShow() {
			if (this.isReady) {
				this.f5(true)
			}
			if(this.$refs.tabbarMain){
				this.$refs.tabbarMain.setcount(0);
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/assets/font/jptime.css';

	.JPTIME1 {
		position: relative;
		bottom: 170px;
		font-size: 40px;
		text-align: center;
		color: #eee;
	}

	.showmodel {
		margin-left: 20px;
		margin-right: 20px;

		span {
			float: right;
		}
	}

	.slot-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex: 1;
	}

	.chargeNext {
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
		float: right;
		padding: 5px 15px;
		border-radius: 15px;
		font-size: 12px;
		margin-bottom: 10px;
		margin-right: 10px;
	}

	.navbar-right {
		display: flex;
		margin-right: 20rpx;
		align-items: center;
	}

	.chargeInfoNull {
		text-align: center;
		padding: 100px 0 50px;

		p {
			color: #999;
			font-size: 20px;
			margin-top: 10px;
		}
	}

	.chargeInfo {
		padding: 10px;
		position: relative;

		.chargeInfo-text {
			p {
				color: #777;
				margin-bottom: 5px;
			}
		}

		.chargeInfo-btn {
			background-color: #E0EDFF;
			width: 72px;
			height: 32px;
			border-radius: 16px 0 0 16px;
			line-height: 32px;
			text-align: center;
			position: absolute;
			right: 0;
			top: 16px;
			color: #1677FF;
		}
	}

	.chargeImg {
		height: 300px;
		width: 300px;
		margin: 10px auto 0;

		img {
			height: 100%;
			width: 100%;
		}
	}

	.chargeTime {
		padding: 20px 30px;
		text-align: center;

		p {
			color: #999;
			margin-bottom: 10px;
		}
	}

	.chargeBtn {
		display: flex;
		justify-content: space-around;
		padding: 20px 50px;

		.chargeBtn-item {
			width: 80px;
			height: 32px;
			background-color: #1677FF;
			line-height: 32px;
			color: #fff;
			text-align: center;
			border-radius: 16px;
		}

	}

	.chargeData {
		display: flex;
		justify-content: space-around;

		.chargeData-item {
			text-align: center;

			h2 {
				font-size: 24px;
				font-weight: normal;
				color: #1677FF;
				margin: 10px 0;
			}

			.chargeData-power {
				display: flex;
				align-items: center;
				display: flex;
				width: 120px;
				text-align: center;
				height: 31px;
				margin: 10px 0;

				span {
					font-size: 14px;
					color: #1677FF;
					margin: 0 5px;
				}
			}

			p {
				color: #999;
			}
		}
	}
</style>