no message

pages/index/index.vue

@@ -12,11 +12,10 @@
 			<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 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">
@@ -30,14 +29,14 @@
 				<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>
-					  
+					<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>
@@ -45,11 +44,11 @@
 				</view>
 				<view class="chargeTime" v-if="item.status==2">
 					<h1>充电结束</h1>
-					 {{item.remark}}
+					{{item.remark}}
 				</view>
 				<view class="chargeTime" v-if="item.status==1">
 					<p>剩余时长</p>
-					<u-line-progress active-color="#ececec"  height="48" :percent="getPercent(item).percent">
+					<u-line-progress active-color="#ececec" height="48" :percent="getPercent(item).percent">
 						<div style="     
 						border-radius: 100px;
 						 min-width: 70px;  width: 100%;background-color: rgba(51, 136, 255, 100);height: 8px;">
@@ -79,74 +78,72 @@
 					</view>
 					<view class="chargeData-item">
 						<u-icon name="dian" custom-prefix="custom-icon" color="#1677ff" size="56"></u-icon>
-						
-										<view class="chargeData-power">
-											<span>0</span>
-											<u-line-progress active-color="#2979ff" :percent="item.chargingPower/9" :show-percent="false"></u-line-progress>
-											<span>{{item.chargingPower?item.chargingPower:0}}W</span>
-										</view>
-
+						<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==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" @click="showTips(item)">费用说明</view>
 				</view>
-				
+
 				<view class="chargeNext">{{i+1}}/{{list.length}}</view>
 			</swiper-item>
 
-			
-				
-			
+
+
+
 		</swiper>
-		<u-modal v-model="showmodel" title="费用说明" >
+		<u-modal v-model="showmodel" title="费用说明">
 			<p v-if="showitem.length==0">当前为免费充电桩</p>
-			<p v-for="(item,i) in showitem" class="showmodel" :key="i">{{item.minPower}}W-{{item.maxPower}}W <span>{{item.price}}元每小时</span></p>
-			
+			<p v-for="(item,i) in showitem" class="showmodel" :key="i">{{item.minPower}}W-{{item.maxPower}}W
+				<span>{{item.price}}元每小时</span></p>
+
 		</u-modal>
 		<Tabbar :current="0"></Tabbar>
 	</view>
 </template>
 
 <script>
-	
 	import Tabbar from '@/components/Tabbar.vue'
 	import * as API from '@/apis/index.js'
-	import {secondsDistance,hourDistanceArr} from '@/utils'
+	import {
+		secondsDistance,
+		hourDistanceArr
+	} from '@/utils'
 	export default {
 		data() {
 			return {
-				k:0,
-				id:"",
-				current:"0",
-				showmodel:false,
-				showitem:[],
-				percent:0,
-				list:[],
-				showtime:{},
-				isReady:false,
-				isCharge:false,
+				k: 0,
+				id: "",
+				current: "0",
+				showmodel: false,
+				showitem: [],
+				percent: 0,
+				list: [],
+				showtime: {},
+				isReady: false,
+				isCharge: false,
 				detail: {
 
 				},
 				detailIng: {
 
 				},
-				setTimeoutId:""
+				setTimeoutId: ""
 			}
 		},
 		onLoad(op) {
-			if(op.k){
-				this.k=op.k;
+			if (op.k) {
+				this.k = op.k;
 				//如果是扫码 ，或者登陆进来的， 并且没有充电，就跳转到充电页面  k= null
 				//如果是在系统内部访问的，  k=1  不跳转；
 			}
-			
-			if(op.id){
-				this.id=op.id;
+
+			if (op.id) {
+				this.id = op.id;
 			}
 			uni.showLoading({
 				title: "加载中",
@@ -156,170 +153,170 @@
 			setInterval(this.formatDate, 500);
 
 		},
-		 beforeDestroy() {
-		    if (this.formatDate) {
-		      clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
-		    }
-		  },
+		beforeDestroy() {
+			if (this.formatDate) {
+				clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
+			}
+		},
 		methods: {
-			changeswiper(e){
-				this.current=e.detail.current;
+			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);
+			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);
+					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";
+					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()
-					
+
 				}
 			},
-			
-			getPercent(item){
-				var obj={
-					
+
+			getPercent(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){
+				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));
-							obj.value=(Hour>9?"":"0")+Hour+":"+(Fen>9?"":"0")+Fen
+							obj.value = (Hour > 9 ? "" : "0") + Hour + ":" + (Fen > 9 ? "" : "0") + Fen
 						}
-					
+
 					}
 				}
-				if(item.status==0){
-					obj.value="启动中"
-					obj.percent="50";
+				if (item.status == 0) {
+					obj.value = "启动中"
+					obj.percent = "50";
 				}
-				if(item.status==2){
-					obj.value="关闭中"
-					obj.percent="50";
+				if (item.status == 2) {
+					obj.value = "关闭中"
+					obj.percent = "50";
 				}
 				//特殊情况默认值
-				if(!obj.value){
-					obj.value="00:00"
+				if (!obj.value) {
+					obj.value = "00:00"
 				}
-				if(!obj.percent){
-					obj.percent="100";
+				if (!obj.percent) {
+					obj.percent = "100";
 				}
-				
+
 				return obj;
 			},
 			showTips(item) {
-				this.showmodel=true;
-				this.showitem=item.chargingPriceList;
+				this.showmodel = true;
+				this.showitem = item.chargingPriceList;
 			},
 			returnMoney(item) {
-				
+
 				uni.showModal({
-				    title: '停止充电确认',
-					showCancel:true,
-				    content: '您确定要停止充电吗？停止后将不再充电并退款到余额',
-				    success: res=> {
-				        if (res.confirm) {
-				           this.stopCharging(item)
-							
-				        } else if (res.cancel) {
-				            console.log('用户点击取消');
-				        }
-				    }
+					title: '停止充电确认',
+					showCancel: true,
+					content: '您确定要停止充电吗？停止后将不再充电并退款到余额',
+					success: res => {
+						if (res.confirm) {
+							this.stopCharging(item)
+
+						} else if (res.cancel) {
+							console.log('用户点击取消');
+						}
+					}
 				});
 			},
-			stopCharging(item){
+			stopCharging(item) {
 				uni.showLoading({
 					title: "加载中",
 					mask: true,
 				})
 				var data = {
-					chargingRecordId:item.id,
-					channelNo:item.channelNo,
-					deviceNo:item.deviceNo,
+					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=""
+			init(phone) {
+				if (!phone) {
+					phone = ""
 				}
 				// uni.showLoading({
 				// 	title: "加载中",
 				// 	mask: true,
 				// })
 				var data = {
-					phone:phone
+					phone: phone
 				};
 				API.findChargeData(data).then((res) => {
-					
-					if( res.data.chargingRecordList.length!=this.list.length){
-						this.current=0;
+
+					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){
-						this.gotoUrl("pages/charge/index?id="+this.id)
-					}else{
+					this.isCharge = res.data.isCharge;
+					this.isReady = true;
+					if (!this.isCharge && this.k != 1) {
+						this.gotoUrl("pages/charge/index?id=" + this.id)
+					} else {
 						uni.hideLoading()
 					}
-					if(this.list.length>0){
+					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="";
+						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
-									if(ms<60*10){
-										this.setTimeoutId=setTimeout(()=>{
-											this.setTimeoutId="";
+									}, 5 * 1000)
+								} else if (item.status == 1 && item.startTime) {
+									var second = secondsDistance(item.startTime);
+									var ms = item.estimateMinute * 60 - second
+									if (ms < 60 * 10) {
+										this.setTimeoutId = setTimeout(() => {
+											this.setTimeoutId = "";
 											this.f5()
-										},5*1000)
+										}, 5 * 1000)
 									}
 								}
 							}
 						}
-					}else{
-						this.setTimeoutId=""
+					} else {
+						this.setTimeoutId = ""
 					}
-					
+
 				}).catch(error => {
 					uni.showToast({
 						title: error
@@ -327,22 +324,23 @@
 				})
 			},
 			f5(bl) {
-			
-				if(bl){
+
+				if (bl) {
 					uni.showLoading({
 						title: "加载中",
 						mask: true,
 					})
 				}
-				this.k=1;
+				this.k = 1;
 				this.init()
 			},
 		},
 		components: {
 			Tabbar
 
-		},onShow() {
-			if(this.isReady){
+		},
+		onShow() {
+			if (this.isReady) {
 				this.f5(true)
 			}
 		}
@@ -351,31 +349,34 @@
 
 <style lang="scss" scoped>
 	@import '@/assets/font/jptime.css';
-	
-	.JPTIME1{
-		    position: relative;
-		    bottom: 170px;
-		    font-size: 40px;
-		    text-align: center;
-		    color: #eee;
+
+	.JPTIME1 {
+		position: relative;
+		bottom: 170px;
+		font-size: 40px;
+		text-align: center;
+		color: #eee;
 	}
-	.showmodel{
-		  margin-left: 20px;
-		   margin-right: 20px;
-		  span{
-		  	 float: right;
-		  }
+
+	.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;
+
+	.chargeNext {
+		background: rgba(0, 0, 0, 0.5);
+		color: #fff;
 		float: right;
 		padding: 5px 15px;
 		border-radius: 15px;
@@ -389,15 +390,18 @@
 		margin-right: 20rpx;
 		align-items: center;
 	}
-.chargeInfoNull{
+
+	.chargeInfoNull {
 		text-align: center;
-		padding:100px 0 50px;
-		p{
-			color:#999;
+		padding: 100px 0 50px;
+
+		p {
+			color: #999;
 			font-size: 20px;
 			margin-top: 10px;
 		}
 	}
+
 	.chargeInfo {
 		padding: 10px;
 		position: relative;
@@ -474,24 +478,26 @@
 				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;
-							}
-							}
+
+			.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>
+</style>