商品列表上报修改

+<template>
+    <div class="exposure-item">
+        <slot></slot>
+    </div>
+</template>
+<script>
+    import _ from 'lodash';
+    import yoho from 'yoho';
+    import util from 'common/util';
+
+    export default {
+        name: 'ExposureItem',
+        props: {
+            pageName: {
+                type: String
+            },
+            pageParams: {
+                type: String
+            },
+            index: {
+                type: [String, Number]
+            },
+            productSkn: {
+                type: [String, Number]
+            }
+        },
+        data() {
+            return {
+                visible: false,
+                waitingReport: []
+            };
+        },
+        methods: {
+            record() {
+                const param = {
+                    P_NAME: this.pageName,     // 页面名称
+                    P_PARAM: this.pageParams,  // 页面参数
+                    I_INDEX: this.index,       // 内部item的序号
+                    PRD_SKN: this.productSkn   // 商品SKN （可选）
+                };
+
+                this.waitingReport.push(param);
+            },
+            report() {
+                if (this.waitingReport.length) {
+                    console.log('>>>>>>>>><<<<<<<<<', this.waitingReport)
+                    this.$yas.event('YB_SHOW_EVENT', this.waitingReport);
+                    this.reset();
+                }
+            },
+            reset() {
+                this.waitingReport = [];
+            }
+        }
+    };
+</script>
+<style>
+</style>

+<template>
+    <div class="exposure" ref="exposure">
+        <slot></slot>
+    </div>
+</template>
+<script>
+    import _ from 'lodash';
+    import yoho from 'yoho';
+    import util from 'common/util';
+
+    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';
+                }
+            }
+        },
+        data() {
+            return {
+            };
+        },
+        watch: {
+        },
+        methods: {
+            checkReport(evt, isInit) {
+                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;
+                });
+            },
+            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)));
+            }
+
+        },
+        created() {
+        },
+        mounted() {
+            this.$scrollEl = window;
+            this.scrollEvent = util.throttle(500, this.checkReport);
+            if (this.$scrollEl) {
+                this.$scrollEl.addEventListener('scroll', this.scrollEvent);
+                this.checkReport(void 0, true);
+            }
+
+            setInterval(() => {
+                let children = _.filter(this.$children, child => child.$options.name === 'ExposureItem');
+                _.each(children, child => child.report());
+                this.report();
+            }, 3000);
+        }
+    };
+</script>
+<style>
+</style>

 <template>
     <div class="goods-box" v-infinite-scroll="fetch" infinite-scroll-disable="disableFetch" :infinite-scroll-distance="1200">
         <ul class="cardlist card-large clearfix">
-            <li class="card" v-for="(item, index) in data" :key="item.product_skn" @click="clickProduct(item, index)">
-                <div class="card-pic">
-                    <a v-good-href="item" :class="hrefClass">
-                        <img v-img-src="{src: item.default_images, width: 330, height: 440}" :alt="item.product_name">
-                    </a>
-                </div>
-                <div class="card-bd">
-                    <h2 class="card-label">
-                        <a v-good-href="item" class="line-clamp-1" :class="hrefClass">{{item.product_name}}</a>
-                    </h2>
-                    <h2 class="card-label-desc" v-if="item.product_name1">
-                        <a v-good-href="item" class="line-clamp-1" :class="hrefClass">{{item.product_name}}</a>
-                    </h2>
-                    <span class="good-price sale-price">¥{{item.sales_price |
-                        toFixed}}</span>
-                    <span class="good-price" :class="{'old-price': item.market_price}" v-if="item.market_price">¥{{item.market_price | toFixed}}</span>
-                </div>
-            </li>
+            <exposure>
+                <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"
+                                   :product-skn="item.product_skn">
+                        <div class="card-pic">
+                            <a v-good-href="item" :class="hrefClass">
+                                <img v-img-src="{src: item.default_images, width: 330, height: 440}" :alt="item.product_name">
+                            </a>
+                        </div>
+                        <div class="card-bd">
+                            <h2 class="card-label">
+                                <a v-good-href="item" class="line-clamp-1" :class="hrefClass">{{item.product_name}}</a>
+                            </h2>
+                            <h2 class="card-label-desc" v-if="item.product_name1">
+                                <a v-good-href="item" class="line-clamp-1" :class="hrefClass">{{item.product_name}}</a>
+                            </h2>
+                            <span class="good-price sale-price">¥{{item.sales_price |
+                                toFixed}}</span>
+                            <span class="good-price" :class="{'old-price': item.market_price}" v-if="item.market_price">¥{{item.market_price | toFixed}}</span>
+                        </div>
+                    </exposure-item>
+                </li>
+            </exposure>
         </ul>
         <p class="cardlist--loading text-center" v-show="state === 1">loading...</p>
         <!--<p class="cardlist--end text-center" v-show="state === 0 ">--End--</p>-->
@@ -35,6 +41,8 @@ import Vue from 'vue';
 import lazyload from 'vue-lazyload';
 import infinitScroll from 'vue-infinite-scroll';
 import bus from 'common/vue-bus';
+import Exposure from 'component/exposure/exposure.vue';
+import ExposureItem from 'component/exposure/exposure-item.vue';
 
 Vue.use(lazyload, { preLoad: 3 });
 Vue.use(infinitScroll);
@@ -105,6 +113,10 @@ export default {
                 }, delay);
             };
         }
+    },
+    components: {
+        Exposure,
+        ExposureItem
     }
 };
 

@@ -89,4 +89,4 @@ export default {
         }
     }
 };
-</script>
\ No newline at end of file
+</script>