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

<template>
	<view>
		<ujp-navbar title="开始充电"  :is-back="isback" ></ujp-navbar>
		<!-- 优惠 -->
		<view class="discounts" style="padding:0 18px;" v-if="bannerList.length">
			<u-swiper bg-color="#fff" :img-mode="'scaleToFill'" height="160" :list="bannerList" @click="clickBanner"
				:name="'picUrl'">
			</u-swiper>
		</view>
		<view class="recharge" >
			
			
			<view class="title">
				<view class="left lefttitle">
					请选择充电金额
				</view>
				<!-- <view class="to-recharge" @click="show=true,recordId='',otherNum_f='',fee=0">
					去充值
				</view> -->
			</view>
			<view class="card"
			 @click="payValue=0"
			 :class="{
				cardselect:payValue==0,
				cardno:payValue!=0
			}">
			<view class="cardgo" >
				<view class="cardinfo">
					<img src="@/assets/img/icon_success.png"  alt="">
					
				</view>
			</view>
				<view class="title">先付后退</view>
				<p>充电结束后，余额自动退还，不享受会员优惠</p>
				<view class="rechargeMain" v-show="payValue==0">
				 
					<view class="recharge-item" @click="moneyActiveClass_n=(item.id)"
						:class="moneyActiveClass_n == item.id ? 'active' : ''" v-for="(item,index) in moneyListN"
						:key="item.id">
						{{item.name}}
					</view>
				 
					
				</view>
				
			</view>
			<view class="card"
			 @click="paySelectMethod"
			 :class="{
				cardselect:payValue==1,
				cardno:payValue!=1
			}">
				<view class="cardgo" >
					<view class="cardinfo">
						<img src="@/assets/img/icon_success.png" width="32" alt="">
						
					</view>
				</view>
				<view class="title">会员账户余额充电</view>
				
				<p>当前余额{{user.balance>0?user.balance.toFixed(2):'0.00'}}元
					<span
					  @click="paySelectShow()"
					 style="color:#00B962;margin-left: 20px; ">去充值></span>
				
				</p>
				<view class="rechargeMain" v-show="payValue==1">
					<view @click="moneyClick(-1)" :class="!otherNum&&moneyActiveClass == -1? 'active' : ''" class=" recharge-item  ">
						充满自停
					</view>
					<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 recharge-item2" :class="otherNum ? 'active' : ''" style="
						padding: 1px 0px;">
						<u-input v-model="otherNum" @input="ckInput"  @focus="focus" type="digit" placeholder="其他充电金额" />
				
					</view>
					
				</view>
				
			</view>
			
    <!-- 优惠券2 -->
			<view class="discounts2" v-if="false">
				<view class="left lefttitle">
					支付方式
				</view>
							
				<view class="right" @click="paySelect=true" style="color:#101010"   >
								{{payName}}
					<view class="iconfont">&#xe600;</view>
				</view>
							
			</view>
	
			 <view class="discounts2">
			 	<view class="left lefttitle">
			 		优惠券
			 	</view>
				
				<view class="right"   v-if="payValue=='0'">
					先付后退不享受会员优惠活动
					
				</view>
				<view class="right" @click="chooseCoupons"  v-else-if="selectObj.id">
					{{selectObj.threshold == 0 ? '无门槛' : '满'+selectObj.threshold.toFixed(2)+'元可用'}},
					
					<span class="price" v-if="selectObj.classify == '1'||selectObj.classify == '3'">抵扣{{selectObj.value.toFixed(2)}}元</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="member" v-if="userCardBool" >
			 	<view class="actively ">
			 		会员活动
			 	</view>
				<view class="right"   v-if="payValue=='0'">
					先付后退不享受会员优惠活动
					
				</view>
				<view class="type"  v-else-if="!vin" style="color: red;" >
					vin码不一致
				</view>
				<view class="type" v-else-if="canUse">
					充电服务费月卡
				</view>
				<view class="type" style="color: red;" v-else>
					此充电站不支持月卡服务
				</view>
				
			 </view>
			
			
		</view>
		<view class="bottom">
			<view class="botton"
			 @click="submit"
			 >开始充电</view>
			
		</view>
		
		<view class="textinfo">
			<p>充电说明：</p>
			<view>
				1.最终结算金额将以实际充入电量为准；<br/>
				2.充满自停模式需要您的余额不低于10元才可充电；<br/>
				3.充电金额请输入1元~500元的整数。实际充电金额与所选金额会略有出入（一般误差约几分钱)；<br/>
				4.完成充电后，在满足条件的情况下，优惠券自动抵扣；提前结束充电则不使用优惠券并返还至您的卡包。<br/>
			</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> -->
				<u-modal v-model="showmodal" 
				:show-cancel-button="true"
				title="余额不足" confirm-text="前往充值"
				content="账户余额不足，充值成功后开始充电" @confirm="show=true"></u-modal>

		<!-- 弹窗2 -->
		<template >
			<view >
				<u-popup v-model="paySelect" mode="bottom"  >
					<view class="paySelect">
						<view class="title lefttitle " >选择支付方式</view>
						<u-radio-group v-model="payValueTemp">

						<p  >
							<u-radio 
							name="0"
							active-color="#2979f6" shape="circle" size="48">
							<p  >{{payList[0].name}}<span>({{payList[0].tips}})</span> 	</p>
							 </u-radio>
						</p>
						<p  v-if="personInfo.userType=='2'" >
							<u-radio 
								name="1"
							
							active-color="#2979f6" shape="circle" size="48">
							<p  >{{payList[1].name}}<span>({{payList[1].tips}})</span> 	</p>
							</u-radio>
						</p>
						<p  v-if="false" >
							<u-radio  
								name="2"
							 active-color="#2979f6" shape="circle" size="48">
							 <p  >{{payList[2].name}}<span>(其他充值金额)</span> 	</p>
							 
							 </u-radio>
						</p>
						</u-radio-group>
					</view>
					
					<view class="recharge" style="padding-bottom: 0;">
						
						
						<view class="recharge-btn transactionClass"  style="margin-top: 60px;">
							
							
							<u-button
							 class="success-btn" @click="paySelectMethod"
								shape="circle" type="success"  style="margin-top: 12px;margin-bottom: 16px;">
								<span>确定</span>
							</u-button>
						</view>
					</view>
				</u-popup>
				
			</view>
		</template>
		<!-- 弹窗 -->
		<template >
			<view >
				<u-popup v-model="show" mode="bottom"  >
					<view class="recharge" style="padding-bottom: 0;">
						<view class="title lefttitle " >选择充值金额</view>
						<p>当前余额{{user.balance>0?user.balance.toFixed(2):'0.00'}}元</p>
						<view class="rechargeMain">
							<view class="recharge-item" :class="!otherNum_f&&moneyActiveClass_f == item.id ? 'active' : ''"
								v-for="(item,index) in moneyList_f" :key="item.id" @click="moneyClick_f(item.id,item)">
								{{item.amountDesc?item.amountDesc:item.rechargeAmount+'元'}}
								<view class="amount" v-if="item.amountRemark">{{item.amountRemark}}</view>
								</view>
							
						</view>
						<p class="oldTextjp2" oldstyle="font-size:16px">其他充值金额</p>
					<view  style="margin-bottom: 32px;">
						
						<view 
						
						:class="otherNum_f? 'active' : ''"
						class="recharge-input self-stop" style="height: 100%;width: 100%;margin-bottom: 8px;">
							<u-input v-model="otherNum_f" @input="ckInput_f" @focus="focus" type="digit" :border="true" />
										
						
						</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>
					
						<view class="recharge-btn transactionClass"  style="margin-top: 60px;">
							<view >
								<u-checkbox-group>
									<u-checkbox active-color="green" v-model="checked" shape="circle"></u-checkbox>
								</u-checkbox-group>
								我已阅读并同意<span @click="gotoUrl('pages/article/details?code=CZXY')" style="color:#00B962" >《充值协议》</span>
								
							</view>
							
							<u-button
							 class="success-btn"
								shape="circle" type="success" @click="rechargeNow" style="margin-top: 12px;margin-bottom: 16px;">
								<span>微信充值</span>
							</u-button>
						</view>
					</view>
				</u-popup>
				
			</view>
		</template>
	</view>
</template>

<script>
	import * as API from '@/apis/chargeProcess.js'
	import * as userApi from '@/apis/user.js'
	import * as newsApi from '@/apis/news.js'
	import * as API_finance from '@/apis/finance.js'
	import {
		wxPayJs
	} from '@/utils/wxpay'
	import * as Pay from '@/apis/weixin.js'
	
	

	export default {
		data() {
			return {
				fee:0,
				recordId:"",
				show2:false,
				stationId:"",
				elderMode:false,
				isback:true,
				show: false,
				moneyActiveClass_n: "50",
				moneyActiveClass: "-1",
				moneyActiveClass_f: "-1",
				detail: {},
				couponsuse:'',
				showmodal:false,
				//提交信息
				//提交信息
				submitForm_f: {
					
					//paytype:'YE',
				},
				submitForm: {
					deviceNo: '',
					channelNo: '',
					carNumber: '',
					chargeStrategy: 2,
					amount: 0
					//paytype:'YE',
				},
				uuid:0,
				user: {},
				otherNum_f: '',
				otherNum: '',
				moneyList_f:[],
				paySelect:false,
				payName:"",
				payValueTemp:0,
				payValue:0,
				payList:[{
					name:"先付后退",
					tips:"游客不享受平台优惠活动",
					value:"1",
					select:false,
				},{
					name:"个人账户支付",
					tips:"享受平台充电8.5折等优惠活动",
					value:"2",
						select:false,
				},{
					name:"单位账户支付",
					tips:"账户余额：99999元",
					value:"3",
						select:false,
				}],
				moneyList: [
					
					{
						id: '10',
						name: '10'
					},
					{
						id: '20',
						name: '20'
					},
					{
						id: '50',
						name: '50'
					},
					{
						id: '100',
						name: '100'
					},

				],
				moneyListN: [
					{
						id: '50',
						name: '50元'
					},
					{
						id: '100',
						name: '100元'
					},
					{
						id: '150',
						name: '150元'
					}
				],
				userCard:null,
				canUse:false,
				selectObj:{},
				value:"",
				// 优惠券
				listlength:0,
				vin:true,
				bannerList:[],
            checked:true,
			selectItem:{},
			personInfo:{},
			}
		},
		computed:{
			userCardBool(){
				if(this.userCard){
					var date=new Date().getTime()
					var reg=new RegExp('-','gi')
					var str=this.userCard.endTime;
					//console.log(str.replace(reg,'/'))
					var date2=new Date(str.replace(reg,'/')).getTime();
					if(date<date2){
						return true;
					}
				}
				return false
			}
		},
		onLoad(op) {
			
			 this.personInfo=this.carhelp.getPersonInfo()
			// 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.vin=='no'){
					this.vin=false;
			}
			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
				}
				this.init()
		},
		onReady(){
			this.personInfo=this.carhelp.getPersonInfo()
			if(this.personInfo.userType=="1"){
				this.payValueTemp=0;
				this.payValue=0;
			}else{
				this.payValueTemp=1;
				this.payValue=1;
			}
			this.payName=this.payList[this.payValue].name;
			
			this.getBannerInfo("charge-start")
			
			this.elderMode = this.carhelp.get('getElderModeClass')  == '长辈模式';
			if(this.elderMode)
				this.theme('elder')
			else
				this.theme('standard')
		},
		onShow() {
			this.personInfo=this.carhelp.getPersonInfo()
			
			var obj=this.carhelp.get("chooseCoupons");
			if(obj){
				if(obj.uuid==this.uuid){
					this.selectObj=obj.selectObj;
				}
			}
			
			this.getHomePage()
		},
		methods: {
			paySelectShow(){
				if(this.personInfo.userType=="1"){
					
				}else{
					this.show=true;
					this.recordId='';
					this.otherNum_f='';
					this.fee=0
				}
				
			},
			paySelectMethod(){
				if(this.personInfo.userType=="1"){
					uni.showToast({
						title:"游客模式只支持“先付后退”"
					})
				}else{
					this.payValue=1
				}
				
			},
			moneyClick_f(index,item) {
				this.otherNum_f='';
				this.moneyActiveClass_f = index;
				if(item){
					this.selectItem=item;
					// if(item.imgUrl){
					// 	this.selectImg=item
					// }
				}
			},
			rechargeNow2() {
				//先付后退
				
				
				this.submitForm_f={};
				var fee=0;
				this.submitForm_f.amount=this.fee;
				
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				if(this.recordId){
					this.submitForm_f.recordId=this.recordId
					
					
				}
				//(this.submitForm)
				this.wxpy()
				
			},
			rechargeNow() {
				if(!this.checked){
					uni.showToast({
						title:"请同意《充值协议》后进行充值"
					})
					return
				}
				
				this.submitForm_f={};
				var fee=0;
				if(!this.otherNum_f){
					this.submitForm_f.chargingMarketingId=this.selectItem.id;
					fee=this.selectItem.rechargeAmount
				}else{
					this.submitForm_f.amount=this.otherNum_f
					fee=this.otherNum_f
				}
				
				if(this.fee){
					var thisfee=this.fee
					if(this.fee>parseFloat(fee)){
						uni.showToast({
							title:`最少充值${thisfee}元才能启动充电`
						})
						return
					}
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				if(this.recordId){
					this.submitForm_f.recordId=this.recordId
					
					
				}
				//(this.submitForm)
				this.wxpy()
				
			},
			wxpy(){
				
				Pay.wxpay(this.submitForm_f).then((response) => {
					
					if(!response.result){		
						uni.showToast({
							title:  response.message
						})
						return
					}
					var data = response.data
					uni.hideLoading()
					//("Pay+"+new Date().getTime())		
					wxPayJs(data);
						
				}).catch(error => {
					uni.showToast({
					
						title: error
					})
						
				})
			},
			focus(){
				console.log(0)
				uni.pageScrollTo({
					scrollTop:999999,
					duration:0
				})
			},
			init() {
			
			
			
				
				var data = {
						type:2	,
						};
			
			
				API_finance.marketingData(data).then((res) => {
			
					this.moneyList_f = res.data.chargingMarketingList
					if (this.moneyList_f.length > 0) {
						this.selectItem = this.moneyList_f[0];
						this.moneyActiveClass_f = this.moneyList_f[0].id
						//(this.moneyActiveClass)
					}
					
				}).catch(error => {
					uni.showToast({
			
						title: error
					})
				})
			},
			clickBanner(index){
				var mod= this.bannerList[index]
				
				if(mod.linkUrl.indexOf('http')==0){
				    window.location=mod.linkUrl;
				}
				else if(mod.linkUrl.indexOf('#/')==0){
					if(mod.linkUrl.indexOf("?")==-1){
						mod.linkUrl+='?';
					}
				    //window.location=mod.linkUrl;
					var url=mod.linkUrl.split("#")[1]
					//window.location = mod.clickUrl;
					uni.navigateTo({
						url: url
					})
				}
				else if(mod.linkUrl=='#'||mod.linkUrl==''){
				
				}
				else{
					uni.navigateTo({
						url:mod.linkUrl
					})
				}
				
			},
			getBannerInfo(code){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				newsApi.getBannerInfo(code).then((res) => {
					uni.hideLoading();
					this.bannerList =res.data;
					
					// document.getElementsByClassName("uni-swiper-wrapper")[0].parentNode.style="background-color: rgb(255, 255, 255); height: 300px;"
				 }).catch(error => {
						uni.showToast({
						
							title: error,icon: "none"
						})
				})
			},
			
			getPile(){
				
			},
			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_f(text) {
				if (text.indexOf('.') > 0) {
					
					var k =text.split(".")[1]
					if(k.length>=3){
						this.$nextTick(()=>{
							text=parseFloat(text).toFixed(2);
							this.otherNum_f= text
						})
					}
				}
				var t = Number(text);
				if (t < 1) {
					this.$nextTick(() => {
						this.otherNum_f = '';
					})
					
				}
				if (t > 500) {
					this.$nextTick(() => {
						this.otherNum_f = 500;
					})
				
				}
			
			},
			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.payValue!=0){
					if(this.selectObj.id){
						this.submitForm.userCouponId=this.selectObj.id
					}
					if(this.userCardBool&&this.canUse&&this.vin){
						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))
					
					if(res.data.status=="5"){
						
						uni.hideLoading()
						
						if(this.submitForm.payType=="1"){
							this.recordId=res.data.recordId;
							this.fee=res.data.fee;
							
							this.rechargeNow2()//先付后退
						}else{
							this.showmodal=true;
							this.recordId=res.data.recordId;
												
							var fee=res.data.fee;
												
							
							this.fee=(fee-this.user.balance).toFixed(2);
							this.otherNum_f=this.fee;
						}
						
					}else{
						
						this.gotoUrl("pages/searchPile/chargeProcess/dcCharging?id=" + res.data.recordId);
						
						
					}
					
					

				}).catch(error => {
					uni.hideLoading()
					if (error == '用户账户余额不足!') {
						
					} else {
						uni.showToast({
							title: error
						})
					}

				})
			},
			getHomePage() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				
			
				API.userCard({
					stationId:this.stationId
				}).then((res) => {
					console.log(res)
					this.userCard=res.data.regUserCard
					this.canUse=res.data.canUse
					//this.user = res.data
					
					
					API.personalCenter().then((res2) => {
						this.user = res2.data
						this.isReady = true;
						uni.hideLoading()
					 
					}).catch(error => {
						uni.showToast({
							title: error
						})
					})
					
				 
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			useCoupon(){
				 var obj={
					 	status:0,
					 	stationId:this.stationId,
						hideCardCoupon:1
					 }
				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() {
				
				

				if (!this.submitForm.channelNo) {
					uni.showToast({
						title: '请先选择充电通道'
					})
					return
				}
				this.submitForm.payType=this.payList[this.payValue].value;
				if(this.submitForm.payType=="1"){
					 this.submitForm.amount = this.moneyActiveClass_n
					 this.submitForm.chargeStrategy = 2;
				}else{
					this.submitInit()
				}
				
				this.confirm()
			 


			},
		}

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

<style lang="scss" scoped>
	.textinfo{
		padding: 40rpx;
		font-size: 14px !important;
		color: #999999;
	
		p{
			font-size: 16px !important;
			color:#101010;
			    font-weight: bold;
		}
	}
	.lefttitle{
		font-weight: bold;
		font-size: 16px
	}
	@import "@/_theme.scss";
	.listlength{
		    float: right;
		    padding-right: 10px;
	}
	/deep/.u-drawer-content{
		border-radius: 10px 10px 0 0
	}
	
	/deep/.u-radio-group {
		width: 100%;
	}

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

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

	.recharge-item2 {
		@include themeify{
			font-size: themed('font-size2') !important;
		}
/*		font-size: 14px !important;*/
		color: #999999;

	}
	.paySelect{
			padding: 16px;
		.title{
			font-size:40rpx
		}
		p  {
			width: 100%;
			span{
				color: #666;
			}
			.u-radio__label{
					color: #333333 ;
			}
			.u-radio{
				width: 100% !important;;
			}
			color: #333333 ;
			margin-top: 16rpx;
			font-size:32rpx;
		}
	}

	.recharge {
		padding: 16px;
		// padding-bottom: 80px;
		.title {
			@include themeify{
				font-size: themed('font-size3');
			}
/*			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;
				@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: 10px;
		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: 10px;
		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:160rpx;
				font-size: 40rpx; 
			}
		}
		.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: #fff;
		width: 100%;
		// height: 64px;
		// line-height: 64px;
		// position: fixed;
		// bottom: 0;
		// left: 0;
		z-index: 999;
		padding: 0px 16px 16px;
	
		.botton {
			//width: 343px;
			height: 40px;
			line-height: 40px;
			font-size:16px;
			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;
	
		font-size: 14px;
		text-align: left;
		font-family: AlibabaPuHui-regular;
	}
	.to-recharge{
		
		padding: 0 16px;
		line-height: 36px;
		border-radius: 50px 0px 0px 50px;
		background:linear-gradient(#FF9000,#FFB700);
		color: rgba(255, 255, 255, 100);
		font-size: 16px;
		text-align: center;
		position: absolute;
		right: -16px;
	     top: 0;
	}
	/deep/.u-checkbox__icon-wrap--checked{
		background-color: #2979ff !important;
		border-color: #2979ff !important;
	}
	.amount {
		// width: 41.9%;
		height: 16px;
		line-height: 15px;
		border-radius: 0px 4px 0px 4px;
		background-color: #ec4530;//rgba(0, 185, 98, 100)
		color: rgba(255, 255, 255, 100);
		font-size: 10px;
		text-align: center;
		position: absolute;
		top: 0;
		right: 0;
	
	}
	.card {
	
		padding: 10px;
		margin-top: 10px;
		.title{
			
			font-weight: bold;
		}
	}
	.cardselect {
		border-radius: 8px;
		border: 2px solid rgba(0, 185, 98, 1);
		.title{
			color:#00B962;
			font-weight: bold;
		}
		.cardgo{
				position: relative;
			 
				.cardinfo{
					    background-color: #57ad55;
					width: 64rpx;
					height: 64rpx;
					position: absolute;
					    top: -10px;
					    right: -10px;
						    border-radius: 0 0 0 8px;
							img{
								width: 64rpx;
							}
				}
		}
	}
	.cardno {
		border: 2px solid rgba(204, 204, 204, 1);
		border-radius: 8px;
		.title{
			
			font-weight: bold;
		}
		.cardgo{
			display: none;
		}
		
	}
</style>