request-payment.uvue

<template>
	<page-head title="发起支付"></page-head>

	<template v-if="providerList.length > 0">
		<button style="margin-top: 20px;" type="primary" v-for="(item,index) in providerList" :key="index"
			@click="requestPayment(item)">{{item.name}}支付</button>
	</template>
</template>

<script>
	export type PayItem = { id : string, name : string, provider ?: UniProvider }
	export default {
		data() {
			return {
				btnText: "支付宝支付",
				btnType: "primary",
				orderInfo: "",
				errorCode: 0,
				errorMsg: "",
				complete: false,
				providerList: [] as PayItem[]
			}
		},
		onLoad: function () {
			uni.getProvider({
				service: "payment",
				success: (e) => {
					console.log("payment success:" + JSON.stringify(e));
					let array = e.provider as string[]
					array.forEach((value : string) => {
						switch (value) {
							case 'alipay':
								this.providerList.push({
									name: '支付宝',
									id: "alipay",
									provider: e.providers.find((item) : boolean => {
										return item.id == 'alipay'
									})
								} as PayItem);
								break;
							case 'wxpay':
								this.providerList.push({
									name: '微信',
									id: "wxpay",
									provider: e.providers.find((item) : boolean => {
										return item.id == 'wxpay'
									})
								} as PayItem);
								break;
							default:
								break;
						}
					})
				},
				fail: (e) => {
					console.log("获取支付通道失败：", e);
				}
			});
		},
		methods: {
			requestPayment(e : PayItem) {
				const provider = e.id
				if (provider == "alipay") {
					this.payAli()
				} else if (provider == "wxpay") {

					if (e.provider != null && e.provider?.isAppExist==false) {
						uni.showToast({
							title: "微信没有安装",
							icon:'error'
						})
					} else {
						this.payWX()
					}

				}
			},
			payAli() {
				uni.showLoading({
					title: "请求中..."
				})
				uni.request({
					url: 'https://demo.dcloud.net.cn/payment/alipay/?total=0.01',
					method: 'GET',
					timeout: 6000,
					success: (res) => {
						this.orderInfo = JSON.stringify(res.data);
						console.log("====" + this.orderInfo)
						uni.hideLoading()
						uni.requestPayment({
							provider: "alipay",
							orderInfo: res.data as string,
							fail: (res) => {
								console.log(JSON.stringify(res))
								this.errorCode = res.errCode
								uni.showToast({
									icon: 'error',
									title: 'errorCode:' + this.errorCode
								});
							},
							success: (res) => {
								console.log(JSON.stringify(res))
								uni.showToast({
									icon: 'success',
									title: '支付成功'
								});
							}
						})
					},
					fail: (e) => {
						console.log(e)
						uni.hideLoading()
					},
				});
			},
			payWX() {
				uni.showLoading({
					title: "请求中..."
				})
				let url = 'https://demo.dcloud.net.cn/payment/wxpayv3.__UNI__uniappx/?total=0.01'
				const res = uni.getAppBaseInfo();
				let packageName:string | null = ''

				// #ifdef APP-ANDROID
				packageName = res.packageName
				// #endif

				// #ifdef APP-IOS
				packageName = res.bundleId
				// #endif

				if (packageName == 'io.dcloud.hellouniappx') {//hello uniappx
				  url = 'https://demo.dcloud.net.cn/payment/wxpayv3.__UNI__HelloUniAppX/?total=0.01'
				}
				uni.request({
					url: url,
					method: 'GET',
					timeout: 6000,
					header: {
						"Content-Type": "application/json"
					} as UTSJSONObject,
					success: (res) => {
						console.log(res.data)
						uni.hideLoading()
						uni.requestPayment({
							provider: "wxpay",
							orderInfo: JSON.stringify(res.data),
							fail: (res) => {
								console.log(JSON.stringify(res))
								this.errorCode = res.errCode
								uni.showToast({
									duration: 5000,
									icon: 'error',
									title: 'errorCode:' + this.errorCode,
								});
							},
							success: (res) => {
								console.log(JSON.stringify(res))
								uni.showToast({
									duration: 5000,
									icon: 'success',
									title: '支付成功'
								});
							}
						})
					},
					fail: (res) => {
						uni.hideLoading()
						console.log(res)
					},
				});
			},

			//自动化测试使用
			jest_pay() {
				uni.requestPayment({
					provider: "alipay",
					orderInfo: this.orderInfo,
					fail: (res : RequestPaymentFail) => {
						this.errorCode = res.errCode
						this.complete = true
					},
					success: (res : RequestPaymentSuccess) => {
						console.log(JSON.stringify(res))
						this.complete = true
					}
				} as RequestPaymentOptions)
			}
		}
	}
</script>

<style>

</style>