xusfood_client/center/recharge.vue

<template>
	<view class="">
		<u-navbar
			title="充值中心"
			:placeholder="true"
			:autoBack="true"
			:safeAreaInsetTop="true"
		>
		</u-navbar>
		<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="customize" :class="{active:usecustomize}" >
					<u--input
						prefixIcon="rmb"
						type="number"
					    placeholder="请输入"
					    border="bottom"
					    v-model="customizeVal"
						clearable
						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>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked:false,
				checkboxVal:null,
				customizeVal:null,
				activeIndex:0,
				numItem:[10,30,50,100,200,300],
				payResult:{},
				memberInfo:{},
			}
		},
		onShow() {
			this.getMemberInfo();
		},
		onLoad() {

		},
		computed:{
			usecustomize:function(){
				if(this.customizeVal){
					return true
				}else{
					return false
				}
			}
		},
		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
			},
			submit(){
				// uni.reLaunch({url: '/center/rechargesuccess'})
				// console.log('usecustomize',this.usecustomize);
				if(!this.checkboxVal){
					uni.showToast({
						title:'请先同意充值协议',
						icon:'none'
					})
					return
				}
				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
				// }
				let payParams={
					orderPrice:num,
					isCreditDesc:this.checkboxVal?1:0,
				};
				this.$u.api.addRechargeOrder(payParams).then(res=>{//提交充值订单
					console.log('res',res.data);
					this.gotoPay({orderId:res.data.orderId,openid:this.vuex_wechatOpenid,paymentMode:4});
				}).catch(err=>{
					console.log('charge',err);
				})
			},
			gotoPay(params){//获取支付参数
				console.log('gotoPay',this.params);
				this.$u.api.rechargePay(params).then(res=>{
					this.payResult = res.data.payResult;
					this.wxPay()
				}).catch(err=>{
					console.log('gotoPay',err);
				})				
			},
			wxPay(){
				uni.requestPayment({
					... this.payResult,
				    "provider": "wxpay",
				    success(res) {
						uni.reLaunch({url: '/center/rechargesuccess'})
					},
				    fail(e) {
						console.log('充值失败',e);
					}
				})				
			},
			checkboxChange(e){
				this.checkboxVal = e[0];
			}
		}
	}
</script>
<style>
page{
	background-color: #F5F5F5;
}
</style>
<style lang="scss" scoped>
.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: 30rpx;
	background-color: #fff;
	border-radius: 8rpx;
	.title{
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
		line-height: 45rpx;
		margin-bottom: 20rpx;
	}
	.inner{
		margin-bottom: 40rpx;
		.num-item{
			width: 30%;
			height: 88rpx;
			line-height: 88rpx;
			background-color: #F5F5F5;
			border: 4rpx solid #F5F5F5;
			text-align: center;
			font-size: 30rpx;
			font-weight: 600;
			color: #02AB35;
			margin-bottom: 20rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			&.active{
				border-color: #00A447;
			}
		}
	}
	.full-btn{
		background-color: #00A447;;
	}
}
.customize{
	margin-bottom: 50rpx;
	&.active{
		/deep/ .u-input{
			border-color: #00A447!important;
		}
	}
}

.rule-wrap{
	margin: 40rpx auto;
	font-size: 26rpx;
	line-height: 1.5;
	.link{
		white-space: nowrap;
		color: #00A447;
	}
}
</style>