Merge branch 'hotfix/productList-click' into 'master'

Hotfix/product list click



See merge request !48

@@ -51,7 +51,12 @@ function GoodHrefBinding(el, binding) {
         href += `?openby:yohobuy=${JSON.stringify(goParams)}`;
     }
     el.href = href;
+
+    if (el.tagName.toLowerCase() === 'span') {
+        el.dataset.url = href;
+    }
 }
+
 function BlkHrefBinding(el, binding) {
     let value = binding.value;
     let protocol = value.match(/^(https?:)?\/\//);
@@ -169,6 +174,11 @@ export default (Vue) => {
         bind: GoodHrefBinding,
         update: GoodHrefBinding
     });
+
+    Vue.directive('good-link-url', {
+        bind: GoodHrefBinding,
+        update: GoodHrefBinding
+    });
     Vue.directive('blk-href', {
         bind: BlkHrefBinding,
         update: BlkHrefBinding

 <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)">
+            <li class="card" v-for="(item, index) in data" :key="item.product_skn">
                 <div class="card-pic">
-                    <a v-good-href="item">
+                    <a-link :product="item">
                         <img v-img-src="{src: item.default_images, width: 330, height: 440}" :alt="item.product_name">
-                    </a>
+                    </a-link>
                 </div>
                 <div class="card-bd">
                     <h2 class="card-label">
-                        <a v-good-href="item" class="line-clamp-1">{{item.product_name}}</a>
+                        <a-link :product="item" class="line-clamp-1">{{item.product_name}}</a-link>
                     </h2>
                     <h2 class="card-label-desc" v-if="item.product_name1">
-                        <a v-good-href="item" class="line-clamp-1">{{item.product_name}}</a>
+                        <a-link :product="item" class="line-clamp-1">{{item.product_name}}</a-link>
                     </h2>
                     <span class="good-price" :class="{'sale-price': item.market_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>
@@ -31,6 +31,7 @@
 </template>
 <script>
     import Vue from 'vue';
+    import aLink from 'component/tool/a-link.vue';
     import lazyload from 'vue-lazyload';
     import infinitScroll from 'vue-infinite-scroll';
     import bus from 'common/vue-bus';
@@ -57,10 +58,10 @@
         methods: {
             fetch: function() {
                 bus.$emit('list.paging');
-            },
-            clickProduct(item, index) {
-                this.$emit('click-product', item, index);
             }
+        },
+        components: {
+            aLink
         }
     };
 

+<template>
+    <div @click="click">
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+    import yoho from 'yoho';
+    import parse from 'yoho-qs/parse';
+
+    export default {
+        name: 'ALink',
+        props: ['product'],
+        methods: {
+            click() {
+                let {product_id, goods_id, cn_alphabet, product_skn} = this.product;
+
+                if (!goods_id) {
+                    goods_id = this.product.goods_list.length ? this.product.goods_list[0].goods_id : '';
+                }
+                let goodUrl = `/product/pro_${product_id}_${goods_id}/${cn_alphabet}.html`;
+
+                if (yoho.isYohoBuy) {
+                    let goParams = {
+                        action: 'go.productDetail',
+                        params: {
+                            product_skn: product_skn
+                        }
+                    };
+
+                    goodUrl += `?openby:yohobuy=${JSON.stringify(goParams)}`;
+                }
+
+                if (goodUrl) {
+                    let url = goodUrl;
+                    const classList = this.$el.classList;
+                    const excluded = classList.contains('no-intercept');
+
+                    if (excluded) {
+                        location.href = this.href;
+                        return;
+                    }
+
+                    if (/^\/\//.test(url)) {
+                        url = 'http:' + url;
+                    }
+
+                    this.dispatch(url);
+                    return false;
+                }
+            },
+            dispatch(url) {
+                const origin = location.origin;
+                const defaultTitleMap = {
+                    1: {
+                        headerid: '1',
+                        left: {
+                            action: ''
+                        },
+                        title: {
+                            des: '',
+                            action: ''
+                        }
+                    },
+                    2: {
+                        headerid: '2',
+                        left: {
+                            action: ''
+                        },
+                        title: {
+                            des: '',
+                            action: ''
+                        },
+                        right: {
+                            icon: 'chat',
+                            action: 'goToService'
+                        }
+                    },
+                    3: {
+                        headerid: '3',
+                        left: {
+                            action: ''
+                        },
+                        title: {
+                            des: '',
+                            action: ''
+                        },
+                        right: {
+                            des: '提交',
+                            action: 'test'
+                        }
+                    },
+                    4: {
+                        headerid: '4',
+                        ltitle: {
+                            des: '品牌',
+                            action: origin + '/brands'
+                        },
+                        rtitle: {
+                            des: '品类',
+                            action: origin + '/cate'
+                        }
+                    },
+                    5: {
+                        headerid: '5',
+                        left: {
+                            action: ''
+                        },
+                        ltitle: {
+                            des: '商品',
+                            action: origin + '/me/collection'
+                        },
+
+                        // mtitle: {
+                        //     des: '品牌',
+                        //     action: origin + '/me/collection?tab=brand'
+                        // },
+                        rtitle: {
+                            des: '资讯',
+                            action: origin + '/me/collection?tab=article'
+                        },
+                        right: {
+                            des: '编辑',
+                            action: 'editModel'
+                        },
+                        defaultSelectedIndex: '0'
+                    },
+                    6: {
+                        headerid: '6',
+                        title: {
+                            des: '资讯',
+                            action: ''
+                        }
+                    }
+                };
+
+                if (yoho.isApp || yoho.isYohoBuy) {
+                    let titleMap = Object.assign({}, defaultTitleMap);
+                    let [path, qs] = url.split('?');
+
+                    qs = parse(qs);
+
+                    // 个人中心收藏
+                    if (/\/me\/collection$/.test(path)) {
+                        let header = titleMap[5];
+
+                        if (qs.tab === 'article') {
+                            header.defaultSelectedIndex = '1';
+                        } else {
+                            header.defaultSelectedIndex = '0';
+                        }
+                        return yoho.goPageView({
+                            header: header
+                        });
+                    }
+
+                    // 个人中心首页
+                    if (/\/me$/.test(path)) {
+                        return yoho.goTab({
+                            index: 4
+                        });
+                    }
+
+                    // 资讯
+                    if (/\/editorial\/list$/.test(path)) {
+                        return yoho.goTab({
+                            index: 2
+                        });
+                    }
+
+                    // 品类
+                    if (/\/cate$/.test(path)) {
+                        return yoho.goTab({
+                            index: 1,
+                            headerIndex: 1
+                        });
+                    }
+
+                    // 首页
+                    if (/\/$/.test(path) || !path) {
+                        return yoho.goTab({
+                            index: 0,
+                            url: /^(https?:)?\/\//i.test(url) ? url : origin + url
+                        });
+                    }
+
+                    const args = {
+                        url: /^(https?:)?\/\//i.test(url) ? url : origin + url
+                    };
+
+                    if (/\/me\/service$/.test(path)) {
+                        args.showLoading = 'no';
+                    }
+
+                    // 处理 feature.yoho.cn 等域名下的站外链接
+                    if (/^(https?:)?\/\//i.test(path) && !/m\.yohoblk\.com/.test(path)) {
+                        args.showLoading = 'no';
+                    }
+                    args.header = {
+                        headerid: '-1'
+                    };
+                    yoho.goNewPage(args);
+                } else {
+                    location.href = url;
+                }
+            }
+        }
+    };
+</script>
+
+<style>
+
+</style>