充值页面调整

center/recharge.vue

@@ -1,46 +1,48 @@
 <template>
 	<view class="">
 		<u-navbar
-			title="充值"
+			title="充值中心"
 			:placeholder="true"
 			:autoBack="true"
-			bgColor="#00A447"
-			leftIconColor="#fff"
-			:titleStyle="{color:'#fff'}"
 			:safeAreaInsetTop="true"
 		>
 		</u-navbar>
-		<view class="top-bg"></view>
-		<view class="page-wrap">
+		<view class="balance u-flex u-row-between">
+			<view class="left">个人余额</view>
+			<view class="right number">¥ {{memberInfo.balance}}</view>
+		</view>
+		<view class="">
 			<view class="num-wrap">
-				<view class="title">充值</view>
-				<view class="inner u-flex u-row-around u-flex-wrap">
-					<view class="num-item" 
-						:class="{active:activeIndex == index&&!usecustomize}" 
-						@click="numClick(index)"
-						v-for="(item,index) in numItem" :key="item">
-						¥ {{item}}
-					</view>
-				</view>
+				<view class="title">充值金额</view>
 				<view class="customize" :class="{active:usecustomize}" >
 					<u--input
 						prefixIcon="rmb"
 						type="number"
-					    placeholder="自定义金额(不能低于100元和高于10000元)"
-					    border="surround"
+					    placeholder="请输入"
+					    border="bottom"
 					    v-model="customizeVal"
 						clearable
-						fontSize="28rpx"
-						:customStyle="{height:'100rpx'}"
+						fontSize="36rpx"
+						:customStyle="{height:'50rpx'}"
 					></u--input>
 				</view>
+				<view class="title">其他充值金额</view>
+				<view class="inner u-flex u-row-around u-flex-wrap">
+					<view class="num-item" 
+						:class="{active:activeIndex == index&&!usecustomize}" 
+						@click="numClick(index)"
+						v-for="(item,index) in numItem" :key="item">
+						{{item}} 元
+					</view>
+				</view>
+				
 				<view class="rule-wrap u-flex u-flex-wrap">
 					<u-checkbox-group v-model="checked" @change="checkboxChange" placement="row">
 						<u-checkbox activeColor="#00A447" name="同意" labelSize="26rpx" label="点击确认充值，即表示您已经同意"></u-checkbox>
 					</u-checkbox-group>
 					<text class="link" @click="$u.route('/credits/regulation',{regulationName:'充值协议'})">《充值协议》</text>
 				</view>
-				<view class="full-btn" @click="submit">充 值</view>
+				<view class="full-btn" @click="submit">立即充值</view>
 			</view>
 		</view>
 	</view>
@@ -54,12 +56,13 @@
 				checkboxVal:null,
 				customizeVal:null,
 				activeIndex:0,
-				numItem:[3000,5000,10000],
+				numItem:[10,30,50,100,200,300],
 				payResult:{},
+				memberInfo:{},
 			}
 		},
 		onShow() {
-			
+			this.getMemberInfo();
 		},
 		onLoad() {
 
@@ -74,6 +77,16 @@
 			}
 		},
 		methods: {
+			getMemberInfo(){
+				this.$u.api.memberInfo({id:this.vuex_member_info.id}).then(res=>{
+					this.memberInfo = res.data;
+					this.avatar =  res.data.avatar;
+					this.$u.vuex('vuex_member_info', res.data);
+					// console.log('memberInfo',this.memberInfo);
+					}).catch(err=>{
+					console.log('memberInfo',err.data);
+				})
+			},
 			numClick(index){
 				this.customizeVal = '';
 				this.activeIndex = index
@@ -90,15 +103,15 @@
 				}
 				let num = Number(this.usecustomize?this.customizeVal:this.numItem[this.activeIndex]);
 				console.log('num',num);
-				const env = uni.getAccountInfoSync().miniProgram.envVersion;
-				if((!num||num<100||num>10000)&&env!='develop'){
-					this.customizeVal = null;
-					uni.showToast({
-						title:'请正确输入金额',
-						icon:'error'
-					})
-					return
-				}
+				// const env = uni.getAccountInfoSync().miniProgram.envVersion;
+				// if((!num||num<100||num>10000)&&env!='develop'){
+				// 	this.customizeVal = null;
+				// 	uni.showToast({
+				// 		title:'请正确输入金额',
+				// 		icon:'error'
+				// 	})
+				// 	return
+				// }
 				let payParams={
 					orderPrice:num,
 					isCreditDesc:this.checkboxVal?1:0,
@@ -143,65 +156,62 @@ page{
 }
 </style>
 <style lang="scss" scoped>
-.top-bg{
-	width: 100%;
-	height: 450rpx;
-	background-color: #00A447;
-	border-radius: 0 0 20% 20%;
-	position: absolute;
-	top: 0;
-	left: 0;
-	z-index:-1;
+.balance{
+	height: 180rpx;
+	background: #00A447;
+	border-radius: 8rpx;
+	margin-bottom: 20rpx;
+	padding: 0 30rpx;
+	font-size: 30rpx;
+	font-weight: 400;
+	color: #FFFFFF;
+	.number{
+		font-size: 54rpx;
+		font-weight: 600;
+		font-family: PingFangSC-Semibold, PingFang SC;
+	}
 }
 .num-wrap{
-	padding: 20rpx;
+	padding: 30rpx;
 	background-color: #fff;
 	border-radius: 8rpx;
 	.title{
 		font-size: 32rpx;
-		font-weight: 600;
+		font-weight: 400;
+		color: #333333;
+		line-height: 45rpx;
 		margin-bottom: 20rpx;
 	}
 	.inner{
 		margin-bottom: 40rpx;
 		.num-item{
 			width: 30%;
-			height: 260rpx;
-			line-height: 260rpx;
-			background-color: #EBF8F1;
-			border: 4rpx solid #EBF8F1;
+			height: 88rpx;
+			line-height: 88rpx;
+			background-color: #F5F5F5;
+			border: 4rpx solid #F5F5F5;
 			text-align: center;
-			font-size: 36rpx;
+			font-size: 30rpx;
 			font-weight: 600;
-			color: #333333;
+			color: #02AB35;
+			margin-bottom: 20rpx;
+			font-family: PingFangSC-Semibold, PingFang SC;
 			&.active{
 				border-color: #00A447;
 			}
 		}
 	}
 	.full-btn{
-		background-color: #FFB600;;
+		background-color: #00A447;;
 	}
 }
 .customize{
+	margin-bottom: 50rpx;
 	&.active{
 		/deep/ .u-input{
 			border-color: #00A447!important;
 		}
 	}
-	// /deep/ .u-input{
-	// 	background-color: #bababa;
-	// 	border-color: #bababa;
-	// 	input{
-	// 		color: #fff!important;
-	// 		height: 70rpx;
-	// 		font-size: 50rpx!important;
-	// 		text-align: center!important;
-	// 		&::-webkit-input-placeholder{
-	// 			color: red!important;
-	// 		}
-	// 	}
-	// }
 }
 
 .rule-wrap{