hcp_h5/src/views/register/index.vue

<!-- src/pages/RegisterIframePage.vue -->
<template>
  <div class="register-page">
    <van-nav-bar
      fixed
      safe-area-inset-top
      placeholder
      :title="title"
      left-arrow
      @click-left="onBack"
    />
    <div class="iframe-wrap">
      <div v-if="loading" class="loading">
        <van-loading size="24px" type="spinner" />
        <span class="loading-text">加载中…</span>
      </div>
      <iframe
        v-if="realSrc"
        class="iframe"
        :src="realSrc"
        frameborder="0"
        @load="onLoad"
        scrolling="none"
        allow="fullscreen; geolocation; microphone; camera; clipboard-read; clipboard-write"
        referrerpolicy="strict-origin-when-cross-origin"
      ></iframe>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showFailToast } from 'vant'
import { REGISTER_URL_KEY } from '@/constants/storage'

interface Props {
  title?: string
  src?: string
}
const props = defineProps<Props>()
const title = props.title ?? '注册'

const router = useRouter()
const loading = ref(true)
const realSrc = ref('')

const onBack = () => {
  if (history.length > 1) router.back()
  else router.replace({ name: 'Login' })
}
const onLoad = () => {
  loading.value = false
}

onMounted(() => {
  if (props.src) {
    realSrc.value = props.src
    return
  }
  const cached = sessionStorage.getItem(REGISTER_URL_KEY)
  if (cached) {
    realSrc.value = cached
    sessionStorage.removeItem(REGISTER_URL_KEY) // 一次性
  } else {
    showFailToast('未检测到注册链接，已返回登录页')
    router.back()
  }
})
</script>

<style lang="scss" scoped>
/* 固定导航高度（若你的 NavBar 不是 46px，这里改数值即可） */
.register-page {
  --nav-height: 46px;
  height: 100dvh; /* 占满视口高度 */
  overflow: hidden; /* 外层不出现滚动条 */
  background: #fff;
}

/* 从 NavBar 底部贴到屏幕底部，永远填满剩余空间 */
.iframe-wrap {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden; /* 禁止外层滚动 */
}

/* iframe 充满容器；用 100%，避免 100vw 引入横向滚动条 */
.iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 简易加载遮罩 */
.loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.85);

  .loading-text {
    margin-top: 8px;
    font-size: 12px;
    color: #999;
  }
}
</style>