Realización de la función de pago uniapp Alipay WeChat

Describir:

La lógica de implementación específica es la siguiente:

1. Cuando se inicializa la página, onLoadla información de la billetera entrante se obtiene a través del método.

2. El usuario ingresa el monto de recarga, utiliza watchel cambio de valor de entrada de monitoreo y actualiza la opción de monto de recarga seleccionada. Determine si la cantidad es mayor que 0 y, si es menor que 0, arroje información sobre la cantidad anormal;

3. El usuario selecciona el monto de recarga, changeCheckactualiza el monto de recarga seleccionado a través del método y actualiza el estado seleccionado.

4. El usuario hace clic en el botón de pago Alipay o WeChat y llama a diferentes interfaces de pago según el método de pago seleccionado para generar un código QR de pago.

5. Una vez que el código QR de pago se haya generado correctamente, actualice el valor del código QR a qrArr.valy muestre la ventana emergente de pago del código de escaneo.

6. Inicie el cronómetro para verificar el estado del pago con regularidad. Si el pago se realiza correctamente, saltará a la página de recarga exitosa.

7. Cuando el usuario cierre la ventana emergente de pago con código QR, oculte la ventana emergente y borre el temporizador.

8. Los métodos para consultar el estado del pago se dividen en getwxPayStatusy getAlipayStatus, que se utilizan respectivamente para consultar el estado del pago de WeChat y Alipay.

9. Después de que el pago se haya realizado correctamente, aparecerá un mensaje de recarga exitosa y, después de esperar 1 segundo, se borrará el caché y se redirigirá nuevamente a la página de inicio de sesión.

<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>

---

Visualización de representación de página: