pco/app/pages/wx/account-pay.vue

<template>
	<view>
		<view class="top-bg"></view>
		<view class="top-box">
			<view class="top">
				<text class="num">{{account.totalMoney}}</text>
				<text class="p">账户余额</text>
			</view>
			<view class="bottom">
				<view class="t">
					<view class="p">账户:</view>
					<view class="num">{{account.accountNo}}</view>
				</view>
			</view>
		</view>
		<view class="item">
			<view class="l" style="margin-top: 15rpx;">
				充值金额:
			</view>
			<view class="r">
				<u-input type="number" style="border: 1rpx solid;margin-left: 8rpx;" placeholder="充值金额"
					v-model="form.money">
				</u-input>
			</view>
		</view>
		<view v-if="money&&money>0" class="pay-money">
			支付金额：<text>{{money}} 元</text>
		</view>
		<view class="btn-box">
			<view class="btn t" @click="chargeFn">立即充值</view>
		</view>
		<view class="discount" v-if="discountList.length>0">
			活动：
			<view v-for="(item,index) in discountList">
				{{index+1}}、充值满{{item.money}}元
				<text v-if="item.discount<10">打{{item.discount}}折</text>
				<text v-if="item.subtract">减{{item.subtract}}元</text>
			</view>
		</view>
	</view>
</template>

<script>
	var jweixin = require('@/components/jweixin-module/index.js');
	export default {
		data() {
			return {
				account: {
					totalMoney: 0,
					lockMoney: 0,
					activeMoney: 0,
					deposit: 0
				},
				form: {
					money: ''
				},
				code: '',
				openid: '',
				discountList: []
			}
		},
		onLoad(options) {
			this.code = options.code;
			this.getOpenidByCode();
		},
		onBackPress() {
			this.$common.to('/pages/index/index');
			return true;
		},
		mounted() {
			this.getAccountInfo();
			this.getDiscountInfo();
			this.getWxConfig();
		},
		computed: {
			money() {
				let chargeMoney = this.form.money;
				if (chargeMoney) {
					let discountList = this.discountList;
					let sub = 999999;
					let obj = null;
					for (let i in discountList) {
						let discount = discountList[i];
						let m = discount.money;
						let diff = chargeMoney - m;
						if (diff < sub && diff >= 0) {
							sub = diff;
							obj = discount;
						}
					}
					if (obj != null) {
						if (obj.type == 1) {
							return (chargeMoney * (obj.discount / 10)).toFixed(2)
						}
						return chargeMoney - obj.subtract
					}
				}
			}
		},
		methods: {
			getWxConfig() {
				let url = window.location.href;
				this.$api.getWxConfig({
					url: url
				}).then(resp => {
					jweixin.config({
						//debug: true,
						appId: resp.data.appId,
						timestamp: resp.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: resp.data.noncestr, // 必填，生成签名的随机串
						signature: resp.data.sign, // 必填，签名
						jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
					});
					jweixin.ready(function() {

					});
					jweixin.error(function(res) {
						console.log(res)
					});
				})
			},
			getOpenidByCode() {
				let storeOpenid = uni.getStorageSync('openid');
				this.$api.getOpenidByCode({
					code: this.code,
					openid: storeOpenid
				}).then(resp => {
					let openid = resp.data;
					this.openid = openid;
					if (openid) {
						uni.setStorageSync('openid', openid)
					}

				})
			},
			getAccountInfo() {
				this.$api.getAccountInfo().then(resp => {
					this.account = resp.data;
				})
			},
			getDiscountInfo() {
				this.$api.getDiscountInfo().then(resp => {
					this.discountList = resp.data;
				})
			},
			chargeFn() {
				let money = this.form.money;
				if (!money) {
					this.$common.toast('请输入充值金额');
				}
				let a = {
					id: this.account.id,
					c: money
				}
				let p = {
					a: JSON.stringify(a),
					money: this.money>0?this.money:money,
					tradeType: "JSAPI",
					openid: this.openid
				}
				p.desc="A1-账户充值";
				this.$api.getPrePay(this.$common.removeNull(p)).then(resp => {
					let data = resp.data;
					let that = this;
					jweixin.chooseWXPay({
						timestamp: data
							.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
						nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
						package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
						signType: data.signType, // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
						paySign: data.paySign, // 支付签名
						success: function(res) {
							if (res.errMsg === "chooseWXPay:ok") {
								that.$common.toast('支付成功')
								that.cars = [];
								that.item.list = [];
								that.total = 0
								// wx.closeWindow();
							}
						}
					});
				})

			}
		}
	}
</script>

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

	.top-bg {
		width: 100%;
		height: 400rpx;
		position: absolute;
		z-index: 0;
		background-image: linear-gradient(0deg, #fff 0%, #0080ff 40%);
	}

	.top-box {
		position: relative;
		z-index: 1;

		.top {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.num {
				color: #fff;
				font-size: 60rpx;
				margin-top: 50rpx;
			}

			.p {
				color: rgba(255, 255, 255, .7);
				margin-top: 10rpx;
			}
		}

		.bottom {
			display: flex;
			background-color: #fff;
			border-radius: 20rpx;
			margin: 40rpx;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.t {
				display: flex;
				width: 100%;
				padding: 40rpx 30rpx;
				box-sizing: border-box;
				border-bottom: 1px solid #eee;

				.p,
				.num {
					font-size: 30rpx;
					color: #191919;
				}

				.num {
					margin-left: 30rpx;
				}
			}

			.b {
				display: flex;
				width: 100%;
				padding-bottom: 60rpx;

			}
		}
	}


	.item {
		display: flex;
		margin-top: 100rpx;
		margin-left: 60rpx;
	}

	.btn-box {
		position: relative;
		z-index: 1;
		display: flex;
		border-radius: 20rpx;
		display: flex;
		margin: 30rpx;
		padding: 30rpx;
		flex-direction: column;

		.btn {
			height: 88rpx;
			width: 70%;
			color: #fff;
			margin: 20rpx auto;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
		}

		.t {
			background-color: #0080ff;
		}

		.b {
			background-color: #ffb400;
		}
	}

	.pay-money {
		margin: 20rpx 0 0 120rpx;
		font-size: 30rpx;

		text {
			color: red;
			font-weight: bold;
		}
	}

	.discount {
		margin: 0 0 0 60rpx;
		font-size: 27rpx;

		view {
			margin-left: 20rpx;
			padding-top: 10rpx;
		}
	}
</style>