充电页面

pages/searchPile/chargeProcess/charge.vue

@@ -126,6 +126,7 @@
 			 @click="submit"
 			 >开始充电</view>
 		</view>
+		
 		<!-- <view class="but-box" style="margin-bottom: 20px;">
 			<u-button
 			  style="	background-color: rgba(0, 185, 98, 100);
@@ -135,6 +136,66 @@
 			 
 			 @click="submit" shape="circle">开始充电</u-button>
 		</view> -->
+		
+		
+		<!-- 弹窗 -->
+		<template >
+			<view >
+				<u-popup v-model="show" mode="bottom">
+					<view class="recharge" style="padding-bottom: 0;">
+						<view class="title oldTextjp" oldstyle="font-size:20px">选择充值金额</view>
+						<p>当前余额{{user.balance>0?user.balance.toFixed(2):'0.00'}}元</p>
+						<view class="rechargeMain">
+							
+								<view class="recharge-item">50元</view>
+								<view class="recharge-item">100元</view>
+								<view class="recharge-item">200元</view>
+								<view class="recharge-item">300元</view>
+								<view class="recharge-item">500元</view>
+								<view class="recharge-item">1000元</view>
+								<view class="recharge-item" style="position: relative;">100元
+								<view class="amount" >充100送10</view>
+								</view>
+							
+						</view>
+						<p class="oldTextjp2" oldstyle="font-size:16px">其他充值金额</p>
+					<view  style="margin-bottom: 32px;">
+						
+						<view 
+						
+						:class="otherNum? 'active' : ''"
+						class="recharge-input self-stop" style="height: 100%;width: 100%;margin-bottom: 8px;">
+							<u-input 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" v-if="!show2" style="margin-top: 60px;">
+							<view >
+								<u-checkbox-group>
+									<u-checkbox active-color="green" v-model="checked" shape="circle" @change="checkboxChange()"></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="gotoGz" style="margin-top: 12px;margin-bottom: 16px;">
+								<span>微信充值</span>
+							</u-button>
+						</view>
+					</view>
+				</u-popup>
+				
+			</view>
+		</template>
 	</view>
 </template>
 
@@ -146,9 +207,11 @@
 	export default {
 		data() {
 			return {
+				show2:false,
 				stationId:"",
 				elderMode:false,
 				isback:true,
+				show: true,
 				moneyActiveClass: "-1",
 				detail: {},
 				couponsuse:'',
@@ -186,6 +249,19 @@
 						name: '100'
 					},
 
+				],
+				list: [{
+						id:'0',
+						name: '微信支付',
+						icon: 'wechat-pay-fill',
+						color: '#22ac38',
+					},
+					{
+						id:'1',
+						name: '支付宝支付',
+						icon: 'alipay-fill',
+						color: '#1677ff',
+					},
 				],
 				userCard:null,
 				canUse:false,
@@ -195,7 +271,7 @@
 				listlength:0,
 				vin:true,
 				bannerList:[],
-
+            checked:true,
 			}
 		},
 		computed:{
@@ -562,10 +638,7 @@
 		color: #999999;
 
 	}
-
-	.u-input {
-		text-align: center !important;
-	}
+	
 
 	.recharge {
 		padding: 16px;
@@ -594,17 +667,22 @@ position: relative;
 		.rechargeMain {
 			display: flex;
 			flex-wrap: wrap;
-			justify-content: space-between;
+			// justify-content: space-between;
 			margin-top: 12px;
 			margin-bottom: 20px;
 
 			.recharge-item {
+				.u-input {
+					text-align: center !important;
+				}
 				width: 31%;
 				border: 1px solid #e3e3e3;
 				padding: 15px 0;
 				border-radius: 4px;
 				text-align: center;
 				margin-bottom: 10px;
+				position: relative;
+					margin-left: 5px;
 				@include themeify{
 					font-size: themed('font-size3');
 				}
@@ -825,8 +903,6 @@ position: relative;
 	
 	// 尾部
 	.bottom {
-		background-color: #fff;
-		
 		width: 100%;
 		height: 64px;
 		line-height: 64px;
@@ -878,4 +954,23 @@ position: relative;
 		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;
+	
+	}
+
 </style>