fe / yohoblk-wap · Commits

Go to a project

Authored by 陈峰
Commit 7949f987d7147d8141ffaec21dca64aba7964c45 2 parents 1f58af83 70ec763d

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

Hotfix/product list click



See merge request !48
Inline Side-by-side
Showing 3 changed files with 232 additions and 8 deletions
@@ -51,7 +51,12 @@ function GoodHrefBinding(el, binding) { @@ -51,7 +51,12 @@ function GoodHrefBinding(el, binding) {
51 href += `?openby:yohobuy=${JSON.stringify(goParams)}`; 51 href += `?openby:yohobuy=${JSON.stringify(goParams)}`;
52 } 52 }
53 el.href = href; 53 el.href = href;
  54 +
  55 + if (el.tagName.toLowerCase() === 'span') {
  56 + el.dataset.url = href;
  57 + }
54 } 58 }
  59 +
55 function BlkHrefBinding(el, binding) { 60 function BlkHrefBinding(el, binding) {
56 let value = binding.value; 61 let value = binding.value;
57 let protocol = value.match(/^(https?:)?\/\//); 62 let protocol = value.match(/^(https?:)?\/\//);
@@ -169,6 +174,11 @@ export default (Vue) => { @@ -169,6 +174,11 @@ export default (Vue) => {
169 bind: GoodHrefBinding, 174 bind: GoodHrefBinding,
170 update: GoodHrefBinding 175 update: GoodHrefBinding
171 }); 176 });
  177 +
  178 + Vue.directive('good-link-url', {
  179 + bind: GoodHrefBinding,
  180 + update: GoodHrefBinding
  181 + });
172 Vue.directive('blk-href', { 182 Vue.directive('blk-href', {
173 bind: BlkHrefBinding, 183 bind: BlkHrefBinding,
174 update: BlkHrefBinding 184 update: BlkHrefBinding
1 <template> 1 <template>
2 <div class="goods-box" v-infinite-scroll="fetch" infinite-scroll-disable="disableFetch" :infinite-scroll-distance="1200"> 2 <div class="goods-box" v-infinite-scroll="fetch" infinite-scroll-disable="disableFetch" :infinite-scroll-distance="1200">
3 <ul class="cardlist card-large clearfix"> 3 <ul class="cardlist card-large clearfix">
4 - <li class="card" v-for="(item, index) in data" :key="item.product_skn" @click="clickProduct(item, index)"> 4 + <li class="card" v-for="(item, index) in data" :key="item.product_skn">
5 <div class="card-pic"> 5 <div class="card-pic">
6 - <a v-good-href="item"> 6 + <a-link :product="item">
7 <img v-img-src="{src: item.default_images, width: 330, height: 440}" :alt="item.product_name"> 7 <img v-img-src="{src: item.default_images, width: 330, height: 440}" :alt="item.product_name">
8 - </a> 8 + </a-link>
9 </div> 9 </div>
10 <div class="card-bd"> 10 <div class="card-bd">
11 <h2 class="card-label"> 11 <h2 class="card-label">
12 - <a v-good-href="item" class="line-clamp-1">{{item.product_name}}</a> 12 + <a-link :product="item" class="line-clamp-1">{{item.product_name}}</a-link>
13 </h2> 13 </h2>
14 <h2 class="card-label-desc" v-if="item.product_name1"> 14 <h2 class="card-label-desc" v-if="item.product_name1">
15 - <a v-good-href="item" class="line-clamp-1">{{item.product_name}}</a> 15 + <a-link :product="item" class="line-clamp-1">{{item.product_name}}</a-link>
16 </h2> 16 </h2>
17 <span class="good-price" :class="{'sale-price': item.market_price}">¥{{item.sales_price | toFixed}}</span> 17 <span class="good-price" :class="{'sale-price': item.market_price}">¥{{item.sales_price | toFixed}}</span>
18 <span class="good-price" :class="{'old-price': item.market_price}" v-if="item.market_price">¥{{item.market_price | toFixed}}</span> 18 <span class="good-price" :class="{'old-price': item.market_price}" v-if="item.market_price">¥{{item.market_price | toFixed}}</span>
@@ -31,6 +31,7 @@ @@ -31,6 +31,7 @@
31 </template> 31 </template>
32 <script> 32 <script>
33 import Vue from 'vue'; 33 import Vue from 'vue';
  34 + import aLink from 'component/tool/a-link.vue';
34 import lazyload from 'vue-lazyload'; 35 import lazyload from 'vue-lazyload';
35 import infinitScroll from 'vue-infinite-scroll'; 36 import infinitScroll from 'vue-infinite-scroll';
36 import bus from 'common/vue-bus'; 37 import bus from 'common/vue-bus';
@@ -57,10 +58,10 @@ @@ -57,10 +58,10 @@
57 methods: { 58 methods: {
58 fetch: function() { 59 fetch: function() {
59 bus.$emit('list.paging'); 60 bus.$emit('list.paging');
60 - },  
61 - clickProduct(item, index) {  
62 - this.$emit('click-product', item, index);  
63 } 61 }
  62 + },
  63 + components: {
  64 + aLink
64 } 65 }
65 }; 66 };
66 67
  1 +<template>
  2 + <div @click="click">
  3 + <slot></slot>
  4 + </div>
  5 +</template>
  6 +
  7 +<script>
  8 + import yoho from 'yoho';
  9 + import parse from 'yoho-qs/parse';
  10 +
  11 + export default {
  12 + name: 'ALink',
  13 + props: ['product'],
  14 + methods: {
  15 + click() {
  16 + let {product_id, goods_id, cn_alphabet, product_skn} = this.product;
  17 +
  18 + if (!goods_id) {
  19 + goods_id = this.product.goods_list.length ? this.product.goods_list[0].goods_id : '';
  20 + }
  21 + let goodUrl = `/product/pro_${product_id}_${goods_id}/${cn_alphabet}.html`;
  22 +
  23 + if (yoho.isYohoBuy) {
  24 + let goParams = {
  25 + action: 'go.productDetail',
  26 + params: {
  27 + product_skn: product_skn
  28 + }
  29 + };
  30 +
  31 + goodUrl += `?openby:yohobuy=${JSON.stringify(goParams)}`;
  32 + }
  33 +
  34 + if (goodUrl) {
  35 + let url = goodUrl;
  36 + const classList = this.$el.classList;
  37 + const excluded = classList.contains('no-intercept');
  38 +
  39 + if (excluded) {
  40 + location.href = this.href;
  41 + return;
  42 + }
  43 +
  44 + if (/^\/\//.test(url)) {
  45 + url = 'http:' + url;
  46 + }
  47 +
  48 + this.dispatch(url);
  49 + return false;
  50 + }
  51 + },
  52 + dispatch(url) {
  53 + const origin = location.origin;
  54 + const defaultTitleMap = {
  55 + 1: {
  56 + headerid: '1',
  57 + left: {
  58 + action: ''
  59 + },
  60 + title: {
  61 + des: '',
  62 + action: ''
  63 + }
  64 + },
  65 + 2: {
  66 + headerid: '2',
  67 + left: {
  68 + action: ''
  69 + },
  70 + title: {
  71 + des: '',
  72 + action: ''
  73 + },
  74 + right: {
  75 + icon: 'chat',
  76 + action: 'goToService'
  77 + }
  78 + },
  79 + 3: {
  80 + headerid: '3',
  81 + left: {
  82 + action: ''
  83 + },
  84 + title: {
  85 + des: '',
  86 + action: ''
  87 + },
  88 + right: {
  89 + des: '提交',
  90 + action: 'test'
  91 + }
  92 + },
  93 + 4: {
  94 + headerid: '4',
  95 + ltitle: {
  96 + des: '品牌',
  97 + action: origin + '/brands'
  98 + },
  99 + rtitle: {
  100 + des: '品类',
  101 + action: origin + '/cate'
  102 + }
  103 + },
  104 + 5: {
  105 + headerid: '5',
  106 + left: {
  107 + action: ''
  108 + },
  109 + ltitle: {
  110 + des: '商品',
  111 + action: origin + '/me/collection'
  112 + },
  113 +
  114 + // mtitle: {
  115 + // des: '品牌',
  116 + // action: origin + '/me/collection?tab=brand'
  117 + // },
  118 + rtitle: {
  119 + des: '资讯',
  120 + action: origin + '/me/collection?tab=article'
  121 + },
  122 + right: {
  123 + des: '编辑',
  124 + action: 'editModel'
  125 + },
  126 + defaultSelectedIndex: '0'
  127 + },
  128 + 6: {
  129 + headerid: '6',
  130 + title: {
  131 + des: '资讯',
  132 + action: ''
  133 + }
  134 + }
  135 + };
  136 +
  137 + if (yoho.isApp || yoho.isYohoBuy) {
  138 + let titleMap = Object.assign({}, defaultTitleMap);
  139 + let [path, qs] = url.split('?');
  140 +
  141 + qs = parse(qs);
  142 +
  143 + // 个人中心收藏
  144 + if (/\/me\/collection$/.test(path)) {
  145 + let header = titleMap[5];
  146 +
  147 + if (qs.tab === 'article') {
  148 + header.defaultSelectedIndex = '1';
  149 + } else {
  150 + header.defaultSelectedIndex = '0';
  151 + }
  152 + return yoho.goPageView({
  153 + header: header
  154 + });
  155 + }
  156 +
  157 + // 个人中心首页
  158 + if (/\/me$/.test(path)) {
  159 + return yoho.goTab({
  160 + index: 4
  161 + });
  162 + }
  163 +
  164 + // 资讯
  165 + if (/\/editorial\/list$/.test(path)) {
  166 + return yoho.goTab({
  167 + index: 2
  168 + });
  169 + }
  170 +
  171 + // 品类
  172 + if (/\/cate$/.test(path)) {
  173 + return yoho.goTab({
  174 + index: 1,
  175 + headerIndex: 1
  176 + });
  177 + }
  178 +
  179 + // 首页
  180 + if (/\/$/.test(path) || !path) {
  181 + return yoho.goTab({
  182 + index: 0,
  183 + url: /^(https?:)?\/\//i.test(url) ? url : origin + url
  184 + });
  185 + }
  186 +
  187 + const args = {
  188 + url: /^(https?:)?\/\//i.test(url) ? url : origin + url
  189 + };
  190 +
  191 + if (/\/me\/service$/.test(path)) {
  192 + args.showLoading = 'no';
  193 + }
  194 +
  195 + // 处理 feature.yoho.cn 等域名下的站外链接
  196 + if (/^(https?:)?\/\//i.test(path) && !/m\.yohoblk\.com/.test(path)) {
  197 + args.showLoading = 'no';
  198 + }
  199 + args.header = {
  200 + headerid: '-1'
  201 + };
  202 + yoho.goNewPage(args);
  203 + } else {
  204 + location.href = url;
  205 + }
  206 + }
  207 + }
  208 + };
  209 +</script>
  210 +
  211 +<style>
  212 +
  213 +</style>