feat(埋点): 添加数据埋点的代码封装

@@ -8,14 +8,23 @@
  * @path: 页面访问路径及参数说明
 !-->
 <template>
+
 <div class="yasTest-wrap">
-  <div class="top">height:1000px</div>
-  <div v-expose:foo.a.b="true" ref="exposeRef" :id="`box${item.id}`" class="box" v-for="(item, index) in yasList" :key="index">
+  <div v-trackClick="{ props: 'YAS_BUY_CLICK_DATA' }" class="top" @click="buy">
+    <h2 style="height: 200px">height:1000px;购买</h2>
+  </div>
+  <div
+    ref="exposureRef"
+    v-trackExposure="{ props: 'YAS_ITEM_EXPOSURE_DATA', index }"
+    v-trackClick="{ props: 'YAS_ITEM_CLICK_DATA', index }"
+    class="box"
+    v-for="(item, index) in yasList" :key="index">
     <pre>
       height:100px
       id: {{item.id}}
     </pre>
   </div>
+
   <div class="down">height:1000px</div>
 </div>
 </template>
@@ -24,78 +33,107 @@
 // horizontal vertical
 
 // initHorizontalExposure
-import { debounce, throttle } from 'lodash';
+import trackEventMixins from '@/pages/trackEventMixins'
 
-const mixins = {
+export default {
+  name: 'yasTest',
+  mixins: [trackEventMixins],
+  props: {},
   data() {
     return {
-      yasList: [...Array(20).keys()].map((item,index)=>({id: index, offset:null}))
+      direction: 'left',
+      info:{
+        name: 'sjsdskdjskj'
+      },
+      yasList: [...Array(20).keys()].map((item, index) => ({
+        id: index
+      }))
     }
   },
   created() {},
   mounted() {
-    console.log(this);
-
     setTimeout(() => {
-      window.addEventListener('scroll', debounce(throttle(this.handleScroll,500),200));
-    }, 0);
-
-
-    // window.addEventListener('scroll', throttle(this.handleScroll,500));
+      this.direction = 'right'
+    }, 3000);
+  },
+  activated() {
+    // console.log('activated',this);
   },
-  activated() {},
   deactivated() {},
   // beforeRouteEnter (to, from, next) {},
   // beforeRouteUpdate(to, from, next) {},
   // beforeRouteLeave(to, from, next) {},
-  destroyed() {
-    window.removeEventListener('scroll', null);
-  },
+  destroyed() {},
   methods: {
-    handleScroll(e) {
-      const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
+    trackEventClick(target) {
+      console.dir(target);
+    },
+    trackEventScroll(target) {
+      console.log(target);
+    },
+    buy() {
+      console.log('我来自于@click点击，在此处负责执行相关业务逻辑代码！！');
+    }
+  },
+  computed: {
 
-      let isInViewPortArr = this.$refs['exposeRef'].map(el => {
-        const Rect = el.getBoundingClientRect();
-        const top = el.getBoundingClientRect().top;
-        const elHeight = Rect.height;
-        console.log(`窗口宽度：${viewPortHeight},元素距离可视基准线top值:${top},是否在可视区域内：${top+ elHeight<0?false:top <= viewPortHeight}`);
-        return (top > 0 || top + elHeight > 0) ? top <= viewPortHeight : false;
-      });
+    pageExposure() {
+      return {
+        params: {
+          appop: '页面曝光上报Api',
+          param: {
+            name: `我是页面曝光传参`
+          }
+        }
+      }
+    },
 
-      console.log('isInViewPortArr', isInViewPortArr);
+    YAS_BUY_CLICK_DATA() {
+      return {
+        params: {
+          appop: 'yasBuyParamsApi-test',
+          param: {
+            name: '我是对象传参测试' + this.direction
+          }
+        }
+      }
+    },
 
+    YAS_ITEM_CLICK_DATA() {
+      return this.yasList.map((el,index)=>{
+        return {
+          params: {
+            param: {
+              DATA: [{
+                P_NAME: '',
+                TYPE_ID: '',
+                TAB_ID: '',
+                TAB_NAME: '',
+                P_PARAM: '',
+                I_INDEX: index,
+                PRD_ID: 12233,
+                PRD_TYPE: '点击了列表项目' + index
+              }]
+            },
+            appop: 'YAS_ITEM_CLICK_DATAApi_test222'
+          }
+        }
+      });
+    },
 
-      isInViewPortArr.filter((isInViewPort,index)=>{
-        if (isInViewPort===true) {
-          console.log(`此处进行曝光事件上报,需要曝光索引为`, index, isInViewPort);
+    YAS_ITEM_EXPOSURE_DATA() {
+      return this.yasList.map((el,index)=>{
+        return {
+          params: {
+            appop: 'YAS_ITEM_EXPOSURE_DATAApi-test',
+            param: {
+              name: '曝光列表项目' + index
+            }
+          }
         }
       });
     }
   },
-  computed: {},
-  watch: {},
-  components: {},
-  directives: {}
-}
-
-export default {
-  name: 'yasTest',
-  mixins: [mixins],
-  props: {},
-  data() {
-    return {}
-  },
-  created() {},
-  mounted() {},
-  activated() {},
-  deactivated() {},
-  // beforeRouteEnter (to, from, next) {},
-  // beforeRouteUpdate(to, from, next) {},
-  // beforeRouteLeave(to, from, next) {},
-  destroyed() {},
-  methods: {},
-  computed: {},
   watch: {},
   components: {}
 };
@@ -115,7 +153,7 @@ export default {
     }
   }
   .top,.down {
-    height: 2000px;
+    height: 1000px;
   }
 }
 //@import "./style.scss";