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.
132 lines
2.4 KiB
132 lines
2.4 KiB
3 years ago
|
<template>
|
||
|
|
<div>
|
||
|
|
<div class="div-file"
|
||
|
|
v-for="(item,index) in fileList"
|
||
|
|
:key="index">
|
||
|
|
<img v-if="item.type==='xls'||item.type==='xlsx'"
|
||
|
|
src="@/assets/img/excel.png"
|
||
|
|
class="image">
|
||
|
|
<img v-else-if="item.type==='pdf'"
|
||
|
|
src="@/assets/img/pdf.png"
|
||
|
|
class="image">
|
||
|
|
<img v-else-if="item.type==='doc'||item.type==='docx'"
|
||
|
|
src="@/assets/img/word.png"
|
||
|
|
class="image">
|
||
|
|
|
||
|
|
<img v-else-if="item.type==='mp4'||item.type==='wma'||item.type==='m4a'||item.type==='mp3'"
|
||
|
|
src="@/assets/img/video.png"
|
||
|
|
class="image">
|
||
|
|
<img v-else
|
||
|
|
src="@/assets/img/image.png"
|
||
|
|
class="image">
|
||
|
|
<div @click="watchFile(item.url)"
|
||
|
|
class="name">{{item.name}}</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { mapGetters } from 'vuex'
|
||
|
|
import { Loading } from 'element-ui' // 引入Loading服务
|
||
|
|
import { requestPost, requestGet } from '@/js/dai/request'
|
||
|
|
|
||
|
|
|
||
|
|
let loading // 加载动画
|
||
|
|
export default {
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
// const formatarray = ['jpg', 'png', 'jpeg', 'bmp', 'mp4', 'wma', 'm4a', 'mp3', 'doc', 'docx', 'xls', 'xlsx', 'pdf']
|
||
|
|
btnDisable: false,
|
||
|
|
|
||
|
|
formData: {},
|
||
|
|
|
||
|
|
fileList: [],
|
||
|
|
uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadvariedfile',
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
watch: {
|
||
|
|
|
||
|
|
},
|
||
|
|
components: {},
|
||
|
|
async mounted () {
|
||
|
|
this.startLoading()
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
this.endLoading()
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
|
||
|
|
watchFile (src) {
|
||
|
|
if (src) {
|
||
|
|
window.open(src);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
handleCancle () {
|
||
|
|
this.resetData()
|
||
|
|
this.$emit('handleClose')
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// 开启加载动画
|
||
|
|
startLoading () {
|
||
|
|
loading = Loading.service({
|
||
|
|
lock: true, // 是否锁定
|
||
|
|
text: '正在加载……', // 加载中需要显示的文字
|
||
|
|
background: 'rgba(0,0,0,.7)' // 背景颜色
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 结束加载动画
|
||
|
|
endLoading () {
|
||
|
|
// clearTimeout(timer);
|
||
|
|
if (loading) {
|
||
|
|
loading.close()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
|
||
|
|
fileList: {
|
||
|
|
type: String,
|
||
|
|
default: () => []
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped >
|
||
|
|
.div-file {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding-bottom: 10px;
|
||
|
|
|
||
|
|
.image {
|
||
|
|
width: 25px;
|
||
|
|
height: 25px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.name {
|
||
|
|
margin-left: 10px;
|
||
|
|
color: rgb(0, 149, 255);
|
||
|
|
border-bottom: 1px solid rgb(0, 149, 255);
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|