dev/dcp-web-gate/src_old/views/NationalregionalCommissions/NationalregionalCommissionsDetailds.vue

<template>
    <div>
        <div class="autoBox box">
            <div style="margin-left: 20px;">
                <el-breadcrumb separator="/" style="float: left;margin-left:15px; ">
                    <el-breadcrumb-item :to="{ path: 'home' }">{{$t('common.Home')}}</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: 'nationalregionalCommittees' }">{{$t('common.NationalregionalCommissions')}}</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: 'nationalregionalCommittees', name:'nationalregionalCommittees', params: { key: 'activities',lable: 'common.Committeeactivities' }}">{{$t(Screens)}}</el-breadcrumb-item>
                    <el-breadcrumb-item >{{committeeActivityInfo.activityTypeDict== '1'? $t('common.ActivitiesInfo'):$t('common.DynamicInfo')}}</el-breadcrumb-item>
                </el-breadcrumb>
                <!-- <el-breadcrumb separator="/" style="float: right;margin:0px 15px 15px 0" >
                    <span class="cursor" :class="screenIndex == item.value?'screen1':'screen2'" @click="realTimeInfoScreen(item,index)"
                        v-for="(item,index) in realTimeInfoScreens">
                        &nbsp;&nbsp;{{$t(item.lable)}} &nbsp;&nbsp;
                       
                    </span>
                </el-breadcrumb> -->
            </div>
            <div style="margin-top: 30px;width: 100%;height: 260px;margin-left: 20px;">
                <div style="float: left;width: 55%;height: 100%;">
                    <img v-if="committeeActivityInfo.activityLogo" :src="'api/file/pub/' + committeeActivityInfo.activityLogo" alt="" style=" width:100%;height:260px;">
                    <img v-else src="@/assets/img/nationaIntorduction/lavle.png" alt="" style="width: 100%;height: 260px;">
                </div>
                <div style="float: left;width: 42%;height: 100%;position: relative;">
                    <!-- <span style="position: absolute;top: 0;right: 0;font-size: 14px;
                    color: #0000ff;cursor: pointer;">分享</span> -->
                    <div style="margin-top: 20px;width: 100%;">
                        <div style="line-height: 25px;text-align: left;margin-left: 50px;
                        font-weight: 700;">
                          {{committeeActivityInfo.activityName}}
                        </div>
                        <div style="width: 100%;line-height: 15px;font-size: 14px;">
                            <p style="margin-left: 50px;margin-right: 15px;">
                                {{$t('common.Committee')}}：{{$i18n.locale=='zh'?committeeZH:committeeEN}}
                            </p>
                            <p style="margin-left: 50px;margin-right: 15px;">
                                {{$t('common.place')}}：{{committeeActivityInfo.activityPlace}}
                            </p>
                            <p style="margin-left: 50px;margin-right: 15px;">
                                {{$t('common.line')}}：{{committeeActivityInfo.activityTime}}
                            </p>
                            <div style="width: 80%;font-size: 14px;
                            -webkit-box-orient: vertical;
                            position:relative;
                            overflow: hidden;
                            line-height:1.4em;
                            text-overflow: ellipsis;
                            -webkit-line-clamp:2;
                             display:-webkit-box;
                            color: #666666;margin-left: 50px;line-height: 25px;margin-top: -10px;"
                            @click="dialogVisibleChange">
                                {{committeeActivityInfo.activityIntroduction}}
                            </div>
                            <div style="font-size: 14px;height: 40px;text-align: center;margin-top: 20px;" v-if="committeeActivityInfo.activityTypeDict =='1' && formatUrl">
                                <el-button type="primary"
                                            v-if="signUpFlag"
                                            @click=signUp(committeeActivityInfo.registrationUrl)
                                           round
                                           style="width: 140px;height: 24px;line-height: 4px">
                                    {{$t('common.signUp')}}
                                </el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            
            <div style="padding: 20px 20px 20px 30px;min-height: 400px;" v-if="committeeActivityInfo.activityReviewUe">
                <div v-html="committeeActivityInfo.activityReviewUe" class="coo_box"></div>
            </div>
            <div style="padding: 20px 20px 20px 30px;min-height: 400px;" v-else>
                <div v-html="committeeActivityInfo.activityPreviewUe" class="coo_box"></div>
            </div>

            <!-- 精彩回顾 -->
            
            <div id="wrap" >
                <ul id="film" ref="wrapScrool">
                    <li v-for="(item,index) in photos" :key="index + 2" style="margin-left: 20px;">
                        <div>
                            <img :src="item" alt style="width: 100%;height: 150px;" v-if="item"/>
                            <img :src="'api/file/pub/def/projectdefault.png'" alt
                            style="width: 100%;height: 150px;" v-else/>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 附件 -->
            <span style="margin:0 20px;  " v-if="countryList && countryList.length>0 && committeeActivityInfo.activityTypeDict != 1">
                <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt="" style="height: 20px;vertical-align: middle;">
                {{$t('common.Enclosure')}}
            </span>

            <hr style="margin:10px 20px;" v-if="countryList && countryList.length>0 && committeeActivityInfo.activityTypeDict != 1">
            <div class="result" v-for="(item,index) in countryList" v-if="committeeActivityInfo.activityTypeDict =='2'">
                <div >
                    <!-- <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;"></span> -->
                </div>
                <div class="content">
                    <i></i>
                    <div>
                        <img v-if="state==1" :src="'./api/file/pub/'+ item.attachmentSavePath"  alt="" style="width: 10%;height: 10%;" />
                        <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;vertical-align:top">{{item.attachmentName}}</p>
                        <div style="height: 50px;background-color: #fff;width: 100%;">
                            <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>
            <!-- <div style="margin: 10px 20px;">
                <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt="" 
                style="height: 20px;vertical-align: middle;">
                活动概述
            </div>
            <div style="margin: 10px 20px;">
                asdsad
            </div>

            <div style="margin: 10px 20px;">
                <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt="" 
                style="height: 20px;vertical-align: middle;">
                活动专家介绍
            </div>
            <div style="margin: 10px 20px;">
                asdsad
            </div>

            <div style="margin: 10px 20px;">
                <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt="" 
                style="height: 20px;vertical-align: middle;">
                活动亮点
            </div>
            <div style="margin: 10px 20px;">
                asdsad
            </div>

            <div style="margin: 10px 20px;">
                <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt="" 
                style="height: 20px;vertical-align: middle;">
                活动议程
            </div>
            <div style="margin: 10px 20px;">
                asdsad
            </div> -->
            <el-dialog
                :title="$t('common.InformationDetails')"
                :visible.sync="dialogVisible"
                width="35%">
                <span style="line-height: 29px;font-size: 18px;word-break:normal;" v-html="committeeActivityInfo.activityIntroduction"></span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    
   
    import {countryZh, countryEn,getList} from '@/api/country'
    import {activityInfos, countryNationalSpace} from '@/api/cooperation/baseCooperationUnit'
    import GlobalRoaming from "@/components/GlobalRoaming";
    import {sysAttachmentInfos} from '@/api/cooperation/baseCooperationUnit';
    import {getToken, resetToken} from "@/utils/auth";
    import {saveFollowModel} from "@/api/operation/basePortalModelFollowInfo";

    import {getCommitteeActivityInfo} from '@/api/committee/committeeActivityInfo'
    import Base from "@/views/base/Base";
    export default {
        name: 'NationalregionalCommissionsDetailds',
        extends: Base,
        data() {
            return {
                index: 1,
                projectList:[],
                i: '0',
                id: this.$route.query.key,
                language:'',
                Screens:"common.Committeeactivities",
                committeeActivityInfo: {},
                photos:[],
                photosNum:0,
                countryList:[],
                basisInfo:[],
                committeeEN:'',
                committeeZH:'',
                realTimeInfoScreens:[{
                    lable:"common.BriefintroductiontotheCommittee",
                    value:'introduc'
                },{
                    lable:"common.Committeelayout",
                    value:'layout'
                },{
                    lable:"common.Committeeactivities",
                    value:'activities'
                }],
                now:null,// 存储系统当前时间
                signUpFlag:false,
                dialogVisible:false,

            }
        },
        watch: {
        
            "$i18n.locale"() {
                this.getInitData();
            }, 
            "toViewLogin"(){
                if(this.toViewLogin==true){
                this.loginTipsChange()
                }
            },
        },
        computed:{
			formatUrl(){
				let url = this.committeeActivityInfo?.registrationUrl.replace(/\s+/g, "")
				return !!url?true:false
			}
        },
        mounted() {
            this.getInitData();
        },
        methods: {
           
            dialogVisibleChange(){
                this.dialogVisible=true;
            },
            signUp(url){
                if(url.indexOf('http') == -1){
                    url = 'http://' + url
                }
                window.open(url,'_blank')
            },
            selectBlur(e) {
            },
            realTimeInfoScreen(i,value){
                this.toView('nationalregionalCommittees',i.value)
            },
            follow() {
                if (this.ifcommon) {
                    this.followActivitie("unfollow");
                } else {
                    this.followActivitie("follow");
                }
            },
            followActivitie(followType){
                let user = window.localStorage.getItem("user");
                if (!this.$Cookies.get('token')) {
                    // this.$message.warning("请先登录");
                    // this.$confirm('检测到您未登录，是否登录')
                    // .then(_ => {
                    //  this.toView('login');
                    // })
                    // .catch(_ => {});
                    this.toViewLogin = true;
                } else {
                    var users = JSON.parse(user);
                    var token = "" + getToken();
                    var projectId = this.countryList.baseActivityEntityId;
                    var userId = users.userId;
                    // 接口逻辑
                    this.submitHandler((token) => {
                        saveFollowModel(projectId, "activity", userId, followType, token)
                            .then((result) => {
                                this.$message({
                                    message: result.data,
                                    type: "success",
                                });
                                this.ifcommon = !this.ifcommon;
                                this.resetToken();
                            })
                            .catch((error) => {
                                // 此处你的业务代码
                            });
                    });
                }
            },
             // 未登录跳转
            loginTipsChange(){
                const that=this;
                this.num =5;
                // clearInterval(timer_interval);

                this.timer = setInterval(function() {
                if (that.num > 0) {
                    that.num--;
                } else {
                    if(that.toViewLogin==true){
                    clearInterval(that.timer);
                    that.toView('login');
                    }else {
                    clearInterval(that.timer);
                    }
                }
                }, 1000)
            },
            // 判断未登录跳转是否关闭
            toViewLoginChange(done){
                this.toViewLogin=false;
                this.num=5;
                clearInterval(this.timer);
            },
            getPassAreaCode(code){
                this.select = code;
                this.formLabelAlign.selectCode = code;
            },
            getInitData() {
                var nowDate = Math.round(new Date().getTime());
                this.now  =  nowDate;
                let list={
                    entityId: this.id,
                    language:this.$i18n.locale.toUpperCase()
                }
                getCommitteeActivityInfo(list).then(res => {
                    var data = res.data;
                    this.committeeZH='';
                    this.committeeEN='';
                    if(data){
                        this.committeeActivityInfo = res.data.committeeActivityInfo || {};
                        this.basisInfo = res.data.basisInfo || [];
                        this.basisInfo.forEach((i)=>{
                            if (i.language=="ZH"){
                                this.committeeZH =this.committeeZH+' '+i.name
                            }else if(i.language=="EN") (
                                this.committeeEN =this.committeeEN+' '+i.name
                            )
                        })
                        var photoUrl = res.data.committeeActivityInfo.pictures;
                        if('' != photoUrl){
                            this.photos = photoUrl.split(',');
                            this.photos.forEach((item,index) =>{
                                if(''!=item){
                                    this.photos[index] = "./api/file/pub/"+item;
                                }

                            });
                            this.photosNum =  this.photos.length
                            this.$nextTick(() => {
                                let linode = [this.$refs.wrapScrool][0].children;
                                if (linode.length > 5) {
                                    var film = {
                                        imageNumWidth: 240,
                                        time: 3000,
                                        numindex: 0,
                                        ulbox: document.getElementById("film"),
                                        linodes: document.getElementById("film").getElementsByTagName("li"),
                                        li_count: document.getElementById("film").getElementsByTagName("li").length,

                                        animate: null,
                                        autoplay: null,

                                        //初始化
                                        init: function () {
                                            film.ulbox.innerHTML = film.ulbox.innerHTML + film.ulbox.innerHTML;
                                            film.ulbox.style.left = "0px";
                                            film.autoplay = setInterval(function () { film.play(film.numindex + 1) }, film.time);
                                        },
                                        //添加动画
                                        play: function (ele) {
                                            const that = this;
                                            var ulbox_left = parseInt(film.ulbox.style.left);

                                            if (ele > film.li_count) {
                                                ele -= film.li_count;
                                                film.numindex -= film.li_count;
                                                film.ulbox.style.left = "0px";
                                                ulbox_left = parseInt(film.ulbox.style.left);
                                            }
                                            //添加animate，等同于css中animate
                                            if (ele > film.numindex) {
                                                film.animate = setInterval(function () {
                                                    if (parseInt(film.ulbox.style.left) > (ulbox_left - film.imageNumWidth * (ele - film.numindex) + film.imageNumWidth * (ele - film.numindex) / 10)) {
                                                        film.ulbox.style.left = parseInt(film.ulbox.style.left) - film.imageNumWidth * (ele - film.numindex) / 10 + "px";
                                                    } else {
                                                        film.ulbox.style.left = ulbox_left - film.imageNumWidth * (ele - film.numindex) + "px";
                                                        clearInterval(film.animate);
                                                        film.numindex = ele;
                                                        film.animate = null;
                                                    }
                                                }, 30)
                                            }
                                        }
                                    }
                                    film.init()
                                    film.play(0)
                                }
                            })
                        }
                        
                        if(this.now >= this.committeeActivityInfo.registrationStartTime && this.committeeActivityInfo.registrationEndTime >= this.now){
                            this.signUpFlag = true;
                        }
                        
                        if(this.committeeActivityInfo.id){
                            let attacList = {
                                attachmentBusinessId:this.committeeActivityInfo.id,
                                attachmentBusinessType:'committeeActivityInfo'
                            };
                         
                            sysAttachmentInfos(attacList).then(results=>{
                                if(results){
                                    this.countryList = results.data.attachmentInfos;
                                    console.log('this.countryList')
                                    console.log(this.countryList)
                                    //进行上传文件的判断
                                    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='';
                                    }
                                    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
                                }else{
                                    this.countryList = null;
                                }
                            })
                        }
                    }else{
                        this.committeeActivityInfo = {};
                        if(this.$i18n.locale =='zh'){
                            this.$message({
                                message: '无当前版本',
                                type: 'error'
                            });
                        }else{
                            this.$message({
                                message: 'No current version',
                                type: 'error'
                            });
                        }

                    }
                })
                // this.activityStatusMap.set('活动中', 'Live');
                // this.activityStatusMap.set('已结束', 'Closed');
                // this.activityStatusMap.set('未开始', 'Upcoming');
                // this.activityStatusMap.set('报名中', 'Registration open')
            },
            getIconUrl(url) {
                return require("@/assets/img/cooperationExchange/" + url);
            },
            toView(router, json) {
                this.$router.push({name: router, params: {key: json}})
            },
            screenBack(data) {
                console.log(data, 'screenBackscreenBackscreenBackscreenBack')
            },
            screens(item, index) {
                this.i = i.value;
            },    
            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>
    .content{
        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;
    }
    .box {
        margin-top: 10px;
        background: #fff;
        padding-top: 20px;
        padding-bottom: 10px;
    }

    body {
        margin: 0;
    }

    .screen1 {
        background: linear-gradient(180deg, #3280E2 0%, #144E97 100%);
        border-radius: 20px 20px 20px 20px;
        padding: 8px 12px;
        color: #F0F3F8;
        margin-left: 10px;
    }
    .screen2 {
        font-size: 14px;
        background: linear-gradient(180deg, #B4D5FF 0%, #4F81BF 100%);
        border-radius: 20px;
        padding: 8px 12px;
        color: #165099;
        margin-left: 10px;
    }

    .Introduction {
        margin-top: 20px;
    }

    .Introduction li {
        float: left;
        width: 31%;
        height: 400px;
        margin-right: 22px;
        background: skyblue;
    }

    .el-button.is-round {
        padding: 0
    }

    .el-input{
        width: 400px;
        /* line-height: 52px; */
    }
    .el-input>>>.el-input__inner{
        height: 50px;
        /* width: 200px; */
    }
    .el-select>>>.el-input__inner{
        height: 50px;
    }
    .el-form-item>>>.el-form-item__label {
        padding-top: 5px;
    }
    .dcp_input /deep/.el-input__inner {
        width: 150px;
    }
    .dcp_input /deep/.el-select {
        width: 150px;
    }
    
    .el-select-dropdown {
        width: 400px!important;
    }
    .Messicon{
        height: 30px;
        margin-top: 12px;
        float: left;
        margin-right: 10px;
    }

    #wrap{
        width:100%;
        overflow: hidden;
        position:relative;
        height:150px; 
        margin: 16px auto; 
    }
    #film{
        position: absolute;
        width: 40000px;
    }
    #film li{
        width: 198px;
        height: 150px;
        margin-right: 20px;
        float: left;
    }
   
    #film li img{
        width: 100%;
    }
</style>