156 lines
3.4 KiB
Vue
156 lines
3.4 KiB
Vue
<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>
|