添加首页曝光及点击上报

@@ -7,6 +7,7 @@
         ref="scroll"
         :scroll-events="scrollEvents"
         @scroll="scrollHandler"
+        @scroll-end="scrollEndHandler"
         :options="options"
         @pulling-up="onPullingUp"
         :data="productList.list">
@@ -17,10 +18,10 @@
               <input class="search-input" type="search" disabled="true" placeholder="搜索商品名称或货号"/>
             </div>
             <template v-for="(item, index) in channelList.list">
-              <Swiper :list="item" :index="index" :key="index" v-if="item.template_name == 'threePicture'"/>
-              <Hot :list="item.data" :key="index" v-if="item.template_name == 'image_list'"/>
-              <Banner :list="item.data" :key="index" v-if="item.template_name == 'single_image'"/>
-              <TwoBanner :list="item.data" :key="index" v-if="item.template_name == 'twoPicture'"/>
+              <Swiper :list="item" :ref="index" :PAGE_URL="PAGE_URL" :key="index" v-if="item.template_name == 'threePicture'"/>
+              <Hot :list="item.data" :ref="index" :PAGE_URL="PAGE_URL" :key="index" v-if="item.template_name == 'image_list'"/>
+              <Banner :list="item.data" :ref="index" :PAGE_URL="PAGE_URL" :key="index" v-if="item.template_name == 'single_image'"/>
+              <TwoBanner :list="item.data" :ref="index" :PAGE_URL="PAGE_URL" :key="index" v-if="item.template_name == 'twoPicture'"/>
             </template>
           </div>
           <div ref="scrollNav" class="scroll-nav-wrap" v-if="navList.length">
@@ -56,7 +57,7 @@ export default {
   props: ['hideHeader'],
   data() {
     return {
-      reportParams: {},
+      PAGE_URL: '',
       options: {
         pullUpLoad: true,
         // pullDownRefresh: true,
@@ -64,7 +65,7 @@ export default {
         //   txt: '刷新成功',
         // }
       },
-      scrollEvents: ['scroll'],
+      scrollEvents: ['scroll','scroll-end'],
       scrollY: 0,
       navTop: 0,
       navHeight: 0,
@@ -115,6 +116,7 @@ export default {
     }
   },
   activated() {
+    this.PAGE_URL = window.location.href;
     if (!this.channelList.list || !this.channelList.list.length) {
       this.fetchChannelList();
     }
@@ -132,12 +134,63 @@ export default {
         this.navHeight = get(this.$refs, 'scrollNav.offsetHeight') || 0;
         this.total = this.$refs.scroll.$el.offsetHeight - this.navHeight;
         this.refreshProductList(this.active);
+        
+        this.getReportEle()
       });
     },
+    // 曝光上报
+     getReportEle(scrollY) {
+       this.channelList.list.map((item, index) => {
+         let scrollHeight = this.$refs.scroll.$el.offsetHeight; // 滚动区高度
+          let eleHeight = 0;
+          let eleTop = 0;
+
+        if(item.template_name !== 'guessLike') {
+          eleHeight = this.$refs[index][0].$el.offsetHeight;
+          eleTop = this.$refs[index][0].$el.offsetTop;
+        } else {
+          eleHeight = this.$refs.scrollNav.offsetHeight;
+          eleTop = this.$refs.scrollNav.offsetTop;
+        }
+        if(scrollY) { // 滚动时
+          if(scrollHeight + scrollY > eleTop && item.template_name === 'guessLike') {
+            // console.log('guessLike report')
+              item.data.forEach((val, i) => {
+              this.reportYas(val.reportParams) 
+            })
+          }
+          if(scrollY < (eleTop + eleHeight) && item.template_name !== 'guessLike') {
+            // console.log(item.template_name)
+            item.data.forEach((val, i) => {
+              this.reportYas(val.reportParams) 
+            })
+          }
+        } else { // 默认进入时
+          if(eleTop < scrollHeight) { //  获取每个元素距顶部高度 小于可视区高度即曝光
+            // console.log(item.template_name)
+            item.data.forEach((val, i) => {
+              this.reportYas(val.reportParams) 
+            })
+          }
+        }
+       })
+     },
+     reportYas(reportParams) {
+       this.$store.dispatch('reportYas', {
+        params: {
+          param: {...reportParams, PAGE_URL: this.PAGE_URL },
+          appop: 'XY_UFO_SHOW_EVENT'
+        }
+      });
+     },
     getIndex(index) {
       this.active = Number(index);
       this.$refs.scroll.scrollTo(0, -this.navTop, 300);
     },
+    scrollEndHandler({y}) {
+      let scrollHeight = Math.abs(y)
+      this.getReportEle(scrollHeight)
+    },
     scrollHandler({ y }) {
       if (this.navTop) {
         let scrollY = -y;

@@ -2,7 +2,7 @@
   <div class="banner" v-if="list.length > 0">
     <ul>
       <li v-for="(item, index) in list" :key="index">
-        <LayoutLink :href="item.url">
+        <LayoutLink :href="item.url" :report="{PAGE_URL, ...item.reportParams}">
           <ImageFormat :data-secc="item.src" :lazy="false" :src="item.src" :alt="item.alt" :width="item.width || 750" :height="item.height || 160" />
         </LayoutLink>
       </li>
@@ -18,6 +18,9 @@ export default {
       type: Array,
       default: true,
     },
+    PAGE_URL: {
+      type: String,
+    }
   },
   methods: {
 

@@ -2,7 +2,7 @@
   <div class="hot" v-if="list.length > 0">
     <ul>
       <li v-for="(item, index) in list" :key="index">
-        <LayoutLink :href="item.url" class="img-link">
+        <LayoutLink :href="item.url" class="img-link" :report="{PAGE_URL, ...item.reportParams}">
           <div class="hot-image">
             <ImageFormat :lazy="false" class="item-imge" :src="item.src" :alt="item.alt" :width="100" :height="100"></ImageFormat>
           </div>
@@ -27,7 +27,9 @@ export default {
       type: Array,
       default: true,
     },
-    
+    PAGE_URL: {
+      type: String,
+    }
   },
   components: {
     ImgSize,

 <template>
   <div class="swiper" v-if="list.data && list.data.length > 0">
     <div class="swiper-item swiper-item-left">
-      <LayoutLink :href="list.data[0].url" class="img-link" :report="{...params, I_INDEX: 1, F_URL: list.data[0].url}">
+      <LayoutLink :href="list.data[0].url" class="img-link" :report="{PAGE_URL, ...list.data[0].reportParams}">
         <ImageFormat :lazy="false" class="item-imge" :src="list.data[0].src" :width="310" :height="402"></ImageFormat>
       </LayoutLink>
     </div>
     <div class="swiper-item swiper-item-right">
-      <LayoutLink :href="list.data[1].url" class="img-link" :report="{...params, I_INDEX: 2, F_URL: list.data[1].url}">
+      <LayoutLink :href="list.data[1].url" class="img-link" :report="{PAGE_URL, ...list.data[1].reportParams}">
         <ImageFormat :lazy="false" class="item-imge" :src="list.data[1].src" :width="380" :height="196"></ImageFormat>
       </LayoutLink>
-      <LayoutLink :href="list.data[2].url" class="img-link" :report="{...params, I_INDEX: 3, F_URL: list.data[2].url}">
+      <LayoutLink :href="list.data[2].url" class="img-link" :report="{PAGE_URL, ...list.data[2].reportParams}">
         <ImageFormat :lazy="false" class="item-imge" :src="list.data[2].src" :width="380" :height="196"></ImageFormat>
       </LayoutLink>
     </div>
@@ -23,8 +23,8 @@ export default {
     list: {
       type: Object,
     },
-    index: {
-      type: Number,
+    PAGE_URL: {
+      type: String,
     }
   },
   data() {
@@ -36,18 +36,7 @@ export default {
     console.log(this.list)
   },
   activated() {
-    let { template_id, template_name } = this.list;
-    let PAGE_URL = window.location.href;
-    let F_INDEX = this.index + 1;
-    let params = {
-      P_NAME: 'XY_UFOHome',
-      P_PARAM: 'cfcd8de156d3edc26c84091804c43e23',
-      F_ID: template_id,
-      PAGE_URL,
-      F_INDEX,
-      F_NAME: template_name,
-    }
-    this.params = params;
+     
   },
   methods: {
     

@@ -2,7 +2,7 @@
   <div class="twoBanner" v-if="list.length > 0">
     <ul>
       <li v-for="(item, index) in list" :key="index">
-        <LayoutLink :href="item.url"> 
+        <LayoutLink :href="item.url" :report="{PAGE_URL, ...item.reportParams}"> 
           <ImageFormat :lazy="false" :src="item.src" :alt="item.alt" :width="344" :height="160" />
         </LayoutLink>
       </li>
@@ -18,7 +18,9 @@ export default {
       type: Array,
       default: [],
     },
-    
+    PAGE_URL: {
+      type: String,
+    }
   },
   methods: {
     // jump(item) {

 import Vue from 'vue';
 import * as Types from './types';
+const contentCode = 'cfcd8de156d3edc26c84091804c43e23'; //  f788335b57b67c1711f255648c744dab
 
 export default function() {
   return {
@@ -20,14 +21,32 @@ export default function() {
     },
     mutations: {
       [Types.FETCH_CHANNEL](state, { list }) {
-        state.channelList.list = list;
-        state.channelList.list.map(res => {
+
+        list.map((res, index) => {
+          // 增加曝光参数
+          let F_ID = res.template_id;
+          let F_NAME = res.template_name;
+          let F_INDEX = index + 1;
+
+          res.data.map((item, i) => {
+            let reportParams = {};
+
+            reportParams.P_NAME = 'XY_UFOHome';
+            reportParams.P_PARAM = contentCode;
+            reportParams.F_ID = F_ID;
+            reportParams.F_NAME = F_NAME;
+            reportParams.F_INDEX = F_INDEX;
+            reportParams.I_INDEX = i + 1;
+            reportParams.ACTION_URL = item.url;
+            item.reportParams = reportParams;
+          });
           if (res.template_name === 'hotSeries') {
             for (let i = 0; i < res.data.length; i++) {
               state.channelList.scrollnavList.push(res.data[i].series_name);
             }
           }
         });
+        state.channelList.list = list;
       },
       [Types.FETCH_PRODUCT](state, { productlist }) {
         console.log(state.channelList.productlist);
@@ -51,11 +70,12 @@ export default function() {
       },
       async fetchChannelList({ commit }) {
         const result = await this.$api.get('/api/ufo/channel/channelList', {
-          content_code: 'cfcd8de156d3edc26c84091804c43e23',
+          content_code: contentCode
         });
+
         if (result.code === 200) {
           commit(Types.FETCH_CHANNEL, { list: result.data });
-          return result.data;  
+          return result.data;
         }
       }
     },