fix: pay

2026-06-26 16:33:33 +08:00
parent 4dc86889c5
commit 59e4e1203e
4 changed files with 237 additions and 16 deletions
--- a/pages.json
+++ b/pages.json
@@ -75,6 +75,12 @@
 				"navigationBarTitleText": "我的钱包"
 			}
 		},
+		{
+			"path": "pages/alipay-payment/alipay-payment",
+			"style": {
+				"navigationBarTitleText": "支付宝支付"
+			}
+		},
 		{
 			"path": "pages/error/error",
 			"style": {
@@ -89,4 +95,4 @@
 		"backgroundColor": "#F8F8F8"
 	},
 	"uniIdRouter": {}
-}
+}
--- a/pages/alipay-payment/alipay-payment.vue
+++ b/pages/alipay-payment/alipay-payment.vue
@@ -0,0 +1,155 @@
+<template>
+	<view class="container alipay-page">
+		<view v-if="!hasPaymentUrl" class="empty-card">
+			<view class="empty-title">支付链接已失效</view>
+			<view class="empty-desc">请返回后重新发起支付宝支付</view>
+			<up-button class="primary-button" type="primary" @tap="goBack">返回</up-button>
+		</view>
+
+		<view v-else class="pay-content">
+			<view class="method-card">
+				<view class="method-header">
+					<view class="method-index">方式一</view>
+					<view class="method-title">浏览器链接支付宝支付</view>
+				</view>
+				<view class="browser-tip">点击右上角三个点，使用浏览器打开</view>
+				<image class="tips-image" src="/static/tips.png" mode="widthFix"></image>
+			</view>
+
+			<view class="method-card">
+				<view class="method-header">
+					<view class="method-index">方式二</view>
+					<view class="method-title">支付宝扫码支付</view>
+				</view>
+				<view class="qr-wrap">
+					<u-qrcode v-if="qrUrl" :val="qrUrl" :size="220" unit="px" :show-loading="false"></u-qrcode>
+				</view>
+				<view class="qr-desc">截图保存二维码，打开支付宝扫一扫即可支付</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import { computed, ref } from 'vue';
+	import { onShow } from '@dcloudio/uni-app';
+	import { getPendingAlipayPaymentData } from '@/utils/payment.js';
+
+	const browserUrl = ref('');
+	const qrUrl = ref('');
+
+	const hasPaymentUrl = computed(() => !!browserUrl.value || !!qrUrl.value);
+
+	const loadPaymentData = () => {
+		const data = getPendingAlipayPaymentData();
+		browserUrl.value = data?.copyUrl || data?.qrUrl || '';
+		qrUrl.value = data?.qrUrl || data?.copyUrl || '';
+	};
+
+	const goBack = () => {
+		uni.navigateBack();
+	};
+
+	onShow(() => {
+		loadPaymentData();
+	});
+</script>
+
+<style lang="scss" scoped>
+	.alipay-page {
+		min-height: 100vh;
+		box-sizing: border-box;
+		padding: 28rpx 24rpx 48rpx;
+		background: linear-gradient(180deg, #eaf4ff 0%, var(--bg-secondary) 42%);
+	}
+
+	.pay-content {
+		display: flex;
+		flex-direction: column;
+		gap: 24rpx;
+	}
+
+	.method-card,
+	.empty-card {
+		background: var(--bg-primary);
+		border-radius: 28rpx;
+		padding: 32rpx;
+		box-shadow: 0 16rpx 40rpx rgba(10, 132, 255, 0.08);
+		border: 1rpx solid rgba(10, 132, 255, 0.08);
+	}
+
+	.empty-desc,
+	.qr-desc {
+		margin-top: 14rpx;
+		font-size: 26rpx;
+		line-height: 1.55;
+		color: var(--text-tertiary);
+	}
+
+	.method-header {
+		display: flex;
+		align-items: center;
+		gap: 16rpx;
+		margin-bottom: 28rpx;
+	}
+
+	.method-index {
+		padding: 8rpx 14rpx;
+		border-radius: 12rpx;
+		background: var(--primary);
+		color: var(--text-inverse);
+		font-size: 22rpx;
+		font-weight: 700;
+	}
+
+	.method-title {
+		font-size: 30rpx;
+		font-weight: 700;
+		color: var(--text-primary);
+	}
+
+	.browser-tip {
+		padding: 22rpx 24rpx;
+		border-radius: 18rpx;
+		background: rgba(10, 132, 255, 0.08);
+		color: var(--primary);
+		font-size: 28rpx;
+		font-weight: 600;
+		line-height: 1.45;
+		text-align: center;
+	}
+
+	.primary-button {
+		width: 100%;
+		margin-top: 18rpx;
+	}
+
+	.tips-image {
+		display: block;
+		width: 100%;
+		margin-top: 28rpx;
+		border-radius: 18rpx;
+		background: var(--gray-100);
+	}
+
+	.qr-wrap {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 28rpx;
+		border-radius: 24rpx;
+		background: #fff;
+		border: 1rpx dashed rgba(10, 132, 255, 0.24);
+	}
+
+	.empty-card {
+		margin-top: 160rpx;
+		text-align: center;
+	}
+
+	.empty-title {
+		font-size: 34rpx;
+		font-weight: 700;
+		color: var(--text-primary);
+	}
+</style>
--- a/static/tips.png
+++ b/static/tips.png
--- a/utils/payment.js
+++ b/utils/payment.js
@@ -1,4 +1,5 @@
 const ALIPAY_PENDING_REFRESH_KEY = 'pending_alipay_payment_refresh';
+const ALIPAY_PAYMENT_DATA_KEY = 'pending_alipay_payment_data';

 export const PAYMENT_REFRESH_TARGETS = {
 	PACKAGE_ORDER: 'package-order',
@@ -13,8 +14,22 @@ export function isValidWechatPayConfig(payConfig) {
 }

 export function getAlipayPaymentUrl(paymentLink) {
-	if (!paymentLink) return '';
-	return paymentLink.copy_link || paymentLink.qr_link || '';
+	return getAlipayPaymentUrls(paymentLink).copyUrl;
+}
+
+export function getAlipayPaymentUrls(paymentLink) {
+	if (!paymentLink) {
+		return { copyUrl: '', qrUrl: '' };
+	}
+
+	if (typeof paymentLink === 'string') {
+		return { copyUrl: paymentLink, qrUrl: paymentLink };
+	}
+
+	return {
+		copyUrl: paymentLink.copy_link || paymentLink.qr_link || '',
+		qrUrl: paymentLink.qr_link || paymentLink.copy_link || ''
+	};
 }

 export function isValidAlipayPaymentLink(paymentLink) {
@@ -39,28 +54,73 @@ export function consumePendingPaymentRefresh(target) {
 	return true;
 }

+export function getPendingAlipayPaymentData() {
+	return uni.getStorageSync(ALIPAY_PAYMENT_DATA_KEY) || null;
+}
+
+function getAlipayPaymentPageUrl(refreshTarget) {
+	const params = [`t=${Date.now()}`];
+	if (refreshTarget) {
+		params.push(`from=${encodeURIComponent(refreshTarget)}`);
+	}
+
+	return `/pages/alipay-payment/alipay-payment?${params.join('&')}`;
+}
+
+function getAlipayPaymentBrowserUrl(pageUrl) {
+	if (typeof window === 'undefined' || !window.location) {
+		return pageUrl;
+	}
+
+	const { origin, pathname } = window.location;
+	const pagePath = pageUrl.replace(/^\//, '');
+	const basePath = pathname.includes('/pages/')
+		? pathname.slice(0, pathname.indexOf('/pages/'))
+		: pathname.replace(/\/[^/]*$/, '');
+
+	return `${origin}${basePath}/${pagePath}`;
+}
+
+function navigateToAlipayPaymentPage(pageUrl, resolve, reject) {
+	uni.navigateTo({
+		url: pageUrl,
+		success: () => resolve({ redirecting: true }),
+		fail: () => {
+			uni.redirectTo({
+				url: pageUrl,
+				success: () => resolve({ redirecting: true }),
+				fail: () => {
+					if (typeof window !== 'undefined' && window.location) {
+						window.location.href = getAlipayPaymentBrowserUrl(pageUrl);
+						resolve({ redirecting: true });
+						return;
+					}
+
+					reject(new Error('\u6253\u5f00\u652f\u4ed8\u5b9d\u652f\u4ed8\u9875\u5931\u8d25'));
+				}
+			});
+		}
+	});
+}
+
 export function openAlipayPayment(paymentLink, refreshTarget) {
 	return new Promise((resolve, reject) => {
-		const paymentUrl = getAlipayPaymentUrl(paymentLink);
+		const { copyUrl, qrUrl } = getAlipayPaymentUrls(paymentLink);

-		if (!paymentUrl) {
+		if (!copyUrl && !qrUrl) {
 			reject(new Error('\u652f\u4ed8\u94fe\u63a5\u65e0\u6548'));
 			return;
 		}

 		markPendingPaymentRefresh(refreshTarget);
-
-		if (typeof window !== 'undefined' && window.location) {
-			window.location.href = paymentUrl;
-			resolve({ redirecting: true });
-			return;
-		}
-
-		uni.setClipboardData({
-			data: paymentUrl,
-			success: () => resolve({ copied: true }),
-			fail: () => reject(new Error('\u5f53\u524d\u73af\u5883\u6682\u4e0d\u652f\u6301\u6253\u5f00\u652f\u4ed8\u94fe\u63a5'))
+		uni.setStorageSync(ALIPAY_PAYMENT_DATA_KEY, {
+			copyUrl,
+			qrUrl,
+			refreshTarget,
+			timestamp: Date.now()
 		});
+
+		navigateToAlipayPaymentPage(getAlipayPaymentPageUrl(refreshTarget), resolve, reject);
 	});
 }