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

<template>
<div class="point-containor">
    <ul class="nav-point-list"  style="width: 100px">
        <template v-for="(item, i) in navPointList">
            <li v-if="item.isShow" :class="{'nav-active': navIndex==i}" :key="i" @click="viewPointChange(i)">{{$i18n.locale=='en'? item.textEn: item.text}}</li>
        </template>
    </ul>
    <div class="point-content">
        <div v-if="navIndex==0 && viewpointData.length">
            <ul class="text-point-list">
                <template v-for="(item, i) in viewpointData">
                    <li v-if="i < viewNum" :key="i" @click="toView('ConfrenceViewpoint', item.id)">
                        <div
                            :style="{width: '100%', height: '220px', backgroundImage: 'url(./api/file/pub/'+item.list[0].attachmentSavePath+')', backgroundSize: '100% 100%'}"
                        ></div>
                        <p class="position"><span>{{lang=='en'? item.positionEn: item.position}}</span></p>
                        <p class="speakguest"><span>{{lang=='en'? item.speakGuestEn: item.speakGuest}}</span></p>
                        <p class="confrence-viewpoint-text plate">{{lang=='en'? item.ideaContentEn: item.ideaContent}}</p>
                    </li>
                </template>
            </ul>
            <div class="more" v-if="viewNum <= viewpointData.length">
                <i @click="viewNum+=6" class="el-icon-d-arrow-right"></i>
            </div>
        </div>
        <div v-if="navIndex==1 && materialData.length">
            <ul class="conference-material">
                <template v-for="(item, i) in materialData">
                    <li :key="i" v-if="item.languageType == $i18n.locale">
                        <div
                            :style="{width: '100%', height: '220px', backgroundImage: 'url(./api/file/pub/'+item.fileCover+')', backgroundSize: '100% 100%'}"
                        ></div>
                        <!-- <div style="width: 100%; text-align: center;">
                            <img style="max-width: 100%;" :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>
        <div v-if="navIndex==2 && videoData.length">
            <ul class="video-point-list">
                <li v-for="(item, i) in videoData" :key="i" @click="playVideo(item.videoUrl)">
                    <div class="img-content" :style="{ backgroundImage: item.videoCover?'url(./api/file/pub/'+item.videoCover+')': '#000'}">
                        <img class="play-img" width="100" height="100" src="@/assets/img/conference/player.png" alt />
                    </div>
                    <p class="title">{{lang=='en'? item.titleEn: item.title}}</p>
                </li>
            </ul>
            <div class="mask" v-show="maskShow" @click="closeMask">
                <video
                    :src="currentUrl" width="500" height="350" controls="controls"
                    id="ConferenceResultVideo">
                    Your browser does not support the video tag.
                </video>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import { getConfrenceDetail } from "@/api/meeting/meetingOutInfo";
import LoginReminder from '../LoginReminder'
export default {
    components: { LoginReminder },
    data(){
        return {
            navIndex: 0,
            navPointList: [
                {text: '图文观点', textEn: 'Graphic view', isShow: false},
                {text: '文件观点', textEn: 'File view', isShow: false},
                {text: '视频观点', textEn: 'Video view', isShow: false}],
            viewpointData: [],
            materialData: [],
            materialDefaultData:[],
            videoData: [],
            currentUrl: '',
            maskShow: false,
            lang: '',
            viewNum: 6,
            typeNum: 0
        }
    },
    created(){
        this.lang = this.$i18n.locale;
        console.log('111')
    },
    watch: {
        '$i18n.locale'(val){
            this.lang = val;

            console.log("切换语言")
            this.navPointList[1].isShow = false;
            if(this.materialData.length){
                //this.navPointList[1].isShow = true;
                //this.typeNum++;
                this.materialDefaultData = this.materialData.filter(item => item.languageType == this.lang)
                console.log("materialDefaultData" , this.materialDefaultData.length)
                if (this.materialDefaultData.length){
                    this.navPointList[1].isShow = true;
                    if (this.viewpointData.length == 0){
                        this.navIndex = 1;
                    }
                }
            }
            if(this.videoData.length){
                this.navPointList[2].isShow = true;
                //this.typeNum++;
                if(this.viewpointData.length==0 && this.materialDefaultData.length==0){
                    this.navIndex = 2;
                }
            }
        }
    },
    mounted(){
        getConfrenceDetail(this.$route.query.key).then((res) => {
            this.viewpointData = res.data.meetingOutInfo.guandian;
            this.materialData = res.data.meetingOutInfo.guandian_file;
            this.videoData = res.data.meetingOutInfo.guandian_video;
            if(this.viewpointData.length){
                this.navPointList[0].isShow = true;
                this.navIndex = 0;
                //this.typeNum++;
            }
            if(this.materialData.length){
                //this.navPointList[1].isShow = true;
                //this.typeNum++;
                this.materialDefaultData = this.materialData.filter(item => item.languageType == this.lang)
                console.log("materialDefaultData" , this.materialDefaultData.length)
                if (this.materialDefaultData.length){
                    this.navPointList[1].isShow = true;
                    if (this.viewpointData.length == 0){
                        this.navIndex = 1;
                    }
                }
            }
            if(this.videoData.length){
                this.navPointList[2].isShow = true;
                //this.typeNum++;
                if(this.viewpointData.length==0 && this.materialDefaultData.length==0){
                    this.navIndex = 2;
                }
            }
            // console.log('观点',this.viewpointData)
        });
    },
    methods: {
        closeMask(){
            this.maskShow = false;
            let videoEl = document.getElementById('ConferenceResultVideo');
            videoEl.pause();
        },
        playVideo(url){
            this.currentUrl = './api/file/pub/'+ url;
            this.maskShow = true;
            let videoEl = document.getElementById('ConferenceResultVideo');
            videoEl.play();
        },
        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();
            }
        },
        viewPointChange(i){
            this.navIndex = i;
        },
        toView(router, json) {
            this.$router.push({ path: router, query: { key: json } });
        },
    }
}
</script>

<style scoped>
*{
    box-sizing: border-box;
}
.point-containor{
    display: flex;
}
.nav-point-list{
    padding-top: 16px;
    line-height: 40px;
}
.nav-point-list li{
    color: #666;
    cursor: pointer;
}
.nav-point-list li.nav-active{
    color: #02a7f0;
}
.point-content{
    flex: 1;
}





.video-point-list{
    display: flex;
    flex-wrap: wrap;
    padding: 20px 10px;
}
.video-point-list li{
    width: 33.3%;
    min-height: 247px;
    padding: 10px;
}
.img-content{
    width: 100%;
    height: 240px;
    position: relative;
    background-size: 100% 100%;
}
.img-content img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    opacity: 0.8;
}
.img-content img:hover{
    opacity: 1;
}
.title{
    text-align: center;
    margin: 10px 0;
}
video{
    background: #000;
    border: 1px solid #000;
}
.mask{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0 ,0 , 0, 0.7);
    z-index: 9;
}
.mask video{
    max-width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    outline: none;
}





.conference-material{
    display: flex;
    flex-wrap: wrap;
    padding: 20px 10px;
}
.conference-material 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
}






.text-point-list{
    display: flex;
    flex-wrap: wrap;
    padding: 20px 10px;
    min-height: 350px;
}
.text-point-list li{
    width: 30%;
    margin: 0 1.5%;
    padding: 10px;
    cursor: pointer;
    transition: box-shadow .5s;
}
.text-point-list li:hover{
    box-shadow: 0px 0px 5px #999;
}
.position{
    font-size: 16px;
    color: #7f7f7f;
}
.speakguest{
    text-align: right;
    font-size: 16px;
}
.confrence-viewpoint-text{
    font-size: 15px;
    line-height: 26px;
    color: #aaa;
    -webkit-box-orient: vertical;
    position:relative;
    line-height:1.4em;
    overflow: hidden;
    height:5.6em;
}
.more{
    text-align: center;
    font-weight: bold;
    font-size: 36px;
}
.more i{
    transform: rotate(90deg);
}
.more i:hover{
    cursor: pointer;
    color: #d15023
}
</style>