blandarebiter/AIGC
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化: Safari下载兼容、禁用生产Swagger、前端构建优化移除console、更新COS配置

Browse Source
This commit is contained in:
AIGC Developer
2026-01-05 15:40:28 +08:00
parent 38630dbb66
commit a99cfa28e5
40 changed files with 2550 additions and 1320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
demo/frontend/src/components/PaymentModal.vue
View File

@@ -23,7 +23,7 @@
<div class="method-icon alipay-icon">
<el-icon><CreditCard /></el-icon>
</div>
<span>Alipay扫码支付</span>
<span>支付宝支付</span>
</div>
<div
class="payment-method"
@@ -43,24 +43,25 @@
<div class="amount-value">${{ amount }}</div>
</div>
<!-- 支付宝二维码区域 -->
<div v-if="selectedMethod === 'alipay'" class="qr-section">
<div class="qr-code">
<img v-if="showQrCode && qrCodeUrl" :src="qrCodeUrl" style="width: 200px; height: 200px; margin: 0; padding: 0; border: none; object-fit: contain; background: #1a1a1a;" alt="支付二维码" />
<div v-if="!showQrCode" class="qr-placeholder">
<svg width="200" height="200" viewBox="0 0 360 360" fill="none" xmlns="http://www.w3.org/2000/svg">
<foreignObject x="-5.8" y="-5.8" width="371.6" height="371.6"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(2.9px);clip-path:url(#bgblur_0_605_316_clip_path);height:100%;width:100%"></div></foreignObject>
<rect data-figma-bg-blur-radius="5.8" width="360" height="360" rx="10" fill="#0F0F12" fill-opacity="0.9"/>
<defs>
<clipPath id="bgblur_0_605_316_clip_path" transform="translate(5.8 5.8)"><rect width="360" height="360" rx="10"/></clipPath>
</defs>
<!-- 加载动画 -->
<text x="180" y="165" text-anchor="middle" fill="rgba(255,255,255,0.6)" font-size="28" font-family="Arial" font-weight="500">正在生成二维码</text>
<text x="180" y="210" text-anchor="middle" fill="rgba(255,255,255,0.4)" font-size="22" font-family="Arial">请稍候...</text>
<!-- 支付宝支付区域 -->
<div v-if="selectedMethod === 'alipay'" class="alipay-section">
<div class="alipay-info">
<div class="alipay-logo">
<svg width="100" height="32" viewBox="0 0 100 32" fill="none">
<text x="0" y="24" font-family="Arial" font-size="20" font-weight="bold" fill="#1677FF">支付宝</text>
</svg>
</div>
<p class="alipay-desc">安全便捷的在线支付方式</p>
<p class="alipay-desc-small">点击下方按钮跳转到支付宝完成支付</p>
</div>
<div class="qr-tip">支付前请阅读《Vionow支付服务条款》</div>
<button
class="alipay-pay-button"
@click="handlePay"
:disabled="loading"
>
<span v-if="!loading">前往支付宝支付</span>
<span v-else>正在跳转...</span>
</button>
</div>
<!-- PayPal支付按钮区域 -->
@@ -84,17 +85,6 @@
</button>
</div>
<!-- 支付提示 -->
<div v-if="selectedMethod === 'alipay'" class="action-section">
<div class="pay-tip">
<p>请使用支付宝扫描上方二维码完成支付</p>
<p class="tip-small">支付完成后页面将自动更新</p>
</div>
<button class="check-payment-btn" @click="manualCheckPayment" :disabled="!currentPaymentId">
我已完成支付
</button>
</div>
<!-- 底部链接 -->
<div class="footer-link">
<a href="#" @click.prevent="showAgreement">《Vionow支付服务条款》</a>
@@ -136,8 +126,6 @@ const visible = ref(false)
const selectedMethod = ref('alipay')
const loading = ref(false)
const currentPaymentId = ref(null)
const qrCodeUrl = ref('') // 二维码URL
const showQrCode = ref(false) // 是否显示二维码
let paymentPollingTimer = null
let isPaymentStarted = false // 防止重复调用
let lastPlanType = '' // 记录上一次的套餐类型
@@ -165,14 +153,8 @@ watch(() => props.modelValue, (newVal) => {
console.log('同一套餐，复用 paymentId:', currentPaymentId.value)
}
qrCodeUrl.value = ''
showQrCode.value = false
// 只有选择支付宝时才自动生成二维码，PayPal需要用户点击按钮
if (!isPaymentStarted && selectedMethod.value === 'alipay') {
isPaymentStarted = true
handlePay()
}
// 重置状态
isPaymentStarted = false
}
// 关闭时重置标志
if (!newVal) {
@@ -183,11 +165,9 @@ watch(() => props.modelValue, (newVal) => {
// 监听 visible 变化
watch(visible, (newVal) => {
emit('update:modelValue', newVal)
// 如果模态框关闭，停止轮询并重置二维码状态（但保留paymentId和lastPlanType用于同套餐复用）
// 如果模态框关闭，停止轮询
if (!newVal) {
stopPaymentPolling()
qrCodeUrl.value = ''
showQrCode.value = false
}
})
@@ -197,10 +177,6 @@ const selectMethod = async (method) => {
console.log('切换支付方式:', selectedMethod.value, '->', method, '复用 paymentId:', currentPaymentId.value)
selectedMethod.value = method
// 重置二维码显示
qrCodeUrl.value = ''
showQrCode.value = false
// 如果已有支付记录，更新支付方式和描述（复用paymentId）
if (currentPaymentId.value) {
try {
@@ -230,22 +206,12 @@ const selectMethod = async (method) => {
if (response.ok && responseData.success) {
console.log('✅ 支付方式更新成功，复用paymentId:', currentPaymentId.value)
// 如果切换到支付宝，生成新二维码
if (method === 'alipay') {
await handleAlipayPayment()
}
} else {
console.error('❌ 支付方式更新失败:', responseData.message || response.statusText)
}
} catch (error) {
console.error('❌ 更新支付方式异常:', error)
}
} else {
// 没有支付记录，如果是支付宝则自动创建
if (method === 'alipay') {
isPaymentStarted = true
await handlePay()
}
}
}
}
@@ -323,11 +289,7 @@ const handlePay = async () => {
// 处理支付宝支付
const handleAlipayPayment = async () => {
// 重置二维码显示状态
showQrCode.value = false
qrCodeUrl.value = ''
ElMessage.info('正在生成支付二维码...')
ElMessage.info('正在创建支付宝支付...')
const paymentId = currentPaymentId.value
console.log('=== 开始支付宝支付流程 ===')
@@ -338,26 +300,36 @@ const handleAlipayPayment = async () => {
console.log('支付宝支付响应：', alipayResponse)
if (alipayResponse.data && alipayResponse.data.success) {
// 显示二维码
const qrCode = alipayResponse.data.data.qrCode
console.log('支付宝二维码：', qrCode)
const responseData = alipayResponse.data.data
// 使用QuickChart API生成二维码
qrCodeUrl.value = `https://quickchart.io/qr?text=${encodeURIComponent(qrCode)}&size=200&margin=0&dark=ffffff&light=1a1a1a`
// 检查是否是电脑网页支付（返回HTML表单）
if (responseData.payType === 'PAGE_PAY' && responseData.payForm) {
console.log('使用电脑网页支付，跳转到支付宝页面')
ElMessage.success('正在跳转到支付宝支付页面...')
// 创建一个临时的div来渲染表单并自动提交
const div = document.createElement('div')
div.innerHTML = responseData.payForm
document.body.appendChild(div)
// 找到表单并提交
const form = div.querySelector('form')
if (form) {
form.submit()
} else {
console.error('未找到支付表单')
ElMessage.error('支付页面生成失败')
document.body.removeChild(div)
}
return
}
console.log('二维码图片URL已生成:', qrCodeUrl.value)
// 显示二维码
showQrCode.value = true
console.log('二维码已显示')
// 开始轮询支付状态
console.log('=== 开始轮询支付状态 ===')
startPaymentPolling(paymentId)
console.error('支付宝响应格式未知：', responseData)
ElMessage.error('支付创建失败，请重试')
} else {
console.error('支付宝响应失败：', alipayResponse)
ElMessage.error(alipayResponse.data?.message || '生成二维码失败')
emit('pay-error', new Error(alipayResponse.data?.message || '生成二维码失败'))
ElMessage.error(alipayResponse.data?.message || '支付创建失败')
emit('pay-error', new Error(alipayResponse.data?.message || '支付创建失败'))
}
}
@@ -962,6 +934,74 @@ const showAgreement = () => {
transform: none;
}
/* 支付宝支付区域 */
.alipay-section {
text-align: center;
margin-bottom: 24px;
padding: 32px 24px;
background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.alipay-info {
margin-bottom: 24px;
}
.alipay-logo {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 16px;
}
.alipay-desc {
color: white !important;
font-size: 16px !important;
font-weight: 500 !important;
margin: 8px 0 !important;
line-height: 1.5 !important;
}
.alipay-desc-small {
color: rgba(255, 255, 255, 0.7) !important;
font-size: 13px !important;
font-weight: 400 !important;
margin: 4px 0 !important;
line-height: 1.5 !important;
}
.alipay-pay-button {
width: 100%;
padding: 16px 24px;
background: linear-gradient(135deg, #1677FF 0%, #0958d9 100%);
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(22, 119, 255, 0.3);
}
.alipay-pay-button:hover:not(:disabled) {
background: linear-gradient(135deg, #0958d9 0%, #003eb3 100%);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(22, 119, 255, 0.4);
}
.alipay-pay-button:active:not(:disabled) {
transform: translateY(0);
}
.alipay-pay-button:disabled {
background: #666;
cursor: not-allowed;
opacity: 0.6;
transform: none;
}
/* 二维码区域 */
.qr-section {
text-align: center;