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;" v-if="companyList.length==0">
			<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 style="padding-bottom: 100px;" v-else >
			<view class="charge chargeCompany">
				<u-radio-group v-model="payValueCompanyId">
					<view class="chargeRadio">
						<view class="u-flex">
							<u-icon name="rmb-circle-fill" color="#ff9502" size="96"></u-icon>
							<view class="chargeRadio-text">
								<p>余额支付<span class="rechargeSpan" @click='gotoUrl("pages/user/recharge")' >充值</span></p>
								<p>现有余额￥{{user.availableBalance}} </p>
							</view>
						</view>
						<view>
							<u-radio shape="circle" name=""></u-radio>
						</view>
					</view>
				
					<view class="chargeRadio chargeRadio-border"  v-for="(companyItem,i) in companyList">
						<view class="u-flex">
							
							<img src="@/assets/img/riFill-building-fill@3x.png" style="width: 96rpx;height: 96rpx;">
							<view class="chargeRadio-text">
								<p>{{companyItem.enterpriseAccount.entName}}账户余额充电</p>
								<p>现有余额￥{{companyItem.enterpriseAccount.totalAmount>0?companyItem.enterpriseAccount.totalAmount.toFixed(2):'0.00'}} </p>
							</view>
						</view>
						<view>
							<u-radio shape="circle"  :name="companyItem.enterpriseAccount.id"
							></u-radio>
						</view>
					</view>
				</u-radio-group>
				
			</view>
		</view>

		<view class="foot-btn">
			<u-button type="primary" :custom-style="customStyle" @click="submit" shape="square">{{payValueCompanyId?'企业账户充电':'开始充电'}}</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>{{payValueCompanyId?'企业账户':'余额支付'}}
			</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',
				},
				companyList: [],
				payValueCompanyId:"",
				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()
						this.getpersonalCenter() //查询企业用户
					}).catch(error => {
						this.isReady = true;
						uni.hideLoading()
						uni.showToast({
							title: error
						})
					})


				}
			},
			getpersonalCenter() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				API.personalCenter({
					stationId: this.detail.stationId
				}).then((res2) => {
					uni.hideLoading()
					var payValueCompanyId=this.carhelp.get("payValueCompanyId"+this.detail.stationId);
					console.log(payValueCompanyId)
					var entRegList = res2.data.entRegList;
					this.companyList = []

					for (var i in entRegList) {
						var item = entRegList[i]
						if (item.enterpriseAccount) {
							this.companyList.push(item)
							if(item.enterpriseAccount.id==payValueCompanyId){
								 this.payValueCompanyId=payValueCompanyId
								
							}
						}
					}

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

			selectItem(row) {
				if (row.status == 0) {
					this.submitForm.channelNo = row.channelNo
				} else {
					uni.showToast({
						title: '当前设备不可选'
					})
				}
			},
			confirm(bl) {
				

				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
				}
				// zkx
				// var payValueCompanyId=this.carhelp.get("payValueCompanyId"+this.detail.stationId);
				// if(this.payValueCompanyId){
				// 	this.carhelp.set("payValueCompanyId"+this.detail.stationId, this.payValueCompanyId);
				// }else{
				// 	if(payValueCompanyId){
				// 		this.carhelp.set("payValueCompanyId"+this.detail.stationId, "");
						
				// 	}
				// } 
				// return
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				//paytype:'YE',
				if(this.payValueCompanyId){
					submitForm.payType=3
					submitForm.entAccountId=this.payValueCompanyId
				}else{
					submitForm.payType=2
					submitForm.entAccountId=""
				}

				API.startCharging(submitForm).then((res) => {
					
					var payValueCompanyId=this.carhelp.get("payValueCompanyId"+this.detail.stationId);
					if(this.payValueCompanyId){
						this.carhelp.set("payValueCompanyId"+this.detail.stationId, this.payValueCompanyId);
					}else{
						if(payValueCompanyId){
							this.carhelp.set("payValueCompanyId"+this.detail.stationId, "");
							
						}
					}
					
					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;
		}
	}
	.chargeCompany{
		.chargeRadio {
			margin-bottom: 20rpx;
		}
		.chargeRadio-border{
			padding-top: 20rpx;
			    border-top: 1px solid rgb(205, 205, 205);
		}
	}

	.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;
	}

	.rechargeSpan{
		padding: 0 8rpx;
		 color: rgb(22, 119, 255);;
	}
	.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>