hwnc/pagesA/pages/mypurse/recharge/recharge.vue

<template>
	<view :class="[AppTheme]" id="withdraw">
		<view class="block">
			<view class="zh">充值金额</view>
			<view class="money">
				<u--input placeholder="请输入充值金额" fontSize="25" color="#000000" prefixIcon="rmb" v-model="money"
					border="bottom" prefixIconStyle="font-size: 20px;color: #909399"></u--input>
			</view>
		</view>
		<view class="btn">
			<view class="save bg-linear-gradient" @click="goTransfer">线下汇款</view>
			<view class="save bg-linear-gradient" @click="doSve">在线充值</view>
		</view>
		<payment ref="payment" :channel="3" :alipay="true" :weixinpay="true" :zhtpay="false"></payment>
	</view>
</template>

<script>
	import txApi from '@/api/wall/index.js';
	export default {
		name: 'Recharge',
		data() {
			return {
				primary:this.$theme.primary,
				payType: 1,
				settingFile: getApp().globalData.siteinfo,
				money: 0,
				items: [{
					value: 'BRA',
					name: '微信',
					img: getApp().globalData.siteinfo.root_img + '/static/app/imgs/mine/9.png'
				}],
				current: 0,
				params: {
					// 支付方式
					paytype: 1, //为1是微信支付 2是支付宝支付
					rid: '',
					systype: '', //h5 或 app
					money: 0
				}
			};
		},
		methods: {
			// #ifdef H5
			wxPay(paydata) {
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						'appId': paydata.appId, //公众号id名称，由商户传入
						'timeStamp': paydata.timeStamp, //时间戳     
						'nonceStr': paydata.nonceStr, //随机串     
						'package': paydata.package,
						'signType': paydata.signType, //微信签名方式：     
						'paySign': paydata.paySign //微信签名 
					},
					function(res) {
						if (res.err_msg === 'get_brand_wcpay_request:ok') {
							uni.showToast({
								title: '购买会员成功',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						} else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
							uni.showToast({
								icon: 'none',
								title: '已取消支付'
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: '支付失败'
							})
						}
					})
			},
			// #endif
			goTransfer() {
				uni.navigateTo({
					url: '/pagesA/pages/mypurse/transfer/transfer'
				});
			},
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.target.value) {
						this.current = i;
						break;
					}
				}
			},
			doSve() {
				this.money = parseFloat(this.money);
				if (!this.money) {
					this.$api.msg('请填写金额');
					return;
				} else if (isNaN(this.money) || this.money <= 0) {
					this.$api.msg('请填写正确的充值金额');
					return;
				}
				this.$refs.payment.payopen({
					money: this.money
				});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f2f2f2;
	}

	#withdraw {
		width: 100%;
		background-color: #ffffff;

		.block {
			overflow: hidden;
			border-bottom: 4rpx solid #f2f2f2;

			.zh {
				margin: 30rpx 0 30rpx 36rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.money {
				display: flex;
				font-size: 50rpx;
				font-family: PingFang SC;
				font-weight: bold;
				align-items: center;
				color: #000000;
				padding: 20rpx;

				input {
					margin-left: 5rpx;
					font-size: 52rpx;
					font-family: PingFang SC;
					font-weight: 800;
				}
			}

			.tj {
				font-size: 34rpx;
				width: 147rpx;
				height: 60rpx;
				background: $tab-color;
				text-align: center;
				border-radius: 30px;
				color: #ffffff;
				line-height: 55rpx;
			}
		}

		.tx {
			width: 100%;
			background-color: #ffffff;
			padding-bottom: 35rpx;

			.title {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				margin: 33rpx 0 33rpx 36rpx;
			}

			.flex {
				display: flex;
			}

			.uni-list-cell.uni-list-cell-pd {
				position: relative;
				display: flex;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				margin-bottom: 30rpx;
				align-items: center;

				image {
					width: 46rpx;
					height: 41rpx;
					margin-right: 25rpx;
					margin-left: 37rpx;
				}

				radio {
					position: absolute;
					top: 0;
					right: 20rpx;
				}
			}
		}

		.btn {
			height: 210rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #ffffff;
			border-top: 20rpx solid #f2f2f2;

			.save {
				margin: 0 auto;
				width: 40%;
				height: 80rpx;
				font-size: 30rpx;
				color: #ffffff;
				text-align: center;
				line-height: 80rpx;
				border-radius: 45rpx;
			}
		}
	}
</style>