132 lines
3.8 KiB
Vue
132 lines
3.8 KiB
Vue
<template>
|
|
<PaymentSectionPage
|
|
section="gateway"
|
|
title="收款接口"
|
|
desc="管理余额、支付宝、微信、PayPal、Stripe、易支付与卡密兑换通道。"
|
|
note="以渠道开关与凭据是否齐全为准；异步回调由各网关验签。卡密为兑换入口，不进入收银台。"
|
|
:links="[
|
|
{ label: '余额充值', path: '/payment/recharge' },
|
|
{ label: '充值卡', path: '/payment/card-pass' },
|
|
]"
|
|
>
|
|
<template #before-form>
|
|
<n-spin :show="loading">
|
|
<n-card class="aksrt-section-card" title="网关状态">
|
|
<n-grid :cols="3" :x-gap="12" :y-gap="12">
|
|
<n-grid-item v-for="gw in gateways" :key="gw.id">
|
|
<div class="aksrt-gateway__card">
|
|
<div class="aksrt-gateway__icon" :class="gw.configured ? 'aksrt-gateway__icon--active' : ''">
|
|
<i :class="iconFor(gw.id)"></i>
|
|
</div>
|
|
<div>
|
|
<strong>{{ gw.name }}</strong>
|
|
<p>{{ gw.configured ? '已配置' : '未配置' }}</p>
|
|
</div>
|
|
<n-tag :type="gw.configured ? 'success' : 'default'" size="small" round>
|
|
{{ gw.configured ? '可用' : '不可用' }}
|
|
</n-tag>
|
|
</div>
|
|
</n-grid-item>
|
|
</n-grid>
|
|
<n-empty v-if="!loading && gateways.length === 0" description="暂无已注册的支付网关" />
|
|
</n-card>
|
|
|
|
<n-card v-if="overview.help_text" class="aksrt-section-card" title="运行说明">
|
|
<p class="aksrt-gateway__help">{{ overview.help_text }}</p>
|
|
</n-card>
|
|
</n-spin>
|
|
</template>
|
|
</PaymentSectionPage>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { useMessage } from 'naive-ui'
|
|
import PaymentSectionPage from '@/pages/payment/PaymentSectionPage.vue'
|
|
import api from '@/api'
|
|
|
|
const message = useMessage()
|
|
const gateways = ref([])
|
|
const overview = ref({})
|
|
const loading = ref(false)
|
|
|
|
function iconFor(id) {
|
|
if (id === 'balance') return 'fa fas fa-credit-card'
|
|
if (id === 'alipay' || id === 'epay_alipay') return 'fa fas fa-credit-card'
|
|
if (id === 'wechatpay' || id === 'epay_wxpay') return 'fa fab fa-weixin'
|
|
if (id === 'paypal') return 'fa fab fa-paypal'
|
|
if (id === 'stripe') return 'fa fab fa-cc-stripe'
|
|
return 'fa fas fa-credit-card'
|
|
}
|
|
|
|
onMounted(async () => {
|
|
loading.value = true
|
|
try {
|
|
const [gwRes, ovRes] = await Promise.all([
|
|
api.request('/payment/overview').catch(() => null),
|
|
])
|
|
if (gwRes?.data?.gateway?.gateways) {
|
|
const gwList = Object.entries(gwRes.data.gateway.gateways).map(([id, enabled]) => ({ id, name: id, configured: !!enabled }))
|
|
gateways.value = gwList
|
|
}
|
|
if (ovRes?.data?.gateway) {
|
|
overview.value = ovRes.data.gateway
|
|
} else if (ovRes?.data) {
|
|
overview.value = ovRes.data
|
|
}
|
|
} catch {
|
|
message.warning('部分支付接口暂不可用')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.aksrt-gateway__card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 14px;
|
|
border-radius: 8px;
|
|
background: var(--surface-2, #fafafa);
|
|
border: 1px solid var(--color-line, #f0f0f0);
|
|
}
|
|
|
|
.aksrt-gateway__icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--surface-3, #f0f0f0);
|
|
color: var(--aksrt-color-muted);
|
|
font-size: 16px;
|
|
}
|
|
|
|
.aksrt-gateway__icon--active {
|
|
background: var(--color-primary-soft, #f0f5ff);
|
|
color: var(--aksrt-color-primary);
|
|
}
|
|
|
|
.aksrt-gateway__card strong {
|
|
display: block;
|
|
font-size: 14px;
|
|
color: var(--aksrt-color-text);
|
|
}
|
|
|
|
.aksrt-gateway__card p {
|
|
margin: 2px 0 0;
|
|
font-size: 12px;
|
|
color: var(--aksrt-color-muted);
|
|
}
|
|
|
|
.aksrt-gateway__help {
|
|
margin: 0;
|
|
font-size: 13px;
|
|
color: var(--color-ink-3, #5c6370);
|
|
line-height: 1.6;
|
|
}
|
|
</style>
|