Merge branch 'feature/newSearch' of git.yoho.cn:fe/yohobuywap-node into feature/newSearch

@@ -114,6 +114,42 @@ const list = (req, res, next) => {
 };
 };
 
 
 /**
 /**
+ * 搜索主页
+ */
+const index = (req, res, next) => {
+    let title = '搜索';
+
+    searchModel.getSearchIndex().then((result) => {
+        res.render('search/index', {
+            module: 'product',
+            page: 'search-index',
+            pageHeader: headerModel.setNav({
+                navTitle: title
+            }),
+            pageFooter: true,
+            search: {
+                defaultTerms: result[0].content || '',
+                url: helpers.urlFormat('', null, 'search'),
+                hotTerms: result
+            }
+
+        });
+    }).catch(next);
+};
+
+/**
+ * 联动搜索
+ */
+let fuzzyDatas = (req, res, next) => {
+    let params = req.query.keyword;
+
+    searchModel.getFuzzyDatas(params).then((result) => {
+        res.json(result);
+    }).catch(next);
+};
+
+
+/**
  * ajax 商品数据请求
  * ajax 商品数据请求
  */
  */
 const search = (req, res, next) => {
 const search = (req, res, next) => {
@@ -145,5 +181,7 @@ let filter = (req, res, next) => {
 module.exports = {
 module.exports = {
     list,
     list,
     filter,
     filter,
-    search
+    search,
+    index,
+    fuzzyDatas
 };
 };

@@ -170,9 +170,41 @@ const getAllBrandNames = () => {
     });
     });
 };
 };
 
 
+/**
+ * 获取热门搜索
+ **/
+const getSearchIndex = () => {
+    return api.get('', {
+        method: 'app.search.getTerms'
+    }).then((result) => {
+        if (result && result.code === 200) {
+            return result.data.hotTerms;
+        } else {
+            logger.error('Hot Search return code is not 200');
+            return {};
+        }
+    });
+};
+
+const getFuzzyDatas = (params) => {
+    return api.get('', {
+        method: 'app.search.fuzzy',
+        keyword: params
+    }).then((result) => {
+        if (result && result.code === 200) {
+            return result.data;
+        } else {
+            logger.error('FuzzyDatas return code is not 200');
+            return {};
+        }
+    });
+};
+
 module.exports = {
 module.exports = {
     getSearchData,
     getSearchData,
     getFilterData,
     getFilterData,
     getAllBrandNames,
     getAllBrandNames,
-    getClassNames
+    getClassNames,
+    getSearchIndex,
+    getFuzzyDatas
 };
 };

@@ -61,12 +61,18 @@ router.get('/outlet/activityinfo', outlet.activityList);
 router.get('/recommend-for-you/userCenter', recommendForYou.userCenter);
 router.get('/recommend-for-you/userCenter', recommendForYou.userCenter);
 router.get('/recommend-for-you/cart', recommendForYou.cart);
 router.get('/recommend-for-you/cart', recommendForYou.cart);
 
 
+// 搜索主页
+router.get('/search/index', search.index);
+
 // 搜索落地页
 // 搜索落地页
 router.get('/search/list', search.list);
 router.get('/search/list', search.list);
 
 
 // filter
 // filter
 router.get('/search/filter', search.filter);
 router.get('/search/filter', search.filter);
 
 
+// fuzzyDatas
+router.get('/search/fuzzyDatas', search.fuzzyDatas);
+
 // ajax 请求商品数据
 // ajax 请求商品数据
 router.get('/search/search', search.search);
 router.get('/search/search', search.search);
 
 

+<div class="search-page yoho-page">
+    {{# search}}
+        <input type="hidden" value="{{defaultTerms}}" id="default-terms">
+        <div id="search-input" class="search-input">            
+            <form id="search-form" action="{{url}}" method="get">
+                <i class="search-icon iconfont">&#xe60f;</i>
+                <input type="text" placeholder="{{#if defaultTerms}}{{defaultTerms}}{{else}}搜索商品、品牌{{/if}}" name="query" data-bp-id="search_page_input_1" class="buriedpoint" autocomplete="off">
+                <input type="hidden" name="from" value="search">
+                <i class="clear-input iconfont hide">&#xe626;</i>
+                <span id="search" class="search buriedpoint" type="submit" data-bp-id="search_index_one_0">搜索</span>
+            </form>
+        </div>
+        <ul class="search-associate"></ul>
+        <div class="search-items">
+            <div class="search-group history-search">
+                <div class="search-content-title">
+                    <h3 class="left"><i class="ico-lately"></i>最近搜索</h3>
+                    <i id="clear-history" class="right ico-del hide"></i>
+                </div>
+                <div class="search-content">
+                    <ul class="history clearfix"></ul>
+                </div>
+            </div>
+            {{#if hotTerms}}
+                <div class="search-group hot-search">
+                    <h3><i class="ico-hot"></i>热门搜索</h3>
+                    <div class="search-content">
+                        <ul class="hot clearfix">
+                            {{# hotTerms}}
+                                <li>
+                                    <a href='javascript:void(0);'>{{content}}</a>
+                                </li>
+                            {{/ hotTerms}}
+                        </ul>
+                    </div>
+                </div>
+            {{/if}}
+        </div>
+    {{/ search}}
+</div>

+/**
+ * 搜索主页
+ * @author: zxr<xiaoru.zhang@yoho.cn>
+ * @date: 2016/8/15
+ */
+
+require('./search/index');
+require('../common/footer');

+/*
+ * @Description: dialog
+ */
+
+var $ = require('yoho-jquery'),
+    Handlebars = require('yoho-handlebars'),
+    Hammer = require('yoho-hammer');
+
+var $dialogWrapper,
+    dialogTpl,
+    dialogTemplate;
+
+function getInstance() {
+    if (dialogTpl === undefined) {
+        dialogTpl = '<div id="dialog-wrapper" class="dialog-wrapper">' +
+            '<div class="dialog-box">' +
+            '{{# hasHeader}}' +
+            '{{/ hasHeader}}' +
+            '<div class="dialog-content">{{dialogText}}</div>' +
+            '{{# hasFooter}}' +
+            '<div class="dialog-footer">' +
+            '{{# leftBtnText}}' +
+            '<span class="dialog-left-btn tap-hightlight">{{.}}</span>' +
+            '{{/ leftBtnText}}' +
+            '{{# rightBtnText}}' +
+            '<span class="dialog-right-btn tap-hightlight">{{.}}</span>' +
+            '{{/ rightBtnText}}' +
+            '</div>' +
+            '{{/ hasFooter}}' +
+            '</div>' +
+            '</div>';
+
+        dialogTemplate = Handlebars.compile(dialogTpl);
+    }
+    return dialogTemplate;
+}
+
+// fullWithBtn是供详情页获取限购码使用的特殊参数
+exports.showDialog = function(data, callback, callbackForLeft, fullWithBtn) {
+
+    var dialogStr = dialogTemplate(data),
+        $dialogBox,
+        defaultHideDuraton,
+        dialogWrapperHammer;
+
+    dialogTemplate = getInstance();
+
+    $('.dialog-wrapper').remove();
+
+    $('body').append($(dialogStr));
+
+    $dialogBox = $('.dialog-box');
+    $dialogWrapper = $('.dialog-wrapper');
+
+
+    dialogWrapperHammer = new Hammer(document.getElementById('dialog-wrapper'));
+
+    // 显示
+    if (data.fast) {
+        $dialogWrapper.css({
+            display: 'block'
+        });
+    } else {
+        $dialogWrapper.fadeIn();
+    }
+
+    if (fullWithBtn) {
+        $('.dialog-wrapper .dialog-footer > span').css('width', '100%');
+        $('.dialog-wrapper .dialog-content').css({
+            'padding-left': '1.85rem',
+            'padding-right': '1.85rem'
+        });
+        $dialogWrapper.css('z-index', '10');
+    }
+
+    $dialogBox.css({
+        top: '50%',
+        marginTop: -($dialogBox.height() / 2)
+    });
+
+    // 隐藏
+    if (data.autoHide) {
+        defaultHideDuraton = 1000;
+        if (data.autoHide > 1) {
+            defaultHideDuraton = data.autoHide;
+        }
+        setTimeout(function() {
+            $dialogWrapper.fadeOut();
+        }, defaultHideDuraton);
+    }
+
+    // 禁止在dialog上可以上下滚动
+    $dialogWrapper.on('touchmove', function() {
+        return false;
+    });
+
+    dialogWrapperHammer.on('tap', function(event) {
+
+        if ($(event.target).hasClass('dialog-left-btn')) {
+            if (typeof callbackForLeft === 'function') {
+                callbackForLeft();
+            }
+            $dialogWrapper.fadeOut();
+        } else if ($(event.target).hasClass('dialog-right-btn')) {
+            callback();
+        }
+
+        // 防止出现点透问题
+        event.preventDefault();
+        event.srcEvent.stopPropagation();
+    });
+};
+
+exports.hideDialog = function() {
+    $('.dialog-wrapper').remove();
+};

+/**
+ * 搜索页
+ * @author:zxr
+ * @date: 2016/8/15
+ */
+
+var $ = require('yoho-jquery'),
+    security = require('../../plugin/security'),
+    tip = require('../../plugin/tip'),
+    Hammer = require('yoho-hammer'),
+    dialog = require('../search/dialog');
+
+var $input = $('#search-input input');
+
+var $clear = $('#search-input .clear-input');
+
+var $form = $('#search-form');
+
+var $history = $('.history');
+var $historySearch = $('.history-search');
+var $clearHistory = $('#clear-history');
+
+// var $buriedpoint = $('.buriedpoint');
+var $search = $('#search');
+var searchUrl = $search.closest('form').attr('action');
+
+var writeSearch = require('./write-search');
+
+var ranToken = writeSearch.getRanToken();
+var historyval = writeSearch.getHistoryval();
+
+var chHammer, cHammer;
+
+chHammer = new Hammer($clearHistory[0]);
+
+chHammer.on('tap', function() {
+    dialog.showDialog({
+        dialogText: '您确定要删除您的最近搜索吗？',
+        hasFooter: {
+            leftBtnText: '取消',
+            rightBtnText: '确定'
+        }
+    }, function() {
+
+        if (localStorage) {
+            localStorage.removeItem(historyval);
+        }
+
+        $history.html('');
+        $historySearch.hide();
+        $clearHistory.hide();
+
+        // window.rePosFooter();
+
+        dialog.showDialog({
+            dialogText: '删除成功',
+            autoHide: true,
+            fast: true
+        });
+    });
+});
+
+// 跳到搜索页
+function goSearch(query) {
+    // 保存搜索的内容
+    writeSearch.setHistoryValFun(query);
+    document.location.href = searchUrl + '?query=' + query;
+}
+
+// 搜索输入联动
+function inputAction() {
+    var $searchAssociate = $('.search-associate');
+    var $icon = $('.search-icon');
+    var $searchItems = $('.search-items');
+
+    $input.on('input', function() {
+        if ($input.val() === '') {
+            $icon.css('color', '#b2b2b2');
+            $clear.addClass('hide');
+            $searchAssociate.html('');
+            $searchItems.show();
+            $searchAssociate.hide();
+        } else {
+            $icon.css('color', '#666');
+            $clear.removeClass('hide');
+            $searchAssociate.show();
+        }
+
+        // 联动搜索
+        $.ajax({
+            url: '/product/search/fuzzyDatas',
+            data: {
+                keyword: $input.val()
+            },
+            dataType: 'json',
+            success: function(data) {
+                var ajaxHtml = '';
+                var i;
+
+                if (data.length > 0) {
+                    console.log(data.length);
+                    for (i = 0; i < data.length; i++) {
+                        ajaxHtml += '<li><span class="keyword">' + data[i].keyword + '</span><span class="count">' +
+                        data[i].count + ' items<i class="iconfont">&#xe614;</i></span></li>';
+                    }
+
+                    $searchAssociate.html(ajaxHtml);
+                    $searchItems.hide();
+                } else {
+                    $searchAssociate.html('');
+                }
+
+                $searchAssociate.find('li').on('touchend', function() {
+                    goSearch($(this).find('.keyword').html());
+                });
+            },
+            error: function() {
+                tip.show('网络断开连接了~');
+            }
+        });
+    });
+}
+
+// 热门搜索、最近搜索事件
+$('.search-items .search-group').on('click', 'li', function(event) {
+    var query = '';
+
+    if (event.target.nodeName === 'A') {
+        query = $(event.target).html();
+    }
+
+    if (event.target.nodeName === 'LI') {
+        query = $(event.target).find('a').html();
+    }
+
+    goSearch(query);
+});
+
+inputAction();
+
+cHammer = new Hammer($clear[0]);
+cHammer.on('tap', function() {
+    $input.val('').trigger('input');
+});
+
+$search.on('touchend', function() {
+    var $buriedpoint = $form.find('.buriedpoint');
+
+    if ($buriedpoint.val() === '') {
+        $buriedpoint.val($('#default-terms').val());
+    }
+
+    // 保存搜索的内容
+    writeSearch.setHistoryValFun($buriedpoint.val());
+
+    if (security.hasDangerInput()) {
+        return false;
+    }
+
+    $(this).closest('form').submit();
+    return false;
+});
+
+// 初始化历史搜索的内容
+(function() {
+    var html = '',
+        history,
+        historys, i, num = 1;
+
+    if (localStorage) {
+        historys = localStorage.getItem(historyval);
+
+        if (historys && historys.length > 0) {
+            historys = historys.split(ranToken);
+            for (i = historys.length; i > 0; i--) {
+                history = historys[i - 1];
+
+                if (history === '') {
+                    continue;
+                }
+
+                if (num++ > 10) {
+                    break;
+                }
+
+                html += '<li><a href="javascript:void(0);">' + history + '</li>';
+            }
+
+            $history.html(html);
+            if (html !== '') {
+                $clearHistory.removeClass('hide');
+                $historySearch.removeClass('hide');
+            }
+
+            // window.rePosFooter();
+        }
+    }
+}());

@@ -92,7 +92,7 @@ function inputAction() {
 
 
         // 联动搜索
         // 联动搜索
         $.ajax({
         $.ajax({
-            url: '/index/search/fuzzyDatas',
+            url: '/product/search/fuzzyDatas',
             data: {
             data: {
                 keyword: $input.val()
                 keyword: $input.val()
             },
             },

 @import "search";
 @import "search";
 @import "list";
 @import "list";
+@import "search-index";

+.search-associate {
+    width: 100%;
+    background: #f8f8f8;
+    display: none;
+    position: absolute;
+    z-index: 1;
+
+    li {
+        height: 84px;
+        line-height: 84px;
+        width: 100%;
+        padding: 0 20px;
+        clear: both;
+        margin-bottom: 5px;
+        background: #fff;
+        box-sizing: border-box;
+    }
+
+    .keyword {
+        float: left;
+        font-size: 30px;
+    }
+
+    .count {
+        float: right;
+        color: #b0b0b0;
+        font-size: 18px;
+
+        i {
+            font-size: 12PX;
+            margin-left: 10px;
+            position: relative;
+            top: 3px;
+        }
+    }
+}
+
+.search-brand-page {
+    .search-input {
+        position: relative;
+        padding: 14px 22px;
+        background: #f8f8f8;
+        form {
+            width: 100%;
+        }
+        .search-icon {
+            position: absolute;
+            font-size: 24px;
+            top: 26px;
+            left: 36px;
+            color: #b2b2b2;
+        }
+
+        input {
+            height: 56px;
+            width: 378px;
+            border-radius: 28px;
+            padding: 0 52px;
+            font-size: 24px;
+            background: #fff;
+            border: none;
+        }
+
+        .clear-input {
+            position: absolute;
+            top: 20px;
+            right: 145px;
+            font-size: 32px;
+            color: #666;
+        }
+
+        .search {
+            position: absolute;
+            top: 18px;
+            right: 40px;
+            border: none;
+            background: transparent;
+            color: #666;
+            font-size: 30px;
+            line-height: 56px;
+        }
+    }
+
+    .search-items {
+        padding: 40px 20px;
+
+        h3 {
+            font-size: 24px;
+            margin-bottom: 20px;
+            color: #b8b8b8;
+        }
+
+        li {
+            float: left;
+            margin-right: 20px;
+            margin-bottom: 20px;
+            max-width: 100%;
+            overflow: hidden;
+        }
+
+        a {
+            display: block;
+            height: 68px;
+            line-height: 68px;
+            padding: 0 20px;
+            font-size: 28px;
+            background: white;
+            color: #b8b8b8;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            border: 1px solid #b8b8b8;
+            border-radius: 0.2rem;
+        }
+
+        .clear-history {
+            font-size: 28px;
+        }
+
+        .clear-icon {
+            float: right;
+            color: #b8b8b8;
+            border: none;
+            background: white;
+        }
+
+        span {
+            margin-right: 10px;
+            font-size: 14px;
+        }
+
+        .history-search {
+            border-bottom: 1px solid #f3f3f3;
+        }
+
+        .hot-search {
+            margin-top: 20px;
+        }
+
+        .clearfix {
+            margin-left: 30px;
+        }
+
+        .left-icon {
+            font-size: 24px;
+        }
+    }
+}