搜索页面提交，分页组件样式移除

components/common/page/pageComponent.vue

@@ -5,7 +5,6 @@
 
 <script>
   import Page from 'iview/src/components/page'
-  import 'iview/dist/styles/iview.css'
   export default {
     props: {
       current: {
@@ -33,6 +32,155 @@
 </script>
 
 <style>
+  a {
+    color: #2d8cf0;
+    background: 0 0;
+    text-decoration: none;
+    outline: 0;
+    cursor: pointer;
+    transition: color .2s ease;
+  }
+  .ivu-page-item-jump-next, .ivu-page-item-jump-prev, .ivu-page-next, .ivu-page-prev {
+    display: inline-block;
+    vertical-align: middle;
+    min-width: 32px;
+    height: 32px;
+    line-height: 30px;
+    list-style: none;
+    text-align: center;
+    cursor: pointer;
+    color: #666;
+    font-family: Arial;
+    border: 1px solid #dddee1;
+    border-radius: 4px;
+    transition: all .2s ease-in-out;
+}
+  .ivu-icon {
+    display: inline-block;
+    font-family: Ionicons;
+    speak: none;
+    font-style: normal;
+    font-weight: 400;
+    font-variant: normal;
+    text-transform: none;
+    text-rendering: auto;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  .ivu-icon-ios-arrow-left{
+    display: inline-block;
+    font: normal normal normal 14px/1 FontAwesome;
+    font-size: inherit;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  .ivu-icon-ios-arrow-left:before{
+    content: "\f060";
+  }
+  .ivu-icon-ios-arrow-right{
+    display: inline-block;
+    font: normal normal normal 14px/1 FontAwesome;
+    font-size: inherit;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  .ivu-icon-ios-arrow-right:before{
+    content: "\f054";
+  }
+  .ivu-page-disabled:hover a {
+    color: #ccc;
+    cursor: not-allowed;
+  }
+  .ivu-page-next{
+    content: '<';
+  }
+  .ivu-page-next, .ivu-page-prev {
+    background-color: #fff;
+  }
+  .ivu-page-next a, .ivu-page-prev a {
+    color: #666;
+    font-size: 14px;
+  }
+  .ivu-icon {
+    display: inline-block;
+    font-family: Ionicons;
+    speak: none;
+    font-style: normal;
+    font-weight: 400;
+    font-variant: normal;
+    text-transform: none;
+    text-rendering: auto;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  .ivu-page-item-active {
+    background-color: #2d8cf0;
+    border-color: #2d8cf0;
+  }
+  .ivu-page-item {
+    display: inline-block;
+    vertical-align: middle;
+    min-width: 32px;
+    height: 32px;
+    line-height: 30px;
+    margin-right: 4px;
+    text-align: center;
+    list-style: none;
+    background-color: #fff;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    cursor: pointer;
+    font-family: Arial;
+    border: 1px solid #dddee1;
+    border-radius: 4px;
+    transition: border .2s ease-in-out,color .2s ease-in-out;
+  }
+  .ivu-page-item-active a {
+    color: #fff;
+  }
+  .ivu-page-item a {
+    margin: 0 6px;
+    text-decoration: none;
+    color: #495060;
+  }
+  .ivu-page-options {
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: 15px;
+  }
+  .ivu-page-options-elevator {
+    display: inline-block;
+    vertical-align: middle;
+    height: 32px;
+    line-height: 32px;
+  }
+  .ivu-page-options-elevator input {
+    display: inline-block;
+    width: 100%;
+    height: 32px;
+    line-height: 1.5;
+    padding: 4px 7px;
+    font-size: 12px;
+    border: 1px solid #dddee1;
+    color: #495060;
+    background-color: #fff;
+    background-image: none;
+    position: relative;
+    cursor: text;
+    transition: border .2s ease-in-out,background .2s ease-in-out,box-shadow .2s ease-in-out;
+    border-radius: 4px;
+    margin: 0 8px;
+    width: 50px;
+  }
+
+
+
   .ivu-page{
     display: inline-block;
     padding-left: 0;

components/search/GoodList.vue

@@ -1,100 +1,622 @@
 <template>
-  <div class="main">
-    <div class="proofList">
-      <div class="main-proof">
-        <div class="content-f pro-title">
-          <div class="content-f img"><a href=""></a></div>
-          <div class="content-f">
-            <div style="margin:10px 0 5px 0">
-              <a href="" class="f16 text-bold text-num">123-91-422-41-001000</a>
-              <a href="" class="text-num f10" style="margin-left: 10px">Mill-Max</a>
+  <div>
+    <div>
+      <div class="tab-filter" >
+        <div class="fl">&nbsp;&nbsp;| 产品信息(<span class="text-num"></span><span class="text-num" v-text="good_list.total"></span>)</div>
+        <div class="fr">
+          <div @click="sortBy('normal1')" :class="activeTag==='normal1'?'active':''"><a >综合排序</a></div>
+          <div @click="sortBy('normal2')" :class="activeTag==='normal2'?'active':''"><a >现货优选</a></div>
+          <div @click="sortBy('type')" :class="activeTag==='type'?'active':''"><a >型号精确</a></div>
+          <div style="display:none"><a href="">销量</a></div>
+          <div style="display:none"><a href="">人气</a></div>
+          <div style="display:none"><a href="">信用</a></div>
+          <div @click="sortBy('price')" :class="activeTag==='price'?'active':''"><a>价格<i class="fa fa-long-arrow-down" v-show="price_asc"></i><i class="fa fa-long-arrow-up" v-show="!price_asc"></i></a></div>
+          <div class="price-filter">
+            <div class="price-input">
+              <input type="number" min="0" step="0.01" v-model="min_price" class="form-control" placeholder="￥" onfocus="this.placeholder=''" onblur="this.placeholder='￥'" />
+              <span>-</span>
+              <input type="number" :min="min_price === ''?0:min_price" step="0.01" v-model="max_price" class="form-control" placeholder="￥" onfocus="this.placeholder=''" onblur="this.placeholder='￥'" />
+            </div>
+            <div class="price-hover">
+              <a @click="clear_price">清空</a>
+              <a @click="filter_price">确定</a>
             </div>
-            <p class="f10"><span title="产品分类"><i class="fa fa-th-large f14 " aria-hidden="true"></i>&nbsp;&nbsp;<a href="">插座及导线座</a></span></p>
-            <p class="f10"><span class="title">包装方式：</span> <span class="content">无</span></p>
           </div>
-        </div>
-        <div class="content-r pro-r">
-          <div>
-            库存：<span class="text-num f12">0</span> &nbsp;<span class="text-num f12">PCS</span>
+          <div style="display:none;padding-top: 5px; margin-left: 0;">
+            <select class="select-adder form-control" style="width: 120px;">
+              <option value="1">发货地</option>
+            </select>
+          </div>
+          <div class="off">
+            <a @click="list_open=!list_open">
+              <span v-text="list_open?'收起':'展开'"></span>
+              <i class="fa fa-angle-down" v-show="!list_open"></i>
+              <i class="fa fa-angle-up"v-show="list_open"></i>
+            </a>
           </div>
         </div>
       </div>
-      <div class="row">
-        <div class="col-xs-12">
-          <div class="toMore"><a href="">查看更多&gt;&gt;&nbsp;&nbsp;</a></div>
-        </div>
+      <div v-if="list_open">
+        <table class="product-list" >
+          <thead>
+          <tr style="height: 40px;">
+            <th width="80"></th>
+            <th width="160">品牌/型号</th>
+            <th width="90">类目</th>
+            <th width="100">封装/生产日期</th>
+            <th width="110">库存</th>
+            <th width="90">阶梯</th>
+            <th width="90">香港交货</th>
+            <th width="110">大陆交货<span style="font-size: 12px;">(含税)</span></th>
+            <th width="110">货期<span style="font-size: 12px;">(工作日)</span></th>
+            <th width="100">操作</th>
+          </tr>
+          </thead>
+          <tbody id="productList-content">
+          <tr v-for="item in good_list.components">
+            <td>
+              <a href="">
+                <img width="80px" height="80px" :src="item.brand.logoUrl?item.brand.logoUrl:'http://static.usoftmall.com/img/all/default.png?_v=1499336134257'"></a>
+            </td>
+            <td class="brand-code">
+              <div class="brand"><a class="text-num" v-text="item.brand.nameEn"></a></div>
+              <div class="code"><a class="f16 text-bold text-num" v-text="item.code"></a></div>
+            </td>
+            <td>
+              <div><i class="fa fa-th-large f14" aria-hidden="true"></i>&nbsp;&nbsp;
+                <a v-text="item.kind.nameCn">
+                </a>
+              </div>
+            </td>
+            <td>
+              <div class="package" v-text="item.packing?item.packing:'暂无包装方式信息'"></div>
+              <div class="date" v-text="item.produceDate"></div>
+            </td>
+            <td class="text-left">
+              <div class="goods">
+                库存：<span v-text="item.reserve || '暂无库存'"></span>
+              </div>
+              <div class="from" v-if="item.reserve > 0">
+                起拍：<span v-text="item.minBuyQty"></span>
+              </div>
+              <div class="multiple" v-if="item.reserve > 0">
+                倍数：<span v-text="item.minPackQty"></span>
+              </div>
+            </td>
+            <td>
+              <div v-show="!item.prices">
+                <span>—</span>
+              </div>
+              <div v-for="price in item.prices">
+                <span v-text="price.start"></span> +
+              </div>
+            </td>
+            <td >
+              <div >
+                <span>—</span>
+              </div>
+              <div >
+                <span ></span>
+              </div>
+            </td>
+            <td >
+              <div >
+                <span>—</span>
+              </div>
+              <div >
+                <span ></span>
+              </div>
+            </td>
+            <td>
+              <div v-show="!item.b2cMinDelivery">
+                <span>—</span>
+              </div>
+              <div v-if="item.b2cMinDelivery">交期: <span v-text="item.b2cMinDelivery + '-' + item.b2cMaxDelivery"></span></div>
+            </td>
+            <td>
+              <div v-show="!item.reserve">
+                <span>—</span>
+              </div>
+              <div v-if="item.reserve > 0">
+                <button class="btn btn-primary btn-buy-now" ><span class="watch">立即购买</span></button>
+              </div>
+              <div v-if="item.reserve > 0">
+                <button class="btn btn-add-cart"><span class="watch">加入购物车</span></button>
+              </div>
+            </td>
+          </tr>
+          <tr v-if="good_list.components.length == 0">
+            <td colspan="10" class="text-center" style="line-height: 40px; font-size: 20px;">
+              <i class="fa fa-smile-o fa-lg"></i> 暂无产品信息
+            </td>
+          </tr>
+          </tbody>
+        </table>
       </div>
+      <page :total="total_count" :page-size="pageSize"
+      :current="nowPage" v-on:childEvent="listenPage" v-show="good_list.components.length>0"></page>
     </div>
   </div>
 </template>
 
 <script>
+  import Page from '~components/common/page/pageComponent.vue'
+  export default {
+    data () {
+      return {
+        list_open: true,
+        nowPage: 1,
+        pageSize: 15,
+        sorting: {},
+        price_asc: true,
+        min_price: '',
+        max_price: '',
+        filter: {},
+        activeTag: 'normal1'
+      }
+    },
+    components: {
+      Page
+    },
+    computed: {
+      good_lists () {
+        return this.$store.state.searchData.searchList.lists
+      },
+      good_list () {
+        return this.good_lists.data
+      },
+      total_count () {
+        return Math.min(this.good_list.total, 100 * this.pageSize)
+      }
+    },
+    methods: {
+      listenPage: function (changedPage) {
+        this.nowPage = changedPage
+        this.$emit('pageEvent', this.nowPage)
+      },
+      sortBy: function (param) {
+        if (param === 'normal1') {
+          this.sorting = {'GO_RESERVE': 'DESC', 'GO_SEARCH': 'DESC'}
+          this.activeTag = 'normal1'
+        } else if (param === 'normal2') {
+          this.sorting = {'GO_SEARCH': 'DESC', 'GO_RESERVE': 'DESC'}
+          this.activeTag = 'normal2'
+        } else if (param === 'type') {
+          this.sorting = {'GO_SEARCH': 'DESC', 'GO_RESERVE': 'DESC'}
+          this.activeTag = 'type'
+        } else if (param === 'price') {
+          if (this.price_asc) {
+            this.sorting = {'GO_MINPRICERMB': 'ASC', 'GO_RESERVE': 'DESC', 'GO_SEARCH': 'DESC'}
+          } else {
+            this.sorting = {'GO_MINPRICERMB': 'DESC', 'GO_RESERVE': 'DESC', 'GO_SEARCH': 'DESC'}
+          }
+          this.activeTag = 'price'
+          this.price_asc = !this.price_asc
+        }
+        this.$emit('sortEvent', this.sorting)
+      },
+      filter_price: function () {
+        if (this.min_price === '' && this.max_price !== '') {
+          this.filter.goods_maxpricermb = this.max_price
+        } else if (this.min_price !== '' && this.max_price === '') {
+          this.filter.goods_minpricermb = this.min_price
+        } else if (this.min_price !== '' && this.max_price !== '') {
+          if (this.min_price <= this.max_price) {
+            this.filter.goods_minpricermb = this.min_price
+            this.filter.goods_maxpricermb = this.max_price
+          }
+        } else {
+          delete this.filter.goods_minpricermb
+          delete this.filter.goods_maxpricermb
+        }
+        this.$emit('filterPriceEvent', this.filter)
+      },
+      clear_price: function () {
+        this.min_price = ''
+        this.max_price = ''
+      }
+    }
+  }
 </script>
 <style scoped>
-  .main {
-    margin: 20px auto;
-    width: 100%;
-    padding: 3px 3px;
+  .tab-filter {
+    width: 1190px;
+    height: 40px;
+    margin: 0 auto;
+    line-height: 40px;
+    margin-top: 20px;
+    margin-bottom: 10px;
+    background: #f1efef;
   }
-  .main .proofList {
-    width: 100%;
-    height: auto;
-    border: 1px solid #d2d2d2;
-    border-top: 2px solid #5078cb;
-    margin: 15px 0 15px 0;
-    padding-bottom: 20px;
+  .tab-filter .fl {
+    font-size: 14px;
+  }
+  .tab-filter .fl, .tab-filter .fr {
+    float: left;
+  }
+  .tab-filter .fl span {
+    font-size: 14px;
   }
-  .proofList .main-proof {
-    padding: 20px 20px;
+  .text-num {
+    font-style: normal;
+    font-family: verdana;
+  }
+  .tab-filter .fr {
+    max-width: 1050px;
+  }
+  .tab-filter .fr div {
+    float: left;
+    margin: 0 5px;
+  }
+  .tab-filter .fr a {
+    display: inline-block;
+    padding: 1px 10px;
+    border: #ccc 1px solid;
+    line-height: 26px;
+    font-size: 14px;
+    text-align: center;
+    color: #333;
+    max-height: 30px;
+    background: #fff;
+  }
+
+  .tab-filter .fr .price-filter {
+    padding-top: 5px;
+    width: 176px;
+    margin: 0;
   }
-  .proofList .pro-title {
-    width: 720px;
-    padding: 10px 10px 10px 20px;
-    height: 115px;
+  .price-filter {
+    position: relative;
   }
-  .main .content-f {
+  .price-filter .price-input {
+    position: relative;
+    z-index: 10;
+    margin: 0 10px !important;
+    width: 180px;
+  }
+  .tab-filter .fr .price-filter input, .tab-filter .fr .price-filter span {
     float: left;
   }
-  .proofList .img {
+  .tab-filter .fr .form-control {
+    width: 70px;
+    height: 30px;
+    border-radius: 0;
+    padding-left: 5px;
+  }
+  .tab-filter .fr .price-filter span {
+    margin: 0 5px;
+    line-height: 30px;
+  }
+  .price-filter .price-hover {
+    display: none;
+    width: 165px;
+    height: 25px;
+    padding: 60px 6px 6px;
+    margin: 0 10px;
+    border: 1px solid #999;
+    position: absolute;
+    background: #fff;
+    top: 0;
+    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.2);
+    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,.2);
+    box-shadow: 1px 1px 2px rgba(0,0,0,.2);
+  }
+  .price-filter .price-hover a:first-child {
+    position: absolute;
+    top: 37px;
+    left: 6px;
+    width: 36px;
+    height: 25px;
+    line-height: 25px;
+    text-align: center;
+    color: #5078cb;
+    display: inline-block;
+    border: none;
+    padding: 0;
+  }
+  .price-filter .price-hover a:last-child {
+    position: absolute;
+    top: 37px;
+    right: 7px;
+    width: 38px;
+    height: 25px;
+    line-height: 24px;
+    border: 1px solid #ccc;
+    text-align: center;
+    background: #f7f7f7;
+    color: #333;
+    display: inline-block;
+    padding: 0;
+  }
+  .tab-filter .fr .off {
+    margin-left: 130px;
+    float: right;
+  }
+  .tab-filter .fr .off a {
+    border: none;
+    text-align: right;
+    padding-left: 360px;
+    background: none;
+  }
+  .tab-filter .fr .off a i {
+    font-size: 16px;
+  }
+  .product-list{
+    width: 1190px;
+    /*margin-bottom: 20px;*/
+  }
+  .product-list thead tr{
+    /*border-top: #6493ff 2px solid;*/
+    color: #323232;
+    background: none;
+  }
+  /* 物品列表 */
+  .product-list .brand-code {
+    font-size: 14px;
+    text-align: center;
+  }
+
+  .product-list .brand-code .code {
+    font-weight: 600;
+  }
+
+  .product-list th {
+    color: rgb(50,50,50);
+    font-size: 14px;
+    font-weight: 600;
+    background-color: #f7f7f7;
+    text-align: center;
+  }
+
+  .product-list tbody>tr {
+    border: 1px solid #e8e8e8;
+  }
+
+  .product-list tbody>tr img {
+    border: 1px solid #e8e8e8;
+    margin: 10px 0 5px 0;
     width: 80px;
     height: 80px;
-    margin-right: 15px;
   }
-  .text-bold {
-    font-weight: 700;
+  .product-list tbody>tr .contact{
+    font-size: 14px;
+    color: #5078cb;
+    width: 90%;
+    margin: 0 auto;
+    display: inline-block;
+  }
+  .product-list tbody>tr .contact:hover{
+    color: #d32526;
+  }
+
+  .product-list td {
+    font-size: 12px;
+    color: #333;
+    text-align: center;
+    line-height: 20px;
+  }
+
+  /* 物品列表按钮 */
+  .product-list .btn-buy-now {
+    background-color: #5078CB;
+    color: #fff;
+    width: 80px;
+    height: 30px;
+    font-size: 12px;
+    border: 1px solid #5078cb;
+  }
+
+  .product-list .btn-add-cart {
+    margin-top: 10px;
+    color: #214797;
+    width: 80px;
+    height: 30px;
+    font-size: 12px;
+    background-color: #fff;
+    border: 1px solid #e8e8e8;
+  }
+  .product-list .btn-buy-now:hover{
+    background: #214797;
+  }
+  .product-list .btn-add-cart:hover{
+    background-color: #5078CB;
+    color: #fff;
+  }
+  .product-list .text-left{
+    text-align: left;
+  }
+  .product-list .text-left div{
+    margin-left: 30px;
+  }
+  .product-list tbody tr td{
+    padding: 10px 0;
+  }
+  .search-record{
+    width: 100%;
+    margin: 0 auto;
+    height: 40px;
+    font-size: 16px;
+    line-height: 40px;
+    margin-top: 20px;
+  }
+  .search-record span.red{
+    color: #ff0909;
+  }
+  .tab-filter{
+    width: 1190px;
+    height: 40px;
+    margin: 0 auto;
+    background: #fff;
+    line-height: 40px;
+    margin-top: 20px;
+    margin-bottom: 10px;
+    background: #f1efef;
+  }
+  .tab-filter .fl,.tab-filter .fr{
+    float: left;
+  }
+  .tab-filter .fl{
+    font-size: 14px;
+  }
+  .tab-filter .fr{
+    max-width: 1050px;
+  }
+  .tab-filter .fl span{
+    font-size: 14px;
   }
-  .content {
-    margin: 10px 0 20px 0;
+  .tab-filter .fr div{
+    float: left;
+    margin: 0 5px;
+  }
+  .tab-filter .fr div.active a{
+    border: #5078cb 1px solid;
+    color: #5078cb;
+  }
+  .tab-filter .fr a{
+    display: inline-block;
+    padding: 1px 10px;
+    border: #ccc 1px solid;
+    line-height: 26px;
+    font-size: 14px;
+    text-align: center;
+    color: #333;
+    max-height: 30px;
+    background: #fff;
+  }
+  .tab-filter .fr a i{
+    /*margin-left: 5px;*/
   }
-  .proofList .pro-r {
-    padding: 15px 10px 0 0;
+  .tab-filter .fr a:hover{
+    border: #5078cb 1px solid;
+    color: #5078cb;
   }
-  .main .content-r {
+  .tab-filter .fr .off{
+    margin-left : 129px;
     float: right;
   }
-  .row {
-    margin-right: -15px;
-    margin-left: -15px;
+  .tab-filter .fr .off a:hover{
+    border: none;
+    color: #5078cb;
   }
-  .proofList .toMore {
+  .tab-filter .fr .off a{
+    border: none;
     text-align: right;
-    font-size: 14px;
+    padding-left: 360px;
+    background: none;
   }
-  .f16 {
+  .tab-filter .fr .off a i{
     font-size: 16px;
   }
-  .f14 {
-    font-size: 14px;
+  .tab-filter .fr .form-control{
+    width: 70px;
+    height: 30px;
+    border-radius: 0;
+    padding-left: 5px;
   }
-  a:hover{
-    text-decoration: none;
-    color: #f39801;
+  .tab-filter .fr .price-filter input,.tab-filter .fr .price-filter span{
+    float: left;
   }
-  .text-num{
-    font-style: normal;
-    font-family: verdana;
+  .tab-filter .fr select{
+    -webkit-appearance: none;
+    appearance: none;
+    background: transparent;
+    -o-appearance: none;
+    -moz-appearance: none;
+    -ms-appearance: none;
+    width: 120px;
+  }
+  .tab-filter .fr .price-filter{
+    padding-top: 5px;
+    width: 176px;
+    margin: 0;
+  }
+  .tab-filter .fr .price-filter span{
+    margin: 0 5px;
+    line-height: 30px;
   }
-  .f10{
-    font-size: 10px;
+  .close{
+    display: none;
+  }
+  .price-filter{
+    position: relative;
+  }
+  .price-filter:hover .price-hover{
+    display: block;
+  }
+  .price-filter .price-hover{
+    background: transparent;
+  }
+  .price-filter .price-input{
+    position: relative;
+    z-index: 10;
+    margin: 0 10px !important;
+  }
+  .price-filter .price-hover{
+    display: none;
+    width: 165px;
+    height: 25px;
+    padding: 60px 6px 6px;
+    margin: 0 10px;
+    border: 1px solid #999;
+    position: absolute;
+    background: #fff;
+    top: 0;
+    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.2);
+    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,.2);
+    box-shadow: 1px 1px 2px rgba(0,0,0,.2);
+  }
+  .price-filter .price-hover a:first-child{
+    position: absolute;
+    top: 37px;
+    left: 6px;
+    width: 36px;
+    height: 25px;
+    line-height: 25px;
+    text-align: center;
+    color: #5078cb;
+    display: inline-block;
+    border: none;
+    padding: 0;
+  }
+  .price-filter .price-hover a:last-child{
+    position: absolute;
+    top: 37px;
+    right: 7px;
+    width: 38px;
+    height: 25px;
+    line-height: 24px;
+    border: 1px solid #ccc;
+    text-align: center;
+    background: #f7f7f7;
+    color: #333;
+    display: inline-block;
+    padding: 0;
+  }
+  .price-filter .price-hover a:last-child:hover{
+    background: #5078cb;
+    color: #fff;
+  }
+  div.ng-table-pager input.page-number {
+    vertical-align: inherit;
+    display: inline-block;
+    width: 40px;
+    height: 31px;
+    padding: 6px 6px;
+    font-size: 14px;
+    line-height: 1.42857143;
+    color: #9B9792;
+    text-align: center;
+    background-color: #F6F5F4;
+    background-image: none;
+    border: 1px solid #ccc;
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+  }
+  div.ng-table-pager a.page-a{
+    background: #5078cb !important;
+    color: #fff;
+    float: right;
   }
 </style>

components/search/Kind.vue

@@ -1,42 +1,239 @@
 <template>
   <div class="selector">
-    <div class="sl-wrap">
-      <div class="sl-key f14">按类目筛选：</div>
+    <div class="sl-wrap" v-if="good_list.total > 0">
+      <div class="sl-key f14">类目：</div>
       <div class="sl-value">
-        <ul class="list-inline">
-          <li>
-            <a href="" class="f14">射频连接器</a>
+        <span v-for="(kind_temp, index) in kind_exp_arr">
+          <div class="sl-filter" @click="click_kind_exp(kind_temp.ki_id, index)">
+            <a class="text-num" v-text="kind_temp.ki_name_cn"></a>
+            <span><i class="fa fa-close"></i></span>
+          </div>
+        </span>
+        <ul :class="show_kind">
+          <li><a class="f14" >全部</a></li>
+          <li v-for="(item, index) in list_kind">
+            <a v-text="item.ki_name_cn" class="f14" @click="click_kind(item.ki_id, index)"></a>
           </li>
         </ul>
       </div>
       <div class="sl-clear"></div>
       <div class="sl-ext">
-        <a >
-          <span >更多</span>
-          <i class="fa fa-angle-down ng-scope"></i>
+        <a @click="click_kind_more" v-if="list_kind.length>17">
+          <span v-text="kind_open?'更多':'收起'"></span>
+          <i class="fa fa-angle-down ng-scope" v-if="kind_open"></i>
+          <i class="fa fa-angle-up ng-scope" v-if="!kind_open"></i>
         </a>
       </div>
     </div>
-    <div class="sl-wrap">
-      <div class="sl-key f14">按品牌筛选：</div>
+    <div class="sl-wrap" v-if="good_list.total > 0">
+      <div class="sl-key f14">品牌：</div>
       <div class="sl-value">
-        <ul class="list-inline">
-          <li>
-            <a href="" class="f14">泰科电子</a>
+         <span v-for="(brand_temp, index) in brand_exp_arr">
+          <div class="sl-filter">
+            <a class="text-num" v-text="brand_temp.br_name_cn" @click="click_brand_exp(brand_temp.br_id, index)"></a>
+            <span><i class="fa fa-close"></i></span>
+          </div>
+        </span>
+        <ul :class="show_brand">
+          <li><a class="f14" >全部</a></li>
+          <li v-for="(item, index) in list_brand">
+            <a v-text="item.br_name_cn" class="f14" @click="click_brand(item.br_id, index)"></a>
           </li>
         </ul>
       </div>
       <div class="sl-clear"></div>
-      <div class="sl-ext">
-        <a >
-          <span >更多</span>
-          <i class="fa fa-angle-down ng-scope"></i>
+      <div class="sl-ext" v-if="list_brand.length>17">
+        <a @click="click_brand_more">
+          <span v-text="brand_open?'更多':'收起'"></span>
+          <i class="fa fa-angle-down ng-scope" v-if="brand_open"></i>
+          <i class="fa fa-angle-up ng-scope" v-if="!brand_open"></i>
         </a>
       </div>
     </div>
+    <div class="sl-wrap" v-if="list_store_type.length > 0" style="height: 40px">
+      <div class="sl-key f14">货源：</div>
+      <div class="sl-value">
+        <ul class="list-inline" >
+          <li><a class="f14" >全部</a></li>
+          <li>
+            <div class="f14" style="color: #999;" v-if="!getType(list_store_type,store_type_co)">寄售</div>
+            <a class="f14" v-if="getType(list_store_type,store_type_co)" @click="click_store_type('CONSIGNMENT')">寄售</a>
+          </li>
+          <li>
+            <div class="f14" style="color: #999;" v-if="!getType(list_store_type,store_type_di)">经销</div>
+            <a class="f14" v-if="getType(list_store_type,store_type_di)">经销</a>
+          </li>
+          <li>
+            <div class="f14" style="color: #999;" v-if="!getType(list_store_type,store_type_or)">原厂</div>
+            <a class="f14" v-if="getType(list_store_type,store_type_or)">原厂</a>
+          </li>
+          <li>
+            <div class="f14" style="color: #999;" v-if="!getType(list_store_type,store_type_ag)">代理</div>
+            <a class="f14" v-if="getType(list_store_type,store_type_ag)">代理</a>
+          </li>
+        </ul>
+      </div>
+
+    </div>
+    <div class="sl-wrap" v-if="list_crname.length > 0" style="height: 40px">
+      <div class="sl-key f14">仓库：</div>
+      <div class="sl-value">
+        <ul class="list-inline"  >
+          <li><a class="f14">全部</a></li>
+          <li v-for="cr in list_crname_temp">
+            <a v-text="cr.cr_name=='RMB'?'大陆':'香港'" class="f14" @click="click_crname(cr.cr_name)"></a>
+            <div class="sl-filter">
+              <a class="text-num" ></a>
+              <span><i class="fa fa-close"></i></span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="sl-wrap" v-if="list_crname.length > 0" style="height: 40px">
+      <div class="sl-key f14">货币：</div>
+      <div class="sl-value">
+        <ul class="list-inline"  >
+          <li><a class="f14">全部</a></li>
+          <li v-for="cr in list_crname_temp">
+            <a v-text="cr.cr_name=='RMB'?'人民币':'美元'" class="f14" @click="click_crname(cr.cr_name)"></a>
+            <div class="sl-filter">
+              <a class="text-num" ></a>
+              <span><i class="fa fa-close"></i></span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
   </div>
 
 </template>
+<script>
+  export default {
+    data () {
+      return {
+        kind_open: true,
+        brand_open: true,
+        show_kind: 'list-inline',
+        show_brand: 'list-inline',
+        store_type_co: {store_type: 'CONSIGNMENT'},
+        store_type_ag: {store_type: 'AGENCY'},
+        store_type_di: {store_type: 'DISTRIBUTION'},
+        store_type_or: {store_type: 'ORIGINAL_FACTORY'},
+        filter: {},
+        kind_arr: [],
+        brand_arr: [],
+        type_arr: [],
+        crname_arr: [],
+        kind_exp_arr: [],
+        brand_exp_arr: []
+      }
+    },
+    computed: {
+      list_kinds () {
+        return this.$store.state.searchData.searchKinds.kinds
+      },
+      list_kind () {
+        return this.list_kinds.data
+      },
+      list_brands () {
+        return this.$store.state.searchData.searchBrands.brands
+      },
+      list_brand () {
+        return this.list_brands.data
+      },
+      list_store_types () {
+        return this.$store.state.searchData.searchStoreType.store_type
+      },
+      list_store_type () {
+        return this.list_store_types.data
+      },
+      list_crnames () {
+        return this.$store.state.searchData.searchCrname.crname
+      },
+      list_crname () {
+        return this.list_crnames.data
+      },
+      list_crname_temp () {
+        let arr = this.list_crnames.data
+        if (!(JSON.stringify(arr).indexOf(JSON.stringify({cr_name: 'RMB-USD'})) === -1)) {
+          return [{cr_name: 'RMB'}, {cr_name: 'USD'}]
+        } else {
+          return arr
+        }
+      },
+      good_lists () {
+        return this.$store.state.searchData.searchList.lists
+      },
+      good_list () {
+        return this.good_lists.data
+      }
+    },
+    methods: {
+      click_kind_more: function (event) {
+        if (this.kind_open) {
+          this.show_kind = 'list-inline2'
+        } else {
+          this.show_kind = 'list-inline'
+        }
+        this.kind_open = !this.kind_open
+      },
+      click_brand_more: function (event) {
+        if (this.brand_open) {
+          this.show_brand = 'list-inline2'
+        } else {
+          this.show_brand = 'list-inline'
+        }
+        this.brand_open = !this.brand_open
+      },
+      getType: function (arr, obj) {
+        return !(JSON.stringify(arr).indexOf(JSON.stringify(obj)) === -1)
+      },
+      click_kind: function (id, index) {
+        this.kind_arr.push(id)
+        this.$emit('kindFilterEvent', this.kind_arr)
+        this.kind_exp_arr.push(this.list_kind[index])
+        this.list_kind.splice(index, index + 1)
+      },
+      click_brand: function (id, index) {
+        this.brand_arr.push(id)
+        this.$emit('brandFilterEvent', this.brand_arr)
+        this.brand_exp_arr.push(this.list_brand[index])
+        this.list_brand.splice(index, index + 1)
+      },
+      click_store_type: function (type) {
+        this.type_arr.push(type)
+        this.$emit('typeFilterEvent', this.type_arr)
+      },
+      click_crname: function (name) {
+        this.crname_arr.push(name)
+        if (this.crname_arr.length === 2) {
+          this.crname_arr.push('RMB-USD')
+        }
+        this.$emit('crnameFilterEvent', this.crname_arr)
+      },
+      click_kind_exp: function (id, index) {
+        let idx = this.getIndex(this.kind_arr, id)
+        this.kind_arr.splice(idx, idx + 1)
+        this.$emit('kindFilterEvent', this.kind_arr)
+        this.kind_exp_arr.splice(index, index + 1)
+      },
+      click_brand_exp: function (id, index) {
+        let idx = this.getIndex(this.brand_arr, id)
+        this.brand_arr.splice(idx, idx + 1)
+        this.$emit('brandFilterEvent', this.brand_arr)
+        this.brand_exp_arr.splice(index, index + 1)
+      },
+      getIndex: function (arr, obj) {
+        for (let i = 0; i < arr.length; i++) {
+          if (arr[i] === obj) {
+            return i
+          }
+        }
+      }
+    }
+  }
+</script>
 <style scoped>
   #searchResult .selector .sl-wrap {
     position: relative;
@@ -56,6 +253,39 @@
     margin-left: 110px;
     margin-right: 50px;
   }
+  #searchResult .selector .sl-wrap .sl-value span >.sl-filter {
+    display: inline-block;
+    position: relative;
+    line-height: 22px;
+    padding-left: 10px;
+    padding-right: 30px;
+    border: 1px solid #ccc;
+    cursor: pointer;
+  }
+  #searchResult .selector .sl-wrap .sl-value span >.sl-filter a{
+    color: #666;
+    text-decoration: none;
+  }
+  #searchResult .selector .sl-wrap .sl-value span >.sl-filter span{
+    display: inline-block;
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    width: 20px;
+    text-align: center;
+    background: #ccc;
+    color: #fff;
+  }
+  #searchResult .selector .sl-wrap .sl-value span >.sl-filter:hover {
+    border: 1px solid #f50;
+  }
+  #searchResult .selector .sl-wrap .sl-value span >.sl-filter:hover a{
+    color: #f50;
+  }
+  #searchResult .selector .sl-wrap .sl-value span >.sl-filter:hover span{
+    background: #f50;
+  }
   #searchResult .selector .sl-wrap .sl-clear {
     clear: both;
   }
@@ -65,17 +295,41 @@
     position: absolute;
     right: 0;
   }
-  #searchResult .selector .sl-wrap .sl-value ul {
+
+  .list-inline {
     height: 60px;
     overflow: hidden;
     margin-bottom: 0;
+    padding-left: 0;
+    margin-left: -5px;
+    list-style: none;
   }
-  .list-inline {
+  .list-inline2 {
+    height: 100%;
+    overflow: hidden;
+    margin-bottom: 0;
     padding-left: 0;
     margin-left: -5px;
     list-style: none;
   }
-  .list-inline a:hover{
+
+  #searchResult .selector .sl-wrap .sl-value ul >li {
+    display: inline-block;
+    padding-right: 5px;
+    padding-left: 5px;
+    margin-right: 20px;
+    width: 10%;
+    height: 23px;
+    line-height: 23px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  #searchResult .selector .sl-wrap .sl-value ul  a{
+    color: #1162a4;
+  }
+  #searchResult .selector .sl-wrap .sl-value ul  a:hover{
     text-decoration: none;
     color: #f50;
   }
@@ -86,5 +340,6 @@
     color: #5078cb;
     text-decoration: none;
   }
+
 </style>
 

components/search/ResultTitle.vue

@@ -1,11 +1,20 @@
 <template>
   <div class="result-title text-muted">
-    搜索"<span class="text-inverse ng-binding">123</span>"，为您找到
-    <span class="text-num ng-binding" >1,472</span><!-- ngIf: !total --> 个相关产品：
+    搜索"<span class="text-inverse" >{{keyword}}</span>"，为您找到
+    <span class="text-num ng-binding" v-text="good_list.total"></span><!-- ngIf: !total --> 个相关产品：
   </div>
 </template>
 <script>
   export default{
+    props: ['keyword'],
+    computed: {
+      good_lists () {
+        return this.$store.state.searchData.searchList.lists
+      },
+      good_list () {
+        return this.good_lists.data
+      }
+    }
   }
 </script>
 <style scoped>
@@ -15,8 +24,6 @@
     height: 30px;
     line-height: 30px;
     font-size: 14px;
-    background: #efefef;
-    border: 1px solid #e5e5e5;
   }
   .text-inverse {
     color: #f40!important;

pages/search/_keyword.vue

@@ -1,24 +1,133 @@
 <template>
 <div class="container" id="searchResult">
-  <result-title></result-title>
-    <kind></kind>
-  <good-list></good-list>
+  <result-title :keyword="key"></result-title>
+    <kind @kindFilterEvent="listenKindFilter"
+          @brandFilterEvent="listenBrandFilter"
+          @typeFilterEvent="listenTypeFilter"
+          @crnameFilterEvent="listenCrnameFilter"
+    ></kind>
+  <good-list @pageEvent="listenPage" @sortEvent="listenSort" @filterPriceEvent="listenPriceFilter"></good-list>
 </div>
 </template>
 <script>
   import { GoodList, Kind, ResultTitle } from '~components/search'
-  import 'bootstrap/dist/css/bootstrap.min.css'
   export default{
     layout: 'main',
     data () {
       return {
-        key: this.$route.query.w
+        key: this.$route.query.w,
+        pageSize: 15,
+        nowPage: 1,
+        sorting: {'GO_RESERVE': 'DESC', 'GO_SEARCH': 'DESC'},
+        filter: {},
+        paramJSON: {}
       }
     },
+    fetch ({store, route}) {
+      return Promise.all([
+        store.dispatch('searchData/searchForKinds', {collectList: 'goods_kind', keyword: route.query.w, paramJSON: {}}),
+        store.dispatch('searchData/searchForBrands', {collectList: 'goods_brand', keyword: route.query.w, paramJSON: {}}),
+        store.dispatch('searchData/searchForList', {count: this.pageSize, filter: this.filter, keyword: route.query.w, page: this.nowPage, sorting: this.sorting}),
+        store.dispatch('searchData/searchForStoreType', {collectList: 'goods_store_type', keyword: route.query.w, paramJSON: {}}),
+        store.dispatch('searchData/searchForCrname', {collectList: 'goods_crname', keyword: route.query.w, paramJSON: {}})
+      ])
+    },
     components: {
       ResultTitle,
       Kind,
       GoodList
+    },
+    methods: {
+      reloadList: function () {
+        if (this.sorting === {}) {
+          this.sorting = {'GO_RESERVE': 'DESC', 'GO_SEARCH': 'DESC'}
+        }
+        this.$store.dispatch('searchData/searchForList', {count: this.pageSize, filter: this.filter, keyword: this.$route.query.w, page: this.nowPage, sorting: this.sorting})
+      },
+      reloadKind: function () {
+        this.$store.dispatch('searchData/searchForKinds', {collectList: 'goods_kind', keyword: this.$route.query.w, paramJSON: this.paramJSON})
+      },
+      reloadBrand: function () {
+        this.$store.dispatch('searchData/searchForBrands', {collectList: 'goods_brand', keyword: this.$route.query.w, paramJSON: this.paramJSON})
+      },
+      reloadStoreType: function () {
+        this.$store.dispatch('searchData/searchForStoreType', {collectList: 'goods_store_type', keyword: this.$route.query.w, paramJSON: this.paramJSON})
+      },
+      reloadCrname: function () {
+        this.$store.dispatch('searchData/searchForCrname', {collectList: 'goods_crname', keyword: this.$route.query.w, paramJSON: this.paramJSON})
+      },
+      listenPage: function (nPage) {
+        this.nowPage = nPage
+        this.reloadList()
+      },
+      listenSort: function (sortType) {
+        this.sorting = sortType
+        this.reloadList()
+      },
+      listenPriceFilter: function (filterType) {
+        if (filterType.goods_minpricermb) {
+          this.filter.goods_minpricermb = filterType.goods_minpricermb
+        } else {
+          delete this.filter.goods_minpricermb
+        }
+        if (filterType.goods_maxpricermb) {
+          this.filter.goods_maxpricermb = filterType.goods_maxpricermb
+        } else {
+          delete this.filter.goods_maxpricermb
+        }
+        this.reloadList()
+      },
+      listenKindFilter: function (kindarr) {
+        console.log(kindarr.length)
+        if (kindarr.length === 0) {
+          delete this.filter.goods_kindId
+          delete this.paramJSON.goods_kindid
+          this.reloadBrand()
+          this.reloadList()
+          this.reloadStoreType()
+          this.reloadCrname()
+        } else {
+          this.filter.goods_kindId = kindarr
+          this.paramJSON.goods_kindid = kindarr
+          this.reloadBrand()
+          this.reloadList()
+          this.reloadStoreType()
+          this.reloadCrname()
+        }
+      },
+      listenBrandFilter: function (brandarr) {
+        if (brandarr.length === 0) {
+          delete this.filter.goods_brandId
+          delete this.paramJSON.goods_brandid
+          this.reloadKind()
+          this.reloadList()
+          this.reloadStoreType()
+          this.reloadCrname()
+        } else {
+          this.filter.goods_brandId = brandarr
+          this.paramJSON.goods_brandid = brandarr
+          this.reloadKind()
+          this.reloadList()
+          this.reloadStoreType()
+          this.reloadCrname()
+        }
+      },
+      listenTypeFilter: function (typearr) {
+        this.filter.goods_store_type = typearr
+        this.paramJSON.goods_store_type = typearr
+        this.reloadKind()
+        this.reloadBrand()
+        this.reloadList()
+        this.reloadCrname()
+      },
+      listenCrnameFilter: function (crnamearr) {
+        this.filter.goods_crname = crnamearr
+        this.paramJSON.goods_crname = crnamearr
+        this.reloadKind()
+        this.reloadBrand()
+        this.reloadList()
+        this.reloadStoreType()
+      }
     }
   }
 </script>

store/searchData.js

@@ -1,14 +1,54 @@
 import axios from '~plugins/axios'
 
 export const actions = {
-  // 获取kind
+  // 获取搜索kind
   searchForKinds ({ commit }, params = {}) {
-    commit('searchData/searchKinds/REQUEST_KINDS', params)
-    return axios.get(`/search/component/brands`, {params})
+    commit('searchKinds/REQUEST_KINDS', params)
+    return axios.get(`/search/componentGoods/collect`, {params})
       .then(response => {
-        commit('searchData/searchKinds/GET_KINDS_SUCCESS', response.data)
+        commit('searchKinds/GET_KINDS_SUCCESS', response.data)
       }, err => {
-        commit('searchData/searchKinds/GET_KINDS_FAILURE', err)
+        commit('searchKinds/GET_KINDS_FAILURE', err)
+      })
+  },
+  // 获取搜索brand
+  searchForBrands ({ commit }, params = {}) {
+    commit('searchBrands/REQUEST_BRANDS', params)
+    return axios.get(`/search/componentGoods/collect`, {params})
+      .then(response => {
+        commit('searchBrands/GET_BRANDS_SUCCESS', response.data)
+      }, err => {
+        commit('searchBrands/GET_BRANDS_FAILURE', err)
+      })
+  },
+  // 获取搜索list
+  searchForList ({ commit }, params = {}) {
+    commit('searchList/REQUEST_LIST', params)
+    return axios.get(`/api/product/component/search/compGoods`, {params})
+      .then(response => {
+        commit('searchList/GET_LIST_SUCCESS', response.data)
+      }, err => {
+        commit('searchList/GET_LIST_FAILURE', err)
+      })
+  },
+  // 获取搜索货源
+  searchForStoreType ({ commit }, params = {}) {
+    commit('searchStoreType/REQUEST_STORETYPE', params)
+    return axios.get(`/search/componentGoods/collect`, {params})
+      .then(response => {
+        commit('searchStoreType/GET_STORETYPE_SUCCESS', response.data)
+      }, err => {
+        commit('searchStoreType/GET_STORETYPE_FAILURE', err)
+      })
+  },
+  // 获取搜索币种
+  searchForCrname ({ commit }, params = {}) {
+    commit('searchCrname/REQUEST_CRNAME', params)
+    return axios.get(`/search/componentGoods/collect`, {params})
+      .then(response => {
+        commit('searchCrname/GET_CRNAME_SUCCESS', response.data)
+      }, err => {
+        commit('searchCrname/GET_CRNAME_FAILURE', err)
       })
   }
 }

store/searchData/searchBrands.js

@@ -0,0 +1,19 @@
+export const state = () => ({
+  brands: {
+    fetching: false,
+    data: []
+  }
+})
+
+export const mutations = {
+  REQUEST_BRANDS (state) {
+    state.brands.fetching = true
+  },
+  GET_BRANDS_FAILURE (state) {
+    state.brands.fetching = false
+  },
+  GET_BRANDS_SUCCESS (state, result) {
+    state.brands.fetching = false
+    state.brands.data = result
+  }
+}

store/searchData/searchCrname.js

@@ -0,0 +1,19 @@
+export const state = () => ({
+  crname: {
+    fetching: false,
+    data: []
+  }
+})
+
+export const mutations = {
+  REQUEST_CRNAME (state) {
+    state.crname.fetching = true
+  },
+  GET_CRNAME_FAILURE (state) {
+    state.crname.fetching = false
+  },
+  GET_CRNAME_SUCCESS (state, result) {
+    state.crname.fetching = false
+    state.crname.data = result
+  }
+}

store/searchData/searchList.js

@@ -0,0 +1,19 @@
+export const state = () => ({
+  lists: {
+    fetching: false,
+    data: []
+  }
+})
+
+export const mutations = {
+  REQUEST_LIST (state) {
+    state.lists.fetching = true
+  },
+  GET_LIST_FAILURE (state) {
+    state.lists.fetching = false
+  },
+  GET_LIST_SUCCESS (state, result) {
+    state.lists.fetching = false
+    state.lists.data = result
+  }
+}

store/searchData/searchStoreType.js

@@ -0,0 +1,19 @@
+export const state = () => ({
+  store_type: {
+    fetching: false,
+    data: []
+  }
+})
+
+export const mutations = {
+  REQUEST_STORETYPE (state) {
+    state.store_type.fetching = true
+  },
+  GET_STORETYPE_FAILURE (state) {
+    state.store_type.fetching = false
+  },
+  GET_STORETYPE_SUCCESS (state, result) {
+    state.store_type.fetching = false
+    state.store_type.data = result
+  }
+}