基础搜索

components/main/Search.vue

@@ -1,13 +1,19 @@
 <template>
-  <div class="search-box" :class="{'search-box2': !SelectItem}">
+  <div class="search-box"><!-- :class="{'search-box2': !SelectItem}"-->
     <div class="input-group">
       <template v-if="!isPcb">
-        <select v-model="searchType" class="form-control select-type select-adder" v-if="SelectItem">
+        <div class="type">
+          <span class="type-item" :class="{active: newSearchType == 'code'}" @click="setNewSearchType('code')">型号</span>
+          <span class="type-item" :class="{active: newSearchType == 'kind'}" @click="setNewSearchType('kind')">物料名称</span>
+          <span class="type-item" :class="{active: newSearchType == 'store'}" @click="setNewSearchType('store')">卖家</span>
+          <span class="type-item" :class="{active: newSearchType == 'brand'}" @click="setNewSearchType('brand')">品牌</span>
+        </div>
+        <!--<select v-model="searchType" class="form-control select-type select-adder" v-if="SelectItem">
           <option value="product">产品</option>
           <option value="store">店铺</option>
-        </select>
+        </select>-->
         <input v-model="keyword" type="text" class="search-input form-control input-primary"
-               :placeholder="searchType === 'product' ? '品牌/物料名称/型号' : '店铺名称'"
+               :placeholder="placeholderByType"
                @focus.stop.prevent="onFocus()"
                @blur.stop.prevent="onBlur()"
                @keyup.40="onSelectChange(1)"
@@ -31,10 +37,14 @@
     </div>
     <ul class="association"
         :class="{'association2': !SelectItem, 'pcb-asso': isPcb}"
-        v-show="showAssociate && searchType == 'product'"
+        v-show="showAssociate"
         @mouseenter="associate.focus=true"
         @mouseleave="associate.focus=false">
-      <li v-if="similarKeywords.data.brand && similarKeywords.data.brand.length > 0" class="similar-title">品牌：</li>
+      <li v-for="(k, index) in similarKeywords.data.all" class="item"
+          :class="{'active': index==associate.activeIndex}"
+          @click.stop.prevent="onAssociateClick(k)">{{k}}
+      </li>
+     <!-- <li v-if="similarKeywords.data.brand && similarKeywords.data.brand.length > 0" class="similar-title">品牌：</li>
       <li v-for="(k, index) in similarKeywords.data.brand" class="item"
           :class="{'active': index==associate.activeIndex}"
           @click.stop.prevent="onAssociateClick(isCnStart() ? k.nameCn : k.nameEn)">{{ isCnStart() ? k.nameCn : k.nameEn }}
@@ -48,7 +58,7 @@
       <li v-for="(k, index) in similarKeywords.data.component" class="item"
           :class="{'active': index==associate.activeIndex}"
           @click.stop.prevent="onAssociateClick(k.code)">{{ k.code }}
-      </li>
+      </li>-->
     </ul>
     <div class="search-hot" v-if="SelectItem">
       <ul class="list-untyled">
@@ -88,7 +98,9 @@
           activeIndex: null
         },
         click_flag: false,
-        searchType: 'product'
+        searchType: 'product',
+        // 新版搜索控制变量
+        newSearchType: 'code'
       }
     },
     computed: {
@@ -134,6 +146,26 @@
           return tmp || true
         }
         return true
+      },
+      placeholderByType () {
+        let type
+        switch (this.newSearchType) {
+          case 'code':
+            type = '型号'
+            break
+          case 'brand':
+            type = '品牌'
+            break
+          case 'kind':
+            type = '物料名称'
+            break
+          case 'store':
+            type = '卖家名称'
+            break
+          default:
+            type = '型号'
+        }
+        return `请输入${type}`
       }
     },
     watch: {
@@ -222,6 +254,9 @@
         if (this.keyword && this.keyword.length > 0) {
           return this.keyword.charCodeAt(0) > 255
         }
+      },
+      setNewSearchType (type) {
+        this.newSearchType = type
       }
     },
     created () {
@@ -239,7 +274,7 @@
     height: 40px;
     position: relative;
     .search-input{
-      width: 372px;
+      width: 441px;
       float: left;
     }
     .search-input, .search-btn {
@@ -309,7 +344,7 @@
 
     .association {
       position: absolute;
-      left: 69px;
+      left: 0;
       top: 100%;
       right: 81px;
       background: $white;
@@ -345,6 +380,23 @@
       left: 2px;
       right: 71px
     }
+
+    .input-group {
+      .type {
+        position: absolute;
+        top: -21px;
+        .type-item {
+          padding: 4px 12px;
+          color: #5078cb;
+          font-size: 14px;
+          cursor: pointer;
+          &.active, &:hover {
+            background: #4071c6;
+            color: #fff;
+          }
+        }
+      }
+    }
   }
 
   .search-box2 {

components/search/GoodList.vue

@@ -41,7 +41,7 @@
           <thead>
           <tr style="height: 40px;">
             <!--<th width="80"></th>-->
-            <th width="140">品牌/物料名称(类目)/型号/规格</th>
+            <th width="200">品牌/物料名称(类目)/型号/规格</th>
             <th width="100">包装/生产日期</th>
             <th width="110">卖家名称</th>
             <th width="140">库存</th>

components/search/ResultTitle.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="result-title text-muted">
-    搜索"<span class="text-inverse" >{{keyword}}</span>"<span v-if="status != 1">暂无此型号</span>
-    <span v-if="status != 3">，为您找到
-    <span class="text-num" v-text="good_list.total"></span> 个<span v-if="status == 2">相关</span>产品</span>：
+    搜索"<span class="text-inverse" >{{keyword}}</span>"
+    <!--<span v-if="status != 1">暂无此型号</span>-->
+    <span>，为您找到
+    <span class="text-num" v-text="good_list.total"></span> 个<span v-if="status == 2">相关</span>信息
+    </span>：
   </div>
 </template>
 <script>
@@ -18,17 +20,17 @@
         return this.$store.state.searchData.searchList.lists
       },
       good_list () {
-        if (this.page === 1) {
-          if (this.good_lists.data.components && this.good_lists.data.components.length > 0) {
-            if (this.keyword.toUpperCase() === this.good_lists.data.components[0].code.toUpperCase()) {
-              this.status = 1
-            } else {
-              this.status = 2
-            }
-          } else {
-            this.status = 3
-          }
-        }
+//        if (this.page === 1) {
+//          if (this.good_lists.data.components && this.good_lists.data.components.length > 0) {
+//            if (this.keyword.toUpperCase() === this.good_lists.data.components[0].code.toUpperCase()) {
+//              this.status = 1
+//            } else {
+//              this.status = 2
+//            }
+//          } else {
+//            this.status = 3
+//          }
+//        }
         return this.good_lists.data
       }
     }
@@ -49,5 +51,6 @@
   .text-num {
     font-style: normal;
     font-family: verdana;
+    color: #0b7bef;
   }
 </style>

components/search/index.js

@@ -1,5 +1,6 @@
 import GoodList from './GoodList.vue'
 import Kind from './Kind.vue'
 import ResultTitle from './ResultTitle.vue'
+// import ForwardGoodsList from './ForwardGoodsList.vue'
 
 export { GoodList, Kind, ResultTitle }

pages/search/_keyword.vue

@@ -1,23 +1,28 @@
 <template>
 <div class="container" id="searchResult">
-  <detail-brand></detail-brand>
+  <!--<detail-brand></detail-brand>-->
   <result-title :keyword="key" :page="nowPage"></result-title>
-    <kind @kindFilterEvent="listenKindFilter"
+  <!--  <kind @kindFilterEvent="listenKindFilter"
           @brandFilterEvent="listenBrandFilter"
           @typeFilterEvent="listenTypeFilter"
           @crnameFilterEvent="listenCrnameFilter"
           @crnameFlagEvent="listenCrnameFlag"
-    ></kind>
+    ></kind>-->
+  <div class="search-result-type">
+    <span class="inline-block" :class="{active: resultType == 'current'}" @click="setResultType('current')">现货(5条)</span>
+    <span class="inline-block" :class="{active: resultType == 'forward'}" @click="setResultType('forward')">期货(5条)</span>
+  </div>
   <good-list @pageEvent="listenPage"
              @sortEvent="listenSort"
              @filterPriceEvent="listenPriceFilter"
              :crname_click_flag="crname_click_flag"
   ></good-list>
+  <!--<forward-goods-list></forward-goods-list>-->
 </div>
 </template>
 <script>
-  import { GoodList, Kind, ResultTitle } from '~components/search'
-  import DetailBrand from '~components/search/DetailBrand.vue'
+  import { GoodList, ResultTitle } from '~components/search'
+//  import DetailBrand from '~components/search/DetailBrand.vue'
   export default{
     layout: 'main',
     data () {
@@ -31,7 +36,9 @@
         crname_click_flag: {
           rmb_click_flag: false,
           usd_click_flag: false
-        }
+        },
+        // 现货：current, 期货：forward
+        resultType: 'current'
       }
     },
     fetch ({store, route}) {
@@ -45,9 +52,8 @@
     },
     components: {
       ResultTitle,
-      Kind,
-      GoodList,
-      DetailBrand
+      GoodList
+//      DetailBrand
     },
     watch: {
       '$route.query.w': {
@@ -198,8 +204,28 @@
           this.crname_click_flag.rmb_click_flag = obj.rmb_click_flag
           this.crname_click_flag.usd_click_flag = obj.usd_click_flag
         }
+      },
+      setResultType: function (resultType) {
+        this.resultType = resultType
       }
     }
   }
 </script>
+<style lang="scss" scoped>
+  .search-result-type {
+    border-bottom: 2px solid #2e91f0;
+    span {
+      padding: 12px 37px;
+      color: #666;
+      font-size: 14px;
+      border: 1px solid #ccc;
+      cursor: pointer;
+      &.active {
+        color: #fff;
+        background: #2e91f0;
+        border-color: #2e91f0;
+      }
+    }
+  }
+</style>