dev/dcp-web-gate/src_old/views/conferenceServices/modelView/documents.vue

<template>
<div>
  <ul class="conference-material">
      <template v-for="(item, i) in materialData">
          <li :key="i" v-if="item.languageType == $i18n.locale"> 
                <div style="width: 100%; text-align: center;">
                    <img style="max-width: 100%; height: 220px" :src="'./api/file/pub/'+item.fileCover" alt="">
                </div>
                <p>{{lang=='en'? item.titleEn: item.title}}</p>
                <a href="" @click="downLoad($event, item)"></a>
            </li>
      </template>
  </ul>
  <LoginReminder ref="loginReminder"></LoginReminder>
</div>
</template>

<script>
import { getConfrenceDetail } from "@/api/meeting/meetingOutInfo";
import LoginReminder from '../LoginReminder'
export default {
    components: { LoginReminder },
    data(){
        return {
            materialData: [],
            lang: ''
        }
    },
    created(){
        this.lang = this.$i18n.locale;
    },
    watch: {
        '$i18n.locale'(val){
            this.lang = val;
        }
    },
    mounted(){
        getConfrenceDetail(this.$route.query.key).then((res) => {
            this.materialData = res.data.meetingOutInfo.file;
            // console.log('文件',this.materialData)
        });
    },
    methods: {
        downLoad(e, item){
            if(this.$Cookies.get('token')){
                let el = e.target;
                el.setAttribute("href",'./api/file/pub/'+item.list[0].attachmentSavePath)
                el.setAttribute('download', this.lang=='en'? item.titleEn: item.title)
            }else{
                e.preventDefault();
                this.$refs.loginReminder.activeChange();
                // this.$message({
                //     message: this.lang=='en'? 'Please log in':'请先登录',
                //     type: 'warning'
                // });
                // this.$router.push({ name: 'login'});
            }
        }
    }
}
</script>

<style scoped>
ul{
    display: flex;
    flex-wrap: wrap;
    padding: 20px 10px;
}
li{
    width: 33.3%;
    box-sizing: border-box;
    padding: 0 10px;
    position: relative;
}
.conference-material p{
    color: #333;
    text-align: center;
    font-weight: bold;
    word-break: break-all;
}
.conference-material a{
  display: block;
  text-decoration: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.conference-material li:hover p{
  color:#dd541a
}
</style>