gypsy-crm-frontend-vu/pages/common/webview.vue

<template>
  <cwg-page-wrapper class="webview-page" :pageTitle="pageTitle">
    <view class="page-container">
      <!-- WebView 内容区（自动占满剩余空间，不遮挡导航栏） -->
      <view class="web-view-container">
        <web-view :src="fileUrl" class="web-view" />
      </view>
    </view>
  </cwg-page-wrapper>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import Config from '@/config/index'
const { Host80 } = Config
import getWebBase from '@/utils/webBase'
const webBase = getWebBase()
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const fileUrl = ref('')
const title = ref('')
const pageTitle = computed(() => t(title.value))
const fileType = ref('')
// 获取文件后缀
const getFileExt = (name) => {
  if (!name) return ''
  return name.split('.').pop()?.toUpperCase()
}
onLoad((options) => {
  title.value = options.title || '文件预览'
  fileType.value = getFileExt(options.url)
  // PDF 跳转到你的预览页
  if (fileType.value === 'PDF') {
    fileUrl.value = `${Host80}${webBase}pdf/index.html?pdf=${encodeURIComponent(options.url)}`
  } else {
    fileUrl.value = options.url || ''
  }
})
</script>

<style scoped lang="scss">
@import "@/uni.scss";

.webview-page {
  :deep(.content-wrapper) {
    padding: 0 !important;
  }

  :deep(.page-content) {
    height: calc(100vh - 112px);
  }

  :deep(.fixed) {
    height: 112px;
  }
}

/* 页面根容器：弹性布局，完美分配导航栏和web-view高度 */
.page-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
}

/* 顶部导航栏：正确适配安全区，高度计算正确 */
.web-view-container {
  flex: 1;
  width: 100%;
  overflow: hidden;
}

.web-view {
  width: 100%;
  height: 100%;
}
</style>