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