GPU_Web/src/views/admin/account/realnameAuth/index.vue

<!-- src/views/RealNameAuth.vue -->
<template>
  <div class="real-name-auth-page">
    <div class="header">
      <h1>实名认证</h1>
      <p v-if="userInfo.certificationStatus==='PENDING_CERTIFICATION'">请选择您的认证类型</p>
      <p v-if="userInfo.certificationStatus==='CERTIFICATION_PASSED'">Fast亼算云严格遵守国家相关个人信息隐私保护规定，并不存储使用您的个人信息，查看<span style="color:#1677ff;cursor: pointer;">实名认证协议</span> </p>
    </div>
    <div v-if="userInfo.certificationStatus==='CERTIFICATION_DFFILED'">认证审核中...</div>
    <div v-if="userInfo.certificationStatus==='CERTIFICATION_FAILED'">认证失败</div>
    <a-card v-if="userInfo.certificationStatus==='CERTIFICATION_PASSED'">
      <template #title>
        <div class="card-title">
          <span>{{ certificationInfo.certificationType }}</span>
        </div>
      </template>
      <div class="auth-explanation" style="display: flex;justify-content: flex-start;gap: 100px;">
       <div>
        <p><span>认证类型</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>{{ certificationInfo.certificationType }}</span></p>
        <p><span>证件类型</span>&nbsp;&nbsp;&nbsp;&nbsp;<span></span><span>{{ certificationInfo.documentType }}</span></p>
        <p><span>认证人</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span></span><span>{{ certificationInfo.name }}</span></p>
        <p>
          <a-button type="primary" v-if="certificationInfo.certificationType==='个人认证'" @click="transOpen=true">变更为企业认证</a-button>
        </p>
       </div>
       <div>
          <p><span>认证时间</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>{{ certificationInfo.certificationTime }}</span></p>
        <p><span>身份证号</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>{{ certificationInfo.idCard }}</span></p>
        <!-- <p><span>认证人</span><span>用户名</span></p> -->
       </div>
       <div>
        <img src="@/assets/renzheng.png" alt="认证图片" width="120px">
       </div>
      </div>
    </a-card>
    <div class="auth-container" v-if="userInfo.certificationStatus==='PENDING_CERTIFICATION'">
      <!-- 个人认证 -->
      <a-card >
        <template #title>
          <div class="card-title">
            <UserOutlined class="title-icon" />
            <span>个人认证</span>
          </div>
        </template>
        <div class="auth-content" @click="openPersonalAuthModal">
          <div class="option-list">
            <div class="option-item">
              <CheckCircleOutlined class="option-icon" />
              <div class="option-info">
                <div class="option-title">个人身份证认证</div>
                <div class="option-desc">快速认证，保障账号安全</div>
              </div>
            </div>
          </div>
        </div>
      </a-card>
      <!-- 企业认证 -->
      <a-card  :bordered="true">
        <template #title>
          <div class="card-title">
            <BankOutlined class="title-icon" />
            <span>企业认证</span>
          </div>
        </template>
        <template #extra>
          <!-- <span class="extra-text">支持对公打款认证、证件认证</span> -->
        </template>

        <div class="auth-content">
          <div class="option-list">
            <div class="option-item" @click="goEnterRealAuth">
              <CheckCircleOutlined class="option-icon" />
              <div class="option-info">
                <div class="option-title">企业证件认证</div>
                <div class="option-desc">营业执照等企业资质认证</div>
              </div>
            </div>
            <!-- <div class="option-item disabled">
              <ClockCircleOutlined class="option-icon" />
              <div class="option-info">
                <div class="option-title">银行对公账户认证</div>
                <div class="option-desc">即将上线，敬请期待</div>
              </div>
            </div> -->
          </div>
        </div>
      </a-card>
    </div>
  </div>
  <a-modal v-model:open="transOpen" title="变更须知">
    <a-card>
      <p>1.您正在进行个人实名认证变更为企业实名认证操作，变更后账号以及账号下资产将属于新的认证企业。</p>
      <p>2. 请知悉升级企业实名认证后，该账号将无法再变更回个人实名认证，请您谨慎操作。</p>
      <p><a-checkbox v-model:checked="checked">我已仔细阅读并代表同意 <span style="color: #1677ff;cursor: pointer;">《申请账号主体变更协议》</span></a-checkbox></p>
      <a-button type="primary" @click="goEnterRealAuth" :disabled="!checked">下一步</a-button>
    </a-card>
    </a-modal>
</template>

<script setup lang="ts">
import { ref, reactive,onMounted } from 'vue';
import { message } from 'ant-design-vue';
import {
  UserOutlined,
  BankOutlined,
  CheckCircleOutlined,
  ClockCircleOutlined
} from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import { on } from 'events';
import { get } from 'http';
import{certificationInfoApi} from '@/apis/certification';
const router = useRouter();
const certificationInfo = ref<any>({
});
const checked=ref(false)
const transOpen=ref(false)
const userInfo=ref<any>({
  certificationStatus:'PENDING_CERTIFICATION'
});
// 表单数据
const personalForm = reactive({
  realName: '',
  idCard: '',
});

// 打开个人认证弹窗
const openPersonalAuthModal = () => {
  router.push('/layout/admin/personalRealAuth');
};

// 跳转到企业认证页面
const goEnterRealAuth = () => {
  // TODO: 跳转到企业认证页面
  router.push('/layout/admin/enterRealAuth')  
};

// 关闭弹窗并重置表单
const closePersonalAuthModal = () => {
  personalForm.realName = '';
  personalForm.idCard = '';
};


const getCertificationInfo = async () => {
  try {
    const res=await certificationInfoApi();
    certificationInfo.value=res;
  } catch (error) {
    message.error('获取认证信息失败');
  }
};
onMounted(() => {
  const userInfoStr = localStorage.getItem('userInfo');
  if (userInfoStr) {
    userInfo.value=JSON.parse(userInfoStr);
    if(userInfo.value.certificationStatus==='CERTIFICATION_PASSED'){
      getCertificationInfo();
    }
  }
})
</script>

<style scoped>
.real-name-auth-page {
  padding: 20px;
  background-color: #ffffff;
  /* min-height: 100vh; */
}

.header {
  text-align: left;
  margin-bottom: 40px;
}

.header h1 {
  font-size: 28px;
  color: #1f2937;
  margin-bottom: 8px;
  font-weight: 600;
}

.header p {
  color: #6b7280;
  font-size: 16px;
  margin: 0;
}

.auth-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.auth-card {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  border: 1px solid #e5e7eb;
}

.auth-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.card-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.title-icon {
  margin-right: 8px;
  font-size: 20px;
  color: #1890ff;
}

.extra-text {
  color: #6b7280;
  font-size: 14px;
}

.auth-content {
  padding: 8px 0;
  cursor: pointer;
}

.option-list {
  margin-bottom: 24px;
}

.option-item {
  display: flex;
  align-items: flex-start;
  padding: 16px;
  background: #f8fafc;
  border-radius: 8px;
  margin-bottom: 12px;
  border: 1px solid #e2e8f0;
}

.option-item:last-child {
  margin-bottom: 0;
}

.option-item.disabled {
  background: #f9fafb;
  border-color: #f3f4f6;
}

.option-icon {
  margin-right: 12px;
  font-size: 20px;
  margin-top: 2px;
  flex-shrink: 0;
}

.option-item:not(.disabled) .option-icon {
  color: #10b981;
}

.option-item.disabled .option-icon {
  color: #9ca3af;
}

.option-info {
  flex: 1;
}

.option-title {
  font-weight: 500;
  color: #374151;
  margin-bottom: 4px;
}

.option-item.disabled .option-title {
  color: #9ca3af;
}

.option-desc {
  font-size: 13px;
  color: #6b7280;
}

.option-item.disabled .option-desc {
  color: #9ca3af;
}

@media (max-width: 768px) {
  .real-name-auth-page {
    padding: 16px;
  }

  .header h1 {
    font-size: 24px;
  }

  .auth-container {
    gap: 16px;
  }

  .option-item {
    padding: 12px;
  }
}
</style>