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>

    <!-- iframe 容器 -->
    <div class="iframe-page">
      <div class="iframe-mask"></div>
      <iframe
        :src="etsUrl"
        frameborder="0"
        class="iframe"
        allowfullscreen
        scrolling="no"
        ref="iframeRef"
      ></iframe>
    </div>
  </div>
</template>

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

const userStore = useUserStore()
const etsUrl = ref('')

// 获取认证链接
const getConfirmInvoiceInfo = async () => {
  const callbackUrl = window.location.origin + '/h5/pedding-face-recognition'
  const obj = {
    pushRecordId: userStore.pushRecordId,
    callbackUrl: callbackUrl,
  }
  const res = await getFaceAuthInfoApi(obj)
  if (res.code === 0 && res.data?.faceAuthUrl) {
    etsUrl.value = 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;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei',
    sans-serif;
  font-size: 3.8vw;
  padding: 4vw 3.5vw;
  box-sizing: border-box;
  overflow: hidden;
}

.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;
}

/* iframe 外层 */
.iframe-page {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  /* 用负边距抵消父 padding，使 iframe 全宽 */
  margin-left: -3.5vw;
  margin-right: -3.5vw;
  margin-bottom: -4vw; /* 让底部贴合视口 */
  border-radius: 0;
  position: relative;
}

/* 遮罩层 */
.iframe-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3vw; // 根据实际导航高度调整
  background: #fff; // 或与你页面背景一致的颜色
  z-index: 999;
  pointer-events: none; // 保证不影响 iframe 内部点击
}
/* iframe 内容 */
.iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw; /* 全屏宽 */
  height: 100%;
  border: none;
  display: block;
  overflow: hidden;

  /* 禁止横向滚动条 */
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* 移动端平滑滚动 */
}

/* iframe 外层滚动条美化（仅当内部非跨域时生效） */
.iframe::-webkit-scrollbar {
  width: 6px;
}
.iframe::-webkit-scrollbar-thumb {
  background: rgba(255, 122, 0, 0.4);
  border-radius: 4px;
}
.iframe::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 122, 0, 0.7);
}
.iframe::-webkit-scrollbar-track {
  background: transparent;
}
</style>