dev/dcp-web-gate/src_old/views/cooperationExchange/CooperationActiceResults.vue

<template>
    <div style="padding:20px 20px">
        <div class="result" v-for="(item,index) in countryList">
                <div style="height:20px">
                    <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt="" style="height: 100%;vertical-align: middle;">
                    <span style="margin-left: 10px;font-weight: 700;color: #000;font-size: 18px;">PPT</span>
                </div>
                <div class="content">
                    <i></i>
                    <div>
                        <img v-if="state==1" :src="'./api/file/pub/${item.attachmentSavePath}'"  alt="" style="width: 20%;height: 20%;" />
                        <img v-if="state==2" src="@/assets/img/cooperationExchange/txt.png"  alt="" class="Messicon" />
                        <img v-if="state==3" src="@/assets/img/cooperationExchange/excel.png"  alt="" class="Messicon" />
                        <img v-if="state==6" src="@/assets/img/cooperationExchange/powerpoint.png"  alt="" class="Messicon"/>
                        <img v-if="state==5" src="@/assets/img/cooperationExchange/pdf.png"  alt="" class="Messicon"/>
                        <img v-if="state==4" src="@/assets/img/cooperationExchange/word.png"  alt="" class="Messicon"/>
                        <p style="display: inline-block;margin-right:150px">{{item.attachmentName}}</p>
                       
                            <a class="func example" @click="downloads(item.attachmentSavePath,item.attachmentName)">{{$t('common.download')}}</a>
                            <a class="func" @click="download(item.attachmentSavePath)">{{$t('common.preview')}}</a> 
                      
                        
                    </div>
                </div>
             
        </div>   
  
    </div>
    
</template>
<script>
    import {sysAttachmentInfos} from '@/api/cooperation/baseCooperationUnit'
export default {
    name:"CooperationActiceResults",
    props:["id"],
    data () {
      return {
          i:0,
          countryList:[],
          MessType:null,
          state:null,
      }
    },
    mounted(){
      this.getList();
   },
   methods:{
    getList(){
        let list = {
            attachmentBusinessId:this.id,
            attachmentBusinessType:'activityInfo'
        };
        sysAttachmentInfos(list).then(res=>{
            this.countryList=res.data.attachmentInfos;
            //进行上传文件的判断
            let messName = this.countryList[0].attachmentName;
            let suffix='';
            let result='';
            try{
                let splitArr = this.countryList[0].attachmentName.split('.');
               suffix =  splitArr[splitArr.length-1];

            }catch(err){
                suffix='';
            }
            console.log(suffix);
            const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
            // 进行图片匹配
            result = imglist.find(item => item === suffix);
            for(let i=0;i<imglist.length;i++){
                if(suffix === imglist[i]){
                    this.state=1;
                }
            }
            // 匹配txt
            const txtlist = ['txt'];
            result = txtlist.find(item => item === suffix);
            for(let i=0;i<txtlist.length;i++){
                if(suffix === txtlist[i]){
                    this.state=2;
                }
            }
            // 匹配excel
            const excelist = ['xls', 'xlsx'];
            result = excelist.find(item => item === suffix);
            for(let i=0;i<excelist.length;i++){
                if(suffix === excelist[i]){
                    this.state=3;
                }
            }
            // 匹配 word
            const wordlist = ['doc', 'docx'];
            result = wordlist.find(item => item === suffix);
            for(let i=0;i<wordlist.length;i++){
                if(suffix === wordlist[i]){
                    this.state=4;
                }
            }
            // 匹配 pdf
            const pdflist = ['pdf'];
            result = pdflist.find(item => item === suffix);
            for(let i=0;i<pdflist.length;i++){
                if(suffix === pdflist[i]){
                    this.state=5;
                }
            }
             // 匹配 ppt
             const pptlist = ['ppt', 'pptx'];
            result = pptlist.find(item => item === suffix);
            for(let i=0;i<pptlist.length;i++){
                if(suffix === pptlist[i]){
                    this.state=6;
                }
            }
            // let Messname = this.countruList[index].attachmentName;
            // this.MessType = Messname

        })
    },
    typemess(){
        console.log(this.MessType)
    },
    downloads(path,fileName){
        const link = document.createElement('a');
        link.href = "api/file/pub/" + path;
        link.download = fileName; //下载的文件名
        link.click();
        
    },
    download(url){
        let a = document.createElement('a');
        a.href ="api/file/pub/" + url;
        a.click();
    },
  
   }
}
</script>
<style scoped>
.result{
    height: 100px;
    width: 100%;
    margin-top: 20px;
}
.content{
    height: 80px;
    vertical-align: center;
    margin-top: 20px;
    padding:0 30px;
    cursor: pointer;
    width: 100%;
}
.func{
    color: rgb(10, 15, 255);
    margin-right: 20px;
    cursor: pointer;
    float: right;
    margin-right: 100px;
    line-height: 50px;
}
.Messicon{
 height: 30px;
 margin-top: 12px;
 float: left;
 margin-right: 10px;
}
</style>