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

<template>
	<view>
		<ujp-navbar title="充电"  :is-back="isback" ></ujp-navbar>
		<view class="recharge" >
			<view class="title">请选择充电金额</view>
			<p>当前余额{{user.balance>0?user.balance:0}}元</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="selectObj.id">
					{{selectObj.threshold == 0 ? '无门槛' : '满'+selectObj.threshold+'元可用'}},
					
					<span class="price" v-if="selectObj.classify == '1'||selectObj.classify == '3'">抵扣{{selectObj.value}}元</span>
					<span class="price" v-if="selectObj.classify == '2'">服务费{{selectObj.value}}折</span>
					
					<view class="iconfont">&#xe600;</view>
				</view>
				<view class="right"  @click="chooseCoupons"  v-else-if="listlength">
					未选择,剩余{{listlength}}张优惠券
					<view class="iconfont">&#xe600;</view>
				</view>
				<view class="right" @click="chooseCoupons"   v-else>
					无优惠券
					<view class="iconfont">&#xe600;</view>
				</view>
				
			 </view>
			 <view class="couponsuse"  ><span style="color:red">*</span>{{couponsuse}}</view>
			 
			 
			 <!-- 会员活动 -->
			 <view class="member" v-if="userCardBool" >
			 	<view class="actively">
			 		会员活动
			 	</view>
				<view class="type" v-if="canUse">
					充电服务费包月卡
				</view>
				<view class="type" style="color: red;" v-if="!canUse">
					此充电站不支持月卡服务
				</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 {
				stationId:"",
				elderMode:false,
				isback:true,
				moneyActiveClass: "20",
				detail: {},
				couponsuse:'',
				//提交信息
				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'
					},

				],
				userCard:null,
				canUse:false,
				selectObj:{},
				value:"",
				// 优惠券
				listlength:0,

			}
		},
		computed:{
			userCardBool(){
				if(this.userCard){
					var date=new Date().getTime()
					var date2=new Date(this.userCard.endTime).getTime();
					if(date<date2){
						return true;
					}
				}
				return false
			}
		},
		onLoad(op) {
			
			// var plus=this.carhelp.getPersonInfoPlus()
			// if(plus){
			// 	this.userCard=plus.userCard;
			// }
			this.uuid=new Date().getTime();
			this.stationId= op.stationId;
			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()
			
			var  couponsuse=this.carhelp.getConfig().couponsuse
						// img="https://yktwechat.xiaoxinda.com/config/xxd2021.jpg"		
			if(couponsuse){
							this.couponsuse=couponsuse
				}
		},
		onReady(){
			this.elderMode = this.carhelp.get('getElderModeClass')  == '长辈模式';
			if(this.elderMode)
				this.theme('elder')
			else
				this.theme('standard')
		},
		onShow() {
			var obj=this.carhelp.get("chooseCoupons");
			if(obj){
				if(obj.uuid==this.uuid){
					this.selectObj=obj.selectObj;
				}
			}
			
			this.getHomePage()
		},
		methods: {
			theme(type) {
				
			  if(type == 'elder')	
			  {
				document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
				 
			  }
			  else
			  {
				document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
				 
				  
			  } 
			},
			chooseCoupons(){
				this.submitInit()
					
				this.gotoUrl('pages/user/coupon/chooseCoupons?uuid='+this.uuid+"&amount="+this.submitForm.amount+"&stationId="+this.stationId)
				
			},
			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;
					})
				
				}
				
				this.selectJudge();

			},
			moneyClick(index) {
				this.otherNum = ''
				this.moneyActiveClass = index;
				this.selectJudge();

			},
			selectJudge(){
				this.submitInit()
				if(this.submitForm.amount==0){
					return
				}
				if(this.selectObj.id&&this.selectObj.threshold>this.submitForm.amount){
					uni.showToast({
						title:"请重新选择优惠券"
					})
					this.selectObj={}
				}
			},
			radioChange(e){},
			confirm() {

				////(JSON.stringify(this.submitForm))
				if(this.selectObj.id){
					this.submitForm.userCouponId=this.selectObj.id
				}
				if(this.userCardBool&&this.canUse){
					this.submitForm.userCardId=this.userCard.id
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				//this.submitForm.deviceNo = this.detail.deviceNo;
				API.startCarCharging(this.submitForm).then((res) => {
					//(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) {
									//('用户点击取消');
								}
							}
						});
					} 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
					})
				})
				
			
				API.userCard({
					stationId:this.stationId
				}).then((res) => {
					console.log(res)
					this.userCard=res.data.regUserCard
					this.canUse=res.data.canUse
					//this.user = res.data
				
				 
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			useCoupon(){
				 var obj={
					 	status:0,
					 	stationId:this.stationId
					 }
				if(this.userCardBool) {
					obj.userCardId=this.userCard.id
				}
				 
				userApi.couponList(obj).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) {
								//('用户点击取消');
							}
						}
					});
				} else {

					this.confirm()
				}


			},
		}

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

<style lang="scss" scoped>
	@import "@/_theme.scss";
	.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 {
		@include themeify{
			font-size: themed('font-size2') !important;
		}
/*		font-size: 14px !important;*/
		color: #999999;

	}

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

	.recharge {
		padding: 16px;
		padding-bottom: 80px;
		.title {
			@include themeify{
				font-size: themed('font-size3');
			}
/*			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;
				@include themeify{
					font-size: themed('font-size3');
				}
/*				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;
			@include themeify{
				font-size: themed('font-size3');
				height:themed('font-size19');
				line-height:themed('font-size19')
			}
/*			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);
				@include themeify{
					font-size: themed('font-size3');
					height:themed('font-size6'); 
				}
/*				font-size: 16px;*/
			}

			.title-2 {
				margin-left: 4px;
				@include themeify{
					font-size: themed('font-size2');
					line-height:themed('font-size5'); 
				}
/*				font-size: 14px;
				line-height: 20px;*/
			}

			.title-3 {
				float: right;
				@include themeify{
					font-size: themed('font-size3');
					line-height:themed('font-size5'); 
				}
/*				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;*/
			@include themeify{
				font-size: themed('font-size1');
				line-height:themed('font-size7'); 
				height:themed('font-size7'); 
			}
		}
	}
	
	// 优惠券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;*/
			@include themeify{
				width:themed('buttonWidth1');
				font-size: themed('font-size5'); 
			}
		}
		.right{
		/*
			height: 16px;
			line-height: 28px;*/
			color: rgba(255, 61, 0, 100);
			@include themeify{
				font-size: themed('font-size3'); 
				height: themed('font-size3'); 
				line-height: themed('font-size9');
								
			}
/*			font-size: 16px;*/
			text-align: right;
			display: flex;
		}
		.iconfont{
			@include themeify{
				font-size: themed('font-size7');  
				line-height: themed('font-size10');
								
			}
/*			line-height: 29px;*/
			text-align: center;
			color: #b3b3b3;
/*			font-size: 24px;*/
			
			
		}
	}
	
	// 会员活动
	.member{
		margin-top: 20px;
		display: flex;
	    justify-content: space-between;
		.actively{
			color: rgba(16, 16, 16, 100);
			font-size: 20px;
		}
		.type{
			color: rgba(16, 18, 18, 100);
			font-size: 16px;
			line-height: 28px;
			padding-right: 10px;
		}
	}
	
	
	// 尾部
	.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;*/
			@include themeify{
				font-size: themed('font-size3');  
				line-height: themed('font-size15');
				height: themed('font-size15');			
			}
			text-align: center;
			margin: 0 auto;
		}
	
	}
	
	.couponsuse{
		color: rgba(153, 153, 153, 100);
		margin-top: 10px;
		@include themeify{
			font-size: themed('font-size1'); 
		}
/*		font-size: 12px;*/
		text-align: left;
		font-family: AlibabaPuHui-regular;
	}
</style>