JP-ChargeTeam51/pages/searchPile/chargeProcess/charge.vue

<template>
	<view>
		<u-navbar title="充电"></u-navbar>
		<view class="recharge">
			<view class="title">请选择充电金额</view>
			<p>当前余额￥{{user.balance}}</p>
			<view class="rechargeMain">
				<view class="recharge-item"
				@click="moneyClick(item.id)"
				 :class="!otherNum&&moneyActiveClass == item.id ? 'active' : ''"
				 v-for="(item,index) in moneyList" :key="item.id">
					{{item.name}}元
				</view>
				<view class="recharge-item"
				  :class="otherNum ? 'active' : ''"
				 style="
					padding: 8px 0px;">
					<u-input v-model="otherNum" @input="ckInput" type="digit" placeholder="其他充值金额" />

				</view>
				<view style="color: rgba(153, 153, 153, 100);
				font-size: 12px;
				text-align: left;
				font-family: AlibabaPuHui-regular;">*金额范围为1元-500元</view>

			</view>
			<p>其他充电模式</p>
			<view 
		
			@click="moneyClick(-1)"
			:class="!otherNum&&moneyActiveClass == -1? 'active' : ''"
			class="self-stop ">
				充满自停
			</view>



		</view>
		<view class="but-box">
			<u-button @click="submit" shape="circle">开始充电</u-button>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/chargeProcess.js'

	export default {
		data() {
			return {
				moneyActiveClass:"5",
				detail: {},
				//提交信息
				submitForm: {
					deviceNo: '',
					channelNo: '',
					carNumber: '',
					chargeStrategy: 2,
					amount:0
					//paytype:'YE',
				},
				user: {},
				otherNum: '',
				moneyList: [{
						id: '5',
						name: '5'
					},
					{
						id: '10',
						name: '10'
					},
					{
						id: '20',
						name: '20'
					},
					{
						id: '50',
						name: '50'
					},
					{
						id: '100',
						name: '100'
					},

				],


			}
		},
		onLoad(op) {
			if (op.deviceNo) {
				this.submitForm.deviceNo = op.deviceNo;
				this.submitForm.channelNo = op.gun;
				this.submitForm.carNumber = '鄂DD12352';
				
			}


		},
		onShow() {
			this.getHomePage()
		},
		methods: {
			ckInput(text){
				if(text.indexOf('.')>0){
					
					this.$nextTick(()=>{
						this.otherNum=text.substring(0,text.indexOf('.'))
						uni.showToast({
							title:"请输入正整数"
						})
					})
				}
				var t	=Number(text);
				if(t<1){
					this.$nextTick(()=>{
						this.otherNum='';
					})
						
				}
				if(t>500){
					this.$nextTick(()=>{
						this.otherNum=500;
					})
						
				}
				
			},
			moneyClick(index) {
				this.moneyActiveClass = index;
				
			},
			confirm() {
			
				//console.log(JSON.stringify(this.submitForm))
				
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				//this.submitForm.deviceNo = this.detail.deviceNo;
				API.startCarCharging(this.submitForm).then((res) => {
					console.log(JSON.stringify(this.res))
					this.gotoUrl("/pages/searchPile/chargeProcess/dcCharging");


				}).catch(error => {
					uni.hideLoading()
					if (error == '用户账户余额不足!') {
						uni.showModal({
							title: '支付',
							content: '用户账户余额不足，是否充值？',
							success: res => {
								if (res.confirm) {
									//付钱  改为组件
									this.gotoUrl("pages/user/finance/recharge");

								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					} else {
						uni.showToast({
							title: error
						})
					}

				})
			},
			getHomePage() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.personalCenter().then((res) => {
					this.user = res.data
					this.isReady = true;
					uni.hideLoading()

				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			
			submit() {
	
				if(this.moneyActiveClass==-1&&!this.otherNum){
					this.submitForm.chargeStrategy=0;
					this.submitForm.amount=0
				}else{
					this.submitForm.chargeStrategy=2;
					if(this.otherNum){
						this.submitForm.amount=this.otherNum
					}else{
						this.submitForm.amount=this.moneyActiveClass
					}
				}
				
				if (!this.submitForm.channelNo) {
					uni.showToast({
						title: '请先选择充电通道'
					})
					return
				}
				
			 
				if (this.submitForm.chargeStrategy == 0 && this.user.balance < 5) {
					uni.showModal({
						title: '支付',
						content: '余额不足5元无法开启充满自停，是否充值？',
						success: res => {
							if (res.confirm) {
								//付钱  改为组件
								this.gotoUrl("pages/user/finance/recharge");

							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {

					this.confirm()
				}


			},
		}

	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>

<style lang="scss" scoped>
	/deep/.u-radio-group {
		width: 100%;
	}

	/deep/.u-radio {
		position: relative;
	}

	/deep/.u-radio__icon-wrap {
		position: absolute;
		right: 0;
	}

	.recharge-item:last-child {
		font-size: 14px !important;
		color: #999999;
	}

	.recharge {
		padding: 16px;

		.title {
			font-size: 16px;
		}

		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: 20px;

			.recharge-item {
				width: 31%;
				border: 1px solid #e3e3e3;
				padding: 15px 0;
				border-radius: 4px;
				text-align: center;
				margin-bottom: 10px;
				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;
		}
	}

	.but-box {
		width: 335px;
		height: 44px;
		margin: 0 auto;

		.u-size-default[data-v-3bf2dba7] {
			background-color: rgba(0, 185, 98, 100);
			color: rgba(255, 255, 255, 100);
			font-size: 16px;
			text-align: center;
		}
	}
</style>