支持企业充电

App.vue

@@ -47,17 +47,17 @@
 		border-radius: 1px;
 	}
 	@media screen and (min-width: 320px) {
-	   /deep/.u-tabbar__content {
+	   ::v-deep  .u-tabbar__content {
 			height: 42px!important;
 	   }
 	}
 	@media screen and (min-width: 375px) {
-	   /deep/.u-tabbar__content {
+	   ::v-deep  .u-tabbar__content {
 			height: 52px!important;
 	   }
 	}
 	@media screen and (min-width: 425px) {
-	   /deep/.u-tabbar__content {
+	   ::v-deep  .u-tabbar__content {
 			height: 62px!important;
 	   }
 	}

apis/index.js

@@ -10,6 +10,8 @@ export function test(data) {
 	})
 }
 
+
+
 export function chargingStationData(data) {
 	return request({
 		method: 'post',

config/.env.dev.ud.js

@@ -15,7 +15,7 @@ const UNI_APP = {
 	//openId:"oK9Wr59rru-i3bm7dtTtxnkR-i4s",
 	//openId:"oK9Wr54VbEh3xvWYmD_zT5NbH4AY",//zkx
 	openId:"oSruR6YkhP7QDroLnZGxWis43Kn0",//zkx
-	
+	openId:"oSruR6fYa0yzdMsDinzNOlePTotk",//老板
 	//小鹏管家appid
 	//VUE_APP_WXAPPID:"wx7e70eb62a8459869",
 	 

pages/charge/index.vue

@@ -31,7 +31,7 @@
 						<p>桩名：</p>
 						<h4>{{detail.name}}</h4>
 					</view>
-					<view class="u-flex" @click="showTips()"  v-if="!(detail.electricityPrice&&detail.servicePrice)">
+					<view class="u-flex" @click="showTips()" v-if="!(detail.electricityPrice&&detail.servicePrice)">
 						<span>费用说明</span>
 						<u-icon name="error-circle" color="#1677ff" size="32"></u-icon>
 					</view>
@@ -57,15 +57,16 @@
 			</view>
 		</view>
 		<view class="charge">
-			
-			
-			 <view class="chargeInfo" v-if="!(detail.electricityPrice&&detail.servicePrice)"
-			  style="margin-bottom: 10px;">
-			 	<p>充电{{listTypeIndex==0?'时长':'金额'}} <span style="color:#1677FF;margin-left:10px ">{{getListName()}}</span></p>
-			 
-			 </view>
-			<view v-if="detail.templateCode=='3'" class="subsection-class" >
-				金额付费
+
+
+			<view class="chargeInfo" v-if="!(detail.electricityPrice&&detail.servicePrice)"
+				style="margin-bottom: 10px;">
+				<p>充电{{listTypeIndex==0?'时长':'金额'}} <span
+						style="color:#1677FF;margin-left:10px ">{{getListName()}}</span></p>
+
+			</view>
+			<view v-if="detail.templateCode=='3'" class="subsection-class">
+				金额付费
 			</view>
 			<u-subsection :list="listType" mode="subsection" v-else active-color="#3786f4" :current="0"
 				@change="changeListType"></u-subsection>
@@ -86,17 +87,16 @@
 
 
 			</view>
-			<view class="chargeMain" v-show="listTypeIndex==1">
-				
-				<view  class="chargeMain-item " style="width: 30%;padding: 5px;"
-					@click="submitForm.amount=0" :class="{
-						'active':submitForm.amount==0,
-						
-					}">
-					<p>充满自停</p>
-				
-				</view>
-				
+			<view class="chargeMain" v-show="listTypeIndex==1">
+
+				<view class="chargeMain-item " style="width: 30%;padding: 5px;" @click="submitForm.amount=0" :class="{
+						'active':submitForm.amount==0,
+						
+					}">
+					<p>充满自停</p>
+
+				</view>
+
 				<template v-for="(item,i) in moneylist">
 
 					<view :key="i" class="chargeMain-item " style="width: 30%;padding: 5px;"
@@ -111,35 +111,36 @@
 				</template>
 
 
-			</view>
-		</view>
-		<view  class="charge">
+			</view>
+		</view>
+		<view class="charge">
 			<view class="chargeInfo" style="margin-bottom: 10px;">
 				<p v-show="listTypeIndex==0"><span style="color:red">*</span>按时间付费：需要先充值，从余额中扣费，适用会员用户。</p>
 				<p v-show="listTypeIndex==1"><span style="color:red">*</span>按金额付费：无需充值，先付费后使用，未使用完的费用原路退回。</p>
-				
-			</view>
-			<view class="chargeInfo" v-if="(detail.electricityPrice&&detail.servicePrice)"
-			 style="margin-bottom: 10px;padding-top:10px;border-top:1px solid #CDCDCD">
-				<view style="    display: flex;
-    justify-content: space-between;">
-					 <p>充电{{listTypeIndex==0?'时长':'金额'}} <span style="color:#1677FF;margin-left:10px ">{{getListName()}}</span>
-					 
-					 </p>
-					 <view class="u-flex"  v-if="detail.templateCode!=3" style="     color: #1677ff;
-    margin-right: 5px;" @click="showTips()">
-						<span>费用说明</span>
-						<u-icon name="error-circle" color="#1677ff" size="32"></u-icon>
-					 </view>
-				 </view>
-				
-				<p>电费单价：{{detail.electricityPrice}}元/千瓦时</p>
-				<p>服务费单价：{{detail.servicePrice}}元/千瓦时</p>
+
+			</view>
+			<view class="chargeInfo" v-if="(detail.electricityPrice&&detail.servicePrice)"
+				style="margin-bottom: 10px;padding-top:10px;border-top:1px solid #CDCDCD">
+				<view style="    display: flex;
+    justify-content: space-between;">
+					<p>充电{{listTypeIndex==0?'时长':'金额'}} <span
+							style="color:#1677FF;margin-left:10px ">{{getListName()}}</span>
+
+					</p>
+					<view class="u-flex" v-if="detail.templateCode!=3" style="     color: #1677ff;
+    margin-right: 5px;" @click="showTips()">
+						<span>费用说明</span>
+						<u-icon name="error-circle" color="#1677ff" size="32"></u-icon>
+					</view>
+				</view>
+
+				<p>电费单价：{{detail.electricityPrice}}元/千瓦时</p>
+				<p>服务费单价：{{detail.servicePrice}}元/千瓦时</p>
 			</view>
 		</view>
 
-		 
-		<view style="padding-bottom: 100px;">
+
+		<view style="padding-bottom: 100px;" v-if="companyList.length==0">
 			<view class="charge">
 				<view class="chargeRadio">
 					<view class="u-flex">
@@ -153,51 +154,83 @@
 						@click='gotoUrl("pages/user/recharge")'>我要充值</u-button>
 				</view>
 			</view>
+		</view>
+		<view style="padding-bottom: 100px;" v-else >
+			<view class="charge chargeCompany">
+				<u-radio-group v-model="payValueCompanyId">
+					<view class="chargeRadio">
+						<view class="u-flex">
+							<u-icon name="rmb-circle-fill" color="#ff9502" size="96"></u-icon>
+							<view class="chargeRadio-text">
+								<p>余额支付<span class="rechargeSpan" @click='gotoUrl("pages/user/recharge")' >充值</span></p>
+								<p>现有余额￥{{user.availableBalance}} </p>
+							</view>
+						</view>
+						<view>
+							<u-radio shape="circle" name=""></u-radio>
+						</view>
+					</view>
+				
+					<view class="chargeRadio chargeRadio-border"  v-for="(companyItem,i) in companyList">
+						<view class="u-flex">
+							
+							<img src="@/assets/img/riFill-building-fill@3x.png" style="width: 96rpx;height: 96rpx;">
+							<view class="chargeRadio-text">
+								<p>{{companyItem.enterpriseAccount.entName}}账户余额充电</p>
+								<p>现有余额￥{{companyItem.enterpriseAccount.totalAmount>0?companyItem.enterpriseAccount.totalAmount.toFixed(2):'0.00'}} </p>
+							</view>
+						</view>
+						<view>
+							<u-radio shape="circle"  :name="companyItem.enterpriseAccount.id"
+							></u-radio>
+						</view>
+					</view>
+				</u-radio-group>
+				
+			</view>
 		</view>
 
 		<view class="foot-btn">
-			<u-button type="primary" :custom-style="customStyle" @click="submit" shape="square">开始充电</u-button>
+			<u-button type="primary" :custom-style="customStyle" @click="submit" shape="square">{{payValueCompanyId?'企业账户充电':'开始充电'}}</u-button>
 		</view>
 
 		<u-modal v-model="showPriceList" title="费用说明">
-			<view class="priceListMain">
-				
-				<u-table  v-if="detail.priceList.length" 
-				align="right"
-				border-color="#fff" style=" padding: 20rpx;"  >
-					<u-tr class="u-tr u-tr1">
-						<u-td class="u-td u-td1">充电功率</u-td>
-						<template v-if="detail.priceList[0].electricityPrice&&detail.priceList[0].servicePrice">
-							<u-td class="u-td">电费</u-td>
-							<u-td class="u-td">服务费</u-td>
-						</template>
-						<u-td class="u-td" v-else>费用</u-td>
-					</u-tr>
-					
-					<u-tr class="u-tr"  v-for="(item,i) in detail.priceList" >
-						<u-td class="u-td u-td1">{{item.minPower}}W-{{item.maxPower}}W</u-td>
-						<template v-if="item.electricityPrice&&item.servicePrice">
-							<u-td class="u-td">{{item.electricityPrice}}元/小时</u-td>
-							<u-td class="u-td">{{item.servicePrice}}元/小时</u-td>
-						</template>
-						
-						<u-td class="u-td" v-else>{{item.price}}元/小时</u-td>
-					</u-tr>
-					
-					
-				</u-table>
-			
+			<view class="priceListMain">
+
+				<u-table v-if="detail.priceList.length" align="right" border-color="#fff" style=" padding: 20rpx;">
+					<u-tr class="u-tr u-tr1">
+						<u-td class="u-td u-td1">充电功率</u-td>
+						<template v-if="detail.priceList[0].electricityPrice&&detail.priceList[0].servicePrice">
+							<u-td class="u-td">电费</u-td>
+							<u-td class="u-td">服务费</u-td>
+						</template>
+						<u-td class="u-td" v-else>费用</u-td>
+					</u-tr>
+
+					<u-tr class="u-tr" v-for="(item,i) in detail.priceList">
+						<u-td class="u-td u-td1">{{item.minPower}}W-{{item.maxPower}}W</u-td>
+						<template v-if="item.electricityPrice&&item.servicePrice">
+							<u-td class="u-td">{{item.electricityPrice}}元/小时</u-td>
+							<u-td class="u-td">{{item.servicePrice}}元/小时</u-td>
+						</template>
+
+						<u-td class="u-td" v-else>{{item.price}}元/小时</u-td>
+					</u-tr>
+
+
+				</u-table>
+
 				<!-- <p v-for="(item,i) in detail.priceList" class="showPriceList" :key="i">{{item.minPower}}W-{{item.maxPower}}W
 					<span>{{item.price}}元每小时</span></p> -->
-				<p style="    padding: 20rpx;" v-if="(detail.electricityPrice&&detail.servicePrice)">
-				电费单价：{{detail.electricityPrice}}元/千瓦时;服务费单价：{{detail.servicePrice}}元/千瓦时	</p>
-				<template v-else>
-					<p style="    padding: 20rpx;" v-if="detail.roundingMinute!=null&&detail.roundingMinute!=-1">
-						超过{{detail.roundingMinute}}分钟，按1小时记，不足{{detail.roundingMinute}}分钟，不计费</p>
-					
+				<p style="    padding: 20rpx;" v-if="(detail.electricityPrice&&detail.servicePrice)">
+					电费单价：{{detail.electricityPrice}}元/千瓦时;服务费单价：{{detail.servicePrice}}元/千瓦时 </p>
+				<template v-else>
+					<p style="    padding: 20rpx;" v-if="detail.roundingMinute!=null&&detail.roundingMinute!=-1">
+						超过{{detail.roundingMinute}}分钟，按1小时记，不足{{detail.roundingMinute}}分钟，不计费</p>
+
 				</template>
-			
-			</view>
+
+			</view>
 		</u-modal>
 
 		<u-modal v-model="showmodel" @confirm="confirm" :showCancelButton="true" title="订单信息">
@@ -208,15 +241,16 @@
 				<p>充电通道</p>{{submitForm.channelNo}}
 			</div>
 			<div class="showmodel">
-				<p>支付方式</p>{{listTypeIndex==0?'余额支付':'微信支付'}}
+				<p>支付方式</p>{{payValueCompanyId?'企业账户':'余额支付'}}
 			</div>
 			<div class="showmodel">
 				<p>充电{{listTypeIndex==0?'时长':'金额'}}</p>{{getListName()}}
 			</div>
 
-			<p class="showmodel" style="color: red;" v-if="listTypeIndex==0&&submitForm.hour==0">充满自停模式，设备充满后会自动停止计费，剩余费用会原路返还</p>
+			<p class="showmodel" style="color: red;" v-if="listTypeIndex==0&&submitForm.hour==0">
+				充满自停模式，设备充满后会自动停止计费，剩余费用会原路返还</p>
 			<p class="showmodel" style="color: red;" v-if="listTypeIndex==1">按金额付费：无需充值，先付费后使用，未使用完的费用原路退回。</p>
-			
+
 		</u-modal>
 		<u-modal v-model="showmodal2" :show-cancel-button="true" title="余额不足" confirm-text="前往充值"
 			content="账户余额不足，充值成功后开始充电" @confirm="wxpay"></u-modal>
@@ -240,7 +274,7 @@
 				moneyList_f: [],
 				showmodal2: false,
 				moneyActiveClass_f: "-1",
-				fee:"",
+				fee: "",
 				id: "",
 				showPriceList: false,
 				showmodel: false,
@@ -262,8 +296,8 @@
 				list: [
 
 				],
-				recordId:"",
-			
+				recordId: "",
+
 				moneylist: [{
 						id: '0.5',
 						name: '0.5元'
@@ -336,7 +370,8 @@
 					amount: "0.5",
 					//paytype:'YE',
 				},
-
+				companyList: [],
+				payValueCompanyId:"",
 				isReady: false,
 				customStyle: {
 					background: '#1677ff'
@@ -363,31 +398,31 @@
 
 		},
 		methods: {
-			wxpay(){
+			wxpay() {
 				uni.showLoading({
 					title: "加载中",
 					mask: true,
 				})
 				Pay.wxpay2({
-					recordId:this.recordId,
-					amount:this.fee
+					recordId: this.recordId,
+					amount: this.fee
 				}).then((response) => {
-					if(!response.result){		
+					if (!response.result) {
 						uni.showToast({
-							title:  response.message
+							title: response.message
 						})
 						return
 					}
 					var data = response.data
 					uni.hideLoading()
-					console.log("Pay+"+new Date().getTime())		
+					console.log("Pay+" + new Date().getTime())
 					wxPayJs(data);
-						
+
 				}).catch(error => {
 					uni.showToast({
-					
+
 						title: error
-					})	
+					})
 				})
 			},
 			getListName() {
@@ -471,9 +506,9 @@
 					}
 					API.chargingData(data).then((res) => {
 						this.detail = res.data.chargingDevice;
-						if(this.detail.templateCode==3){
-							this.listTypeIndex=1;
-							this.submitForm.amount=0;
+						if (this.detail.templateCode == 3) {
+							this.listTypeIndex = 1;
+							this.submitForm.amount = 0;
 						}
 						if (!this.detail.online) {
 							uni.showToast({
@@ -487,7 +522,7 @@
 						this.list = this.detail.chargeStatusArray
 						this.isReady = true;
 						uni.hideLoading()
-
+						this.getpersonalCenter() //查询企业用户
 					}).catch(error => {
 						this.isReady = true;
 						uni.hideLoading()
@@ -495,8 +530,44 @@
 							title: error
 						})
 					})
+
+
 				}
 			},
+			getpersonalCenter() {
+				uni.showLoading({
+					title: "加载中",
+					mask: true,
+				})
+
+				API.personalCenter({
+					stationId: this.detail.stationId
+				}).then((res2) => {
+					uni.hideLoading()
+					var payValueCompanyId=this.carhelp.get("payValueCompanyId"+this.detail.stationId);
+					console.log(payValueCompanyId)
+					var entRegList = res2.data.entRegList;
+					this.companyList = []
+
+					for (var i in entRegList) {
+						var item = entRegList[i]
+						if (item.enterpriseAccount) {
+							this.companyList.push(item)
+							if(item.enterpriseAccount.id==payValueCompanyId){
+								 this.payValueCompanyId=payValueCompanyId
+								
+							}
+						}
+					}
+
+				}).catch(error => {
+					uni.hideLoading()
+					uni.showToast({
+						title: error
+					})
+				})
+			},
+
 			selectItem(row) {
 				if (row.status == 0) {
 					this.submitForm.channelNo = row.channelNo
@@ -507,10 +578,7 @@
 				}
 			},
 			confirm(bl) {
-				uni.showLoading({
-					title: "加载中",
-					mask: true,
-				})
+				
 
 				this.submitForm.deviceNo = this.detail.deviceNo;
 				//提交信息
@@ -524,28 +592,61 @@
 				} else {
 					submitForm.amount = this.submitForm.amount
 				}
-
-				//paytype:'YE',
+				// zkx
+				// var payValueCompanyId=this.carhelp.get("payValueCompanyId"+this.detail.stationId);
+				// if(this.payValueCompanyId){
+				// 	this.carhelp.set("payValueCompanyId"+this.detail.stationId, this.payValueCompanyId);
+				// }else{
+				// 	if(payValueCompanyId){
+				// 		this.carhelp.set("payValueCompanyId"+this.detail.stationId, "");
+						
+				// 	}
+				// } 
+				// return
+				uni.showLoading({
+					title: "加载中",
+					mask: true,
+				})
+				//paytype:'YE',
+				if(this.payValueCompanyId){
+					submitForm.payType=3
+					submitForm.entAccountId=this.payValueCompanyId
+				}else{
+					submitForm.payType=2
+					submitForm.entAccountId=""
+				}
 
 				API.startCharging(submitForm).then((res) => {
+					
+					var payValueCompanyId=this.carhelp.get("payValueCompanyId"+this.detail.stationId);
+					if(this.payValueCompanyId){
+						this.carhelp.set("payValueCompanyId"+this.detail.stationId, this.payValueCompanyId);
+					}else{
+						if(payValueCompanyId){
+							this.carhelp.set("payValueCompanyId"+this.detail.stationId, "");
+							
+						}
+					}
 					
-					if(res.data.status=="5"){
+					if (res.data.status == "5") {
 						uni.hideLoading()
-						
-						
-						this.recordId=res.data.recordId;
-					
-						var fee=res.data.fee;
-					
-						
-						this.fee=(fee-this.user.availableBalance).toFixed(2);
+
+
+						this.recordId = res.data.recordId;
+
+						var fee = res.data.fee;
+
+
+						this.fee = (fee - this.user.availableBalance).toFixed(2);
 						//this.otherNum_f=this.fee;
-						if(bl){
+						if (bl) {
 							this.wxpay();
-						}else{
-							this.showmodal2=true;
+						} else {
+							this.showmodal2 = true;
 						}
-					}else{
+					} else {
+						
+						
 						this.gotoUrl("pages/index/index");
 					}
 					// uni.showModal({
@@ -612,10 +713,10 @@
 					})
 					return
 				}
-				if( this.listTypeIndex==0){
-					this.showmodel = true;
-				}else{
-					this.confirm(true)
+				if (this.listTypeIndex == 0) {
+					this.showmodel = true;
+				} else {
+					this.confirm(true)
 				}
 
 
@@ -651,44 +752,51 @@
 			display: inline-block;
 			width: 100px;
 		}
-	}
-	.u-tr{
-		.u-td{
-			font-size: 24rpx !important;
-		}
-		
-		
-	}
-	.u-tr1{
-		.u-td{
-			font-size: 28rpx !important;
-		}
-	}
-	.u-td1{
-		text-align: left !important;
-	}
-	.u-tr:nth-child(even){
-		background-color: rgba(245, 245, 245, 1);
-		.u-td{
-			border:rgba(245, 245, 245, 1);
-			background-color: rgba(245, 245, 245, 1);
-		}
-		
 	}
-	.priceListMain{
-		p{
-			font-size: 24rpx;
-		}
-		.showPriceList {
-			margin-left: 20px;
-			margin-right: 20px;
-		
-			span {
-				float: right;
-			}
-		}
+
+	.u-tr {
+		.u-td {
+			font-size: 24rpx !important;
+		}
+
+
+	}
+
+	.u-tr1 {
+		.u-td {
+			font-size: 28rpx !important;
+		}
+	}
+
+	.u-td1 {
+		text-align: left !important;
+	}
+
+	.u-tr:nth-child(even) {
+		background-color: rgba(245, 245, 245, 1);
+
+		.u-td {
+			border: rgba(245, 245, 245, 1);
+			background-color: rgba(245, 245, 245, 1);
+		}
+
 	}
-	
+
+	.priceListMain {
+		p {
+			font-size: 24rpx;
+		}
+
+		.showPriceList {
+			margin-left: 20px;
+			margin-right: 20px;
+
+			span {
+				float: right;
+			}
+		}
+	}
+
 
 	.slot-wrap {
 		display: flex;
@@ -718,6 +826,15 @@
 		.chargeRadio-text {
 			margin-left: 5px;
 		}
+	}
+	.chargeCompany{
+		.chargeRadio {
+			margin-bottom: 20rpx;
+		}
+		.chargeRadio-border{
+			padding-top: 20rpx;
+			    border-top: 1px solid rgb(205, 205, 205);
+		}
 	}
 
 	.chargeTime {
@@ -823,105 +940,112 @@
 		bottom: 0;
 		background-color: #fff;
 	}
-	
-	
-		.recharge {
-			padding: 16px;
-			// padding-bottom: 80px;
-			.title {
-			
+
+	.rechargeSpan{
+		padding: 0 8rpx;
+		 color: rgb(22, 119, 255);;
+	}
+	.recharge {
+		padding: 16px;
+
+		// padding-bottom: 80px;
+		.title {
+
+			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;
+
 				font-size: 16px;
-	position: relative;
-			}
-	
-			p {
-				color: #666;
-				margin-top: 4px;
 			}
-	
-			.self-stop.active {
-	
+
+			.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;
-					
-					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;
+
+		.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-radio {
-			margin-top: 10px;
-	
-			.recharge-radio-item {
-				display: flex;
-				align-items: center;
-			}
-	
-			.recharge-radio-name {
-				margin-left: 8px;
-			}
-		}
-		.subsection-class:after {
-		    content: "";
-		    position: absolute;
-		    left: 10px;
-		   width: 3px;
-		   height: 12px;
-		   // top: 50%;
-		      margin-top: 5px;
-		    background: #3385FF;
-		}
-		.subsection-class{
-			font-size: 16px;
-			 font-weight: bold;
-			
+	}
+
+	.recharge-input {
+		margin-top: 8px;
+		margin-bottom: 32px;
+	}
+
+	.recharge-radio {
+		margin-top: 10px;
+
+		.recharge-radio-item {
+			display: flex;
+			align-items: center;
 		}
-</style>
+
+		.recharge-radio-name {
+			margin-left: 8px;
+		}
+	}
+
+	.subsection-class:after {
+		content: "";
+		position: absolute;
+		left: 10px;
+		width: 3px;
+		height: 12px;
+		// top: 50%;
+		margin-top: 5px;
+		background: #3385FF;
+	}
+
+	.subsection-class {
+		font-size: 16px;
+		font-weight: bold;
+
+	}
+</style>