jp-charge/pages/charge/index.vue

<template>
	<view>
		<u-navbar title="充电">
			<view class="slot-wrap">
				<view class="navbar-left"></view>				
<!-- 				<view class="navbar-right"><u-icon name="iconfontscan" custom-prefix="custom-icon" color="#1677ff" size="40"></u-icon></view>
 -->			</view>
		</u-navbar>
		<view class="charge">
			<view class="chargeInfo">
				<view class="chargeInfo-row">
					<view class="u-flex"><p>站点：</p><h4>{{detail.stationName}}</h4></view>
				</view>
				<view class="chargeInfo-row">
					
					<view class="u-flex"><p>桩号：</p><h4>{{detail.deviceNo}}</h4></view>
					<view class="u-flex" @click="switchCharge">
						<span>切换充电桩</span>
						<u-icon name="arrow-right" color="#999" size="24"></u-icon>
					</view>
				</view>
				<view class="chargeInfo-row">
					<view class="u-flex"><p>桩名：</p><h4>{{detail.name}}</h4></view>
					<view class="u-flex" @click="showTips()">
						<span>费用说明</span>
						<u-icon name="error-circle" color="#1677ff" size="32" ></u-icon>
					</view>
				</view>
			
			</view>
			<view class="chargeMain">
				<template v-for="(item,i) in list">
					
					<view :key="i" class="chargeMain-item "
					@click="selectItem(item)"
					:class="{
						'active':item.channelNo==submitForm.channelNo,
						'occupy':item.status==1,
						'fault':item.status==2,
					}"
					
					><p>{{i+1}}</p>
					<p >{{item.statusStr}}</p>
					
					</view>
					
				</template>
				<h2 v-if="isReady&&list.length==0">无可用通道<br/>请联系客服人员</h2>
				 
			</view>
		</view>
		<view class="charge">
			<view class="chargeTime">
				
				<view v-for="(item,i) in timelist" 
					class="chargeTime-item " :key="i"
					@click="submitForm.hour=item.id"
					:class="{
						'chargeTime-active':submitForm.hour==item.id,
						
						'chargeTime-first':i==0
					}"
					>
					<template v-if="i==0">
						<p>充满</p><p>自停</p>
					</template>
						<template v-else>
							{{item.name}}
						</template>
				</view>
					
			</view>
			<view class="chargeTime-text">
				<p>充电时长</p>
				<span>{{timelist[submitForm.hour].name}}</span>
			</view>
		</view>
		<view style="padding-bottom: 100px;">
			<view class="charge">
				<view class="chargeRadio">
					<view class="u-flex">
						<u-icon name="rmb-circle-fill"  color="#ff9502" size="90"></u-icon>
						<view class="chargeRadio-text">
							<p>余额支付</p>
							<p>现有余额￥{{user.availableBalance}} </p>
						</view>
					</view>
					<u-button type="warning"  style="    height: 34px;"
						@click='gotoUrl("pages/user/recharge")'
					>我要充值</u-button>
				</view>
			</view>
		</view>
	
		<view class="foot-btn">
			<u-button type="primary" :custom-style="customStyle" 
				@click="submit"
			shape="square">开始充电</u-button>
		</view>
		
		<u-modal v-model="showPriceList" title="费用说明" >
			
			<p v-for="(item,i) in detail.priceList" class="showPriceList" :key="i">{{item.minPower}}W-{{item.maxPower}}W <span>{{item.price}}元每小时</span></p>
			
			<p style="    padding: 15px;" v-if="detail.roundingMinute!=null&&detail.roundingMinute!=-1">超过{{detail.roundingMinute}}分钟，按1小时记，不足{{detail.roundingMinute}}分钟，不计费</p>
			<p style="    padding: 15px;" v-if="detail.priceList.length==0">无费用说明或为免费充电模式</p>
		</u-modal>
		
		<u-modal v-model="showmodel" @confirm="confirm" :showCancelButton="true" title="订单信息" >
			<div class="showmodel" ><p  >桩号</p>{{detail.deviceNo}}</div>
			<div class="showmodel" ><p  >充电通道</p>{{submitForm.channelNo}}</div>
			<div class="showmodel" ><p  >支付方式</p>余额支付</div>
			<div class="showmodel" ><p  >充电时间</p>{{timelist[submitForm.hour].name}}</div>
			
			<p class="showmodel" style="color: red;" v-if="submitForm.hour==0" >充满自停模式，设备充满后会自动停止计费，剩余费用会原路返还</p>
			
		</u-modal>
		
	</view>
</template>
	
<script>
	import * as API  from '@/apis/index.js'
	
	export default {
		data() {
			return {
				id:"",
				showPriceList:false,
				showmodel:false,
				//充电桩信息
				detail:{
					roundingMinute:-1,
					priceList:[],
				},
				user:{},
				//充电位子list
				list:[
					 
				],
				timelist:[
					{
						id:'0',
						name:'充满自停'
					},
					{
						id:'1',
						name:'1小时'
					},
					{
						id:'2',
						name:'2小时'
					},
					{
						id:'3',
						name:'3小时'
					},
					{
						id:'4',
						name:'4小时'
					},
					{
						id:'5',
						name:'5小时'
					},
					{
						id:'6',
						name:'6小时'
					},
					{
						id:'7',
						name:'7小时'
					},
					{
						id:'8',
						name:'8小时'
					},
				],
				//提交信息
				submitForm:{
					deviceNo:'',
					channelNo:'',
					hour:'0',
					//paytype:'YE',
				},
				
				isReady:false,
				customStyle: {
					background: '#1677ff'
				}
			}
		},
		onLoad(op) {
			
			if (op.id) {
				this.id = op.id;
				this.carhelp.set("qr-default-id",op.id);
			}else{
				//用于支付后返回系统  -- 点金计划
				var  id=this.carhelp.get("qr-default-id")
				if(id){
					this.id =this.carhelp.get("qr-default-id");
					
				}
			}
			
			
			this.init()
			
			
		},
		methods: {
			switchCharge(){
				var stationId=this.detail.stationId;
				console.log("switchCharge")
			
				uni.redirectTo({
					url:'/pages/charge/switchCharge?id='+this.id+'&stationId='+stationId
				})
			},
			init(){
				if(!this.id){
					this.switchCharge()
				}else{
					
						
					
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
					var data = {
						
					};
					if(this.id){
						data.deviceId=this.id
					}
					API.chargingData(data).then((res) => {
						this.detail = res.data.chargingDevice;
						
						if(!this.detail .online){
							uni.showToast({
								title:'设备不在线，请扫描其他二维码'
							})
							return
						}
						
						this.carhelp.set("qr-default-id",this.id);
						this.user = res.data.userAccount;
						this.list=this.detail.chargeStatusArray
						this.isReady=true;
						uni.hideLoading()
						
					}).catch(error => {
						this.isReady=true;
						uni.showToast({
							title: error
						})
					})
				}
			},
			selectItem(row){
				if(row.status==0){
					this.submitForm.channelNo=row.channelNo
				}else{
					uni.showToast({
						title:'当前设备不可选'
					})
				}
			},
			confirm(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				this.submitForm.deviceNo=this.detail.deviceNo;
				API.startCharging(this.submitForm).then((res) => {
				
					 this.gotoUrl("pages/index/index");
					// uni.showModal({
					//     title: '提示',
					// 	showCancel:false,
					//     content: '启动成功',
					//     success: res=> {
					//         if (res.confirm) {
					//            //付钱  改为组件
					//            this.gotoUrl("pages/index/index");
					           
					//         } else if (res.cancel) {
					//             console.log('用户点击取消');
					//         }
					//     }
					// });
					// uni.showToast({
					// 	title: '启动中..'
					// })
					// setTimeout(()=>{
						
					// },3000)
					// uni.hideLoading()
					
				}).catch(error => {
					if(error=='用户账户余额不足!'){
						uni.showModal({
						    title: '支付',
						    content: '用户账户余额不足，是否充值？',
						    success: res=> {
						        if (res.confirm) {
						           //付钱  改为组件
						           this.gotoUrl("pages/user/recharge");
						           
						        } else if (res.cancel) {
						            console.log('用户点击取消');
						        }
						    }
						});
					}else{
						uni.showToast({
							title: error
						})
					}
					
				})
			},
			submit(){
				
				if(!this.submitForm.channelNo){
					uni.showToast({
						title:'请先选择充电通道'
					})
					return
				}
				var obj=this.list.find(item=>{
					return item.channelNo==this.submitForm.channelNo
				})
				
				if(!obj||obj.status!=0){
					uni.showToast({
						title:'当前设备不可选'
					})
					return
				}
				if(this.submitForm.hour==0&&this.user.availableBalance<5){
					uni.showModal({
					    title: '支付',
					    content: '余额不足5元无法开启充满自停，是否充值？',
					    success: res=> {
					        if (res.confirm) {
					           //付钱  改为组件
					           this.gotoUrl("pages/user/recharge");
					           
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
				}else{
					
					this.showmodel=true;
				}
				 
				
			},
			showTips(){
				this.showPriceList=true
			}
		},onShow() {
			if(this.isReady){
				if (this.id) {
					this.carhelp.set("qr-default-id",this.id);
				}else{
					//用于支付后返回系统  -- 点金计划
					this.id =this.carhelp.get("qr-default-id");
				}
				this.init()
			}
		}
	}
</script>
<style>
	page{
		background-color: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
	
	.showmodel{
		  margin-left: 20px;
		   margin-right: 20px;
		  p{
			     display: inline-block;
		  	 width: 100px;
		  }
	}
	.showPriceList{
		  margin-left: 20px;
		   margin-right: 20px;
		  span{
		  	 float: right;
		  }
	}
	.slot-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex: 1;
	}
	.navbar-right {
		display: flex;
		margin-right: 20rpx;
		align-items: center;
	}
	.charge{
		padding: 15px;
		background-color: #fff;
		margin-bottom: 10px;
	}
	.chargeRadio{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		.chargeRadio-text{
			margin-left: 5px;
		}
	}
	.chargeTime{
		display: flex;
		overflow: scroll;
		padding-bottom: 15px;
	
		.chargeTime-item{
			border: 1px solid #1677ff;
			border-radius: 50%;
			min-width: 56px;
			height: 56px;
			text-align: center;
			line-height: 56px;
			margin-right: 20px;
		}
		.chargeTime-first{
			line-height: 20px !important;
			
			padding-top: 6px;
			margin-right: 20px;
		}
		.chargeTime-active{
			color:#fff;
			background-color: #1677ff;
		}
	}
	.chargeTime-text{
		border-top: 1px solid #f7f7f7;
		padding-top: 15px;
		display: flex;
		align-items: center;
		span{
			margin-left: 20px;
			color:#1677ff;
		}
	}
	.chargeInfo{
		.chargeInfo-row{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 10px;
			p{
				color:#999;
			}
			h4{
				font-weight: normal;
			}
			span{
				color:#1677ff;
				margin-right: 5px;
			}
		}
	}
	.chargeMain{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 20px;
		.chargeMain-item{
			width: 18%;
			text-align: center;
			padding: 10px;
			border: 1px solid #1677ff;
			margin-bottom: 10px;
			border-radius: 10px;
			color:#1677ff;
		}
		.active{
			background-color:#1677ff;
			color:#fff;
		}
		.fault{
			background-color:#e1e1e1;
			color:#666;
			border: 1px solid #ccc;
		}
		.occupy{
			color:#FF4F3F;
			border: 1px solid #FF4F3F;
		}
	}
	.foot-btn{
		padding: 10px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
	}
</style>