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.
125 lines
2.7 KiB
125 lines
2.7 KiB
<template>
|
|
<div class="file-box">
|
|
<div class="file-item" v-for="item,index in files" :key="item.id">
|
|
<div class="item-left">
|
|
<img src="@/assets/images/home/world.png" alt="">
|
|
<div @click="downloadFile(index)">{{ item.name }}{{ item.size }}</div>
|
|
</div>
|
|
<div class="item-right">
|
|
<img src="@/assets/images/Transaction/download.png" alt="" @click="downloadFile(index)">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
imageDate:[
|
|
{
|
|
url:require('@/assets/images/home/excel.png')
|
|
},
|
|
{
|
|
url:require('@/assets/images/home/img.png')
|
|
},
|
|
{
|
|
url:require('@/assets/images/home/world.png')
|
|
},
|
|
{
|
|
url:require('@/assets/images/home/pdf.png')
|
|
},
|
|
],
|
|
throttle:true,
|
|
}
|
|
},
|
|
props:{
|
|
files:{
|
|
type:Array,
|
|
default:function(){
|
|
return []
|
|
},
|
|
}
|
|
},
|
|
methods:{
|
|
//图标
|
|
getImg(){
|
|
let res = this.fileName.split('.')
|
|
let msg =res[res.length-1]
|
|
console.log(msg);
|
|
if(msg == 'doc' || msg == 'docx'){
|
|
return this.imageDate[2].url
|
|
}else if(msg == 'xlsx' || msg == 'xls'){
|
|
return this.imageDate[0].url
|
|
}else if(msg == 'pdf'){
|
|
return this.imageDate[3].url
|
|
}else if(msg == 'png' || msg == 'jpg' ||msg == 'jpeg'){
|
|
return this.imageDate[1].url
|
|
}
|
|
},
|
|
downloadFile(index){
|
|
// if(this.throttle) {
|
|
// this.throttle = false;
|
|
// this.download(
|
|
// this.files.split(",")[1].split("/").splice(4).join("/"),
|
|
// this.fileName
|
|
// );
|
|
// setTimeout(()=>{
|
|
// this.throttle = true;
|
|
// },1500)
|
|
// }else {
|
|
// this.$message({
|
|
// message: "下载中请稍后",
|
|
// type: "warning",
|
|
// });
|
|
// }
|
|
this.$message({
|
|
message: "下载中请稍后",
|
|
type: "warning",
|
|
});
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
@import "@/assets/styles/utils.scss";
|
|
.file-box {
|
|
display: grid;
|
|
grid-column: 1fr;
|
|
grid-row-gap: vh(10);
|
|
|
|
.file-item {
|
|
padding: vh(9) vw(10);
|
|
width: 100%;
|
|
background-color: #F8F9FA;
|
|
border-radius: vw(2);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.item-left {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
img {
|
|
width: vw(21);
|
|
// height: vw(23);
|
|
margin-right: vw(10);
|
|
}
|
|
div {
|
|
font-size: vb(16);
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #6A6C6F;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.item-right {
|
|
img {
|
|
width: vw(19);
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|