308 lines
7.6 KiB
Vue
308 lines
7.6 KiB
Vue
<template>
|
|
<div class="wechat-config-detail-page">
|
|
<ElCard shadow="never">
|
|
<!-- 页面头部 -->
|
|
<div class="detail-header">
|
|
<ElButton @click="handleBack">
|
|
<template #icon>
|
|
<ElIcon><ArrowLeft /></ElIcon>
|
|
</template>
|
|
返回
|
|
</ElButton>
|
|
<h2 class="detail-title">{{ pageTitle }}</h2>
|
|
</div>
|
|
|
|
<!-- 详情内容 -->
|
|
<DetailPage v-if="detailData" :sections="detailSections" :data="detailData" />
|
|
|
|
<!-- 加载中 -->
|
|
<div v-if="loading" class="loading-container">
|
|
<ElIcon class="is-loading"><Loading /></ElIcon>
|
|
<span>加载中...</span>
|
|
</div>
|
|
</ElCard>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, computed } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { ElCard, ElButton, ElIcon, ElMessage } from 'element-plus'
|
|
import { ArrowLeft, Loading } from '@element-plus/icons-vue'
|
|
import DetailPage from '@/components/common/DetailPage.vue'
|
|
import type { DetailSection } from '@/components/common/DetailPage.vue'
|
|
import { WechatConfigService } from '@/api/modules'
|
|
import type { WechatConfig, PaymentProviderType } from '@/types/api'
|
|
import { formatDateTime } from '@/utils/business/format'
|
|
import { RoutesAlias } from '@/router/routesAlias'
|
|
|
|
defineOptions({ name: 'WechatConfigDetail' })
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
const loading = ref(false)
|
|
const detailData = ref<WechatConfig | null>(null)
|
|
|
|
const configId = computed(() => Number(route.params.id))
|
|
const pageTitle = computed(() => `支付配置详情 #${configId.value}`)
|
|
|
|
// 获取支付渠道类型文本
|
|
const getProviderTypeText = (type: PaymentProviderType): string => {
|
|
const typeMap: Record<PaymentProviderType, string> = {
|
|
wechat: '微信直连',
|
|
fuiou: '富友支付'
|
|
}
|
|
return typeMap[type] || type
|
|
}
|
|
|
|
// 获取配置状态文本
|
|
const getConfigStatus = (value: string | undefined | null): string => {
|
|
if (!value) return '未配置'
|
|
return value === 'configured' ? '已配置' : value
|
|
}
|
|
|
|
// 基础详情配置
|
|
const baseSection: DetailSection = {
|
|
title: '基本信息',
|
|
fields: [
|
|
{ label: '配置ID', prop: 'id' },
|
|
{ label: '配置名称', prop: 'name' },
|
|
{
|
|
label: '支付渠道类型',
|
|
formatter: (_, data) => getProviderTypeText(data.provider_type)
|
|
},
|
|
{
|
|
label: '激活状态',
|
|
formatter: (_, data) => (data.is_active ? '已激活' : '未激活')
|
|
},
|
|
{
|
|
label: '配置描述',
|
|
prop: 'description',
|
|
formatter: (value) => value || '-',
|
|
fullWidth: true
|
|
},
|
|
{
|
|
label: '创建时间',
|
|
prop: 'created_at',
|
|
formatter: (value) => formatDateTime(value)
|
|
},
|
|
{
|
|
label: '更新时间',
|
|
prop: 'updated_at',
|
|
formatter: (value) => formatDateTime(value)
|
|
}
|
|
]
|
|
}
|
|
|
|
// 微信小程序配置
|
|
const miniappSection: DetailSection = {
|
|
title: '小程序配置',
|
|
fields: [
|
|
{
|
|
label: '小程序AppID',
|
|
prop: 'miniapp_app_id',
|
|
formatter: (value) => value || '-'
|
|
},
|
|
{
|
|
label: '小程序AppSecret',
|
|
prop: 'miniapp_app_secret',
|
|
formatter: (value) => value || '-'
|
|
}
|
|
]
|
|
}
|
|
|
|
// 微信公众号配置
|
|
const oaSection: DetailSection = {
|
|
title: '公众号配置',
|
|
fields: [
|
|
{
|
|
label: '公众号AppID',
|
|
prop: 'oa_app_id',
|
|
formatter: (value) => value || '-'
|
|
},
|
|
{
|
|
label: '公众号AppSecret',
|
|
prop: 'oa_app_secret',
|
|
formatter: (value) => value || '-'
|
|
},
|
|
{
|
|
label: '公众号Token',
|
|
prop: 'oa_token',
|
|
formatter: (value) => value || '-'
|
|
},
|
|
{
|
|
label: '公众号AES Key',
|
|
prop: 'oa_aes_key',
|
|
formatter: (value) => value || '-'
|
|
},
|
|
{
|
|
label: 'OAuth回调地址',
|
|
prop: 'oa_oauth_redirect_url',
|
|
formatter: (value) => value || '-',
|
|
fullWidth: true
|
|
}
|
|
]
|
|
}
|
|
|
|
// 微信支付配置
|
|
const wechatPaySection: DetailSection = {
|
|
title: '微信支付配置',
|
|
fields: [
|
|
{
|
|
label: '微信商户号',
|
|
prop: 'wx_mch_id',
|
|
formatter: (value) => value || '-'
|
|
},
|
|
{
|
|
label: '证书序列号',
|
|
prop: 'wx_serial_no',
|
|
formatter: (value) => value || '-'
|
|
},
|
|
{
|
|
label: 'APIv2密钥',
|
|
prop: 'wx_api_v2_key',
|
|
formatter: (value) => value || '-'
|
|
},
|
|
{
|
|
label: 'APIv3密钥',
|
|
prop: 'wx_api_v3_key',
|
|
formatter: (value) => value || '-'
|
|
},
|
|
{
|
|
label: '支付回调地址',
|
|
prop: 'wx_notify_url',
|
|
formatter: (value) => value || '-',
|
|
fullWidth: true
|
|
},
|
|
{
|
|
label: '支付证书',
|
|
prop: 'wx_cert_content',
|
|
formatter: (value) => getConfigStatus(value)
|
|
},
|
|
{
|
|
label: '支付密钥',
|
|
prop: 'wx_key_content',
|
|
formatter: (value) => getConfigStatus(value)
|
|
}
|
|
]
|
|
}
|
|
|
|
// 富友支付配置
|
|
const fuiouSection: DetailSection = {
|
|
title: '富友支付配置',
|
|
fields: [
|
|
{
|
|
label: '富友API地址',
|
|
prop: 'fy_api_url',
|
|
formatter: (value) => value || '-',
|
|
fullWidth: true
|
|
},
|
|
{
|
|
label: '富友机构号',
|
|
prop: 'fy_ins_cd',
|
|
formatter: (value) => value || '-'
|
|
},
|
|
{
|
|
label: '富友商户号',
|
|
prop: 'fy_mchnt_cd',
|
|
formatter: (value) => value || '-'
|
|
},
|
|
{
|
|
label: '富友终端号',
|
|
prop: 'fy_term_id',
|
|
formatter: (value) => value || '-'
|
|
},
|
|
{
|
|
label: '支付回调地址',
|
|
prop: 'fy_notify_url',
|
|
formatter: (value) => value || '-'
|
|
},
|
|
{
|
|
label: '富友私钥',
|
|
prop: 'fy_private_key',
|
|
formatter: (value) => getConfigStatus(value)
|
|
},
|
|
{
|
|
label: '富友公钥',
|
|
prop: 'fy_public_key',
|
|
formatter: (value) => getConfigStatus(value)
|
|
}
|
|
]
|
|
}
|
|
|
|
// 根据支付类型动态构建详情配置
|
|
const detailSections = computed<DetailSection[]>(() => {
|
|
if (!detailData.value) return [baseSection]
|
|
|
|
const sections = [baseSection]
|
|
|
|
if (detailData.value.provider_type === 'wechat') {
|
|
sections.push(miniappSection, oaSection, wechatPaySection)
|
|
} else if (detailData.value.provider_type === 'fuiou') {
|
|
sections.push(fuiouSection)
|
|
}
|
|
|
|
return sections
|
|
})
|
|
|
|
// 返回列表
|
|
const handleBack = () => {
|
|
router.push(RoutesAlias.WechatConfig)
|
|
}
|
|
|
|
// 获取详情数据
|
|
const fetchDetail = async () => {
|
|
loading.value = true
|
|
try {
|
|
const res = await WechatConfigService.getWechatConfigById(configId.value)
|
|
if (res.code === 0) {
|
|
detailData.value = res.data
|
|
}
|
|
} catch (error) {
|
|
console.error(error)
|
|
ElMessage.error('获取支付配置详情失败')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
fetchDetail()
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.wechat-config-detail-page {
|
|
padding: 20px;
|
|
}
|
|
|
|
.detail-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
padding-bottom: 16px;
|
|
|
|
.detail-title {
|
|
margin: 0;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: var(--el-text-color-primary);
|
|
}
|
|
}
|
|
|
|
.loading-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 60px 20px;
|
|
gap: 12px;
|
|
color: var(--el-text-color-secondary);
|
|
|
|
.el-icon {
|
|
font-size: 32px;
|
|
}
|
|
}
|
|
</style>
|