bawangcan-shop/pages/my/recharge.vue

<template>
	<view class="container">
		<view class="top">
			<view class="topTitle">当前余额</view>
			<view class="inputs one">
				¥{{myMoney}}
			</view>
		</view>
		<view class="top">
			<view class="topTitle">充值金额</view>
			<view class="inputs">
				<span style="margin-right: 10rpx;">¥</span><input class="chongzhi" type="number" v-model="money" @input="inputText" placeholder="请输入充值金额" />
			</view>
		</view>
		<view class="bottom">
			<view class="bottomTitle">充值面值</view>
			<view class="miane">
				<view v-for="(item,index) in lists" class="chje" @click="btns(item)"
					:class="onclicks==index?'active':''">充值<span>{{item.money}}</span>元</view>
			</view>
		</view>
		<button class="btnCz" @click="btnCz">立即充值</button>
		<view style="width: 100%;text-align: center;font-size: 26rpx;color: #999999;margin-top: 40rpx;" @tap="goCustom">联系客服</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money: '',
				myMoney:0,
				onclicks: 5,
				lists: [{
						id: 0,
						money: 50
					},
					{
						id: 1,
						money: 100
					},
					{
						id: 2,
						money: 200
					},
					{
						id: 3,
						money: 500
					}
				],
				openWay: 2
			};
		},
		onShow() {
			let userId = this.$queue.getData('userId');
			if(userId){
				this.getUserInfointegral(userId);
			}
		},
		methods: {
			inputText(e){
				this.onclicks = 5;
			},
			goCustom(){
				uni.navigateTo({
					url: '/pages/my/customer'
				});
			},
			//获取用户积分信息
			getUserInfointegral(userId) {
				this.$Request.getT('/goodsMerchant/selectMerchantMoney?userId=' + userId).then(res => {
					if (res.code === 0) {
						let money = res.data.cannotMoney ? res.data.cannotMoney : 0;
						let cashMoney = res.data.mayMoney ? res.data.mayMoney : 0;
						this.myMoney = parseFloat(money) + parseFloat(cashMoney);
						// this.mymoney = res.data.mayMoney ? res.data.mayMoney : 0;
					}
				});
			},
			btns(row) {
				this.money = row.money;
				this.onclicks = row.id
			},
			btnCz() {
				let that = this;
				if (!/^\d+$/.test(this.money)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确金额，纯数字不能包含特殊字符和小数'
					});
					return;
				}
				if (this.money < 1) {
					uni.showToast({
						icon: 'none',
						title: '金额必须大于1元'
					});
					return;
				}
				uni.showLoading({
					title: '支付中...'
				});
				let userId = this.$queue.getData('userId');
				let wxId = this.$queue.getData('wxId');
				// #ifdef MP-WEIXIN
				// 支付

				that.$Request.postT('/apiPay/order/wxPayWx?userId=' + userId + '&wxId=' + wxId + '&money=' + this
					.money).then(res => {

					console.log('支付接口', res)
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.timestamp,
						nonceStr: res.noncestr,
						package: res.package,
						signType: res.signType,
						paySign: res.sign,
						success: function(res) {
							console.log('success:' + JSON.stringify(res));
							uni.showToast({
								title: '支付成功',
								icon: 'success'
							})
							that.getUserInfointegral(userId);
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
							uni.showToast({
								title: '支付失败',
								icon: 'none'
							})
						}
					});

				})
				// #endif
			},
		}
	}
</script>

<style lang='scss'>
	page {
		/* background: #fff; */
	}

	.container {
		padding: 0 4%;

		.top {
			background: #fff;
			margin: 30rpx 0;
			border-radius: 20rpx;
			padding: 20rpx;

			.topTitle {
				font-size: 30rpx;
				line-height: 60rpx;
			}

			.inputs {
				display: flex;
				margin: 10rpx 0;
				font-size: 44rpx;
				color: #333;
				height: 70rpx;
				align-items: center;
				font-weight: bold;
				/* position: relative; */

				.chongzhi {
					width: 80%;
					height: 70rpx;
				}
			}

			.one {
				border-bottom: none;

				.yuan {
					font-size: 28rpx;
				}

				.kyje {
					position: absolute;
					bottom: 0;
					right: 0;
					font-size: 24rpx;
					color: #666;

					.je {
						color: #FF4701;
					}
				}
			}

			.ktxje {
				span {
					color: #FF4701;
				}
			}
		}

		.bottom {
			background: #fff;
			margin: 30rpx 0;
			border-radius: 20rpx;
			padding: 20rpx;

			.bottomTitle {
				font-size: 30rpx;
				line-height: 60rpx;
			}

			.miane {
				width: 100%;
				display: flex;
				justify-content: space-between;
				flex-flow: row wrap;

				.chje {
					border: 1rpx solid #E6E6E6;
					width: 48%;
					line-height: 112rpx;
					margin-top: 30rpx;
					text-align: center;
					border-radius: 8rpx;
				}
			}

		}

		.active {
			border: none;
			background-image: url(https://h5.canmoujiang.com/img/20210714/0202b591649e4d59b35a5341f56fc712.png);
			background-repeat: no-repeat;
			background-size: 100%;

		}

		.btnCz {
			margin-top: 50rpx;
			border-radius: 40rpx;
			border: none;
			background: #FF4701;
			color: #fff;

		}
	}
</style>