318 lines
11 KiB
Vue
318 lines
11 KiB
Vue
<template>
|
|
<Dialog v-bind="$attrs" :options="{ title: '实名认证信息', size: '3xl' }">
|
|
<template #body>
|
|
<div v-if="loading" class="flex justify-center items-center py-12">
|
|
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
|
<span class="ml-3 text-gray-600">加载中...</span>
|
|
</div>
|
|
|
|
<div v-else-if="error" class="text-center py-12">
|
|
<div class="text-red-500 mb-4">
|
|
<AlertTriangleIcon class="h-12 w-12 mx-auto" />
|
|
</div>
|
|
<p class="text-gray-600">{{ error }}</p>
|
|
</div>
|
|
|
|
<div v-else-if="realNameData" class="space-y-6">
|
|
<!-- 认证状态 -->
|
|
<div class="bg-gradient-to-r from-green-50 to-emerald-50 rounded-xl p-6 border border-green-200">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0">
|
|
<CheckCircleIcon class="h-8 w-8 text-green-500" />
|
|
</div>
|
|
<div class="ml-4">
|
|
<h3 class="text-lg font-medium text-green-900">认证已通过</h3>
|
|
<p class="text-sm text-green-700">该域名已完成实名认证</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 基本信息 -->
|
|
<div class="bg-white rounded-xl border border-gray-200 shadow-sm">
|
|
<div class="px-6 py-4 border-b border-gray-100">
|
|
<h3 class="text-lg font-semibold text-gray-900 flex items-center">
|
|
<FileTextIcon class="h-5 w-5 mr-2 text-blue-600" />
|
|
域名基本信息
|
|
</h3>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="space-y-4">
|
|
<InfoItem label="域名" :value="realNameData.domain" />
|
|
<InfoItem label="注册日期" :value="formatDate(realNameData.regdate)" />
|
|
<InfoItem label="到期日期" :value="formatDate(realNameData.rexpiredate)" />
|
|
<InfoItem label="认证状态" :value="getStatusText(realNameData.c_status)" />
|
|
</div>
|
|
<div class="space-y-4">
|
|
<InfoItem label="模板ID" :value="realNameData.c_sysid" />
|
|
<InfoItem label="注册类型" :value="getRegTypeText(realNameData.c_regtype)" />
|
|
<InfoItem label="域名状态" :value="realNameData.status" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 所有者信息 -->
|
|
<div class="bg-white rounded-xl border border-gray-200 shadow-sm">
|
|
<div class="px-6 py-4 border-b border-gray-100">
|
|
<h3 class="text-lg font-semibold text-gray-900 flex items-center">
|
|
<UserIcon class="h-5 w-5 mr-2 text-blue-600" />
|
|
所有者信息
|
|
</h3>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="space-y-4">
|
|
<InfoItem label="中文姓名" :value="getFullChineseName()" />
|
|
<InfoItem label="英文姓名" :value="getFullEnglishName()" />
|
|
<InfoItem v-if="realNameData.owner.dom_org_m" label="中文单位" :value="realNameData.owner.dom_org_m" />
|
|
<InfoItem v-if="realNameData.owner.dom_org" label="英文单位" :value="realNameData.owner.dom_org" />
|
|
<InfoItem label="邮箱" :value="realNameData.owner.dom_em" />
|
|
</div>
|
|
<div class="space-y-4">
|
|
<InfoItem label="电话" :value="realNameData.owner.dom_ph" />
|
|
<InfoItem label="传真" :value="realNameData.owner.dom_fax" />
|
|
<InfoItem label="国家/地区" :value="realNameData.owner.dom_co" />
|
|
<InfoItem label="省份" :value="realNameData.owner.dom_st_m || realNameData.owner.dom_st" />
|
|
<InfoItem label="城市" :value="realNameData.owner.dom_ct_m || realNameData.owner.dom_ct" />
|
|
</div>
|
|
</div>
|
|
<div class="mt-4">
|
|
<InfoItem label="地址" :value="realNameData.owner.dom_adr_m || realNameData.owner.dom_adr1" />
|
|
<InfoItem label="邮编" :value="realNameData.owner.dom_pc" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 联系人信息 -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<!-- 管理联系人 -->
|
|
<ContactCard
|
|
title="管理联系人"
|
|
icon="UserCircleIcon"
|
|
:contact="realNameData.admin"
|
|
type="admin"
|
|
/>
|
|
|
|
<!-- 技术联系人 -->
|
|
<ContactCard
|
|
title="技术联系人"
|
|
icon="SettingsIcon"
|
|
:contact="realNameData.tech"
|
|
type="tech"
|
|
/>
|
|
|
|
<!-- 缴费联系人 -->
|
|
<ContactCard
|
|
title="缴费联系人"
|
|
icon="CreditCardIcon"
|
|
:contact="realNameData.billing"
|
|
type="bill"
|
|
/>
|
|
</div>
|
|
|
|
<!-- DNS服务器 -->
|
|
<div class="bg-white rounded-xl border border-gray-200 shadow-sm">
|
|
<div class="px-6 py-4 border-b border-gray-100">
|
|
<h3 class="text-lg font-semibold text-gray-900 flex items-center">
|
|
<GlobeIcon class="h-5 w-5 mr-2 text-blue-600" />
|
|
DNS服务器
|
|
</h3>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<div v-for="(dns, index) in getDnsServers()" :key="index" class="bg-gray-50 rounded-lg p-4">
|
|
<div class="text-sm font-medium text-gray-600 mb-1">DNS{{ index + 1 }}</div>
|
|
<div class="font-mono text-sm text-gray-900">{{ dns || '未设置' }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</Dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import { Dialog, createResource } from 'jingrow-ui';
|
|
import { toast } from 'vue-sonner';
|
|
import CheckCircleIcon from '~icons/lucide/check-circle';
|
|
import AlertTriangleIcon from '~icons/lucide/alert-triangle';
|
|
import FileTextIcon from '~icons/lucide/file-text';
|
|
import UserIcon from '~icons/lucide/user';
|
|
import UserCircleIcon from '~icons/lucide/user-circle';
|
|
import SettingsIcon from '~icons/lucide/settings';
|
|
import CreditCardIcon from '~icons/lucide/credit-card';
|
|
import GlobeIcon from '~icons/lucide/globe';
|
|
|
|
// 信息项组件
|
|
const InfoItem = {
|
|
props: ['label', 'value'],
|
|
template: `
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-600">{{ label }}</dt>
|
|
<dd class="mt-1 text-sm text-gray-900">{{ value || '未填写' }}</dd>
|
|
</div>
|
|
`
|
|
};
|
|
|
|
// 联系人卡片组件
|
|
const ContactCard = {
|
|
props: ['title', 'icon', 'contact', 'type'],
|
|
components: { UserCircleIcon, SettingsIcon, CreditCardIcon },
|
|
template: `
|
|
<div class="bg-white rounded-xl border border-gray-200 shadow-sm">
|
|
<div class="px-4 py-3 border-b border-gray-100">
|
|
<h4 class="text-sm font-medium text-gray-900 flex items-center">
|
|
<component :is="icon" class="h-4 w-4 mr-2 text-blue-600" />
|
|
{{ title }}
|
|
</h4>
|
|
</div>
|
|
<div class="p-4 space-y-3">
|
|
<div>
|
|
<div class="text-xs font-medium text-gray-600">姓名</div>
|
|
<div class="text-sm text-gray-900">{{ getContactName() }}</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-xs font-medium text-gray-600">邮箱</div>
|
|
<div class="text-sm text-gray-900">{{ contact[type + '_em'] || '未填写' }}</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-xs font-medium text-gray-600">电话</div>
|
|
<div class="text-sm text-gray-900">{{ contact[type + '_ph'] || '未填写' }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
methods: {
|
|
getContactName() {
|
|
const chineseName = (this.contact[this.type + '_ln_m'] || '') + (this.contact[this.type + '_fn_m'] || '');
|
|
const englishName = (this.contact[this.type + '_ln'] || '') + ' ' + (this.contact[this.type + '_fn'] || '');
|
|
return chineseName || englishName.trim() || '未填写';
|
|
}
|
|
}
|
|
};
|
|
|
|
export default {
|
|
name: 'JsiteDomainRealNameInfoDialog',
|
|
components: {
|
|
Dialog,
|
|
CheckCircleIcon,
|
|
AlertTriangleIcon,
|
|
FileTextIcon,
|
|
UserIcon,
|
|
UserCircleIcon,
|
|
SettingsIcon,
|
|
CreditCardIcon,
|
|
GlobeIcon,
|
|
InfoItem,
|
|
ContactCard
|
|
},
|
|
props: {
|
|
domain: String,
|
|
domainDoc: Object,
|
|
realNameInfo: Object
|
|
},
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
error: null,
|
|
realNameData: null
|
|
};
|
|
},
|
|
methods: {
|
|
async loadRealNameInfo() {
|
|
if (this.realNameInfo) {
|
|
this.realNameData = this.realNameInfo;
|
|
return;
|
|
}
|
|
|
|
if (!this.domainDoc?.domain) {
|
|
this.error = '域名信息不存在';
|
|
return;
|
|
}
|
|
|
|
this.loading = true;
|
|
this.error = null;
|
|
|
|
try {
|
|
const getRealNameRequest = createResource({
|
|
url: 'jcloud.api.domain_west.get_west_domain_real_info',
|
|
params: {
|
|
domain: this.domainDoc.domain
|
|
},
|
|
onSuccess: (response) => {
|
|
if (response && response.status === "success" && response.data) {
|
|
this.realNameData = response.data;
|
|
} else {
|
|
this.error = '获取实名认证信息失败';
|
|
}
|
|
this.loading = false;
|
|
},
|
|
onError: (error) => {
|
|
console.error('获取域名实名信息失败:', error);
|
|
this.error = '获取实名认证信息失败';
|
|
this.loading = false;
|
|
}
|
|
});
|
|
getRealNameRequest.submit();
|
|
} catch (error) {
|
|
console.error('获取域名实名信息失败:', error);
|
|
this.error = '获取实名认证信息失败';
|
|
this.loading = false;
|
|
}
|
|
},
|
|
formatDate(dateStr) {
|
|
if (!dateStr) return '未知';
|
|
try {
|
|
const date = new Date(dateStr);
|
|
return date.toLocaleDateString('zh-CN');
|
|
} catch {
|
|
return dateStr;
|
|
}
|
|
},
|
|
getStatusText(status) {
|
|
const statusMap = {
|
|
1: '已通过',
|
|
2: '审核中',
|
|
3: '审核失败',
|
|
4: '待上传'
|
|
};
|
|
return statusMap[status] || status || '未知';
|
|
},
|
|
getRegTypeText(regType) {
|
|
const typeMap = {
|
|
'I': '个人',
|
|
'E': '企业'
|
|
};
|
|
return typeMap[regType] || regType || '未知';
|
|
},
|
|
getFullChineseName() {
|
|
if (!this.realNameData?.owner) return '未填写';
|
|
const lastName = this.realNameData.owner.dom_ln_m || '';
|
|
const firstName = this.realNameData.owner.dom_fn_m || '';
|
|
return lastName + firstName || '未填写';
|
|
},
|
|
getFullEnglishName() {
|
|
if (!this.realNameData?.owner) return '未填写';
|
|
const lastName = this.realNameData.owner.dom_ln || '';
|
|
const firstName = this.realNameData.owner.dom_fn || '';
|
|
return (lastName + ' ' + firstName).trim() || '未填写';
|
|
},
|
|
getDnsServers() {
|
|
if (!this.realNameData?.dns_hosts) return [];
|
|
return [
|
|
this.realNameData.dns_hosts.dns_host1,
|
|
this.realNameData.dns_hosts.dns_host2,
|
|
this.realNameData.dns_hosts.dns_host3,
|
|
this.realNameData.dns_hosts.dns_host4,
|
|
this.realNameData.dns_hosts.dns_host5,
|
|
this.realNameData.dns_hosts.dns_host6
|
|
].filter(Boolean);
|
|
}
|
|
},
|
|
mounted() {
|
|
this.loadRealNameInfo();
|
|
}
|
|
};
|
|
</script> |