数据曝光上报

@@ -21,7 +21,7 @@
     {{/ifcond}}
     {{#ifcond layout_float '==' 'C'}}
         {{#if data.prdList}}
-            <div class="resource-collage-buy-prd-list-c" data-prd-list-length="{{data.prdList.length}}" data-prd-speed="{{speed}}">
+            <div class="resource-collage-buy-prd-list-c templates" data-id="{{@index}}" data-prd-list-length="{{data.prdList.length}}" data-prd-speed="{{speed}}">
                 {{!-- <div class="collage-buy-title">{{../template_intro}}</div> --}}
                 <div class="collage-buy-title">今日必拼</div>
                 <div class="swiper-container1 swiper-container">

-<div class="banner-top">
+<div class="banner-top templates" data-id="{{@index}}">
     <div class="banner-swiper swiper-container">
         <ul class="swiper-wrapper">
             {{#each data}}

-<div id='fixedTab' class="guess-like">
+<div id='fixedTab' class="guess-like templates" data-id="{{@index}}">
     <div class="wapper">
         <div class="guess-scroll">
             {{#each data}}

 {{#data}}
-<div class="resource-single">
+<div class="resource-single templates" data-id="{{@index}}">
     {{#if title}}
     <div class="title">
         <div class='line'></div>

 {{#data}}
-<div class="split-image" {{#ifcond ../is_extend '!==' '1'}}style="margin: 0 15px"{{/ifcond}}>
+<div class="split-image templates" data-id="{{@index}}" {{#ifcond ../is_extend '!==' '1'}}style="margin: 0 15px"{{/ifcond}}>
 <img src="{{image2 src w=../image_width h=../image_height q=60 mode=3}}"></img>
 <div class='url-content'>
     {{#each urls}}

 {{#data}}
-<div class="resource-two-image">
+<div class="resource-two-image templates" data-id="{{@../index}}">
     {{#each list}}
     <div class="img-item">
         <a href="{{url}}" id="{{../template_id}}" name="{{../template_intro}}">

+
+import qs from 'yoho-qs';
+const yoho = require('js/yoho-app');
+
+class ResourceShowYasRpter {
+    constructor() {
+        this.timer = null;
+        this.reportParams = {
+            C_ID: qs.physical_channel || 1,
+            DATA: []
+        };
+        this.lastShowSkns = [];
+
+        window.onscroll = () => {
+            window.requestAnimationFrame(() => {
+                this.reportCtl();
+            });
+        };
+
+        this.report();
+    }
+
+    getPname() {
+        let isiOS = yoho.isiOS;
+        let isAndroid = yoho.isAndroid;
+
+        let P_NAME = 'h5FP_CollageHome';
+
+        if (isAndroid) {
+            P_NAME = 'aFP_CollageHome';
+        }
+        if (isiOS) {
+            P_NAME = 'iFP_CollageHome';
+        }
+
+        return P_NAME;
+    }
+
+    reportCtl() {
+        if (this.timer) {
+            clearTimeout(this.timer);
+        }
+
+        this.timer = setTimeout(() => {
+            this.reportParams.DATA = [];
+            this.report();
+        }, 1000);
+    }
+
+    /**
+     *  这个链接是否是商品
+     */
+    theAisGoods(slideClass, aIndex) {
+        if (
+            slideClass.indexOf('swiper-slide-active') !== -1 ||
+            slideClass.indexOf('swiper-slide-next') !== -1
+        ) {
+            this.aIndex = aIndex;
+            return true;
+        } else if (this.aIndex) {
+            this.aIndex = false;
+            return true;
+        } else {
+            this.aIndex = false;
+            return false;
+        }
+    }
+
+    report() {
+        let cacheTheShowSkns = []; // 暂存此次上报的楼层，上报后复制给 lastReportSkns
+
+        $('.templates').each((floorIndex, theFloor) => {
+            let $theFloor = $(theFloor);
+            let F_INDEX = $theFloor.data('id') + 1;
+            let floorsRawArr = []; // 当前展示楼层
+
+
+            if ($.inviewport($theFloor, { threshold: 0 })) {
+                // 楼层可见
+                $theFloor.find('ul > li').each((aIndex, theA) => {
+                    let $theA = $(theA);
+                    let href = $theA.attr('data-href');
+
+                    F_INDEX = $theFloor.data('id') + 1;
+
+                    if ($.inviewport($theA, { threshold: 0 }) && href) {
+                        floorsRawArr.push({
+                            href: href,
+                            I_INDEX: aIndex + 1,
+                            F_INDEX
+                        });
+                    }
+                });
+
+                $theFloor.find('.split-item').each((aIndex, theA) => {
+                    let $theA = $(theA);
+                    let href = $theA.data('href');
+
+                    F_INDEX = $theFloor.data('id') + 1;
+
+                    if ($.inviewport($theA, { threshold: 0 }) && href) {
+                        floorsRawArr.push({
+                            href: href,
+                            I_INDEX: aIndex + 1,
+                            F_INDEX
+                        });
+                    }
+                });
+
+                $theFloor.find('.swiper-slide-1').each((aIndex, theA) => {
+                    let $theA = $(theA);
+                    let productSkn = $theA.data('product-skn');
+                    let itemIndex = $theA.data('item-idx');
+
+                    F_INDEX = $theFloor.data('id') + 1;
+
+                    if (
+                        $.inviewport($theA, { threshold: 0 }) &&
+                        productSkn &&
+                        this.theAisGoods($(theA).attr('class'), aIndex)
+                    ) {
+                        floorsRawArr.push({
+                            href: '',
+                            PRD_SKN: productSkn,
+                            I_INDEX: itemIndex + 1,
+                            F_INDEX
+                        });
+                    }
+                });
+            }
+
+            if (floorsRawArr.length) { // 本楼层有符合上报条件的商品
+                for (let goodsRawObj of floorsRawArr) {
+                    let newParams = {
+                        P_NAME: this.getPname(),
+                        P_PARAM: goodsRawObj.href && goodsRawObj.href.split('?')[0] || '',
+                        F_INDEX: goodsRawObj.F_INDEX,
+                        I_INDEX: goodsRawObj.I_INDEX,
+                    };
+
+                    if (goodsRawObj.PRD_SKN) {
+                        newParams.PRD_SKN = goodsRawObj.PRD_SKN;
+                        newParams.ACTION_URL = '';
+                    } else {
+                        newParams.ACTION_URL = goodsRawObj.href;
+                    }
+                    this.reportParams.DATA.push(newParams);
+                }
+            }
+        });
+
+        this.lastShowSkns = cacheTheShowSkns;
+
+        setTimeout(() => {
+            if (typeof window._yas !== 'undefined' && window._yas.sendCustomInfo &&
+                this.reportParams.DATA && this.reportParams.DATA.length) {
+                window._yas.sendCustomInfo({
+                    op: 'YB_SHOW_EVENT',
+                    appop: 'YB_SHOW_EVENT',
+                    param: JSON.stringify(this.reportParams)
+                }, true);
+            }
+        }, 1000);
+    }
+}
+
+export default new ResourceShowYasRpter();

@@ -239,7 +239,8 @@ class Group extends Page {
                     product_skn: productSkn,
                     activity_id: activityId,
                     activity_type: 'groupPurchase',
-                    P_NAME
+                    P_NAME,
+                    FP_NAME: P_NAME
                 }
             };
             let paramStr = JSON.stringify(param);
@@ -720,4 +721,5 @@ class Group extends Page {
 
 $(() => {
     new Group();
+    require('./feature/resource-show-yas-rpter');
 });