You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
3.0 KiB
91 lines
3.0 KiB
<template> |
|
<view class="flex gap-8 wrap"> |
|
<view v-for="(file, index) in files" class="col-8 file-item"> |
|
<view class="file flex wrap flex-col items-center" v-if="getFileType(file.fileName) !== 'img'"> |
|
<view class="mt-10"> |
|
<image :src="`/static/icon/${ getFileType(file.fileName) }.png`" mode="widthFix" style="width: 78rpx"></image> |
|
</view> |
|
<view class="uni-text-nowrap filename">{{ file.fileName }}</view> |
|
</view> |
|
<net-image :filepath="file.filePath" v-else class="img" /> |
|
</view> |
|
</view> |
|
|
|
<!-- <view class="file-preview-wrapper" v-if="previewFlag" @tap="previewFlag = false" > |
|
<view class="file-preview-container"> |
|
<template v-if="activeFile.type.indexOf('image') > -1"> |
|
<image :src="imgSrc" mode="widthFix"></image> |
|
</template> |
|
<template v-else-if="activeFile.type.indexOf('audio') > -1"> |
|
<view class="audio-container flex column"> |
|
<view class="audio-title mb-20">{{ activeFile.orgiinFilename }}</view> |
|
<view @tap.stop="playFlag = !playFlag" class="flex center"> |
|
<fui-icon name="suspend" color="#fff" :size="120" v-if="!playFlag"></fui-icon> |
|
<fui-icon name="play" color="#fff" :size="120" v-else></fui-icon> |
|
</view> |
|
</view> |
|
</template> |
|
<template v-else-if="activeFile.type.indexOf('video') > -1"> |
|
<video :src="videoSrc" controls @tap.stop style="width: 100vw; height: 60vh"></video> |
|
</template> |
|
<template v-else-if="activeFile.type.indexOf('word') > -1 || |
|
activeFile.type.indexOf('excel') > -1 || activeFile.type.indexOf('spreadsheetml.sheet') > -1"> |
|
<view class="docx-container"> |
|
<view class="docx-content"> |
|
<rich-text :nodes="htmlString"></rich-text> |
|
</view> |
|
</view> |
|
</template> |
|
<template v-else> |
|
<view class="unsupported flex column"> |
|
<view class="mb-20">{{ activeFile.orgiinFilename }}</view> |
|
<view class="text-center tips mb-20">暂不支持该文件格式的预览</view> |
|
</view> |
|
</template> |
|
</view> |
|
<view class="file-dot-container flex gap" v-if="files.length > 1"> |
|
<view v-for="(file, index) in files" class="dot" :active="files.indexOf(activeFile) === index"></view> |
|
</view> |
|
<view class="tools flex gap-6"> |
|
<view class="tool-btn" @tap.stop="download"> |
|
<fui-icon name="dropdown" color="#fff" :size="40"></fui-icon> |
|
</view> |
|
<template v-if="files.length > 1"> |
|
<view class="tool-btn" @tap.stop="prev"> |
|
<fui-icon name="arrowleft" color="#fff" :size="40"></fui-icon> |
|
</view> |
|
<view class="tool-btn" @tap.stop="next"> |
|
<fui-icon name="arrowright" color="#fff" :size="40"></fui-icon> |
|
</view> |
|
</template> |
|
</view> |
|
</view> --> |
|
</template> |
|
|
|
<script setup> |
|
import { ref, defineProps, defineEmits, onMounted } from 'vue'; |
|
import { getFileType } from '@/common/util'; |
|
|
|
defineProps({ |
|
files: { |
|
type: Array, |
|
default: [] |
|
} |
|
}) |
|
</script> |
|
|
|
<style lang="scss"> |
|
.file-item { |
|
width: 178rpx; |
|
height: 178rpx; |
|
background: #F3FAFF; |
|
overflow: hidden; |
|
.filename { |
|
font-size: 12px; |
|
} |
|
.img { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
</style> |