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="false" >
				<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" :wrap="true">
						<template v-for="(item, index) in list" >
							<u-radio @change="radioChange" :key="index" :name="item.id"
								:style="item.chooseStatus==0?'	background-color: #e3e3e3 !important;':''"
								:disabled="item.chooseStatus==0">
								满{{item.threshold}}元减{{item.value}}元
								<view class="explain" @click="gotoUrl('pages/user/coupon/couponDetails?id='+item.id)" :key="index" >使用说明</view>

							</u-radio>
							 
						</template>
					</u-radio-group>

				</view>
			</view>

    <!-- 优惠券2 -->
			 <view class="discounts2">
			 	<view class="left">
			 		优惠券
			 	</view>
				<view class="right"  @click="chooseCoupons"  v-if="listlength">
					未选择，剩余{{listlength}}张优惠券
					<view class="iconfont">&#xe600;</view>
				</view>
				<view class="right" v-else>
					无优惠券
					<view class="iconfont">&#xe600;</view>
				</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'
	import * as userApi from '@/apis/user.js'

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

				],
				value:"",
				// 优惠券
				listlength:0,

			}
		},
		onLoad(op) {
			this.uuid=new Date().getTime();
			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: {
			chooseCoupons(){
				this.submitInit()
					
				this.gotoUrl('pages/user/coupon/chooseCoupons?uuid='+this.uuid+"&amount="+this.submitForm.amount)
				
			},
			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.otherNum = ''
				this.moneyActiveClass = index;
			

			},
			radioChange(e){},
			confirm() {

				//console.log(JSON.stringify(this.submitForm))
				if(this.value){
					this.submitForm.userCouponId=this.value
				}

				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()
				 
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			useCoupon(){
				 
				 
				 
				userApi.couponList({
					status:0
				}).then((res) => {
					
					this.listlength= res.data.recordsTotal;
					 
					
					
					//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>
	.listlength{
		    float: right;
		    padding-right: 10px;
	}
	
	/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: 10px;
			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;
		}
	}
	
	// 优惠券2
	.discounts2{
		margin-top: 20px;
		width: 100%;
		display: flex;
		justify-content: space-between;
		.left{
				width: 70px;
			// height: 20px;
			color: rgba(16, 16, 16, 100);
			font-size: 20px;
		}
		.right{
		
			height: 16px;
			line-height: 28px;
			color: rgba(255, 61, 0, 100);
			font-size: 16px;
			text-align: right;
			display: flex;
		}
		.iconfont{
			line-height: 29px;
			text-align: center;
			color: #b3b3b3;
			font-size: 24px;
			
			
		}
	}
	// 尾部
	.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>