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.
163 lines
3.2 KiB
163 lines
3.2 KiB
<template>
|
|
<view>
|
|
<view class="file-title">
|
|
附件列表：
|
|
</view>
|
|
<view class="file-box" v-for="(item,index) in list" :key="index">
|
|
<view class="file-left">
|
|
<text>{{item.fileName}}</text>
|
|
</view>
|
|
<view class="file-right">
|
|
<button class="file-btn" @click="downFile(item.fileName,item.visitLocation)">预览</button>
|
|
</view>
|
|
</view>
|
|
<view v-if="imgSrc != ''" class="img-box-box" @click="changeShow">
|
|
<view class="img-box">
|
|
<image class="img-img" :src="imgSrc"></image>
|
|
<button class="img-btn" @click="changeShow">确定</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { queryFile } from 'api/queryFile'
|
|
|
|
export default {
|
|
onShareAppMessage(res) {
|
|
if (res.from === 'button') {// 来自页面内分享按钮
|
|
console.log(res.target)
|
|
}
|
|
return {
|
|
title: '',
|
|
path: '/pages/DownFile/DownFile'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
list:[],
|
|
imgSrc:''
|
|
}
|
|
},
|
|
async onLoad(options) {
|
|
const that = this
|
|
try{
|
|
const params={
|
|
param:{
|
|
"demandId":options.id
|
|
}
|
|
}
|
|
const data = await queryFile(params)
|
|
that.list = data
|
|
console.log(that.list)
|
|
}catch(e){
|
|
//TODO handle the exception
|
|
console.log(e)
|
|
}
|
|
},
|
|
methods: {
|
|
downFile(Name,Path){
|
|
const that = this
|
|
// console.log(Name.split('.')[Name.split('.').length-1])
|
|
var arr = []
|
|
arr = Name.split('.')
|
|
var lastName = arr[arr.length-1]
|
|
console.log(lastName)
|
|
if(lastName == 'jpg'|| lastName == 'png'|| lastName == 'jpeg'|| lastName == 'gif'|| lastName == 'svg'){
|
|
console.log(Name)
|
|
that.imgSrc = Path
|
|
}else{
|
|
uni.downloadFile({
|
|
url: Path, //服务器文件路径 + 文件名
|
|
success(res) {
|
|
const lastPath = res.tempFilePath //请求路径成功返回后的暂时缓存路径
|
|
uni.openDocument({
|
|
filePath: lastPath, //暂时缓存地址
|
|
fileType: lastName, //文件后缀名
|
|
success: function (res) {
|
|
console.log('打开文档成功')
|
|
console.log(res)
|
|
},
|
|
fail:function(err){
|
|
console.log(err)
|
|
}
|
|
});
|
|
},
|
|
fail(err){
|
|
console.log(err)
|
|
}
|
|
})
|
|
}
|
|
},
|
|
changeShow(){
|
|
const that = this
|
|
that.imgSrc = ''
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.file-title{
|
|
text-align: center;
|
|
margin: 20px 0;
|
|
font-size: 24px;
|
|
}
|
|
.file-box{
|
|
border: 1px solid #ccc;
|
|
width: 700upx;
|
|
margin: 0 25upx;
|
|
position: relative;
|
|
}
|
|
.file-left{
|
|
text-align: left;
|
|
width: 86%;
|
|
padding: 10px 0 10px 10px;
|
|
border-right: 1px solid #ccc;
|
|
}
|
|
.file-right{
|
|
text-align: center;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
margin-top: -13px;
|
|
width: 14%;
|
|
height: 26px;
|
|
line-height: 26px;
|
|
}
|
|
.file-btn{
|
|
height: 26px;
|
|
font-size: 14px;
|
|
line-height: 26px;
|
|
padding: 0 !important;
|
|
color: $blue;
|
|
}
|
|
.img-box-box{
|
|
position: fixed;
|
|
bottom: 0;
|
|
height: 100%;
|
|
width: 750upx;
|
|
background-color: rgba($color: #000000, $alpha: 0.5);
|
|
}
|
|
.img-box{
|
|
position: absolute;
|
|
left: 75upx;
|
|
width: 600upx;
|
|
height: 700upx;
|
|
padding: 40upx;
|
|
background-color: $white;
|
|
top: 150upx;
|
|
text-align: center;
|
|
}
|
|
.img-img{
|
|
max-width: 520upx;
|
|
max-height: 560upx;
|
|
}
|
|
.img-btn{
|
|
position: absolute;
|
|
bottom: 40upx;
|
|
height: 60upx;
|
|
line-height: 60upx;
|
|
width: 520upx;
|
|
}
|
|
</style>
|
|
|