jp-charge/pages/charge/index.vue

<template>
	<view>
		<ujp-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>
		</ujp-navbar>
		<view class="charge" style="padding-bottom: 0px;">
			<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()"  v-if="!(detail.electricityPrice&&detail.servicePrice)">
						<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="chargeInfo" v-if="!(detail.electricityPrice&&detail.servicePrice)"
			  style="margin-bottom: 10px;">
			 	<p>充电{{listTypeIndex==0?'时长':'金额'}} <span style="color:#1677FF;margin-left:10px ">{{getListName()}}</span></p>
			 
			 </view>
			<view v-if="detail.templateCode=='3'" class="subsection-class" >
				金额付费
			</view>
			<u-subsection :list="listType" mode="subsection" v-else active-color="#3786f4" :current="0"
				@change="changeListType"></u-subsection>

			<view class="chargeMain" v-show="listTypeIndex==0">
				<template v-for="(item,i) in timelist">

					<view :key="i" class="chargeMain-item " style="width: 30%;padding: 5px;"
						@click="submitForm.hour=item.id" :class="{
							'active':submitForm.hour==item.id,
							
						}">
						<p>{{item.name}}</p>

					</view>

				</template>


			</view>
			<view class="chargeMain" v-show="listTypeIndex==1">
				
				<view  class="chargeMain-item " style="width: 30%;padding: 5px;"
					@click="submitForm.amount=0" :class="{
						'active':submitForm.amount==0,
						
					}">
					<p>充满自停</p>
				
				</view>
				
				<template v-for="(item,i) in moneylist">

					<view :key="i" class="chargeMain-item " style="width: 30%;padding: 5px;"
						@click="submitForm.amount=item.id" :class="{
							'active':submitForm.amount==item.id,
							
						}">
						<p>{{item.name}}</p>

					</view>

				</template>


			</view>
		</view>
		<view  class="charge">
			<view class="chargeInfo" style="margin-bottom: 10px;">
				<p v-show="listTypeIndex==0"><span style="color:red">*</span>按时间付费：需要先充值，从余额中扣费，适用会员用户。</p>
				<p v-show="listTypeIndex==1"><span style="color:red">*</span>按金额付费：无需充值，先付费后使用，未使用完的费用原路退回。</p>
				
			</view>
			<view class="chargeInfo" v-if="(detail.electricityPrice&&detail.servicePrice)"
			 style="margin-bottom: 10px;padding-top:10px;border-top:1px solid #CDCDCD">
				<view style="    display: flex;
    justify-content: space-between;">
					 <p>充电{{listTypeIndex==0?'时长':'金额'}} <span style="color:#1677FF;margin-left:10px ">{{getListName()}}</span>
					 
					 </p>
					 <view class="u-flex"  v-if="detail.templateCode!=3" style="     color: #1677ff;
    margin-right: 5px;" @click="showTips()">
						<span>费用说明</span>
						<u-icon name="error-circle" color="#1677ff" size="32"></u-icon>
					 </view>
				 </view>
				
				<p>电费单价：{{detail.electricityPrice}}元/千瓦时</p>
				<p>服务费单价：{{detail.servicePrice}}元/千瓦时</p>
			</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;z-index: 0;"
						@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="费用说明">
			<view class="priceListMain">
				
				<u-table  v-if="detail.priceList.length" 
				align="right"
				border-color="#fff" style=" padding: 20rpx;"  >
					<u-tr class="u-tr u-tr1">
						<u-td class="u-td u-td1">充电功率</u-td>
						<template v-if="detail.priceList[0].electricityPrice&&detail.priceList[0].servicePrice">
							<u-td class="u-td">电费</u-td>
							<u-td class="u-td">服务费</u-td>
						</template>
						<u-td class="u-td" v-else>费用</u-td>
					</u-tr>
					
					<u-tr class="u-tr"  v-for="(item,i) in detail.priceList" >
						<u-td class="u-td u-td1">{{item.minPower}}W-{{item.maxPower}}W</u-td>
						<template v-if="item.electricityPrice&&item.servicePrice">
							<u-td class="u-td">{{item.electricityPrice}}元/小时</u-td>
							<u-td class="u-td">{{item.servicePrice}}元/小时</u-td>
						</template>
						
						<u-td class="u-td" v-else>{{item.price}}元/小时</u-td>
					</u-tr>
					
					
				</u-table>
			
				<!-- <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: 20rpx;" v-if="(detail.electricityPrice&&detail.servicePrice)">
				电费单价：{{detail.electricityPrice}}元/千瓦时;服务费单价：{{detail.servicePrice}}元/千瓦时	</p>
				<template v-else>
					<p style="    padding: 20rpx;" v-if="detail.roundingMinute!=null&&detail.roundingMinute!=-1">
						超过{{detail.roundingMinute}}分钟，按1小时记，不足{{detail.roundingMinute}}分钟，不计费</p>
					
				</template>
			
			</view>
		</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>{{listTypeIndex==0?'余额支付':'微信支付'}}
			</div>
			<div class="showmodel">
				<p>充电{{listTypeIndex==0?'时长':'金额'}}</p>{{getListName()}}
			</div>

			<p class="showmodel" style="color: red;" v-if="listTypeIndex==0&&submitForm.hour==0">充满自停模式，设备充满后会自动停止计费，剩余费用会原路返还</p>
			<p class="showmodel" style="color: red;" v-if="listTypeIndex==1">按金额付费：无需充值，先付费后使用，未使用完的费用原路退回。</p>
			
		</u-modal>
		<u-modal v-model="showmodal2" :show-cancel-button="true" title="余额不足" confirm-text="前往充值"
			content="账户余额不足，充值成功后开始充电" @confirm="wxpay"></u-modal>


	</view>
</template>

<script>
	import * as API from '@/apis/index.js'
	import * as Pay from '@/apis/weixin.js'
	import {
		wxPayJs
	} from '@/utils/wxpay'
	export default {
		data() {
			return {
				showmodal: false,
				show: false,
				otherNum_f: '',
				moneyList_f: [],
				showmodal2: false,
				moneyActiveClass_f: "-1",
				fee:"",
				id: "",
				showPriceList: false,
				showmodel: false,
				//充电桩信息
				detail: {
					roundingMinute: -1,
					priceList: [],
				},
				user: {},
				//充电位子list
				listTypeIndex: 0,
				listType: [{
						name: '按时间付费'
					},
					{
						name: '按金额付费(临时充电)'
					}
				],
				list: [

				],
				recordId:"",
			
				moneylist: [{
						id: '0.5',
						name: '0.5元'
					},
					{
						id: '1',
						name: '1元'
					},
					{
						id: '2',
						name: '2元'
					},
					{
						id: '3',
						name: '3元'
					},
					{
						id: '4',
						name: '4元'
					},
					{
						id: '5',
						name: '5元'
					},

				],
				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: '8',
						name: '8小时'
					},
					{
						id: '10',
						name: '10小时'
					},
				],
				selectItemObj: {},
				//提交信息
				submitForm: {
					deviceNo: '',
					channelNo: '',
					hour: '0',
					amount: "0.5",
					//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: {
			wxpay(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				Pay.wxpay2({
					recordId:this.recordId,
					amount:this.fee
				}).then((response) => {
					if(!response.result){		
						uni.showToast({
							title:  response.message
						})
						return
					}
					var data = response.data
					uni.hideLoading()
					console.log("Pay+"+new Date().getTime())		
					wxPayJs(data);
						
				}).catch(error => {
					uni.showToast({
					
						title: error
					})	
				})
			},
			getListName() {
				var list = [];
				var value = [];


				if (this.listTypeIndex == 0) {
					list = this.timelist;
					value = this.submitForm.hour;
				} else {
					list = this.moneylist;
					value = this.submitForm.amount;
				}
				for (var i in list) {
					var obj = list[i];
					if (obj.id == value) {
						return obj.name
					}
				}
				return ""
			},
			changeListType(e) {
				console.log(e)
				this.listTypeIndex = e;
			},
			switchCharge() {
				var stationId = this.detail.stationId;
				console.log("switchCharge")

				uni.redirectTo({
					url: '/pages/charge/switchCharge?id=' + this.id + '&stationId=' + stationId
				})
			},
			moneyClick_f(index, item) {
				this.otherNum_f = '';
				this.moneyActiveClass_f = index;
				if (item) {
					this.selectItemObj = item;
					// if(item.imgUrl){
					// 	this.selectImg=item
					// }
				}
			},
			init() {
				if (!this.id) {
					this.switchCharge()
				} else {

					var data = {
						//type:1	,
					};

					API.marketingData(data).then((res) => {

						this.moneyList_f = res.data.chargingMarketingList
						if (this.moneyList_f.length > 0) {
							this.selectItemObj = this.moneyList_f[0];
							this.moneyActiveClass_f = this.moneyList_f[0].id
							//(this.moneyActiveClass)
						}

					}).catch(error => {
						uni.showToast({

							title: error
						})
					})



					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.templateCode==3){
							this.listTypeIndex=1;
							this.submitForm.amount=0;
						}
						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.hideLoading()
						uni.showToast({
							title: error
						})
					})
				}
			},
			selectItem(row) {
				if (row.status == 0) {
					this.submitForm.channelNo = row.channelNo
				} else {
					uni.showToast({
						title: '当前设备不可选'
					})
				}
			},
			confirm(bl) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				this.submitForm.deviceNo = this.detail.deviceNo;
				//提交信息
				var submitForm = {
					deviceNo: this.submitForm.deviceNo,
					channelNo: this.submitForm.channelNo,

				};
				if (this.listTypeIndex == 0) {
					submitForm.hour = this.submitForm.hour
				} else {
					submitForm.amount = this.submitForm.amount
				}

				//paytype:'YE',

				API.startCharging(submitForm).then((res) => {
					
					if(res.data.status=="5"){
						uni.hideLoading()
						
						
						this.recordId=res.data.recordId;
					
						var fee=res.data.fee;
					
						
						this.fee=(fee-this.user.availableBalance).toFixed(2);
						//this.otherNum_f=this.fee;
						if(bl){
							this.wxpay();
						}else{
							this.showmodal2=true;
						}
					}else{
						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 => {
					uni.hideLoading()
					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.listTypeIndex==0){
					this.showmodel = true;
				}else{
					this.confirm(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;
		}
	}
	.u-tr{
		.u-td{
			font-size: 24rpx !important;
		}
		
		
	}
	.u-tr1{
		.u-td{
			font-size: 28rpx !important;
		}
	}
	.u-td1{
		text-align: left !important;
	}
	.u-tr:nth-child(even){
		background-color: rgba(245, 245, 245, 1);
		.u-td{
			border:rgba(245, 245, 245, 1);
			background-color: rgba(245, 245, 245, 1);
		}
		
	}
	.priceListMain{
		p{
			font-size: 24rpx;
		}
		.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;
	}
	
	
		.recharge {
			padding: 16px;
			// padding-bottom: 80px;
			.title {
			
				font-size: 16px;
	position: relative;
			}
	
			p {
				color: #666;
				margin-top: 4px;
			}
	
			.self-stop.active {
	
				background-color: #EFFFF7;
				border-color: #00B962;
				color: #00B962;
	
			}
	
			.rechargeMain {
				display: flex;
				flex-wrap: wrap;
				// justify-content: space-between;
				margin-top: 12px;
				margin-bottom: 5px;
	
				.recharge-item {
					.u-input {
						text-align: center !important;
					}
					width: 31%;
					border: 1px solid #e3e3e3;
					padding: 10px 0;
					border-radius: 4px;
					text-align: center;
					margin-bottom: 10px;
					position: relative;
						margin-left: 5px;
					
					font-size: 16px;
				}
	
				.active {
					background-color: #EFFFF7;
					border-color: #00B962;
					color: #00B962;
				}
			}
	
			.self-stop {
				width: 105px;
				height: 48px;
				line-height: 48px;
				border-radius: 4px;
				color: #101010;
			
				font-size: 16px;
				text-align: center;
				font-family: Arial;
				border: 1px solid rgba(227, 227, 227, 100);
				margin-top: 12px;
			}
		}
	
		.recharge-input {
			margin-top: 8px;
			margin-bottom: 32px;
		}
	
		.recharge-radio {
			margin-top: 10px;
	
			.recharge-radio-item {
				display: flex;
				align-items: center;
			}
	
			.recharge-radio-name {
				margin-left: 8px;
			}
		}
		.subsection-class:after {
		    content: "";
		    position: absolute;
		    left: 10px;
		   width: 3px;
		   height: 12px;
		   // top: 50%;
		      margin-top: 5px;
		    background: #3385FF;
		}
		.subsection-class{
			font-size: 16px;
			 font-weight: bold;
			
		}
</style>