xusfood_client/center/recharge.vue

<template>
	<view class="">
		<u-navbar
			title="充值"
			:autoBack="true"
			bgColor="#00A447"
			leftIconColor="#fff"
			:titleStyle="{color:'#fff'}"
			:safeAreaInsetTop="true"
		>
		</u-navbar>
		<view class="top-bg"></view>
		<view class="page-wrap">
			<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="customize" :class="{active:usecustomize}" >
					<u--input
						prefixIcon="rmb"
						type="number"
					    placeholder="自定义金额(不能低于100元和高于10000元)"
					    border="surround"
					    v-model="customizeVal"
						clearable
					></u--input>
				</view>
				<view class="rule-wrap u-flex">
					<u-checkbox-group v-model="checked" @change="checkboxChange" placement="row">
						<u-checkbox activeColor="#00A447" name="同意" 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:[3000,5000,10000],
				payResult:{},
			}
		},
		onShow() {
			
		},
		onLoad() {

		},
		computed:{
			usecustomize:function(){
				if(this.customizeVal){
					return true
				}else{
					return false
				}
			}
		},
		methods: {
			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>
.top-bg{
	width: 100%;
	height: 450rpx;
	background-color: #00A447;
	border-radius: 0 0 20% 20%;
	position: absolute;
	top: 0;
	left: 0;
	z-index:-1;
}
.num-wrap{
	padding: 20rpx;
	background-color: #fff;
	border-radius: 8rpx;
	.title{
		font-size: 32rpx;
		font-weight: 600;
		margin-bottom: 20rpx;
	}
	.inner{
		margin-bottom: 40rpx;
		.num-item{
			width: 30%;
			height: 260rpx;
			line-height: 260rpx;
			background-color: #EBF8F1;
			border: 4rpx solid #EBF8F1;
			text-align: center;
			font-size: 36rpx;
			font-weight: 600;
			color: #333333;
			&.active{
				border-color: #00A447;
			}
		}
	}
	.full-btn{
		background-color: #FFB600;;
	}
}
.customize{
	&.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{
	margin: 40rpx auto;
	.link{
		color: #00A447;
	}
}
</style>