huimv-baqing/ruoyi-ui-app/package-a/file-preview/index.vue

<template>
  <web-view v-if="previewUrl" class="file-preview-web" :src="previewUrl" />
  <view v-else class="file-preview-empty">
    <text class="text-body">{{ $t('filePreviewPage.empty') }}</text>
  </view>
</template>

<script>
import tabPage from '@/mixins/tabPage'

export default {
  mixins: [tabPage],
  data() {
    return {
      navTitleKey: 'filePreviewPage.navTitle',
      previewUrl: ''
    }
  },
  onLoad(query) {
    if (query.url) {
      try {
        this.previewUrl = decodeURIComponent(query.url)
      } catch (e) {
        this.previewUrl = query.url
      }
    }
    if (query.title) {
      try {
        const title = decodeURIComponent(query.title)
        uni.setNavigationBarTitle({ title })
      } catch (e) {
        /* noop */
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/morandi.scss';

.file-preview-web {
  width: 100%;
  height: 100vh;
}

.file-preview-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 48rpx;
  box-sizing: border-box;
  background: $morandi-bg-page;
}

.file-preview-empty .text-body {
  color: $morandi-text-muted;
  text-align: center;
}
</style>