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

<template>
    <div  class="autoBox box"   style="position: relative;">
        <!-- 轮播图 -->
        <el-carousel  interval=5000 indicator-position="outside">
            <el-carousel-item v-for="(item,index) in initList" :key="'init'+index" v-if="index < 5" style="cursor:pointer;">
                <div @click="addBrowse(item.entityId);toView('nationalregionalCommissionsDetailds',item.entityId)">
                    <img :src="'api/file/pub/' + item.activityLogo" alt="" style="width: 100%;height: 350px;">
                </div>
                <div class="activity"  @click="addBrowse(item.entityId);toView('nationalregionalCommissionsDetailds',item.entityId)">
                <div :style="$i18n.locale=='zh'?'margin-top: 60px;width: 100%;':'margin-top: 70px;width: 100%;'">
                    <div style="width: 300px;line-height: 25px;margin-left: 50px;
                    font-weight: 700;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                        {{item.activityName}}
                    </div>
                    <div style="width: 100%;line-height: 30px;font-size: 14px;line-height:30px;">
                        <span style="margin-left: 50px;margin-right: 15px;">
                            {{$t('common.place')}}： {{item.activityPlace}}
                        </span>
                    <div style="width: 100%;line-height: 30px;font-size: 14px;line-height:30px;">  
                        <span  :style="$i18n.locale=='zh'?'margin-left: 50px;':'margin-left: 50px;line-height:30px;'">
                            {{$t('common.line')}}： {{formatDate(item.activityStartTime)}}--{{formatDate(item.activityEndTime)}}
                        </span>
                        <div class="border_box "  style="width: 80%;font-size: 14px;max-height: 105px;
                        line-height: 25px;margin-left: 50px;
                        color: #666; ;position:relative;line-height:1.4em;overflow: hidden;
                           text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;">
                            {{item.activityIntroduction}}
                    </div>
                        <!-- <div style="width: 80%;font-size: 14px;height: 40px;margin-left: 50px;color: #666;">
                            <el-button type="success" round>报名中</el-button>
                        </div> -->
                    </div>
                </div>   
            </div>
                </div>
            </el-carousel-item>
          </el-carousel>
          <!-- 搜索框 -->
          <div style="width: 100%;height: 35px;margin-top: 20px;">
            <div style="float: left;margin-right: 20px;transform: translateY(-10PX);">
                <el-select v-model="Area" placeholder="请选择区域" style="margin-right: 20px;">
                    <el-option
                      v-for="(item,index) in options"
                      :key="'options'+index"
                      :label="item.label"
                      :value="item.value"
                      >
                    </el-option>
                  </el-select>
                  <el-select v-model="activityTypeDict" placeholder="请选择分类">
                    <el-option
                      v-for="(item,index) in options2"
                      :key="'options2'+index"
                      :label="$t(item.label)"
                      :value="item.value">
                    </el-option>
                  </el-select>
            </div>
            <div style="float: right;margin-right: 20px;transform: translateY(-10PX);">
                <el-input v-model="activityName"  @keyup.enter.native="getAllData(activityName)" :placeholder="$i18n.locale=='zh'?'请输入搜索':'Please enter search'" 
                    style="width: 250px;margin-right: 28px;">
                    <i class="el-icon-search"></i>
                    <el-button slot="append" @click="getAllData(activityName)" icon="el-icon-search" style="background: #fff;border-left: 0;"></el-button>
                </el-input>
                <!-- 发布新活动按钮 -->
                <el-select v-model="value2" :placeholder="$i18n.locale=='zh'?'活动发布':'Event release'" class="fabu">
                    <el-option
                      v-for="(item,index) in options3"
                      :key="'options3'+index"
                      :label="$t(item.label)"
                      :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div style="clear: both;"></div>
            <!-- 展示区 -->
                <!-- 活动动态 -->
                <div style="float: left;width: 75%;min-height: 600px;background-color: #fff;">
                    <div  class="border" style="cursor:pointer;" v-for="(item,index) in initData"
                    @click="addBrowse(item.entityId);toView(value2==1?'nationalregionalCommissionsDevelopments':'nationalregionalCommissionsDetailds',item.entityId)">
                        <div style="float: left;width: 320px;height: 180px;">
                            <img v-if="item.activityLogo" :src="'api/file/pub/' + item.activityLogo" alt="" style="width: 100%;height: 100%;">
                            <img v-else :src="'api/file/pub/'+'/def/def1.png'" alt="" style="width: 100%;height: 100%;">
                            <span :class="$i18n.locale == 'zh' ? 'introduceItemTitle' : 'introduceItemTitleEn'">{{options2Map[item.activityTypeDict]}}</span>

                        </div>
                        <div style="float: right;width: 535px;height: 180px;margin-right: 20px;position: relative;">
                            <div style="color: #333;line-height: 30px;font-weight: 700;margin: 10px 0;overflow : hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 1;
                            -webkit-box-orient: vertical;">
                                {{item.activityName}}
                                
                            </div>
                            <div style="color: #666;font-size: 15px;">
                                <span style="color: #666;">
                                    <i class="el-icon-location-outline"></i>
                                    {{item.activityPlace}}
                                </span>
                                <span style="margin-left: 30px;">
                                    <i class="el-icon-date"></i>
                                    {{item.activityTime}}
                                </span>
                            </div>
                            <div style="color: #868686;    
                                margin-top: 10px;
                                font-size: 14px;
                                max-height: 74px;
                                line-height: 1.4em;
                                margin-left: 0px;
                                -webkit-box-orient: vertical;
                                position: relative;
                                overflow: hidden;
                                ">
                                {{item.activityIntroduction}}
                            </div>
                            <div  style="color: #868686;height: 20px;float: right;position: absolute;right: 10px;bottom: 0px;">
                                <img data-v-9f5ec442="" src="/img/heat.5f8dc124.png" alt="" style="vertical-align: middle; width: 16px; height: 16px; margin: 0px 3px 0px 6px; vertical-align: middle;">
                                
                                <span style="vertical-align: middle;">
                                    {{item.num?item.num:0}}

                                </span>
                            </div>
                            <!-- <svg t="1605608495714" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3207" width="16" height="16"><path d="M349.256964 934.774863c85.868693 0 187.258894 0.054235 298.438043 0.054235 462.859813-261.864056 115.140367-653.721769 54.593386-697.856965 20.164249 44.13622 24.026206 118.839619-16.784268 155.144476C616.483144 130.466424 445.893908 76.839039 445.893908 76.839039c20.164249 134.927015-73.147974 282.510282-163.134451 392.768455-3.164063-53.788044-6.54302-90.951455-34.80469-142.43399-6.328126 97.763604-81.031525 177.454598-101.30322 275.378861-27.40414 132.620483 20.539802 229.740428 202.551182 332.330968L349.256964 934.774863z" p-id="3208" fill="#707070"></path></svg> -->
                        </div>
                        <div style="clear: both;"></div>
                    </div>
                    <div style="width: 100%;position: relative;height: 100px;">
                        <el-pagination
                        style="height: 80px;position: absolute;left: 50%;top: 80px;transform: translate(-50%,-50%);"
                        background
                        layout="prev, pager, next"
                        page-size=5
                        @current-change="handleCurrentChange"
                        :total=total 
                        ></el-pagination>
                    </div>
                </div>
                <!-- 重要活动 -->
                <div style="float: left;width: 20%;margin-left: 37px; min-height: 600px;background-color: #fff;">
                    <div>
                        <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt="" 
                        style="height: 20px;vertical-align: middle;">
                        {{$t('common.ImportantEvent')}}
                    </div>
                    <div style="margin-top: 10px;position: relative;" class="cursor" v-for="(item,index) in hotLists" v-if="index<5"
                        @mouseover="mouseOver(index)" @mouseleave="mouseLeave(index)"   @click="addBrowse(item.entityId);toView('nationalregionalCommissionsDetailds',item.entityId)">
                        <img v-if="item.activityLogo" :src="'api/file/pub/' + item.activityLogo" alt="" style="width: 100%;height: 145px;">
                        <img v-else src="@/assets/img/nationaIntorduction/lavle.png" alt="" style="width: 100%;height: 145px;">
                        <div class="background_color" style="display: none;" :ref="`img${index}`">
                            <div style="width: 80%;margin:40px auto 0 auto;text-align: center;font-size: 14px;font-weight: 700;
                                -webkit-box-orient: vertical; 
                                line-height:1.4em;
                                overflow: hidden;
                                height:2.8em;">
                                {{item.activityName}}
                            </div>
                            <div style="font-size: 12px;margin-top: 10px;
                                -webkit-box-orient: vertical;
                                position:relative;
                                line-height:1.4em;
                                overflow: hidden;
                                height:2.8em;">
                                {{item.activityIntroduction}}
                            </div>
                        </div>
                    </div>
                <div style="clear: both;"></div>
            </div>
            <div style="clear: both;"></div>
        </div> 
        <div style="clear: both;"></div>
        <el-dialog
            :title="$i18n.locale=='zh'?'提示':'Reminder'"
            :visible.sync="toViewLogin"
            :width="$i18n.locale=='zh'?'500px':'750px'"
            :height="$i18n.locale=='zh'?'300px':'386px'"
            :before-close="toViewLoginChange"
        >
            <div style="width: 100%;height: 100%;">
                <img src="@/assets/img/loginTips.png" alt="" style="width: 180px;height: 180px;margin-left: 20px;">
                <div style="float: right;margin-right: 20px;" :style="$i18n.locale=='zh'?'width: 49%;margin-top: 10px;':'width: 453px;margin-top: -25px;'">
                <div style="font-size: 20px;font-weight: normal;color: #333333;
                        font-family: HiraginoSansGB-W3, HiraginoSansGB;
                        line-height: 40px;">
                    {{$t('common.ReminderFirst')}}
                </div>
                <div style="font-size: 16px;font-family: HiraginoSansGB-W3, HiraginoSansGB;
                    font-weight: normal;color: #666666;line-height: 30px;">
                    {{$t('common.ReminderSecond')}} <span style="color: #0091FF;font-size: 18px;">{{num}}</span> {{$t('common.ReminderThird')}}
                </div>
                <div style="font-size: 14px;font-family: HiraginoSansGB-W3, HiraginoSansGB;
                    font-weight: normal;color: #666666;line-height: 30px;">
                    {{$t('common.ReminderForth')}}
                </div>
                <div style="font-size: 14px;font-family: HiraginoSansGB-W3, HiraginoSansGB;
                    height:33px;line-height:60px;font-weight: normal;color: #0091FF;">
                        <span style="margin-left: 40px;" class="cursor" @click="toView('login')">
                        {{$t('common.ReminderFifth')}}
                        </span>
                    <span style="margin-left: 10px;" class="cursor" @click="toView('Register')">
                        {{$t('common.ReminderSixth')}}
                        </span>
                </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
  import { getDicts } from "@/api/dict";
  import {getCommitteeActivityList} from '@/api/committee/committeeActivityInfo'
  import {addBrowseNum} from '@/api/committee/committeeActivityEntity'

  export default {
    name: "NationaIntroductionCommitteeLayout",
   
    data () {
      return {
        initList:[],
        activityTypeDict:null,
        Area:null,
        value2:null,
        activityName:null,
        hotLists:[],
        initData:[],
        num:5,
        timer:'',
        toViewLogin:false,
        screen:[{
              value:null,
              lable:'common.All'
          },{
              value:'0',
              lable:'common.MemberActivities'
          },{
              value:'1',
              lable:'common.AllianceActivities'
          },{
              value:'2',
              lable:'common.CooperationActivities'
          }],
        options:[],//委员会区域
        options2:[],//委员会活动类型
        options3:[],//委员会活动编辑状态
        options3Zh:[{
              label:'发布新活动',
              value:0
          }],
        options3En:[{
              label:'Post new event',
              value:0
          }],
          total:0,
      }
    },
    mounted() {
        this.getAllData();
        this.getData();
    },
    watch:{
        "value2"(){
            if(this.value2==0){
                if(!this.$Cookies.get('token')){
                    this.toViewLogin=true;
                    this.loginTipsChange();
                }else {
                    this.toView("nationalregionalCommissionsEventRelease")
                }
            }
        },
        "Area"(){
            this.getAllData(this.Area,this.activityName,this.activityTypeDict)
        },
        "activityTypeDict"(){
            this.getAllData(this.Area,this.activityName,this.activityTypeDict)
        },
        "$i18n.locale"() {
            if(this.$i18n.locale == 'zh'){
                this.options3 = this.options3Zh || [];
            }else{
                this.options3 = this.options3En || [];
            }
            this.getAllData(this.Area,this.activityName,this.activityTypeDict,1);
            this.getData();
        },
    },
    computed: {
        options2Map(){
            return this.options2.array2Obj("value","label")
        },
    },
    methods:{
         // 未登录跳转
        loginTipsChange(){  
            const that=this;
            this.num =5;
            clearInterval(this.timer);
            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);
        },
        handleCurrentChange(val){
            console.log(val+"传递页数")
            this.getAllData(this.Area,this.activityName,this.activityTypeDict,val)
        },
        getData() {
            getDicts("COMMITTEE_REGIONAL_DICT,COMMITTEE_ACTIVITY_TYPE,COMMITTEE_REGIONAL_DICT_EN,COMMITTEE_ACTIVITY_TYPE_EN").then(res => {
                var data = res.data;
                if(data){
                    if(this.$i18n.locale=='zh'){
                        this.options= [];
                        this.options2= [];
                        this.options= res.data[0];
                        this.options2 = res.data[1];
                        this.options.unshift({
                            label: "全部区域",
                            value: null,
                        });
                        this.options2.unshift({
                            label: "全部类型",
                            value: null,
                        });
                    }else if(this.$i18n.locale=='en'){
                        this.options= [];
                        this.options2= [];
                        this.options= res.data[2];
                        this.options2 = res.data[3];
                        this.options.unshift({
                            label: "ALL",
                            value: null,
                        });
                        this.options2.unshift({
                            label: "ALL",
                            value: null,
                        });
                    }
                }
            });
           
        },
        mouseOver(index){
            this.$refs[`img${index}`][0].style.display='block';
        },
        mouseLeave(index){
            this.$refs[`img${index}`][0].style.display='none';
        },
        addBrowse(entityId){
            
            addBrowseNum(entityId).then(res =>{
                console.log(res);
            })
        },
        toView(router, json) {
            clearInterval(this.timer);
            this.$router.push({ name: router, query: {key:json} });
        },
        getAllData(Area,activityName,activityTypeDict,pageNo){
            if(this.$i18n.locale == 'zh'){
                this.options3 = this.options3Zh || [];
            }else{
                this.options3 = this.options3En || [];
            }
            let list ={
                pageSize:5,
                pageNo:pageNo?pageNo:1,
                continentDict:this.Area,
                activityName:this.activityName,
                activityTypeDict:this.activityTypeDict,
                language:this.$i18n.locale.toUpperCase(),
            }

            getCommitteeActivityList(list).then(res => {
                this.initList = [];
                var data = res.data
                if(data){
                    this.initData = res.data.committeeActivityInfos || [];
                    this.total = res.data.total-0;
                    this.hotLists = res.data.importantCommitteeActivityInfos || [];
                    this.hotLists.forEach(element => {
                        if(element.showFlag == 'y'){
                            this.initList.push(element)
                        }
                    });
                }
            });
        
            // activityInfos(list).then(res=>{
            //     var  oldList = []
            //     oldList =  res.data?res.data.activityInfos:[]; 
            //     oldList.forEach(element => {
            //         if('y' == element.logoFlag){
            //             this.initList.push(element);
            //         }
            //     });
            //     console.log(this.initList) 
            //     this.$forceUpdate();
            // });
       
        },
    }
  }
  </script>
  <style scoped>
    .box {
        
        background: #fff;
        /* height: 500px; */
        padding: 20px 0;
        position: absolute;
    }
    .crumbs {
        margin-left: 20px;
    }
    body {
        margin: 0;
    }
    .el-carousel__item div:nth-child(1) {
        font-size: 18px;
        margin: 0;
        float: left;
        width: 70%;
    }
    .el-carousel__item div:nth-child(2) {
        font-size: 18px;
        margin: 0;
        float: left;
        width: 30%;
    }
    .el-carousel__item:nth-child(n) {
    background-color: #ecedef;
    color: #000;
  }
  .cool >>>.el-carousel__container {
      height: 350px;
  }
  .screen1 {
      padding: 10px 18px;
      font-size: 14px;
      background-color: #e8e8e8;
  }
  .screen2 {
      padding: 10px 18px;
      font-size: 14px;
      background-color: #12559c;
      color: #fff;
  }
  .initData li {
      width: 49%;
        float: left;
  }
  .initData li:nth-child(2n-1){
      margin-right: 15px;
  }
  .recommend {
       margin-top:15px;
       margin-left: 10px;
   }
   .recommend li{
        display: inline-block;
        width: 212px;
        /* height: 130px; */
        text-align: center;
        margin-right: 15px;
   }
   .activity {
       height: 100%;
       /* background: url(../../assets/img/introductionCooperation/detailsbg.png) no-repeat; */
   }
   .fabu >>> .el-input--suffix .el-input__inner {
    background-color: #0079ef;
    color: #fff;
   }
   .fabu>>> input::-webkit-input-placeholder{
            color:#fff;
        }
    .fabu>>>   input::-moz-placeholder{   /* Mozilla Firefox 19+ */
            color:#fff;
        }
    .fabu>>>   input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
            color:#fff;
        }
    .fabu>>>  input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
            color:#fff;
        }
   .fabu >>> .el-input--suffix .el-input__inner {
    background-color: #0079ef;
    color: #fff;
   }
   .fabu >>> .el-input--suffix .el-input__suffix-inner {
   display: none;
   }
   .border_box:hover{
    -webkit-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    transform: translateY(-3px);
    -webkit-box-shadow: 0 0 6px #999;
    box-shadow: 0 0 6px #999;
    -webkit-transition: all .5s ease-out;
    transition: all .5s ease-out;
   }
   .border{
        height: 180px;
        border-bottom: 1px solid #66ccff; 
        padding: 10px 0;
   }
   .background_color{
    position:absolute;
    left:0;
    top:0;
    color: #fff;
    background-color: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%;
   }
   .introduceItemTitle {
        height: 27px;
        line-height: 28px;
        width: 100px;
        position: absolute;
        left: 0%;
        background:#ebb73e;
        border-radius: 0 0 10px 0;
        font-size: 14px;
        text-align: center;
        color:  white;
    }
    .introduceItemTitleEn {
        height: 27px;
        line-height: 28px;
        width: 150px;
        position: absolute;
        left: 0%;
        background:#ebb73e;
        border-radius: 0 0 10px 0;
        font-size: 14px;
        text-align: center;
        color:  white;
    }
  </style>