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

<template>
  <div class="face-recognition">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="自然人开票"
      left-arrow
      @click-left="onClickLeft"
      fixed
      placeholder
      safe-area-inset-top
    />

    <!-- 步骤卡片 -->
    <div class="card">
      <StepProgress :activeStep="2" />
    </div>

    <!-- 加载状态 -->
    <div class="loading-box">
      <van-loading size="24px" color="#ff8036" />
      <div class="loading-text">正在获取认证信息，请稍候…</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import StepProgress from '@/components/StepProgress.vue'
import { getFaceAuthInfoApi } from '@/services/modules/faceRecognition'
import { onBeforeMount } from 'vue'
import { useUserStore } from '@/stores/modules/user'

const userStore = useUserStore()

const getConfirmInvoiceInfo = async () => {
  const callbackUrl = window.location.origin + '/h5/pedding-face-recognition'
  const params = {
    pushRecordId: userStore.pushRecordId,
    callbackUrl,
  }

  const res = await getFaceAuthInfoApi(params)
  if (res.code === 0 && res.data?.faceAuthUrl) {
    console.log('faceAuthUrl:', res.data.faceAuthUrl)
    // 直接跳转进行人脸识别
    window.location.href = res.data.faceAuthUrl
  } else {
    console.warn('获取认证链接失败', res)
  }
}

const onClickLeft = () => history.back()

onBeforeMount(() => {
  getConfirmInvoiceInfo()
})
</script>

<style scoped lang="scss">
.face-recognition {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #fff;
  padding: 4vw 3.5vw;
  box-sizing: border-box;
}

.van-nav-bar {
  background-color: #fff;
  border-bottom: 1px solid #f2f2f2;
  font-weight: 600;
}

:deep(.van-icon-arrow-left) {
  color: #ff8036;
  font-size: 28px;
}

.card {
  background: #fff;
  border-radius: 14px;
  margin-bottom: 4vw;
  padding: 4vw 3.5vw;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
}

.loading-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.loading-text {
  margin-top: 16px;
  color: #666;
  font-size: 14px;
}
</style>