JP-ChargeTeam51/pages/index/all.vue

<template>
	<view>
		<ujp-navbar :title="title"  ></ujp-navbar>
		<!-- 充电状态 -->
		<view class="state1 state" v-if="chargeList.length > 0"
		
		 v-for="(item,index) in chargeList"   :key="item.id"
			@click="gotoUrl('pages/searchPile/chargeProcess/dcCharging?id=' + item.id)">
			<view class="state-text">
				<view class="text-1 " oldstyle="font-size: 20px;">
					<span v-if="item.carNumber">{{item.carNumber}}</span> 
				
					{{item.statusText}}...
				</view>
				<view v-if="item.status == '0'" class="text-2 " oldstyle="font-size: 16px;">
					 
					启动中
				</view>
				<view v-if="item.status == '1'" class="text-2 " oldstyle="font-size: 16px;">
					
					已充
					<span class="text-21">{{item.electricQuantity?(item.electricQuantity/10000).toFixed(1):'0.0'}}度</span>
					合计<span class="text-22">{{item.dueFee != null ? item.dueFee.toFixed(2) : '0.00'}}元</span>
					<view style="display: initial;" v-if="item.endSoc">电量<span class="text-21">{{item.endSoc}}%</span></view>
				</view>
				<!-- <view v-if="item.status == '2'" class="text-2" style="color: red;">
				超出时间将收取占位费
			</view> -->
				<view v-if="item.status == '4'" class="text-2 oldTextjp2" oldstyle="font-size: 16px;">
					<span v-if="item.waitNum==1">请耐心等待</span>
					<span v-else >前方等待{{item.waitNum-1}}位</span>
				</view>
				<view class="text-3 " oldstyle="font-size: 16px;">
				<p style=" width: 160%;">{{item.deviceName}}枪{{item.channelNo}}/{{item.stationName}}<br/>当前电价{{item.chargingCostPrice.toFixed(2)}}元/度</p>
				</view>
			</view>
			<view class="img-box4" >
				
				<img v-if="item.status == '0'" src="static/img/等待中-缺省页.png">
				<img v-if="item.status == '1'" src="static/img/充电中-缺省页.png">
				<img v-if="item.status == '2'" src="static/img/已充满-缺省页.png">
				<img v-if="item.status == '4'" src="static/img/等待中-缺省页.png">
				<view class="img-view">
					<view class="more-icon iconfont">查看 &#xe600;</view>
					</view>
				
			</view>
		</view>
		<view class="bottom"   v-if="chargeList.length > 0" >
			<view class="bot">
				<view class="bot-line"></view>
				<view class="bot-text oldTextjp2" oldstyle="font-size: 14px;">已经到底了</view>
				<view class="bot-line"></view>
			</view>
		</view>
		<view class="carNone" v-if="chargeList.length == 0">
			<img src="static/img/暂无数据-缺省页.png" alt="">
			<p class="oldTextjp2" oldstyle="font-size: 18px;">暂无充电订单</p>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/index.js'
	export default {
		data() {
			return {
				title:"充电车辆",
				chargeList:[],
				timeOut2: false,
				
			}
		},
		methods: {
			onShow() {
				if(this.timeOut2==false){
					this.timeOut2=true;
					this.getFindChargeData();
				}
				
					
			},
			onUnload() {
				this.timeOut2 = false;
			
			},
			onHide() {
				this.timeOut2 = false;
				
			},
			getFindChargeData() {
				if (!this.timeOut2) {
					return
				}
				this.timeOut2=false
				API.findChargeData().then((res) => {
					this.chargeList = res.data.chargingRecordList;
					if(this.chargeList.length){
						this.title=`充电车辆（${this.chargeList.length}）`
					}else{
						this.title=`充电车辆`
					}
					var list = res.data.chargingRecordList;
					for (var i = 0; i < list.length; i++) {
						if (list[i].status == '1' || list[i].status == '4') {
							this.timeOut2 = true;
						}
					}
					if (this.timeOut2) {
						setTimeout(() => {
							this.getFindChargeData();
						}, 5000)
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
	}
</script>


<style lang="scss" scoped>
	.carNone{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		img{
			width: 100%;
			height: 100%;
		}
		p{
			margin-top: -60px;
		}
	}
	.couponmain{
		.main{
			
			margin: 100px auto 0;
			position: relative;
			.content{
				padding: 24px;
				padding-top: 50px;
				background-color: #fff;
				box-shadow: 0px 0px 0px 1px rgba(254, 229, 147, 100);
				border: 2px solid rgba(253, 217, 141, 100);
				border-radius: 8px;
				.img{
					width: 44vw;
					height: 134px;
					position: absolute;
					top: -88px;
					right: 0px;
					img{
						width: 100%;
						height: 100%;
					}
				}
		      .title{
				  font-size: 16px;
				  color: rgba(84, 45, 45, 100);
				  margin-bottom: 13px;
				  
					  
			  }			
			  .text{
				  line-height: 24px;
				  color: rgba(84, 45, 45, 100);
				  font-size: 16px;
				  text-align: justify;
				  text-decoration:underline;
				   text-decoration-color:#ECE3BA;
				   text-indent: 32px;
			  }
			  .sign{
				  text-align: right;
				  margin-top: 8px;
				  font-size: 16px;
			  }
			}
			
			// 专享优惠券
			.exclusive{
				background-color: #F5E4C8;
				margin-top: 20px;
				padding: 32rpx 32rpx 32rpx 32rpx ;
				box-shadow: 0px 0px 0px 1px rgba(254, 229, 147, 100);
				border: 2px solid rgba(253, 217, 141, 100);
				border-radius: 8px;
				.exclusive1{
					
					font-size: 48rpx;
					color: rgba(51, 51, 51, 1);

					font-family: SourceHanSerif-bold;
				}
				.exclusive2{
					font-family: PingFangSC-regular;
					color: rgba(51, 51, 51, 1);
					font-size: 36rpx;
				}
				p{
					width: 100%;
					text-align: center;
					//color: rgba(255, 73, 75, 100);
					//font-size: 20px;
				}
				.img{
					// width: 74.4vw;
					// height: 84px;
					margin-top: 16px;
					position: relative;
					img{
						width: 100%;
						height: 100%;
						
					}
				}
				
					
					
					
					.num{
						font-size:54rpx;
						color: rgba(252, 237, 179, 100);
						position: absolute;
						top:10px;
						left: 8vw;
						font-weight: 600;
						.unit{
							
							font-size: 24rpx;
							color: rgba(252, 237, 179, 100);
						
						}
					}
					
					.unit2{
						
						font-size: 12px;
						color: #FFF;
						position: absolute;
						top: 90rpx;
						left: 24rpx;
					}
					.exclusive-text{
						color: #333333;
						font-size: 16rpx;
					}
					.exclusive-btn{
						width: 80%;
						margin-top: 48rpx;
						border-radius: 50px;
						background: linear-gradient(90.58deg, rgba(225,208,165,1) 0.05%,rgba(228,190,132,1) 98.67%);
						color: rgba(51, 51, 51, 1);
						font-size: 36rpx;
						text-align: center;
						box-shadow: 0px 8rpx 20rpx 0px rgba(184, 155, 103, 40);
						font-family: -apple-system;
						  //  width: 87.4%;
						  //  margin-top: 20px;
						  //  background-image: linear-gradient(#ffff00, #ff9600);
						 //   color: #521e00;
						   // font-size: 20px;
						   // border-radius: 50px;
					}
					.ticket-info{
						width: 40vw;
						text-align: center;
						position: absolute;
						top: 18px;
						right: 16rpx;
						.ticket-name{
							line-height: 40rpx;
							color: rgba(16, 16, 16, 100);
							font-size: 16rpx;
							
						}
						.condition{
							line-height: 22px;
							color: #8a6f6f;
							font-size: 12px;
						}
						
					}
				
			}
		}
	}
	
	.oldTextClassF{
		.text-2{
			font-size: 36rpx !important;
		}
		.text-3{
			font-size: 34rpx !important;
		}
		.station .price-free .price-1 .num{
			
			font-size: 48rpx !important;
			line-height: 40rpx;
			font-weight: bold;
		}
		
	}
	/deep/.u-image__loading{
		 background:#ff000000;
	 }
	// 头部图片
	img {
		width: 100%;
		// height: 100%;
		
	}
     .background{
		 background: linear-gradient(#D6EEDC,#FFFFFF );
		 padding-top: 16px;
	 }
	.banner {
		width: 91.4%;
		margin: 0 auto ;
		border-radius: 12px;
		height: 120px;
		overflow: hidden;
         

	}


	// 选项列表
	.option-list {
		
		padding-top: 15px;
		
		line-height: 20px;
		border-radius: 8px;
		text-align: center;
		
		margin: auto;
		display: flex;
		justify-content: space-around;

		.list-item {

			// 图标
			.icon {
				width: 40px;
				height: 40px;
				border-radius: 99px;
				line-height: 40px;
				font-size: 24px;
				text-align: center;
				margin: auto;
				color: #ffffff;
			}
			.text{
				margin-top: 4px;
			}

		}

	}
   .flex{
	   display: flex;
   }
	// 站点
	.pack-up{
		float: right;
		font-size: 16px;
		color: rgba(119, 119, 119, 100);
	}
	
.station,.location,.state1{
	box-shadow: 0px 4rpx 12rpx 0px #008c4a33;
}
// 附近站点改版
.station{
	
	width: 91.4%;
	border-radius: 8px;
	padding: 12px 12px 12px 11px;
	background-color: #fff;
	margin: 8px auto 0;
	.head{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.title{
			color: rgba(16, 16, 16, 100);
			font-size: 32rpx;
			font-weight: 550;
			width: 440rpx;
		text-overflow:ellipsis;
		overflow:hidden;
		white-space:nowrap;
		}
		.distance{
			width: 180rpx;
			color: rgba(102, 102, 102, 100);
			font-size: 32rpx;
			text-align: end;
			.iconfont{
				font-size: 24rpx;
				margin-right: 4rpx;
			}
		}
	}
	.sign{
		display: flex;
		flex-wrap: wrap;
		margin-top: 16rpx;
		.sign-1{
			line-height: 40rpx;
			border-radius: 8rpx;
			background-color: rgba(255, 255, 255, 100);
			color: rgba(255, 139, 0, 100);
			font-size: 24rpx;
			text-align: center;
			border: 1px solid rgba(255, 139, 0, 100);
			padding: 0 8rpx;
			margin-right:16rpx;
			margin-bottom: 8rpx;
		}
		.sign-2{
			line-height: 40rpx;
			border-radius: 8rpx;
			background-color: rgba(255, 255, 255, 100);
			color: rgba(153, 153, 153, 100);
			font-size: 24rpx;
			text-align: center;
			border: 1px solid rgba(204, 204, 204, 100);
			padding: 0 8rpx;
			margin-right: 16rpx;
			margin-bottom: 8rpx;
		}
		.sign-3{
			line-height: 40rpx;
			border-radius: 8rpx;
			background-color: rgba(255, 255, 255, 100);
			color: #8161FF ;
			font-size: 24rpx;
			text-align: center;
			border: 1px solid  #8161FF;
			padding: 0 8rpx;
			margin-right: 16rpx;
			margin-bottom: 8rpx;
		}
	}
	.price-free{
		display: flex;
		justify-content: space-between;
		margin-top: 8rpx;
		.price{
			display: flex;
		    align-items: baseline;
		}
		.price-1{
			.num{
				color: rgba(255, 98, 0, 100);
				font-size: 44rpx;
			}
			.unit{
				font-size: 12px;
				color: rgba(153, 153, 153, 100);
			}
		}
		.price-2{
			font-size: 24rpx;
			color: rgba(153, 153, 153, 100);
			margin-left: 8rpx;
			text-decoration: line-through;
		}
	}

	.free{
		display: flex;
	    align-items: center;
		.slow,.fast{
			display: flex;
			.sp-font{
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 4px;
				background-color: #7a68f6;
				color: #fff;
				font-size: 28rpx;
				text-align: center;
				margin-right: 2rpx;
			}
			.fast-font{
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 8rpx;
				background-color: rgba(186, 240, 215, 100);
				color: rgba(0, 130, 69, 100);
				font-size: 28rpx;
				text-align: center;
				margin-right: 8rpx;
			}
			.slow-font{
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 8rpx;
				background-color: rgba(226, 226, 226, 100);
				color: rgba(128, 128, 128, 100);
				font-size: 28rpx;
				text-align: center;
				margin-right: 8rpx;
			}
			.num{
				font-size: 32rpx;color: rgba(0, 145, 67, 100);
				line-height: 40rpx;
			}
		}
		.slow{
			margin-left: 24rpx;
		}
	}
}
	//定位

	.location {
		width: 91.4%;
		background-color: #ffffff;
		height: 120px;
		display: flex;
		justify-content: space-between;
		margin: 20px auto 0;
		border-radius: 8px;
		border: #F2F4F4 1px;

		.location-text {
			padding: 24px 0 0 28px;

			.text-1 {
				height: 16px;
				line-height: 16px;
				color: rgba(16, 16, 16, 100);
				font-size: 16px;
				text-align: left;
			}

			.text-2 {
				height: 17px;
				line-height: 17px;
				color: rgba(102, 102, 102, 100);
				font-size: 12px;
				text-align: left;
				margin-top: 4px;
				white-space: nowrap; //强制不换行
				text-overflow: ellipsis; //文本超出出现省略号
				overflow: hidden;
			}

			.text-3 {
				width: 80px;
				height: 24px;
				line-height: 22px;
				border-radius: 50px;
				color: rgba(0, 185, 98, 100);
				font-size: 12px;
				text-align: center;
				border: 1px solid rgba(0, 185, 98, 100);
				margin-top: 11px;
			}
		}
		
		.img-box {
			width: 120px;
			height: 120px;
			margin-right: 20px;
			
		}
	}
	.img-box4{
		padding-top: 5px;
		height: 260rpx;
		img{
								 max-width: 100px;
		}
		.img-view{
			color: #0293f0;
			    float: right;
					font-size: 10px;
					margin-top: 3px;
					 position: relative;
					bottom: 30rpx;
					 left: -15px;
					 .iconfont{
						 font-size: 14px;
					 }
					 
					 
		}
	}
	 
	.state {
		width: 91.4%;
		background-color: #ffffff;
		height: 260rpx;
		min-height:120px;
		max-height:130px;
		display: flex;
		margin: 20rpx auto 0;
		border-radius: 8px;
		border: #F2F4F4 1px;

		.state-text {
			    min-width: 70%;
			padding: 48rpx 0 0 24rpx;
			Z-INDEX: 99;
			.text-1 {
				height: 16px;
				line-height: 16px;
				color:  rgba(0, 185, 98, 1);
				font-size: 16px;
				text-align: left;
				font-weight:  bold;
				span{
					color:rgba(16, 16, 16, 1);
					margin-right: 12rpx;
					
				}
			}

			.text-2 {
				    width: 160%;
				height: 17px;
				line-height: 17px;
				color: #101010;
				text-align: left;
				margin-top: 12px;
				span{
					font-weight:  bold;
					margin-right: 6rpx;
					margin-left: 6rpx;
				}
				.text-21{
					
					color:  rgba(0, 185, 98, 1);
				}
				.text-22{
					
					color: #ed7847;
				}
			}

			.text-3 {
				font-size: 14px;
				line-height: 20px;
				margin-top: 6px;
				color: #999999;
			}

		}

		.img-box {
			width: 120px;
			height: 120px;
			margin-right: 20px;
			
		}
	}

	//充值
	.top-up {
		
		width: 91.4%;
		margin: 12px auto 0 ;
		

		.top-up-title {
			color: rgba(16, 16, 16, 100);
			font-size: 16px;
		}
		.card-box{
			display: flex;
			justify-content: space-between;
			padding: 0 0 16px 0;
			.card{
				width: 48.3%;
				height: 65px;
				img{
					width: 100%;
					height: 100%;
				}
			}
		}

		
	.img-box2{
		margin-top: 12px;
		display: flex;
		justify-content: space-between;
		img{
			width: 100%;
			height: 100%;
		}
		.left-image{
			width: 48.3%;
			height: 166px;
			padding: 8px 0 0 12px;
			// background: url(@/assets/img/topup1.png);
			    background-repeat: no-repeat;
			    background-position: 30% 10%;
			    background-size: cover;
				p{
					color: rgba(56, 47, 33, 100);
					font-size: 24px;
					line-height: 28px;
					font-weight: 600;
					
				}
				.time-activities{
					color: rgba(56, 39, 14, 100);
					font-size: 16px;
					line-height: 22px;
					margin-top: 4px;
					.time{
						margin-left: 4px;
						color: #fa3534;
						font-weight: bold;
					}
				}
		}
		.right-image{
			width: 48.3%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			
			.margin-top{
				margin-top: 12px;
			}
			
			img{
				height: 77px;
				
			}
		};
	}
		
	}
	.lineBox{
		background-color: rgba(0, 145, 67, 100);
		padding:  0px 3px;
		background-color: rgba(0, 185, 98, 1);
		color: rgba(255, 255, 255, 1);
		margin-left: 6px;
		border-radius: 3px;
	}
	// 小竖线
	.line {
		display: inline-block;
		width: 3px;
		height: 12px;
		margin-right: 7px;
		background-color: rgba(0, 145, 67, 100);
	}

	// 新闻公告
	.news-title {
		padding: 0 16px;
		margin-top: 12px;
		color: rgba(16, 16, 16, 100);
		font-size: 16px;
		display: flex;
		justify-content: space-between;
		background-color: #F2F4F4;

		.news-title-left {
			display: flex;
		}

		.more {
			font-size: 14px;
			color: #777777;
			display: flex;
			line-height: 20px;

			.more-icon {
				font-size: 24px
			}
		}
	}

	.news {
		background-color: #fff;
		width: 91.4%;
		margin: 12px auto 0;
		border-radius: 8px;

		.news-content {
			display: flex;
			justify-content: space-between;
			padding: 12px;

			.content-text {
				width: 56.2%;
				height: 100%;
				line-height: 21px;
				color: #101010;
				text-align: left;
				font-size: 14px;
			}

			.content-title {
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
			}

			.content-img {
				width: 40.57%;
				height: 100%;
				border-radius: 4px;
				overflow: hidden;

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

			.news-time {
				margin-top: 5%;
				color: #999999;
				width: 80px;
				height: 20px;
				font-size: 14px;
			}
		}
	}

	.bottom {
		width: 100%;
		height: 60px;

		.bot {
			width: 100%;
			margin: 0 auto;
			padding: 0 17.3%;
			justify-content: space-between;
			display: flex;

			.bot-line {
				margin-top: 20px;
				width: 21.3%;
				height: 0px;
				border: 1px solid rgba(207, 210, 213, 100);
			}

			.bot-text {
				white-space: nowrap;
				height: 17px;
				margin-top: 13px;
				margin-left: 12px;
				margin-right: 12px;
				font-size: 12px;
				text-align: center;
				color: rgba(182, 189, 195, 100);
			}
		}
	}

	// 导航栏
	.navigation {
		width: 100%;
		// height: 40px;
		padding: 10px 0;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-around;
		text-align: center;
		color: #999999;

		.nav-icon {
			width: 54px;
			font-size: 24px
		}

		.nav-text {
			font-size: 14px;
		}
	}



	.shema {
		width: 70%;
		padding-bottom: 20px;
		border-radius: 16px;
		background-color: #fff;
		position: fixed;
		top: 100px;
		left: 0;
		right: 0;
		margin: 0 auto;
		z-index: 9999;

		.title {
			height: 33px;
			color: rgba(16, 16, 16, 100);
			font-size: 24px;
			text-align: center;
			padding: 16px 0;
		}

		.u-radio-group {
			margin: 16px 5vw;
		}

		/deep/.u-radio {
			width: 60vw !important;

			padding: 24px 24px 40px;
			line-height: 20px;
			border-radius: 16px;
			text-align: center;
			border: #101010 1px solid;
			margin-top: 12px;

		}

		/deep/ .u-radio__label {
			text-align: left;
			height: 24px;
			// color: rgba(0, 185, 98, 100);
			font-size: 24px;

		}

		p {

			height: 22px;
			color: rgba(102, 102, 102, 100);
			font-size: 14px;
			margin-top: 12px;
			white-space: nowrap
		}

		.hint {
			text-align: center;

		}

		.btn-box {
			margin-top: 20px;

			.choice-btn {
				width: 80%;
			}
		}
	}

	.wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

	}




	// 登录提示
	.login-prompt {
		width: 91.4%;
		height: 40px;
		line-height: 40px;
		border-radius: 50px;
		text-align: left;
		padding-left: 16px;
		padding-right: 4px;
		background-color: rgba(0, 0, 0, 0.6);
		position: fixed;
		bottom: 75px;
		color: #ffffff;

		.button {
			width: 88px;
			height: 32px;
			line-height: 32px;
			border-radius: 50px;
			background-color: rgba(0, 185, 98, 100);
			text-align: center;
			float: right;
			margin-top: 4px;
		}
	}
	.showOss{
		/deep/.u-model,/deep/.u-mode-center-box{
			background-color: transparent;
		}
	}
	
</style>