商品详情: 添加埋点

@@ -27,7 +27,7 @@
           <div class="info-name"><div>{{productDetail.product_name}}</div></div>
         </div>
         <a class="banner" v-if="resource" @click.prevent="gotoNewPage(resource.url)">
-          <img-size :src="sizeImg(resource.src)"/>
+          <img-size ref="resourceImg" :src="sizeImg(resource.src)"/>
         </a>
         <div class="info">
           <transition-group name="info-list" tag="div" class="info-list">
@@ -50,7 +50,7 @@
         <img class="ref-img"  v-lazy="prdDetailImage" />
 
         <div class="recommend" v-if="recommend"><h2>相关推荐</h2>
-          <product-list :list="recommend" priceKey="price"/>
+          <product-list ref="recommendList" :list="recommend" priceKey="price" :yas-params="recommendYasParams"/>
         </div>
       </div>
       <div class="footer">
@@ -97,7 +97,7 @@ import TopList from './components/top-list';
 import SquareImg from './components/square-img';
 import stateShortCutsMixins from './mixins';
 
-const { mapActions } = createNamespacedHelpers('product');
+const { mapActions, mapState } = createNamespacedHelpers('product');
 
 export default {
   name: 'ProductDetail',
@@ -133,10 +133,23 @@ export default {
       showSizeSelectSheet: false,
       showSizeRequestSheet: false,
       selectSizeConfig: {},
+
+      /**
+       * 商品详情页-推荐商品曝光时
+       * XY_UFO_SHOW_EVENT
+       * 1.P_NAME：页面名称，UFOProductDetail_LIST；
+       * 2.P_PARAM：页面参数；
+       * 3.I_INDEX：曝光顺序；
+       * 4.PRD_SKN：商品id；
+       */
+      recommendYasParams: {
+        P_NAME: 'UFOProductDetail_LIST',
+      },
     };
   },
   computed: {
     ...mapGetters(['isQiugouEnabled']),
+    ...mapState(['resourceContentCode']),
     productDec() {
       const goods = get(this.productDetail, 'goods_list[0]', {});
 
@@ -198,6 +211,31 @@ export default {
 
     this.loadData(this.productId);
     this.refresh();
+
+    if (this._resourceImgWatcher) {
+      this._resourceImgWatcher();
+    }
+
+    if (this.resource && this.resource.url) {
+      this.yasResourceVisible();
+    } else {
+      this._resourceImgWatcher = this.$watch(() => {
+        return this.resource && this.resource.url;
+      }, (url) => {
+        if (url) {
+          this._resourceImgWatcher && this._resourceImgWatcher();
+          this.yasResourceVisible();
+        }
+      }, {
+        immediate: true,
+      });
+    }
+  },
+  deactivated() {
+    if (this._resourceImgWatcher) {
+      this._resourceImgWatcher();
+      this._resourceImgWatcher = null;
+    }
   },
   beforeRouteUpdate(to, from ,next) {
     if (this.historyBackGuard() === false) {
@@ -228,6 +266,31 @@ export default {
     refresh() {
       this.$refs.slide && this.$refs.slide.refresh && this.$refs.slide.refresh();
     },
+    yasResourceVisible() {
+      /**
+       * 商品详情页中的资源位曝光
+       * XY_UFO_SHOW_EVENT
+       * 1.P_NAME：当前页面名称，XY_UFOProductDetail；
+       * 2.P_PARAM：当前页面资源位code；
+       * 3.PRD_ID：商品ID；
+       * 4.ACTION_URL：资源位跳转URL；
+       */
+      this.$store.dispatch('reportYas', {
+        params: {
+          appop: 'XY_UFO_SHOW_EVENT',
+          param: {
+            P_NAME: 'XY_UFOProductDetail',
+            P_PARAM: this.resourceContentCode,
+            PRD_ID: this.productId,
+            ACTION_URL: this.resource.url,
+          },
+        }
+      });
+      if (this._resourceImgWatcher) {
+        this._resourceImgWatcher();
+        this._resourceImgWatcher = null;
+      }
+    },
     sizeImg(src, width = 360, height = 72) {
       if (src) {
         return getImgUrl(src, width, height);
@@ -344,19 +407,23 @@ export default {
 
     // 选择出售或购买
     async onSelectTradeProduct(tradeProduct) {
-      if (this.selectSizeConfig.type === 'buy') {
-        //数据埋点
+      /**
+       * 数据埋点
+       * 商品详情页点击出售/购买/求购按钮
+       * event: XY_UFO_PRD_DT_SALE_C
+       * params: 1.TAB_ID：1-出售，2-购买，3-求购；
+       *         2.PRD_ID：商品ID；
+       */
       this.$store.dispatch('reportYas', {
         params: {
           appop: 'XY_UFO_PRD_DT_BUY_SEL_C',
           param: {
-              PRD_ID: tradeProduct.productId,
-              PRD_SKU: tradeProduct.skup,
-              PRD_SIZE: tradeProduct.size_name,
+            TAB_ID: this.selectSizeConfig.type === 'buy' ? 2 : 1,
+            PRD_ID: tradeProduct.productId
           },
         }
       });
-
+      if (this.selectSizeConfig.type === 'buy') {
         try {
           const info = await this.payment({
             skup: tradeProduct.skup,
@@ -441,6 +508,21 @@ export default {
 
     // 资源位
     gotoNewPage(url) {
+      /**
+       * 商品详情页中的资源位点击
+       * XY_UFO_GDS_DT_BANNER_C
+       * 1.PRD_ID：商品ID
+       * 2.ACTION_URL：跳转的URL
+       */
+      this.$store.dispatch('reportYas', {
+        params: {
+          appop: 'XY_UFO_GDS_DT_BANNER_C',
+          param: {
+            PRD_ID: this.productId,
+            ACTION_URL: url,
+          },
+        }
+      });
       this.$xianyu.goXianyuNewPage({url});
     },
   },

@@ -6,13 +6,13 @@ export default {
   ensureProduct({ commit }, { productId }) {
     commit(Types.ENSURE_PRODUCT_DETAIL, { productId });
   },
-  async fetchProductInfo({ commit }, { productId }) {
+  async fetchProductInfo({ commit, state }, { productId }) {
     const queryTasks = ['', '/resource', '/activity', '/recommend'].map(path => {
       let params = { product_id: productId };
 
       if (path === '/resource') {
         params = {
-          content_code: '05e4f5782dfc3a5e10d39b8f04a7dcb9',
+          content_code: state.resourceContentCode,
         };
       }
       return this.$api.post(`/api/ufo/product${path}`, params).then(result => {

@@ -50,7 +50,7 @@ export function defaultProduct() {
 export function defaultState() {
   return {
     products: {},
-
+    resourceContentCode: '05e4f5782dfc3a5e10d39b8f04a7dcb9', // 资源位code,当前只有一个固定的code
     /**
      1: 当前商品对应品牌系统的推荐
      2: 商品详情页面取前3