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

<template>
    <div style="margin-top: 20px;margin-left: 20px;margin-right: 20px;">
       <!-- 活动回顾 -->
       <div v-html="activityReview" class="coo_box"></div>
        <!-- 精彩回顾 -->
        <div style="width: 100%;height: 250px;" v-if="photos.length != 0">
            <div class="enterprise_style">
                <span class="enterprise_style_span">{{$t('common.WonderfulReview')}}</span>
            </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>
        </div>
    </div>
    
</template>
<script>
import {activityInfos} from '@/api/cooperation/baseCooperationUnit'
export default {
    name:"CooperationActiveReview",
    props:['activityReview','id','countryList'],
    data(){
      return {
          i:0,
          locale:'',
          Area:null,
          value2:null,
          type:null,
          initData:[],
          recommend:[],
          photos:[],
          scrollDis:0,

      }
    },
     watch:{
       "$i18n.locale"() {
                this.getList();
                this.showimgss();
            }, 
    },
    mounted(){
        this.getList();
        this.showimgss();
    },
 
    methods:{
         showimgss(){
             
            this.$nextTick(()=>{

                let linode = [this.$refs.wrapScrool][0].children;
                console.log(linode);
                if(linode.length>5){
                    var film = {     
                    imageNumWidth:240,
                    time:2000,

                    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)
                        }
                        if(ele==that.photos.length){
                            ele=0;
                        }
                    }
                }
             
                film.init()
                film.play(0)
                }
                
            })
            
        },
       
        toViewChange(json){
            this.$store.commit('modify', 'CooperationExchangeListDetails');
            window.localStorage.setItem('router', 'CooperationExchangeListDetails');
            const { href } = this.$router.resolve({
                name: 'CooperationExchangeListDetails',
                query: {
                key: json
                }
            });
            window.open(href, '_blank');
        },
        getList(){
            const that = this;
            let list ={
                pageSize:6,
                pageNo:1,
                language:this.$i18n.locale.toUpperCase(),
                activityTypeDict:'',
                activityArea:'',
                activityStatusDict:3, 
            }

            var photoUrl = this.countryList.activityWonderfulReviewVideo;
            if('' != photoUrl){
                this.photos = photoUrl.split(',');
                this.photos.forEach((item,index) =>{
                    if(''!=item){
                        this.photos[index] = "./api/file/pub/"+item;
                    }

                });
            }
            activityInfos(list).then(res=>{
                if(JSON.stringify(res.data)!=='{}'){
                    this.initData=res.data.activityInfos;
                    this.initData.forEach((element,index) => {
                        // console.log(element.baseActivityEntityId,element,that.id,that.countryList,'-----------------_------------qweeeeeee-------------------');
                        if(element.baseActivityEntityId==that.id){
                            that.initData.splice(index,1);
                            // console.log(element,'-----------------_------------qweeeeeee-------------------');
                        }
                    });
                    
                }else {
                    this.initData=[];
                }
            })
        },
    }
}
</script>
<style scoped>
  
    #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%;
    }

    /*.coo_box >>> img {*/
    /*    width: 100%;height: 100%;*/
    /*}*/


</style>