<script setup lang="ts">
|
import { onMounted, ref } from 'vue'
|
import { useRoute } from 'vue-router'
|
import { getMerchantOnboardingDetail } from '../api/admin'
|
|
const route = useRoute()
|
const loading = ref(false)
|
const detail = ref<Record<string, any>>()
|
|
function text(value: unknown) {
|
return value === undefined || value === null || value === '' ? '-' : String(value)
|
}
|
|
function dateText(value: unknown) {
|
const result = text(value)
|
return /^\d{8}$/.test(result) ? `${result.slice(0, 4)}-${result.slice(4, 6)}-${result.slice(6, 8)}` : result
|
}
|
|
function statusLabel(value: unknown) {
|
return ({ pending: '待审核', approved: '已通过', rejected: '已驳回' } as Record<string, string>)[String(value || '')] || text(value)
|
}
|
|
function subjectTypeLabel(value: unknown) {
|
const normalized = String(value || '').toLowerCase()
|
if (normalized === 'enterprise' || normalized === 'company' || normalized === '企业') return '企业'
|
return normalized === 'individual' || normalized === 'person' || normalized === '个人' ? '个人' : text(value)
|
}
|
|
function isIndividual(value: unknown) {
|
const normalized = String(value || '').toLowerCase()
|
return normalized === 'individual' || normalized === 'person' || normalized === '个人'
|
}
|
|
function validityTypeLabel(value: unknown) {
|
const normalized = String(value || '').toLowerCase()
|
if (normalized === 'long_term' || normalized === 'long-term' || normalized === '长期' || normalized === '1') return '长期'
|
if (normalized === 'fixed' || normalized === '非长期' || normalized === '0') return '非长期'
|
return text(value)
|
}
|
|
async function load() {
|
loading.value = true
|
try {
|
detail.value = await getMerchantOnboardingDetail(String(route.params.id))
|
} finally {
|
loading.value = false
|
}
|
}
|
|
onMounted(load)
|
</script>
|
|
<template>
|
<div v-loading="loading" class="onboarding-detail-page">
|
<section v-if="detail" class="detail-panel">
|
<h3>进件状态</h3>
|
<div class="status-value">{{ statusLabel(detail.status) }}</div>
|
|
<h3 class="onboarding-heading">商户进件</h3>
|
<div class="detail-grid common-grid">
|
<div class="detail-field"><span>商户类型</span><strong>{{ subjectTypeLabel(detail.subjectType) }}</strong></div>
|
</div>
|
<div v-if="!isIndividual(detail.subjectType)" class="detail-grid">
|
<div class="detail-field"><span>统一社会信用代码</span><strong>{{ text(detail.creditCode) }}</strong></div>
|
<div class="detail-field"><span>营业执照有效期类型</span><strong>{{ validityTypeLabel(detail.licenseValidityType) }}</strong></div>
|
<div class="detail-field placeholder-field"></div>
|
<div class="detail-field"><span>证照有效期起始日期</span><strong>{{ dateText(detail.licenseBeginDate) }}</strong></div>
|
<div class="detail-field"><span>证照有效期结束日期</span><strong>{{ dateText(detail.licenseEndDate) }}</strong></div>
|
<div class="detail-field"><span>注册地址（省、市、区）</span><strong>{{ text(detail.registeredRegion) }}</strong></div>
|
<div class="detail-field"><span>详细注册地址</span><strong>{{ text(detail.registeredAddress) }}</strong></div>
|
<div class="detail-field"><span>法人姓名</span><strong>{{ text(detail.subjectName) }}</strong></div>
|
<div class="detail-field"><span>法人证件类型</span><strong>身份证</strong></div>
|
<div class="detail-field"><span>法人证件号码</span><strong>{{ text(detail.subjectIdNoMasked) }}</strong></div>
|
<div class="detail-field"><span>法人证件有效期类型</span><strong>{{ validityTypeLabel(detail.subjectCertValidityType) }}</strong></div>
|
<div class="detail-field"><span>法人证件有效期开始日期</span><strong>{{ dateText(detail.subjectCertBeginDate) }}</strong></div>
|
<div class="detail-field"><span>法人证件有效期截止日期</span><strong>{{ dateText(detail.subjectCertEndDate) }}</strong></div>
|
<div class="detail-field"><span>管理员姓名</span><strong>{{ text(detail.contactName) }}</strong></div>
|
<div class="detail-field"><span>管理员手机号</span><strong>{{ text(detail.contactMobile) }}</strong></div>
|
</div>
|
<div v-else class="detail-grid">
|
<div class="detail-field"><span>个人姓名</span><strong>{{ text(detail.subjectName) }}</strong></div>
|
<div class="detail-field"><span>个人证件类型</span><strong>身份证</strong></div>
|
<div class="detail-field"><span>个人证件号码</span><strong>{{ text(detail.subjectIdNoMasked) }}</strong></div>
|
<div class="detail-field"><span>个人证件有效期类型</span><strong>{{ validityTypeLabel(detail.subjectCertValidityType) }}</strong></div>
|
<div class="detail-field"><span>个人证件有效期开始日期</span><strong>{{ text(detail.subjectCertBeginDate) }}</strong></div>
|
<div class="detail-field"><span>个人证件有效期截止日期</span><strong>{{ text(detail.subjectCertEndDate) }}</strong></div>
|
<div class="detail-field"><span>手机号</span><strong>{{ text(detail.contactMobile) }}</strong></div>
|
</div>
|
</section>
|
</div>
|
</template>
|
|
<style scoped>
|
.onboarding-detail-page { min-width: 1040px; }
|
.detail-panel { min-height: 560px; padding: 18px 20px 54px; background: #fff; border: 1px solid #edf0f5; }
|
.detail-panel h3 { margin: 0; color: #1d2129; font-size: 15px; }
|
.status-value { margin-top: 16px; color: #1d2129; font-size: 13px; font-weight: 600; }
|
.onboarding-heading { margin-top: 24px !important; }
|
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 46px; margin-top: 22px; max-width: 860px; }
|
.common-grid { margin-bottom: -2px; }
|
.detail-field { display: grid; grid-template-columns: 118px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 32px; }
|
.detail-field > span { color: #303133; font-size: 13px; font-weight: 500; white-space: nowrap; }
|
.detail-field > strong { min-height: 32px; box-sizing: border-box; padding: 7px 10px; color: #606266; font-size: 13px; font-weight: 400; line-height: 18px; word-break: break-all; background: #f5f7fa; }
|
.placeholder-field { visibility: hidden; }
|
</style>
|
