检索页商品跳转详情添加上报参数

@@ -76,7 +76,7 @@ function GoodHrefBinding(el, binding) {
     if (binding.value === binding.oldValue) {
         return;
     }
-    let {product_id, goods_id, cn_alphabet, product_skn} = binding.value;
+    let {product_id, goods_id, cn_alphabet, product_skn, from_page_name, from_page_param} = binding.value;
 
     if (!binding.modifiers.collect) {
         goods_id = binding.value.goods_list.length ? binding.value.goods_list[0].goods_id : '';
@@ -87,7 +87,9 @@ function GoodHrefBinding(el, binding) {
         let goParams = {
             action: 'go.productDetail',
             params: {
-                product_skn: product_skn
+                product_skn: product_skn,
+                from_page_name,
+                from_page_param
             }
         };
 

@@ -14,7 +14,7 @@
             pageName: {
                 type: String
             },
-            pageParams: {
+            pageParam: {
                 type: String
             },
             index: {
@@ -36,13 +36,12 @@
                 // 元素由不可见变为可见则记录，否则不记录
                 if (!this.isVisiable && visible) {
                     const param = {
-                        P_NAME: this.pageName,     // 页面名称
-                        P_PARAM: this.pageParams,  // 页面参数
+                        P_NAME: this.pageName || '',     // 页面名称
+                        P_PARAM: this.pageParam || '',  // 页面参数
                         I_INDEX: this.index,       // 内部item的序号
                         PRD_SKN: this.productSkn   // 商品SKN （可选）
                     };
 
-                    console.log('push')
                     this.waitingReport.push(param);
                 }
                 this.isVisiable = visible;

@@ -11,7 +11,10 @@
     export default {
         name: 'Exposure',
         props: {
-            topClassName: String
+            topClassName: {
+                type: String,
+                default: 'top-filter'
+            }
         },
         data() {
             return {
@@ -43,26 +46,28 @@
         created() {
         },
         mounted() {
-            const filterRect = document.querySelector(`.${this.topClassName}`).getBoundingClientRect();
+            let timer = setInterval(() => {
+                const filterRect = document.querySelector(`.${this.topClassName}`).getBoundingClientRect();
 
-            // 可见区域顶部距离视口的上边的距离
-            this.viewArea.top = filterRect.bottom;
+                // 可见区域顶部距离视口的上边的距离
+                this.viewArea.top = filterRect.bottom;
 
-            // 可见区域底部距离视口的上边的距离
-            this.viewArea.bottom = window.screen.height;
+                // 可见区域底部距离视口的上边的距离
+                this.viewArea.bottom = window.screen.height;
 
-            this.$scrollEl = window;
-            this.scrollEvent = util.throttle(500, this.checkReport);
-            if (this.$scrollEl) {
-                this.$scrollEl.addEventListener('scroll', this.scrollEvent);
+                this.$scrollEl = window;
+                this.scrollEvent = util.throttle(500, this.checkReport);
+                if (this.$scrollEl) {
+                    this.$scrollEl.addEventListener('scroll', this.scrollEvent);
+
+                }
+
+                if (this.$children.length) {
+                    clearInterval(timer);
+                    this.checkReport(void 0, true);
+                }
+            }, 500);
 
-                let timer = setInterval(() => {
-                    if (this.$children.length) {
-                        clearInterval(timer);
-                        this.checkReport(void 0, true);
-                    }
-                }, 500);
-            }
             setInterval(() => {
                 _.each(_.filter(this.$children, child => child.$options.name === 'ExposureItem'), child => child.report());
             }, 3000);

 <template>
     <div class="goods-box" v-infinite-scroll="fetch" infinite-scroll-disable="disableFetch" :infinite-scroll-distance="1200">
         <ul class="cardlist card-large clearfix">
-            <exposure>
+            <exposure :top-class-name="topClassName">
                 <li class="card" v-for="(item, index) in data" :key="item.product_skn"
                     @click="clickProduct(item, index)">
-                    <exposure-item page-name="test" page-params="params" :index="index"
+                    <exposure-item :page-name="reportPageName" :page-param="reportPageParam" :index="index"
                                    :product-skn="item.product_skn">
                         <div class="card-pic">
                             <a v-good-href="item" :class="hrefClass">
@@ -57,9 +57,15 @@ export default {
         /* 开启滚动加载 */
         disableFetch: Boolean,
 
+        topClassName: String,
+
         // 数据
         data: Array,
-        state: [Number, Object]   // -1: 无数据 0: 全部加载完  1: 正在加载
+        state: [Number, Object],   // -1: 无数据 0: 全部加载完  1: 正在加载
+
+        // for yas report
+        reportPageName: String,
+        reportPageParam: String,
     },
     computed: {
         // 空列表: data.length === 0
@@ -67,6 +73,12 @@ export default {
             return !this.data.length;
         }
     },
+    watch: {
+        reportPageName(v) {
+            console.log(v)
+        }
+
+    },
     mounted() {
         const $scrollEl = this.getScrollEventTarget(this.$el);
 

 <template>
     <div class="goods">
-        <product-list :data="productList"></product-list>
+        <product-list :data="productList" top-class-name="channel-tab"></product-list>
     </div>
 </template>
 

 <template>
     <div>
         <filter-box :val="order" :filter="filterConfig" v-if="enableOrder" :search-page="true"></filter-box>
-        <product-list :data="productList" :state="listState" class="list-items" @click-product="clickProduct"></product-list>
+        <product-list :data="productList" :state="listState" class="list-items"
+                      @click-product="clickProduct" :report-page-name="pageName"
+                      :report-page-param="query"></product-list>
     </div>
 </template>
 <script>
     import Vue from 'vue';
+    import _ from 'lodash';
     import $ from 'jquery';
     import lazyload from 'vue-lazyload';
     import infinitScroll from 'vue-infinite-scroll';
@@ -37,7 +40,10 @@
                 inSearching: false,
                 enableOrder: false,
                 filterConfig: null,
-                filter: {}
+                filter: {},
+
+                // for yas report
+                pageName: 'h5FP_search',
             };
         },
         computed: {
@@ -89,7 +95,6 @@
 
                 this.inSearching = true;
 
-
                 return $.get(this.url, Object.assign({
                     order: this.order, // 排序 信息
                     query: this.query,
@@ -99,8 +104,14 @@
                         if (res.data) {
                             this.page = res.data.page;
                             this.totalPage = res.data.page_total;
-                            this.productList = this.productList.concat(res.data.product_list);
 
+                            // yas report param injection
+                            _.each(res.data.product_list, item => {
+                                item.from_page_name = this.pageName;
+                                item.from_page_param = this.query;
+                            });
+
+                            this.productList = this.productList.concat(res.data.product_list);
                             if (!this.filterConfig) {
                                 this.filterConfig = res.data.filter;
                             }