<template>
<view class="approval-notice">
<block v-for="(imgItem, idx) in drivingLicense" :key="idx">
//如果是非图片，那就走pdf预览
<view class="pdf-item" v-if="Object.keys(thumbnail).includes(getFileType(imgItem))" @click="handlePreview(idx,drivingLicense)">
<image src="../static/pdf-icon.png" mode="aspectFill"></image>
<text class="text">{
{
getFileName(imgItem)}}</text>
</view>
//如果是图片，那就走图片预览
<view class="img-item" v-else @click="handlePreview(idx,drivingLicense)">
<image :src="imgItem" mode="aspectFill"></image>
<text class="text">{
{
getFileName(imgItem)}}</text>
</view>
</block>
</view>
</template>
data() {
return {
//数据返回的文件列表（↓↓包含以下格式↓↓）
drivingLicense:['https://www.baidu.com/5cf22168b26b0_20230720114248A003.jpg','https://www.baidu.com/5cf22168b26b0_20230720114278A003.jpg'],
fileTypeLimit:['png', 'jpg', 'jpeg', 'pdf'],//仅支持这些格式
thumbnail:{
pdf: '',
apk: '',
mp4: ''
}
}
}
methods: {
//获取文件后缀名
getFileType(fileName, isUserType = false) {
if (!isUserType) {
return fileName.split('.').pop().toLowerCase()
} else {
return fileName.split('/').pop().toLowerCase()
}
},
//获取文件名
getFileName(url){
return url.split('/').pop();
},
//预览
handlePreview(index,list){
const fileType = this.getFileType(list[index])
//如果是不支持的文件类型或者是需要代替的缩略图的类型，则新标签页打开显示
if (Object.keys(this.thumbnail).includes(fileType) || !this.fileTypeLimit.includes(fileType)) {
uni.navigateTo({
//跳转到pdf.vue页面
url:"/packageProjectList/pdf/pdf?url="+list[index]
})
}else{
//图片预览已经在其他文章中有例子
this.$common.previewImage(index,list)
}
},
}
pdf.vue
<template>
<view>
<web-view :src="webViewSrc"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
webViewSrc:''
}
},
onLoad(option) {
this.webViewSrc = option.url;
},
methods: {
}
}
</script>
<style>
</style>