商品列表上报组件修改

@@ -27,23 +27,29 @@
         data() {
             return {
                 visible: false,
-                waitingReport: []
+                waitingReport: [],
+                isVisible: false
             };
         },
         methods: {
-            record() {
-                const param = {
-                    P_NAME: this.pageName,     // 页面名称
-                    P_PARAM: this.pageParams,  // 页面参数
-                    I_INDEX: this.index,       // 内部item的序号
-                    PRD_SKN: this.productSkn   // 商品SKN （可选）
-                };
+            record(visible) {
+                // 元素由不可见变为可见则记录，否则不记录
+                if (!this.isVisiable && visible) {
+                    const param = {
+                        P_NAME: this.pageName,     // 页面名称
+                        P_PARAM: this.pageParams,  // 页面参数
+                        I_INDEX: this.index,       // 内部item的序号
+                        PRD_SKN: this.productSkn   // 商品SKN （可选）
+                    };
 
-                this.waitingReport.push(param);
+                    console.log('push')
+                    this.waitingReport.push(param);
+                }
+                this.isVisiable = visible;
             },
             report() {
                 if (this.waitingReport.length) {
-                    console.log('>>>>>>>>><<<<<<<<<', this.waitingReport)
+                    console.log('>>>>>>>>>report<<<<<<<<<', this.waitingReport)
                     this.$yas.event('YB_SHOW_EVENT', this.waitingReport);
                     this.reset();
                 }

@@ -11,70 +11,60 @@
     export default {
         name: 'Exposure',
         props: {
-            viewRect: {
-                type: Object,
-                default() {
-                    return {
-                        top: 0,
-                        left: 0,
-                        bottom: 0,
-                        right: 0
-                    }
-                }
-            },
-            itemClass: {
-                type: String,
-                default() {
-                    return 'exposure-item';
-                }
-            }
+            topClassName: String
         },
         data() {
             return {
+                viewArea: {
+                    top: 0,
+                    bottom: 0
+                }
             };
         },
         watch: {
         },
         methods: {
-            checkReport(evt, isInit) {
+            checkReport() {
                 let children = _.filter(this.$children, child => {
                     return child.$options.name === 'ExposureItem'
                 });
 
-                _.each(children, (item, index) => {
-                    const visible = this.isVisible(item.$el, this.$scrollEl);
-
-//                    if (visible && (this.componentStatus[index] !== visible || isInit)) {
-//                        this.report(component, index + 1);
-//                    }
-//                    this.componentStatus[index] = visible;
+                _.each(children, child => {
+                    return child.record(this.isVisible(child.$el))
                 });
             },
-            report() {
-
-            },
             isVisible($el) {
                 const rect = $el.getBoundingClientRect();
-//                return ((parentRect.top >= rect.top && parentRect.top <= (rect.top + rect.height)) ||
-//                ((parentRect.top + parentRect.height) >= rect.top && (parentRect.top + parentRect.height) <= (rect.top + rect.height)) ||
-//                (rect.top >= parentRect.top && (rect.top + rect.height) <= (parentRect.top + parentRect.height)));
-            }
 
+                return ((rect.top > this.viewArea.top && rect.top < this.viewArea.bottom) ||
+                rect.bottom > this.viewArea.top && rect.bottom < this.viewArea.bottom)
+            }
         },
         created() {
         },
         mounted() {
+            const filterRect = document.querySelector(`.${this.topClassName}`).getBoundingClientRect();
+
+            // 可见区域顶部距离视口的上边的距离
+            this.viewArea.top = filterRect.bottom;
+
+            // 可见区域底部距离视口的上边的距离
+            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.checkReport(void 0, true);
-            }
 
+                let timer = setInterval(() => {
+                    if (this.$children.length) {
+                        clearInterval(timer);
+                        this.checkReport(void 0, true);
+                    }
+                }, 500);
+            }
             setInterval(() => {
-                let children = _.filter(this.$children, child => child.$options.name === 'ExposureItem');
-                _.each(children, child => child.report());
-                this.report();
+                _.each(_.filter(this.$children, child => child.$options.name === 'ExposureItem'), child => child.report());
             }, 3000);
         }
     };