公众号跳转浏览器支付宝支付

312 阅读1分钟

1.服务器请求支付宝返回表单

a479cbf38e8b5bb7068d2ec52cafd7e.jpg

2.把服务器返回的form表单通过URL传递到中间页面

注意:通过url传递需要进行编码(url参数过长,并且里面包含特殊字符)

image.png

3.在中间页面拿到form后,插入文档并提交

注意:这里判断环境,只在浏览器环境提交,微信环境是不能进行支付宝支付的

	<view class="min100 bg plr-30 gray-2">
		<img src="../../static/zhishi.png" alt="" class='zhishi'>
		<view class="des flex flex-center">
			请前往手机浏览器完成支付
		</view>
		<view class="mt-200 " v-if="!payStatus">
			<view class="mt-100 flex flex-center bt" @click="toHome">
				我已支付
			</view>
			<view class="mt-100 flex flex-center bt" @click="toOrder">
				支付遇到问题
			</view>
		</view>
		<view class="" v-else>
			支付成功
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				payStatus: 0,
				timer: null,
				count: 0,
				timerOut: false,
				type: ''
			}
		},
		onLoad(option) {
			// #ifdef H5
			let ua = navigator.userAgent.toLowerCase();
			if (ua.match(/MicroMessenger/i) == "micromessenger") {
			} else {
				let data = decodeURI(option.payData) ;
				const div = document.createElement('divform');
				div.innerHTML = data
				document.body.appendChild(div);
				document.forms[0].setAttribute('target', '_self')
				document.forms[0].submit();
			}
			// #endif
			this.id = option.id
			this.type = option.type
			this.timer = setInterval(() => {
				if (this.count > 10) {
					this.clearTimer()
					this.timerOut = true
				} else {
					this.checkOrder()
				}
			}, 3000)
		},
		methods: {
      // 清除定时器
			clearTimer() {
				clearInterval(this.timer)
			},
      // 查询支付状态
			checkOrder() {
				this.$http('api/orders/get_goods_pay_status', {
					order_id: this.id,
					type: this.type
				}).then(res => {
					if (res.status) {
						if (this.timerOut) {
							this.toHome()
						} else {
							this.payStatus = Number(res.status)
							this.count = 0
							this.clearTimer()
							this.toHome()
						}
					} else {
						if (this.timerOut) {
							this.toOrder()
						} else {
							this.count++
						}
					}

				})
			},
			toOrder() {
				uni.redirectTo({
					url: '/pages/my/myOrder'
				})
			},
			toHome() {
				uni.switchTab({
					url: '/pages/home/index'
				})
			}
		},
		destroyed() {
			this.clearTimer()
		}
	}
</script>

<style lang="less" scoped>
	.des {
		color: #fff;
		padding-top: 30rpx;
	}

	.mt-200 {
		margin-top: 200rpx;
	}

	.bt {
		background-color: #EFAA1C;
		border-radius: 20rpx;
		height: 80rpx;
		color: #fff;
		margin: 100rpx;
	}

	.zhishi {
		position: fixed;
		top: 60rpx;
		right: 0;
		width: 240rpx;
		height: 140rpx;
	}
</style>

本文章只提供参考,希望和同学们互相学习,加油!