vue-directive.js 4.23 KB
/*
 * @Author: Targaryen
 * @Date:   2016-08-02 17:29:52
 * @Last Modified by:   Targaryen
 * @Last Modified time: 2016-08-02 17:42:26
 */
import yoho from 'yoho';
import util from 'common/util';

function ImgSrcBinding(el, binding) {
    if (binding.value === binding.oldValue) {
        return;
    }
    if (typeof binding.value === 'string') {
        el.src = binding.value;
    } else if (typeof binding.value === 'object') {
        let {src, width, height, mode} = binding.value;

        el.src = util.getImgUrl(src, width, height, mode);
    }
}
function BrandHrefBinding(el, binding) {
    if (binding.value === binding.oldValue) {
        return;
    }
    if (binding.modifiers.shop) {
        el.href = `/product/shop/favorite?id=${binding.value || ''}`;
    } else {
        el.href = `/product/shop/${binding.value}`;
    }
}
function GoodHrefBinding(el, binding) {
    if (binding.value === binding.oldValue) {
        return;
    }
    let {product_id, goods_id, cn_alphabet, product_skn} = binding.value;

    if (!binding.modifiers.collect) {
        goods_id = binding.value.goods_list.length ? binding.value.goods_list[0].goods_id : '';
    }
    let href = `/product/pro_${product_id}_${goods_id}/${cn_alphabet}.html`;

    if (yoho.isYohoBuy) {
        let goParams = {
            action: 'go.productDetail',
            params: {
                product_skn: product_skn
            }
        };

        href += `?openby:yohobuy=${JSON.stringify(goParams)}`;
    }
    el.href = href;
}
function BlkHrefBinding(el, binding) {
    let value = binding.value;
    let protocol = value.match(/^(https?:)?\/\//);

    protocol = protocol && protocol.length ? protocol[0] : '';
    value = value.replace(protocol, '');

    // 新品抢先看
    let query = value.match(/^m\.yohobuy\.com\/product\/blknew(\?.*)?/);

    if (query) {
        query = query[1] || '';
        return el.href = `${protocol}m.yohoblk.com/new${query}`;
    }

    // 全部品类
    if (value === 'm.yohobuy.com/cate') {
        return el.href = `${protocol}m.yohoblk.com/cate-all`;
    }

    // 全部品牌
    if (value === 'm.yohobuy.com/brand' || value === 'm.yohobuy.com/brands') {
        return el.href = `${protocol}m.yohoblk.com/brand`;
    }

    // 部分品牌
    query = value.match(/^m\.yohobuy\.com\/product\/index\/brand\?(.*)?/);
    query = query && query[1] || '';
    if (query && query.indexOf('domain=') > -1) {
        let domain = query.match(/domain=([^&]*)&?.*?/);

        domain = domain[1] || '';
        return el.href = `${protocol}m.yohoblk.com/product/shop/${domain}?${query}`;
    }

    let subDomain = value.match(/(.+)\.m\.yohobuy\.com/);

    subDomain = subDomain ? subDomain[1] : '';
    if (subDomain) {
        if (subDomain === 'guang') {
            // 逛
            let editorialId = value.match(/guang\.m\.yohobuy\.com\/info\/index\?id=(\d{1,})/);

            if (editorialId) {
                editorialId = editorialId[1];
                return el.href = `${protocol}m.yohoblk.com/editorial/${editorialId}.html`;
            }
        } else if (subDomain === 'list') {
            // 品类
            query = value.match(/\?.*/);
            query = query ? query[0] : '';
            return el.href = `${protocol}m.yohoblk.com/product/list${query}`;
        } else {
            // 品牌
            query = value.match(/\?.*/);
            query = query ? query[0] : '';
            return el.href = `${protocol}m.yohoblk.com/product/shop/${subDomain}${query}`;
        }
    }


    el.href = `${protocol}${value}`;
}

export default (Vue) => {
    Vue.directive('lazy-html', {
        bind(el, binding) {
            // TODO 首屏幕不使用
            let html = binding.value
                .replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, '<img src="$1">')
                .replace(/https?:/gi, '');

            el.innerHTML = html;
        }
    });
    Vue.directive('img-src', {
        bind: ImgSrcBinding,
        update: ImgSrcBinding
    });
    Vue.directive('brand-href', {
        bind: BrandHrefBinding,
        update: BrandHrefBinding
    });
    Vue.directive('good-href', {
        bind: GoodHrefBinding,
        update: GoodHrefBinding
    });
    Vue.directive('blk-href', {
        bind: BlkHrefBinding,
        update: BlkHrefBinding
    });
};