xingmingyi_applet/pages/user/funManage/recharge.vue

<template>
	<view class="container">
		<view class="box">充值金额</view>
		<view class="list dffs">
			<view class="button_money" @click="selItem(item, index)" v-for="(item, index) in rspData" :key="index" :class="[item.id == money ? 'sel' : '', 'li']">
				<view style="color: #0bb291;">{{ item.money }}元</view>
				<view style="font-size: 26rpx;font-weight: normal;color: #0bb291;">{{ item.bean }}学豆</view>
			</view>
			<!-- <input v-if="active == 5" type="number" placeholder-style="font-size:32rpx" v-model="money" placeholder="请输入自定义金额" /> -->
		</view>
		<view class="cen">
			<view class="cen-title textgrey">支付方式</view>
			<!-- //开启的支付方式 1：微信+支付宝  2：支付宝 3：微信 -->
			<view class="pay-item bb dffs">
				<image class="left-icon" src="/static/img/pro/paywx.png"></image>
				<text class="pay-til">微信</text>
				<image class="right-icon" src="/static/img/pro/paysel.png"></image>
			</view>
		</view>
		<navigator url="/pages/user/funManage/list?type=3" class="mt30 fontmid prosecond">充值记录></navigator>
		<u-button color="#00952E" shape="circle" class="custom-style" @click="submitClickEvent">立即支付</u-button>
	</view>
</template>

<script>
import payPassWord from '@/components/pay-password-keyboard/pay-password-keyboard.vue';
export default {
	components: {
		payPassWord
	},
	data() {
		return {
			cv_bean:0,    //比例
			active: 0,
			total: '',
			payType: 2,
			money: '',
			rspData: [],
			// rspData: ['50', '100', '200', '500', '1000', '自定义'],
			customStyle: {
				background: '#00952E',
				width: '690rpx',
				marginTop: '40rpx'
			}
		};
	},

	onLoad(opt) {
		
		this.getBean(); 
		// this.money=this.rspData[0];  
		// this.loadData();
	},

	methods: {
		// 选中
		selItem(item, index) {
			// if (index != 5) {
			// 	this.active = index;
				this.money = item.id;
			// } else {
			// 	this.active = 5;
			// 	this.money = '';
			// }
		},
		
		//组合充值金额
		moneyArray() {
			var cv_bean = this.cv_bean;
			
			var new_array = [];
			
			var array = ['50', '100', '200', '500', '1000', '自定义'];
			
			array.forEach(function(v,k)
			{
				let item    = {};
				if(v != '自定义')
				{
					item.money  = v + '元';
					item.s_bean = (parseInt(v) * parseInt(cv_bean)) + '学豆';
					
				}else{
					item.money  = v;
					item.s_bean = '';
				}
				
				new_array.push(item);
				
			})
			this.rspData = new_array;
			// console.log('新: ',new_array);
		},
		
		//获取学豆比例配置
		getBean(){
			this.$api
				.request(`index/getRecharge`)
				.then(res => {
					if (res.code == 200) {
						// let cv_bean = res.data.cv_bean || 0;
						// this.cv_bean = cv_bean;
						
						// this.moneyArray();
						this.rspData=res.data;
						this.money = res.data[0].id;
					}
				});
		},

		submitClickEvent() {
			if (!this.money) {
				this.$api.toast('请输入或选择充值金额！');
				return;
			}
			this.$api
				.request(`payment/beanPay`, {
					id: this.money
				})
				.then(res => {
					if (res.code && res.code != 200) {
						// this.$refs.confirmBtn.stop();
						this.$api.toast(res.msg || '获取支付信息失败');
						return;
					}
					console.log(res);
					console.log(res, this.payType);
					const orderInfo = res;
					const { timeStamp, nonceStr, paySign } = orderInfo;
					const payParams = {
						provider: 'wxpay',
						orderInfo: res,
						timeStamp,
						nonceStr,
						package: orderInfo.package,
						signType: 'MD5',
						paySign,
						success: e => {
							this.$api.toast('支付成功');
						},
						fail: err => {
							if (err.errMsg.indexOf('取消') > -1 || err.errMsg.indexOf('cancel') > 1 || err.errMsg.indexOf('-2') > -1) {
								this.$api.toast('取消支付');
							} else {
								this.$api.toast('支付遇到错误，请稍候重试');
								console.log(err);
							}
							console.log(err);
						}
					};
					uni.requestPayment(payParams);
				});
		},
		// async loadData() {
		// 	this.$api.request(`recharge/getConfig`).then(res => {
		// 		if (res.code == '200') {
		// 			let data = res.data;
		// 			this.money = data[0];
		// 			this.rspData = data;
		// 		} else {
		// 			this.$api.toast(res.msg);
		// 			this.rspData = false;
		// 		}
		// 	});
		// }
	}
};
</script>
<style lang="scss">
page {
	background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.container {
	padding: 45rpx 30rpx;
	background-color: #fff;
	
	.button_money{
		display: flex;
		flex-direction:column;
		align-items: center;
		justify-content: center;
	}
	
	.box {
		font-size: 36rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
	}
	.custom-style {
		background: #ed742e;
		width: 690rpx;
		margintop: 600rpx;
		color: #fff;
		margin-top: 40rpx;
	}
	.list {
		padding: 40rpx 0rpx 120rpx;
		flex-wrap: wrap;
		&:nth-of-type(3) {
			margin-right: 0;
		}
		.li {
			width: 218rpx;
			height: 110rpx;
			// line-height: 110rpx;
			background: #ffffff;
			// text-align: center;
			border-radius: 9rpx;
			color: #0bb291;
			font-size: 38rpx;
			font-family: PingFang SC;
			font-weight: bold;
			margin-right: 18rpx;
			margin-bottom: 22rpx;
			border: 1px solid #0bb291;
			&:nth-of-type(3n) {
				margin-right: 0;
			}
		}
		.sel {
			background: rgba(11, 178, 145, 0.1);
			border: 1px solid #0bb291;
		}
		input {
			margin-top: 42rpx;
			width: 690rpx;
			height: 86rpx;
			line-height: 86rpx;
			padding: 0 30rpx;
			border: 1px solid #dfdfdf;
		}
	}
	.cen {
		margin-bottom: 40rpx;
		.pay-item {
			background: #ffffff;
			width: 100%;
			margin-top: 20rpx;
			padding: 30rpx 0;
			.left-icon {
				width: 68rpx;
				height: 68rpx;
			}

			.pay-til {
				font-size: 32rpx;
				color: #333333;
				margin-left: 18rpx;
				flex: 1;
			}

			.right-icon {
				width: 36rpx;
				height: 36rpx;
			}
		}
	}
	.tips {
		width: 100%;
		padding: 26rpx 30rpx;
		text-align: left;
	}
}
</style>