yml/hfb_sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

接入顺成支付并优化配置列表

Browse Source
This commit is contained in:
yml
2026-06-18 21:33:15 +08:00
parent 40ae14d450
commit 6d385478a6
13 changed files with 1763 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/features/admin/views/AdminPaymentConfigsView.vue
+147 -19
View File
@@ -1,7 +1,7 @@
<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import { computed, onMounted, ref } from 'vue'
import { Plus, Refresh, View, Edit, Delete, Download, Upload } from '@element-plus/icons-vue'
import { Plus, Refresh, View, Edit, Delete, Download, Upload, StarFilled } from '@element-plus/icons-vue'
import {
fetchPaymentConfigs,
@@ -37,6 +37,7 @@ const providerOptions = [
{ label: '全部', value: '' },
{ label: '乐刷支付', value: 'leshua' },
{ label: '拉卡拉支付', value: 'lakala' },
{ label: '顺成支付', value: 'shuncheng' },
{ label: '模拟支付', value: 'mock' },
]
@@ -216,6 +217,7 @@ function formatProvider(provider: string) {
const map: Record<string, string> = {
leshua: '乐刷支付',
lakala: '拉卡拉支付',
shuncheng: '顺成支付',
mock: '模拟支付',
}
return map[provider] || provider
@@ -230,13 +232,13 @@ function formatPayWay(payWay: string) {
return map[payWay] || payWay || '-'
}
// getPayWayType 按支付方式返回标签颜色。
function getPayWayType(payWay: string) {
const map: Record<string, 'success' | 'primary' | 'info'> = {
ZFBZF: 'primary',
WXZF: 'success',
// getPayWayClass 按支付方式返回标签样式，避免与状态/环境标签混淆。
function getPayWayClass(payWay: string) {
const map: Record<string, string> = {
ZFBZF: 'pay-way-alipay',
WXZF: 'pay-way-wechat',
}
return map[payWay] || 'info'
return map[payWay] || 'pay-way-other'
}
function formatStatus(status: string) {
@@ -260,13 +262,30 @@ function formatAmount(amountCent: number) {
return formatCent(amountCent)
}
function getStatusType(status: string) {
const map: Record<string, 'success' | 'info' | 'warning'> = {
active: 'success',
disabled: 'info',
testing: 'warning',
function getEnvironmentClass(env: string) {
const map: Record<string, string> = {
production: 'env-production',
sandbox: 'env-sandbox',
}
return map[status] || 'info'
return map[env] || 'env-other'
}
function getStatusClass(status: string) {
const map: Record<string, string> = {
active: 'config-active',
disabled: 'config-disabled',
testing: 'config-testing',
}
return map[status] || 'config-disabled'
}
function isDefaultConfig(row: PaymentConfig) {
const value = row.is_default as unknown
return value === true || value === 'true' || value === 1
}
function tableRowClassName({ row }: { row: PaymentConfig }) {
return isDefaultConfig(row) ? 'payment-config-row-default' : ''
}
function canDeleteConfig(row: PaymentConfig) {
@@ -357,7 +376,13 @@ function deleteDisabledReason(row: PaymentConfig) {
@change="handleImportFile"
/>
<el-table :data="filteredConfigs" v-loading="loading" class="payment-config-table" stripe>
<el-table
:data="filteredConfigs"
v-loading="loading"
class="payment-config-table"
:row-class-name="tableRowClassName"
stripe
>
<el-table-column prop="name" label="配置名称" min-width="220" show-overflow-tooltip />
<el-table-column prop="provider" label="服务商" width="120">
<template #default="{ row }">
@@ -366,7 +391,7 @@ function deleteDisabledReason(row: PaymentConfig) {
</el-table-column>
<el-table-column prop="pay_way" label="支付方式" width="104" align="center">
<template #default="{ row }">
<el-tag :type="getPayWayType(row.pay_way)" size="small">
<el-tag class="config-tag" :class="getPayWayClass(row.pay_way)" size="small">
{{ formatPayWay(row.pay_way) }}
</el-tag>
</template>
@@ -374,21 +399,25 @@ function deleteDisabledReason(row: PaymentConfig) {
<el-table-column prop="merchant_id" label="商户号" min-width="150" />
<el-table-column prop="environment" label="环境" width="86" align="center">
<template #default="{ row }">
<el-tag :type="row.environment === 'production' ? 'success' : 'warning'" size="small">
<el-tag class="config-tag" :class="getEnvironmentClass(row.environment)" size="small">
{{ formatEnvironment(row.environment) }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="status" label="状态" width="86" align="center">
<template #default="{ row }">
<el-tag :type="getStatusType(row.status)" size="small">
<el-tag class="config-tag" :class="getStatusClass(row.status)" size="small">
{{ formatStatus(row.status) }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="is_default" label="默认" width="86" align="center">
<el-table-column prop="is_default" label="默认渠道" width="118" align="center">
<template #default="{ row }">
<el-tag v-if="row.is_default" type="primary" size="small">默认</el-tag>
<span v-if="isDefaultConfig(row)" class="default-badge">
<el-icon><StarFilled /></el-icon>
默认渠道
</span>
<span v-else class="standby-badge">备用</span>
</template>
</el-table-column>
<el-table-column label="成功支付" min-width="150">
@@ -524,6 +553,105 @@ function deleteDisabledReason(row: PaymentConfig) {
font-weight: 600;
}
.payment-config-table :deep(.payment-config-row-default td.el-table__cell) {
background: #f8fbff;
}
.payment-config-table :deep(.payment-config-row-default td.el-table__cell:first-child) {
box-shadow: inset 3px 0 0 #2563eb;
}
.config-tag {
min-width: 46px;
justify-content: center;
border-radius: 5px;
font-weight: 600;
}
.config-tag.pay-way-alipay {
color: #1d4ed8;
background: #eff6ff;
border-color: #bfdbfe;
}
.config-tag.pay-way-wechat {
color: #047857;
background: #ecfdf5;
border-color: #a7f3d0;
}
.config-tag.pay-way-other {
color: #475569;
background: #f8fafc;
border-color: #cbd5e1;
}
.config-tag.env-production {
color: #475569;
background: #f8fafc;
border-color: #cbd5e1;
}
.config-tag.env-sandbox {
color: #92400e;
background: #fffbeb;
border-color: #fde68a;
}
.config-tag.env-other {
color: #64748b;
background: #f8fafc;
border-color: #cbd5e1;
}
.config-tag.config-active {
color: #075985;
background: #e0f2fe;
border-color: #7dd3fc;
}
.config-tag.config-disabled {
color: #64748b;
background: #f1f5f9;
border-color: #cbd5e1;
}
.config-tag.config-testing {
color: #92400e;
background: #fffbeb;
border-color: #fde68a;
}
.default-badge,
.standby-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 72px;
height: 24px;
border-radius: 6px;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.default-badge {
gap: 4px;
color: #ffffff;
background: #1d4ed8;
box-shadow: 0 4px 10px rgb(29 78 216 / 0.16);
}
.default-badge .el-icon {
font-size: 13px;
}
.standby-badge {
color: #94a3b8;
background: transparent;
font-weight: 600;
}
.usage-cell {
display: grid;
gap: 4px;
frontend/src/features/admin/views/AdminPaymentsView.vue
+1
View File
@@ -186,6 +186,7 @@ function jsonText(value: unknown) {
<el-select v-model="filters.provider" clearable placeholder="全部渠道" class="full-control">
<el-option label="拉卡拉" value="lakala" />
<el-option label="乐刷" value="leshua" />
<el-option label="顺成" value="shuncheng" />
<el-option label="Mock" value="mock" />
</el-select>
</el-form-item>