lipin/pages/users/recharge/index.vue

<template>
	<view>
		<view class="payment-top acea-row row-column row-center-wrapper">
			<span class="name">我的余额</span>
			<view class="pic">
				￥<span class="pic-font">{{ user.money || 0 }}</span>
			</view>
		</view>
		<view class="payment">
			<view class="nav acea-row row-around row-middle">
				<view class="item">充值账户：{{ user.mobile }}</view>
			</view>
			<view class='tip picList'>
				<view class="pic-box pic-box-color acea-row row-center-wrapper row-column" :class="activePic == index ? 'pic-box-color-active' : ''"
				 v-for="(item, index) in picList" :key="index" @click="picCharge(index, item)">
					<view class="pic-number-pic">
						{{ item.name }}<span class="pic-number"></span>
					</view>
					<view class="pic-number">{{ item.upname }}</view>
				</view>
				<view class="pic-box pic-box-color acea-row row-center-wrapper" :class="activePic == picList.length ? 'pic-box-color-active' : ''"
				 @click="picCharge(picList.length)">
					<input type="number" placeholder="其他" v-model="money" class="pic-box-money pic-number-pic" :class="activePic == picList.length ? 'pic-box-color-active' : ''" />
				</view>
				<view class="tips-box">
					<view>支付方式：<text class="iconfont icon-weixinzhifu"></text>微信付款</view>
					<view>用户协议：
						<checkbox checked="true"></checkbox>
						接受<navigator hover-class="none" url="/pages/users/recharge/xieyi">《充值协议》</navigator>
					</view>
				</view>		
			</view>
			<button class='btn' @click="recharge">立即充值</button>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		getUserInfo,
		rechargeInit,
		wxRecharge
	} from '@/api/api.js';
	export default {
		data() {
			return {
				user: {},
				picList: [],
				activePic: 0,
				money: '',
				rechar_id: '',
				numberPic: '',
				code: ''
			}
		},
		computed: mapGetters(['isLogin']),
		onLoad(options) {			
		    if (this.isLogin) {
				getUserInfo().then(res => {
					this.user = res.data;
					if(this.$wechat.isWeixin() && !this.user.openid){
						if(options.code){
							this.code = options.code;
						}else{
							var appID = "wxa9130b2090dfb130"; // 公众号AppID
							var redirect_uri = "https://www.babalipin.com/h5/pages/users/recharge/index"; // 授权接口地址
							var url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appID + "&redirect_uri=" + redirect_uri + "&response_type=code&scope=snsapi_base&state=1#wechat_redirect";
							window.location.href = url;
						}
					}
				});
				this.getRecharge();
		    }else{
				toLogin();
			}
		},
		methods: {
			getRecharge: function() {
				rechargeInit().then(res => {
					this.picList = res.data;
					if (this.picList[0]) {
						this.rechar_id = this.picList[0].name;
						this.numberPic = this.picList[0].v;
					}
				});
			},
			//选择金额
			picCharge(idx, item) {
				this.activePic = idx;
				if (item === undefined) {
					this.rechar_id = "";
					this.numberPic = "";
				} else {
					this.money = "";
					this.rechar_id = item.name;
					this.numberPic = item.v;
				}
			},
			recharge: function() {
				let that = this;
				uni.showLoading({
					title: '正在支付',
				})
				let money = parseFloat(that.money);
				if( that.rechar_id == ''){
					if(Number.isNaN(money)){
						return that.$util.Tips({title: '充值金额必须为数字'});
					}
					if(money <= 0){
						return that.$util.Tips({title: '充值金额不能为0'});
					}
				}else{
					money = that.numberPic
				}
				wxRecharge({
					money: money,
					from: that.$wechat.isWeixin() ? 'weixin' : 'h5',
					code: that.code
				}).then(res => {
					if (res.data.result === undefined) return that.$util.Tips({
						title: '缺少支付参数'
					});
					if (res.data.type == "WECHAT_H5_PAY") {
						location.replace(res.data.result.mweb_url+'&redirect_url=https%3A%2F%2Fbabalipin.com%2Fh5%2Fpages%2Fmy%2Findex');
					} else {
						let response = res.data.result;
						if (typeof WeixinJSBridge == "undefined") {
							if (document.addEventListener) {
								document.addEventListener('WeixinJSBridgeReady', that.onBridgeReady(response), false);
							} else if (document.attachEvent) {
								document.attachEvent('WeixinJSBridgeReady', that.onBridgeReady(response));
								document.attachEvent('onWeixinJSBridgeReady', that.onBridgeReady(response));
							}
						} else {
							that.onBridgeReady(response);
						}
					}
				}).catch(err => {
					uni.hideLoading();
					return that.$util.Tips({
						title: err
					})
				});
			},
			onBridgeReady: function(response) {
				let that = this;
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId": response.appId, //公众号名称，由商户传入
						"timeStamp": response.timeStamp, //时间戳，自1970年以来的秒数
						"nonceStr": response.nonceStr, //随机串
						"package": response.package,
						"signType": response.signType, //微信签名方式
						"paySign": response.paySign //微信签名
					},
					function(res){
						WeixinJSBridge.log(res.err_msg);
						if (res.err_msg == "get_brand_wcpay_request:cancel") {
							uni.hideLoading();
							return that.$util.Tips({
								title: '支付失败'
							}, {
								tab: 1,
								url: '/pages/my/index'
							});							
						} else {
							uni.hideLoading();
							return that.$util.Tips({
								title: '支付成功',
								icon: 'success'
							}, {
								tab: 4,
								url: '/pages/my/index'
							});
						}						
					}
				);
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
	
	.payment {
		position: relative;
		top: -60rpx;
		width: 100%;
		background-color: #fff;
		border-radius: 10rpx;
		padding-top: 25rpx;
		border-top-right-radius: 39rpx;
		border-top-left-radius: 39rpx;
	}
	
	.payment .nav {
		height: 75rpx;
		line-height: 75rpx;
		padding: 0 100rpx;
	}
	
	.payment .nav .item {
		font-size: 30rpx;
		color: #333;
	}
	
	.payment .nav .item.on {
		font-weight: bold;
		border-bottom: 4rpx solid #e83323;
	}
	
	.payment .input {
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1px dashed #dddddd;
		margin: 60rpx auto 0 auto;
		padding-bottom: 20rpx;
		font-size: 56rpx;
		color: #333333;
		flex-wrap: nowrap;
		
	}
	
	.payment .input text {
		padding-left: 106rpx;
	}
	
	.payment .input input {
		padding-right: 106rpx;
		width: 300rpx;
		height: 94rpx;
		text-align: center;
		font-size: 70rpx;
	}
	
	.payment .placeholder {
		color: #d0d0d0;
		height: 100%;
		line-height: 94rpx;
	}
	
	.payment .tip {
		font-size: 26rpx;
		color: #888888;
		padding: 0 30rpx;
		margin-top: 25rpx;
	}
	
	.payment .btn {
		color: #fff;
		background: #ff5c00;
		font-size: 30rpx;
		width: 700rpx;
		height: 86rpx;
		border-radius: 50rpx;
		margin: 46rpx auto 0 auto;
		line-height: 86rpx;
	}
	
	.payment-top {
		width: 100%;
		height: 350rpx;
		background-color: #ff5c00;
	
		.name {
			font-size: 26rpx;
			color: rgba(255, 255, 255, 0.8);
			margin-top: -38rpx;
			margin-bottom: 30rpx;
		}
	
		.pic {
			font-size: 32rpx;
			color: #fff;
		}
	
		.pic-font {
			font-size: 78rpx;
			color: #fff;
		}
	}
	
	.picList {
		display: flex;
		flex-wrap: wrap;
		margin: 30rpx 0;
	
		.pic-box {
			width: 32%;
			height: auto;
			border-radius: 20rpx;
			margin-top: 21rpx;
			padding: 20rpx 0;
			margin-right: 12rpx;
	
			&:nth-child(3n) {
				margin-right: 0;
			}
		}
	
		.pic-box-color {
			background-color: #f4f4f4;
			color: #656565;
		}
	
		.pic-number {
			font-size: 22rpx;
		}
	
		.pic-number-pic {
			font-size: 38rpx;
			margin-right: 10rpx;
			text-align: center;
		}
	
		.pic-box-color-active {
			background-color: #ff5c00 !important;
			color: #fff !important;
		}
	}
	.tips-box{
		margin-top: 70rpx;
		view{
			font-size: 28rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			.iconfont{
				color:#09bb07;
				font-size: 45rpx;
				margin-right: 10rpx;
			}
			checkbox{
				border-radius: 0;
			}
			navigator{
				text-decoration: underline;
			}
		}	
	}
	.tips-title{
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #333;
	}
</style>