174 lines
3.9 KiB
Vue
174 lines
3.9 KiB
Vue
<template>
|
||
<view class="container alipay-page">
|
||
<view 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 { ref } from 'vue';
|
||
import { onShow } from '@dcloudio/uni-app';
|
||
import { getPendingAlipayPaymentData } from '@/utils/payment.js';
|
||
|
||
const browserUrl = ref('');
|
||
const qrUrl = ref('');
|
||
const hasRedirected = ref(false);
|
||
|
||
const isInWechat = () => /micromessenger/i.test(navigator.userAgent);
|
||
|
||
const decodePaymentUrl = (value) => {
|
||
if (!value) {
|
||
return '';
|
||
}
|
||
|
||
try {
|
||
const normalized = value.replace(/-/g, '+').replace(/_/g, '/');
|
||
const padding = '='.repeat((4 - normalized.length % 4) % 4);
|
||
return decodeURIComponent(escape(atob(normalized + padding)));
|
||
} catch (e) {
|
||
return '';
|
||
}
|
||
};
|
||
|
||
const getQueryParam = (key) => {
|
||
// #ifdef H5
|
||
const params = new URLSearchParams(window.location.search);
|
||
return params.get(key) || '';
|
||
// #endif
|
||
// #ifndef H5
|
||
return '';
|
||
// #endif
|
||
};
|
||
|
||
const getPayUrlFromQuery = () => {
|
||
return decodePaymentUrl(getQueryParam('pay64'));
|
||
};
|
||
|
||
const getQrUrlFromQuery = () => {
|
||
return decodePaymentUrl(getQueryParam('qr64'));
|
||
};
|
||
|
||
const redirectToAlipayInBrowser = () => {
|
||
// #ifdef H5
|
||
if (hasRedirected.value || isInWechat() || !browserUrl.value) {
|
||
return;
|
||
}
|
||
|
||
hasRedirected.value = true;
|
||
window.location.href = browserUrl.value;
|
||
// #endif
|
||
};
|
||
|
||
const loadPaymentData = () => {
|
||
const data = getPendingAlipayPaymentData();
|
||
browserUrl.value = getPayUrlFromQuery() || data?.copyUrl || data?.qrUrl || '';
|
||
qrUrl.value = getQrUrlFromQuery() || data?.qrUrl || data?.copyUrl || browserUrl.value;
|
||
redirectToAlipayInBrowser();
|
||
};
|
||
|
||
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 {
|
||
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);
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.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);
|
||
}
|
||
|
||
</style>
|