hcp_h5/src/views/pedding-face-recognition/index.vue

<template>
  <div class="loading-page" role="status" aria-live="polite" aria-label="页面加载中">
    <!-- 顶部导航 -->
    <van-nav-bar title="加载中" fixed :border="false" safe-area-inset-top class="nav" />

    <!-- 中心区域（带淡淡的高光背景，不是卡片） -->
    <div class="loading-body">
      <div>
        <van-loading type="circular" vertical :size="loadingSize" :color="loadingColor">
          加载中…
        </van-loading>
      </div>
    </div>

    <!-- 低证等级弹窗 -->
    <van-dialog
      v-model:show="lowCertLevelDialog"
      title="人脸核验失败"
      confirmButtonText="我知道啦"
      @confirm="lowCertLevelConfirm"
    >
      <div class="dialog-content">
        <div class="dialog-text">
          抱歉，您的人脸核验失败，请重新点击 "下一步”提交缴税信息并完成人脸核验。
        </div>
        <div class="dialog-text">
          为提升人脸核验成功几率，建议您提升电子税务局的账号安全等级，可登录至电子税务局提升账号安全等级。
        </div>
        <div class="dialog-btn" @click="handleSecurityLevelGuideClick">
          点击了解提升安全等级操作指引
        </div>
      </div>
    </van-dialog>

    <!-- 安全等级操作指引 -->
    <van-dialog
      v-model:show="securityLevelGuideDialog"
      width="90%"
      :closeOnClickOverlay="true"
      className="security-level-guide-dialog"
      @confirm="securityLevelGuideDialog = false"
    >
      <div class="security-level-guide-body">
        <img src="@/assets/images/securityLevelGuide/1.webp" class="guide-image" />
        <img src="@/assets/images/securityLevelGuide/2.webp" class="guide-image" />
        <img src="@/assets/images/securityLevelGuide/3.webp" class="guide-image" />
        <img src="@/assets/images/securityLevelGuide/4.webp" class="guide-image" />
        <img src="@/assets/images/securityLevelGuide/5.webp" class="guide-image" />
        <img src="@/assets/images/securityLevelGuide/6.webp" class="guide-image" />
      </div>
    </van-dialog>
  </div>
</template>

<script setup lang="ts">
import { getFaceAuthResultApi } from '@/services/modules/faceRecognition'
import type { PushRecordIdRequest } from '@/services/modules/invoiceInformation/type.d.ts'
import { ref, reactive, onMounted } from 'vue'
import { useUserStore } from '@/stores/modules/user'
import { showToast } from 'vant'
import { useInvoice } from '@/hooks/useInvoice'
import { useRouter } from 'vue-router'
const userStore = useUserStore()

const router = useRouter()

// --- 初始化 Hooks ---
const { submitInvoiceForce } = useInvoice()

const loadingSize = '10vw'
const loadingColor = '#1677ff'

const params = reactive<PushRecordIdRequest>({
  pushRecordId: userStore.pushRecordId,
})

const lowCertLevelDialog = ref(false)
// 获取认证结果
const getFaceAuthResult = async () => {
  try {
    const res = await getFaceAuthResultApi(params)

    if (res.code === 0 && res.data.lowCertLevel) {
      lowCertLevelDialog.value = true
      return
    }

    if (res.code === 0 && res.data?.success) {
      const rzzt = res.data.rzzt
      // 已认证或无需认证提交跳转
      if (rzzt === 'NO_REQUIRED_AUTHENTICATION') {
        submitInvoiceForce()
        return
      }
    } else {
      showToast('扫脸认证失败，请重试')
    }
  } catch (err) {
    console.error('获取认证结果失败', err)
    showToast('网络错误，请稍后重试')
  }

  setTimeout(() => {
    router.replace({
      path: '/invoice-information',
    })
  }, 1800)
}

const lowCertLevelConfirm = () => {
  router.replace('/invoice-information')
}

const securityLevelGuideDialog = ref(false)
const handleSecurityLevelGuideClick = () => {
  securityLevelGuideDialog.value = true
}

onMounted(() => {
  getFaceAuthResult()
})
</script>

<style scoped>
/* 基于 375 设计稿的 vw 适配 */
html {
  font-size: calc(100vw / 3.75);
}

.loading-page {
  width: 100vw;
  height: 100vh;
  background: #f6f7fb; /* 整页浅灰底，非卡片 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 顶部导航固定 */
.nav {
  position: fixed;
  top: 0;
  width: 100vw;
}

/* 居中容器 */
.loading-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 14vw; /* 预留固定导航空间 */
}
.dialog-content {
  padding: 12px;
  .dialog-text {
    font-size: 14px;
    line-height: 22px;
    color: #333;
    margin-bottom: 10px;
    font-weight: 400;
  }
  .dialog-btn {
    text-align: center;
    font-weight: 600;
    margin: 18px 0;
    color: #0072f8;
  }
}
:deep(.security-level-guide-dialog) {
  top: 50%;
  height: 90vh;

  .security-level-guide-body {
    height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px;

    .guide-image {
      width: 100%;
      height: auto;
      display: block;
    }
  }
}
</style>