CooperationActiveReview.vue 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. <template>
  2. <div style="margin-top: 20px;margin-left: 20px;margin-right: 20px;">
  3. <!-- 活动回顾 -->
  4. <div v-html="activityReview" class="coo_box"></div>
  5. <!-- 精彩回顾 -->
  6. <div style="width: 100%;height: 250px;" v-if="photos.length != 0">
  7. <div class="enterprise_style">
  8. <span class="enterprise_style_span">{{$t('common.WonderfulReview')}}</span>
  9. </div>
  10. <div id="wrap" >
  11. <ul id="film" ref="wrapScrool">
  12. <li v-for="(item,index) in photos" :key="index + 2" style="margin-left: 20px;">
  13. <div>
  14. <img :src="item" alt style="width: 100%;height: 150px;" v-if="item"/>
  15. <img :src="'api/file/pub/def/projectdefault.png'" alt
  16. style="width: 100%;height: 150px;" v-else/>
  17. </div>
  18. </li>
  19. </ul>
  20. </div>
  21. </div>
  22. </div>
  23. </template>
  24. <script>
  25. import {activityInfos} from '@/api/cooperation/baseCooperationUnit'
  26. export default {
  27. name:"CooperationActiveReview",
  28. props:['activityReview','id','countryList'],
  29. data(){
  30. return {
  31. i:0,
  32. locale:'',
  33. Area:null,
  34. value2:null,
  35. type:null,
  36. initData:[],
  37. recommend:[],
  38. photos:[],
  39. scrollDis:0,
  40. }
  41. },
  42. watch:{
  43. "$i18n.locale"() {
  44. this.getList();
  45. this.showimgss();
  46. },
  47. },
  48. mounted(){
  49. this.getList();
  50. this.showimgss();
  51. },
  52. methods:{
  53. showimgss(){
  54. this.$nextTick(()=>{
  55. let linode = [this.$refs.wrapScrool][0].children;
  56. console.log(linode);
  57. if(linode.length>5){
  58. var film = {
  59. imageNumWidth:240,
  60. time:2000,
  61. numindex:0,
  62. ulbox:document.getElementById("film"),
  63. linodes:document.getElementById("film").getElementsByTagName("li"),
  64. li_count:document.getElementById("film").getElementsByTagName("li").length,
  65. animate:null,
  66. autoplay:null,
  67. //初始化
  68. init:function(){
  69. film.ulbox.innerHTML = film.ulbox.innerHTML + film.ulbox.innerHTML;
  70. film.ulbox.style.left = "0px";
  71. film.autoplay = setInterval(function(){film.play(film.numindex+1)},film.time);
  72. },
  73. //添加动画
  74. play:function(ele){
  75. const that =this ;
  76. var ulbox_left = parseInt(film.ulbox.style.left);
  77. if(ele>film.li_count){
  78. ele-=film.li_count;
  79. film.numindex-=film.li_count;
  80. film.ulbox.style.left = "0px" ;
  81. ulbox_left = parseInt(film.ulbox.style.left);
  82. }
  83. //添加animate,等同于css中animate
  84. if(ele>film.numindex){
  85. film.animate = setInterval(function(){
  86. if(parseInt(film.ulbox.style.left)>(ulbox_left - film.imageNumWidth*(ele-film.numindex)+film.imageNumWidth*(ele-film.numindex)/10)){
  87. film.ulbox.style.left = parseInt(film.ulbox.style.left) - film.imageNumWidth*(ele-film.numindex)/10 +"px" ;
  88. }else{
  89. film.ulbox.style.left = ulbox_left - film.imageNumWidth*(ele-film.numindex) +"px" ;
  90. clearInterval(film.animate);
  91. film.numindex = ele;
  92. film.animate = null;
  93. }
  94. },30)
  95. }
  96. if(ele==that.photos.length){
  97. ele=0;
  98. }
  99. }
  100. }
  101. film.init()
  102. film.play(0)
  103. }
  104. })
  105. },
  106. toViewChange(json){
  107. this.$store.commit('modify', 'CooperationExchangeListDetails');
  108. window.localStorage.setItem('router', 'CooperationExchangeListDetails');
  109. const { href } = this.$router.resolve({
  110. name: 'CooperationExchangeListDetails',
  111. query: {
  112. key: json
  113. }
  114. });
  115. window.open(href, '_blank');
  116. },
  117. getList(){
  118. const that = this;
  119. let list ={
  120. pageSize:6,
  121. pageNo:1,
  122. language:this.$i18n.locale.toUpperCase(),
  123. activityTypeDict:'',
  124. activityArea:'',
  125. activityStatusDict:3,
  126. }
  127. var photoUrl = this.countryList.activityWonderfulReviewVideo;
  128. if('' != photoUrl){
  129. this.photos = photoUrl.split(',');
  130. this.photos.forEach((item,index) =>{
  131. if(''!=item){
  132. this.photos[index] = "./api/file/pub/"+item;
  133. }
  134. });
  135. }
  136. activityInfos(list).then(res=>{
  137. if(JSON.stringify(res.data)!=='{}'){
  138. this.initData=res.data.activityInfos;
  139. this.initData.forEach((element,index) => {
  140. // console.log(element.baseActivityEntityId,element,that.id,that.countryList,'-----------------_------------qweeeeeee-------------------');
  141. if(element.baseActivityEntityId==that.id){
  142. that.initData.splice(index,1);
  143. // console.log(element,'-----------------_------------qweeeeeee-------------------');
  144. }
  145. });
  146. }else {
  147. this.initData=[];
  148. }
  149. })
  150. },
  151. }
  152. }
  153. </script>
  154. <style scoped>
  155. #wrap{
  156. width:100%;
  157. overflow: hidden;
  158. position:relative;
  159. height:150px;
  160. margin: 16px auto;
  161. }
  162. #film{
  163. position: absolute;
  164. width: 40000px;
  165. }
  166. #film li{
  167. width: 198px;
  168. height: 150px;
  169. margin-right: 20px;
  170. float: left;
  171. }
  172. #film li img{
  173. width: 100%;
  174. }
  175. /*.coo_box >>> img {*/
  176. /* width: 100%;height: 100%;*/
  177. /*}*/
  178. </style>