h5新增协议弹窗

src/components/base/PreviewFiles.vue

-<script setup lang="ts">
-const props = defineProps({
-  item: {
-    type: Object,
-    require: true
-  }
-})
-
-const isShowType: any = ref(1)
-// 判断用什么标签展示内容
-if (
-  props.item?.url?.indexOf('.pdf') !== -1 ||
-  props.item?.url?.indexOf('.txt') !== -1
-) {
-  isShowType.value = 2
-} else if (props.item?.url?.indexOf('.mp4') !== -1) {
-  isShowType.value = 3
-} else if (props.item?.url?.indexOf('.mp3') !== -1) {
-  isShowType.value = 4
-} else if (
-  props.item?.url?.indexOf('.png') !== -1 ||
-  props.item?.url?.indexOf('.jpg') !== -1 ||
-  props.item?.url?.indexOf('.jpeg') !== -1
-) {
-  isShowType.value = 5
-} else if (
-  props.item?.url?.indexOf('.rar') !== -1 ||
-  props.item?.url?.indexOf('.zip') !== -1
-) {
-  isShowType.value = 6
-}
-</script>
-
-<template>
-  <el-card>
-    <div class="max-w-h">
-      <iframe
-        v-if="isShowType === 1"
-        :src="`https://view.officeapps.live.com/op/view.aspx?src=${props.item?.url}`"
-      ></iframe>
-      <embed :src="props.item?.url" v-else-if="isShowType === 2" />
-      <video v-else-if="isShowType === 3" controls id="video">
-        <source :src="props.item?.url" />
-      </video>
-      <audio
-        v-else-if="isShowType === 4"
-        :src="props.item?.url"
-        controls
-      ></audio>
-      <img v-else-if="isShowType === 5" :src="props.item?.url" />
-      <div v-else-if="isShowType === 6" class="zip_con">
-        <a :href="props.item?.url" style="color: #aa1941">
-          <img
-            v-if="props.item?.url?.indexOf('.rar') !== -1"
-            src="https://webapp-pub.ezijing.com/center_resource/rar.png"
-            class="img_zip"
-          />
-
-          <img
-            v-else-if="props.item?.url?.indexOf('.zip') !== -1"
-            src="https://webapp-pub.ezijing.com/center_resource/zip.png"
-            class="img_zip"
-          />
-          {{ props.item?.name }}
-        </a>
-
-        <div class="zip_tips">
-          * 该文件格式暂不支持预览,可点击上方文件名下载
-        </div>
-      </div>
-    </div>
-  </el-card>
-</template>
-<style lang="scss" scoped>
-.max-w-h {
-  // max-width: 1200px;
-  width: 100%;
-  height: 600px;
-  margin: 0 auto;
-  display: flex;
-  justify-content: center;
-  iframe,
-  embed,
-  video {
-    width: 100%;
-    height: 100%;
-  }
-  .zip_con {
-    border: 1px solid #ccc;
-    width: 100%;
-    display: block;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-  }
-  .img_zip {
-    width: 100px;
-    height: 100px;
-    margin: auto;
-  }
-  .zip_tips {
-    font-size: 14px;
-    margin-top: 10px;
-  }
-  img {
-    width: 100%;
-    display: block;
-  }
-}
-</style>