uniapp Alipay WeChat payment function realization

Outline:

The specific implementation logic is as follows:

1. When the page is initialized, onLoadthe incoming wallet (wallet) information is obtained through the method.

2. The user enters the recharge amount, uses watchthe monitoring input value change, and updates the selected recharge amount option. Determine whether the amount is greater than 0, and if it is less than 0, throw an abnormal amount information;

3. The user selects the recharge amount, changeCheckupdates the selected recharge amount through the method, and updates the selected state.

4. The user clicks the Alipay or WeChat payment button, and calls different payment interfaces according to the selected payment method to generate a payment QR code.

5. After the payment QR code is successfully generated, update the value of the QR code to qrArr.val, and display the scan code payment pop-up window.

6. Start the timer to check the payment status regularly. If the payment is successful, it will jump to the recharge success page.

7. When the user closes the QR code payment pop-up window, hide the pop-up window and clear the timer.

8. The methods of querying the payment status are divided into getwxPayStatusand getAlipayStatus, which are respectively used to query the payment status of WeChat payment and Alipay payment.

9. After the payment is successful, a prompt of successful recharge will pop up, and after waiting for 1 second, the cache will be cleared and the login page will be redirected again.

<template>
	<view class="container">
		<view>
			<view class="title">请输入充值金额</view>
			<u-input v-model="money" type="number" placeholder="请输入充值金额"></u-input>
			<view class="tags">
				<view class="tag" v-for="(item,index) in list" :key="index" :class="item.isCheck?'active':''"
					@click="changeCheck(item.value)">{
   
   {item.value}}</view>
			</view>
			<view class="pay">
			  <view @click="payFor(1)">
				<u-icon name="zhifubao-circle-fill" size="28" color="#108ee9"></u-icon>
				<text style="color: #108ee9 ;">支付宝支付</text>
			  </view>
			  <view @click="payFor(2)">
				<u-icon name="weixin-circle-fill" size="28" color="#7bb32e"></u-icon>
				<text style="color: #7bb32e ;">微信支付</text>
			  </view>
			</view>
			<u-modal :show="show" title="扫码支付" @confirm="confirm">
				<view style="text-align: center;">
					<view class="tip">{
   
   {tip}}</view>
					<tki-qrcode v-if="qrArr.val" ref="qrcode" :val="qrArr.val" :size="qrArr.size"
						:loadMake="qrArr.loadMake" />
				</view>
			</u-modal>
		</view>
	</view>
</template>

<script>
	import * as api from '@/request/index.js'
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
	export default {
		components: { tkiQrcode },
		data() {
			return {
				money: 0,
				show: false,
				tip: '',
				list: [{
						value: 50,
						isCheck: false
					}, {
						value: 100,
						isCheck: false
					}, {
						value: 150,
						isCheck: false
					}, {
						value: 200,
						isCheck: false
					}, {
						value: 300,
						isCheck: false
					}, {
						value: 400,
						isCheck: false
					}, {
						value: 500,
						isCheck: false
					}, {
						value: 600,
						isCheck: false
					}, {
						value: 700,
						isCheck: false
					}, {
						value: 800,
						isCheck: false
					}, {
						value: 900,
						isCheck: false
					}, {
						value: 1000,
						isCheck: false
					},
				],
				qrArr: {
					size: 200,
					val: '',
					loadMake: true
				},
				out_trade_no: '',
				timer: null,
				wallet: {},
			}
		},
		onLoad(option) {
			this.wallet = JSON.parse(option.data)
		},
		watch: {
			money(val, value) {
				this.list.forEach(item => {
					if (val == item.value) {
						item.isCheck = true
					} else {
						item.isCheck = false
					}
				})
			}
		},
		methods: {
			changeCheck(value) {
				this.money = value
				this.list.forEach(item => {
					if (item.value == value) {
						item.isCheck = true
					} else {
						item.isCheck = false
					}
				})
			},
			payFor(type) {
				if (this.money < 0.01) {
					uni.showToast({
						icon: 'none',
						title: '请输入金额'
					})
					return false
				}
				// 初始化数据
				this.qrArr.val = ''
				if (this.timer) {  // 清空定时器
					clearInterval(this.timer)
				}
				this.show = true
				this.tip = type == 1 ? '请打开支付宝进行扫码' : '请打开微信扫一扫进行扫码'
				if (type == 1) {
					let params = {
						bz: '充值',
						subject: '充值',
						totalAmount: this.money,
						cardNo: this.wallet.cardNo,
						jobNo: this.wallet.jobNo,
						staffName: this.wallet.staffName,
						cardTypeName: this.wallet.cardTypeName,
						acctBalanceB: this.wallet.acctBalanceB * 100,
						type: 'app'
					};
					api.aliWebPayment(params).then(res => {
						if (res && res.code == 0) {
							this.$nextTick(() => {
								this.qrArr.val = res.data.url
							})
							this.out_trade_no = res.data.out_trade_no
							this.timer = setInterval(() => {
								this.getAlipayStatus()
							}, 1000 * 3)
						}
					})
				} else {
					let params = {
						acctBalanceB: Number(this.wallet.acctBalanceB),
						bz: '充值',
						cardNo: this.wallet.cardNo,
						cardTypeName: this.wallet.cardTypeName,
						jobNo: this.wallet.jobNo,
						staffName: this.wallet.staffName,
						total: this.money,
					};
					api.wxPayNative(params).then(res => {
						if (res.code == 0) {
							this.$nextTick(() => {
								this.qrArr.val = res.data.code_url
							})
							this.out_trade_no = res.data.out_trade_no
							this.timer = setInterval(() => {
								this.getwxPayStatus(this.out_trade_no)
							}, 1000 * 3)
						}
					})
				}
			},
			confirm() {
				this.show = false
				if (this.timer) {
					clearInterval(this.timer)
				}
			},
			// 微信支付状态查询
			getwxPayStatus(out_trade_no) {
				api.getwxPayStatus(out_trade_no, this.wallet.jobNo).then(res => {
					if (res.data.trade_state == 'SUCCESS') {
						this.back()
					}
				})
			},
			// 支付支付状态查询
			getAlipayStatus() {
				api.getAlipayStatus(this.out_trade_no, this.wallet.jobNo).then(res => {
					if (res.data.code == 10000 && res.data.msg == 'Success' && res.data.tradeStatus ==
						'TRADE_SUCCESS') {
						this.back()
					}
				})
			},
			back() {
				uni.showToast({
					icon: 'success',
					title: '充值成功'
				})
				if (this.timer) {
					clearInterval(this.timer)
				}
				setTimeout(() => {
					//同步清理本地数据缓存
					uni.clearStorageSync()
					uni.reLaunch({
						url: '/pages/recharge/login'
					});
				}, 1000)
			}
		},
	}
</script>
<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		.title {
			text-align: center;
			margin-bottom: 20px;
			font-size: 32px;
		}
		>view {
			width: 600px;
			.tags {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				margin-top: 40px;
				.tag {
					width: calc(25% - 20px);
					height: 50px;
					line-height: 50px;
					font-size: 24px;
					text-align: center;
					margin-bottom: 20px;
					border: 1px solid #3c9cff;
					border-radius: 10px;
					color: #3c9cff;
					cursor: pointer;
					&.active {
						background-color: #3c9cff;
						color: #fff;
					}
				}
			}
		}
		.pay {
			display: flex;
			justify-content: space-between;
			font-size: 24px;
			>view {
				display: flex;
				align-items: center;
				line-height: 50px;
				height: 50px;

				text {
					margin-left: 10px;
				}
			}
		}
		.tip {
			font-size: 16px;
			margin-bottom: 20px;
		}
		.qrcode {
			width: 200px;
			height: 200px;
			background-color: red;
		}
	}
</style>

---

Page rendering display: