新增: 微信配置-代理充值

src/views/settings/wechat-config/detail.vue

@@ -0,0 +1,307 @@
+<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>