切换人脸认证信息、走三方跳转

src/views/face-recognition/index.vue

@@ -15,17 +15,10 @@
       <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 class="loading-box">
+      <van-loading size="24px" color="#ff8036" />
+      <div class="loading-text">正在获取认证信息，请稍候…</div>
     </div>
   </div>
 </template>
@@ -33,22 +26,23 @@
 <script setup lang="ts">
 import StepProgress from '@/components/StepProgress.vue'
 import { getFaceAuthInfoApi } from '@/services/modules/faceRecognition'
-import { ref, onBeforeMount } from 'vue'
+import { 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 = {
+  const params = {
     pushRecordId: userStore.pushRecordId,
-    callbackUrl: callbackUrl,
+    callbackUrl,
   }
-  const res = await getFaceAuthInfoApi(obj)
+
+  const res = await getFaceAuthInfoApi(params)
   if (res.code === 0 && res.data?.faceAuthUrl) {
-    etsUrl.value = res.data.faceAuthUrl
+    console.log('faceAuthUrl:', res.data.faceAuthUrl)
+    // 直接跳转进行人脸识别
+    window.location.href = res.data.faceAuthUrl
   } else {
     console.warn('获取认证链接失败', res)
   }
@@ -67,13 +61,8 @@ onBeforeMount(() => {
   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 {
@@ -82,13 +71,11 @@ onBeforeMount(() => {
   font-weight: 600;
 }
 
-/* 修改左侧返回图标颜色与大小 */
 :deep(.van-icon-arrow-left) {
   color: #ff8036;
   font-size: 28px;
 }
 
-/* 顶部步骤进度卡片 */
 .card {
   background: #fff;
   border-radius: 14px;
@@ -100,59 +87,19 @@ onBeforeMount(() => {
   flex-shrink: 0;
 }
 
-/* iframe 外层 */
-.iframe-page {
+.loading-box {
   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; /* 全屏宽 */
+  display: flex;
+  flex-direction: column;
   height: 100%;
-  border: none;
-  display: block;
-  overflow: hidden;
-
-  /* 禁止横向滚动条 */
-  overflow-x: hidden;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch; /* 移动端平滑滚动 */
+  justify-content: center;
+  align-items: center;
+  text-align: center;
 }
 
-/* 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;
+.loading-text {
+  margin-top: 16px;
+  color: #666;
+  font-size: 14px;
 }
 </style>