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

<template>
	<view>
		<u-navbar title="充电"  :is-back="isback" ></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;"><span style="color:red">*</span>充电金额输入范围为1元-500元的整数。实际充电金额与所选金额会略有出入（一般误差约几分钱），最终结算金额将以实际充入电量为准。</view>

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

			<!-- 优惠券 -->
			<view class="discounts" v-if="list.length" >
				<view class="title">
					<span class="title-1">
						优惠券
					</span>
					<span class="title-2">
						每次只能使用1张
					</span>
					<span class="title-3">
						-￥6.00
					</span>
				</view>
				<view class="select">
					<u-radio-group v-model="value" @change="radioGroupChange" :wrap="true">
						
						<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name"
							:style="item.disabled?'	background-color: #e3e3e3 !important;':''"
							:disabled="item.disabled">
							{{item.name}}

						</u-radio>
						 
						<view class="explain">使用说明</view>
					</u-radio-group>

				</view>
			</view>


		</view>
		<view class="bottom">
			<view class="botton"
			 @click="submit"
			 >开始充电</view>
		</view>
		<!-- <view class="but-box" style="margin-bottom: 20px;">
			<u-button
			  style="	background-color: rgba(0, 185, 98, 100);
			color: rgba(255, 255, 255, 100);
			font-size: 16px;
			text-align: center;"
			 
			 @click="submit" shape="circle">开始充电</u-button>
		</view> -->
	</view>
</template>

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

	export default {
		data() {
			return {
				isback:true,
				moneyActiveClass: "20",
				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'
					},

				],
				value:"",
				// 优惠券
				list: [
				],

			}
		},
		onLoad(op) {
			if (op.deviceNo) {
				this.submitForm.deviceNo = op.deviceNo;
				this.submitForm.channelNo = op.gun;
				this.submitForm.carNumber = op.carNumber;
				this.carhelp.setGunIdCharge(this.submitForm);
			}
			if(op.isback){
				this.isback=false;
			}
			this.useCoupon()
		},
		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;
				this.useCoupon()

			},
			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?id=" + res.data.recordId);


				}).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()
					//this.useCoupon()
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			useCoupon(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				 	this.submitInit()
				API.useCoupon({
					amount:this.submitForm.amount
				}).then((res) => {
					
					this.list=res.data.userCouponList
					uni.hideLoading()
					
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			submitInit(){
				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
					}
				}
			},
			submit() {
				this.submitInit()
				

				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;

	}

	.u-input {
		text-align: center !important;
	}

	.recharge {
		padding: 16px;
		padding-bottom: 80px;
		.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: 89.3%;
		height: 44px;
		margin: 0 auto;
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;

		 
	}

	//优惠券
	.discounts {
		margin-top: 20px;
		width: 100%;

		.title {
			width: 100%;
			

			.title-1 {
			
				height: 22px;
				color: rgba(16, 16, 16, 100);
				font-size: 16px;
			}

			.title-2 {
				margin-left: 4px;
				font-size: 14px;
				line-height: 20px;
			}

			.title-3 {
				float: right;
				height: 19px;
				font-size: 16px;
			}
		}

		.select {
			position: relative;

			/deep/.u-radio {
				padding: 18px 16px;
				margin-top: 12px;
				width: 100%;
				height: 48px;
				border-radius: 4px;
				background-color: rgba(255, 255, 255, 100);
				text-align: center;
				border: 1px solid rgba(227, 227, 227, 100);
				position: relative;
			}

			// /deep/.u-radio:nth-child(3) {
			// 

			// }

			/deep/.u-radio__icon-wrap {
				left: 16px;
				background-color: #fff;
			}

			/deep/.u-radio__label {
				margin-left: 40px;
			}
		}

		.explain {
			width: 64px;
			height: 24px;
			line-height: 24px;
			position: absolute;
			top: 24px;
			right: 12px;
			border-radius: 4px;
			background-color: rgba(255, 255, 255, 100);
			text-align: center;
			border: 1px solid rgba(227, 227, 227, 100);
			color: rgba(0, 185, 98, 100);
			font-size: 12px;
		}
	}
	
	// 尾部
	.bottom {
		background-color: #fff;
		
		width: 100%;
		height: 64px;
		line-height: 64px;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		padding: 12px 16px;
	
		.botton {
			//width: 343px;
			height: 40px;
			line-height: 40px;
			border-radius: 50px;
			background-color: rgba(0, 185, 98, 100);
			color: rgba(255, 255, 255, 100);
			font-size: 16px;
			text-align: center;
			margin: 0 auto;
		}
	
	}
</style>