jcloud/dashboard/src2/components/JsiteDomainRealNameInfoDialog.vue

<template>
  <Dialog v-bind="$attrs" :options="{ title: 'jingrow.cn实名认证信息', size: '2xl' }" v-model="show">
    <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-4">
        <!-- 域名基本信息 -->
        <div class="bg-white rounded-lg">
          <div class="px-6 py-4 border-b border-gray-100">
            <h3 class="text-base font-semibold text-gray-900">域名基本信息</h3>
          </div>
          <div class="p-6 space-y-4">
            <div class="flex justify-between items-center">
              <span class="text-sm text-gray-600">域名</span>
              <span class="text-sm font-medium text-gray-900">{{ realNameData.domain }}</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-sm text-gray-600">注册时间</span>
              <span class="text-sm font-medium text-gray-900">{{ formatDateTime(realNameData.regdate) }}</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-sm text-gray-600">到期时间</span>
              <span class="text-sm font-medium text-gray-900">{{ formatDateTime(realNameData.rexpiredate) }}</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-sm text-gray-600">域名状态</span>
              <span class="text-sm font-medium text-green-600">{{ getDomainStatusText(realNameData.status) }}</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-sm text-gray-600">实名状态</span>
              <span class="text-sm font-medium text-green-600">{{ getRealNameStatusText(realNameData.real_name_status?.r_status) }}</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-sm text-gray-600">域名所有者</span>
              <span class="text-sm font-medium text-gray-900">{{ realNameData.owner?.dom_org_m || '未填写' }}</span>
            </div>            
          </div>
        </div>

        <!-- 实名证件信息 -->
        <div class="bg-white rounded-lg">
          <div class="px-6 py-4 border-b border-gray-100">
            <h3 class="text-base font-semibold text-gray-900">实名证件信息</h3>
          </div>
          <div class="p-6 space-y-4">
            <div class="flex justify-between items-center">
              <span class="text-sm text-gray-600">实名证件类型</span>
              <span class="text-sm font-medium text-gray-900">{{ getDocumentTypeText(realNameData.orgfile?.f_type) }}</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-sm text-gray-600">实名证件号码</span>
              <div class="flex items-center space-x-2">
                <span class="text-sm font-medium text-gray-900">{{ realNameData.orgfile?.f_code || '未填写' }}</span>
                <button class="text-blue-600 hover:text-blue-800">
                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 联系信息 -->
        <div class="bg-white rounded-lg">
          <div class="px-6 py-4 border-b border-gray-100">
            <h3 class="text-base font-semibold text-gray-900">联系信息</h3>
          </div>
          <div class="p-6 space-y-4">
            <div class="flex justify-between items-center">
              <span class="text-sm text-gray-600">联系电话</span>
              <span class="text-sm font-medium text-gray-900">{{ realNameData.owner?.dom_ph || '未填写' }}</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-sm text-gray-600">所有者邮箱</span>
              <span class="text-sm font-medium text-gray-900">{{ realNameData.owner?.dom_em || '未填写' }}</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-sm text-gray-600">所属区域</span>
              <span class="text-sm font-medium text-gray-900">{{ getFullAddress() }}</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-sm text-gray-600">通讯地址</span>
              <span class="text-sm font-medium text-gray-900">{{ realNameData.owner?.dom_adr_m || '未填写' }}</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-sm text-gray-600">邮编</span>
              <span class="text-sm font-medium text-gray-900">{{ realNameData.owner?.dom_pc || '未填写' }}</span>
            </div>            
          </div>
        </div>
      </div>
    </template>
  </Dialog>
</template>

<script>
import { Dialog, createResource } from 'jingrow-ui';
import AlertTriangleIcon from '~icons/lucide/alert-triangle';





export default {
  name: 'JsiteDomainRealNameInfoDialog',
  components: {
    Dialog,
    AlertTriangleIcon
  },
  props: {
    domain: String,
    domainDoc: Object
  },
  data() {
    return {
      show: true,
      loading: false,
      error: null,
      realNameData: null
    };
  },
  methods: {
    async loadRealNameInfo() {
      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) => {
            let data = null;
            if (response && response.status === "success" && response.data) {
              data = response.data;
            } else if (response && response.message && response.message.status === "success" && response.message.data) {
              data = response.message.data;
            }
            
            if (data) {
              this.realNameData = data;
            } else {
              this.error = '获取实名认证信息失败';
            }
            
            this.loading = false;
          },
          onError: (error) => {
            this.error = '获取实名认证信息失败';
            this.loading = false;
          }
        });
        getRealNameRequest.submit();
      } catch (error) {
        this.error = '获取实名认证信息失败';
        this.loading = false;
      }
    },
    formatDateTime(dateStr) {
      if (!dateStr) return '未知';
      try {
        const date = new Date(dateStr);
        return date.toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit'
        });
      } catch {
        return dateStr;
      }
    },
    getDomainStatusText(status) {
      const statusMap = {
        'ok': '正常',
        'pending': '待处理',
        'error': '错误'
      };
      return statusMap[status] || status || '未知';
    },
    getRealNameStatusText(status) {
      const statusMap = {
        1: '实名成功',
        2: '实名中',
        3: '实名失败',
        0: '未实名'
      };
      return statusMap[status] || status || '未知';
    },
    getDocumentTypeText(type) {
      const typeMap = {
        1: '身份证',
        2: '护照',
        3: '营业执照(统一社会信用代码)',
        4: '组织机构代码证',
        5: '其他'
      };
      return typeMap[type] || type || '未知';
    },
    getFullAddress() {
      if (!this.realNameData?.owner) return '未填写';
      const province = this.realNameData.owner.dom_st_m || '';
      const city = this.realNameData.owner.dom_ct_m || '';
      const district = this.realNameData.owner.dom_district_m || '';
      const parts = [province, city, district].filter(Boolean);
      return parts.length > 0 ? parts.join('') : '未填写';
    }

  },
  mounted() {
    this.loadRealNameInfo();
  }
};
</script>