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>
  </div>
</template>

<script setup lang="ts">
import { getFaceAuthResultApi } from '@/services/modules/faceRecognition'
import type { PushRecordIdRequest } from '@/services/modules/invoiceInformation/type.d.ts'
import { 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 { submitInvoiceApply } = useInvoice()

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

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

// 获取认证结果
const getFaceAuthResult = async () => {
  try {
    const res = await getFaceAuthResultApi(params)
    if (res.code === 0 && res.data?.success) {
      const rzzt = res.data.rzzt
      // 已认证或无需认证提交跳转
      if (rzzt === 'NO_REQUIRED_AUTHENTICATION') {
        submitInvoiceApply()
      } else {
        // 认证失败重定向到发票信息页面
        router.replace({
          path: '/invoice-information',
        })
      }
    } else {
      showToast('认证失败，请刷新页面后重试')
    }
  } catch (err) {
    console.error('获取认证结果失败', err)
    showToast('网络错误，请稍后重试')
  }
}

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; /* 预留固定导航空间 */
}
</style>