搜索功能调整

components/mobile/Home.vue

@@ -20,9 +20,9 @@
           <!--<li :class="activeType=='shops'?'active':''" @click="activeType='shops'"><span>商家</span></li>-->
           <!--</ul>-->
           <div class="home-input">
-            <input type="text" placeholder="请输入您要查找的型号、品牌或商家" v-model="keyword"
+            <input type="text" placeholder="请输入您要查找的型号、品牌或商家"
                    @click="onHomeSearchClick()"/>
-            <span @click="onSearch()"><i class="iconfont icon-sousuo"></i></span>
+            <span><i class="iconfont icon-sousuo"></i></span>
           </div>
           <!--<p style="color:#e45803;line-height:.4rem;margin-top:.1rem;width:4.2rem;margin-left:1rem;">搜品牌、搜现货 、搜好店 、搜规格书 就上优软商城</p>-->
         </div>
@@ -75,97 +75,33 @@
         </a>
       </div>
     </div>
-    <div class="main-search" v-else>
-      <div class="main-search-header">
-        <input type="text" v-model="keyword" placeholder="请输入您要查找的型号或品牌" @keyup.13="onSearch()" autofocus>
-        <span @click="onSearch()">搜索</span>
-      </div>
-      <ul class="associate-list" v-show="associate.show">
-        <li @click="onAssociateClick(similar.code)" v-for="similar in similarKeywords.all">
-          <i class="icon-sousuo iconfont"></i>
-          <span>{{similar.code}}</span>
-        </li>
-        <li>查找“{{keyword}}”</li>
-      </ul>
-      <div class="hot-history" v-show="!associate.show">
-        <div class="search-history">
-          <p>历史搜索</p>
-          <ul>
-            <li v-for="item in searchHistory" @click="onSearch(item.keyword)">
-              <a>{{item.keyword}}</a>
-            </li>
-          </ul>
-        </div>
-        <div class="search-hot">
-          <img src="/images/mobile/@2x/home/hot-search.png" alt="">
-          <ul>
-            <li v-for="hotword in hotwords">
-              <nuxt-link :to="hotword.url" v-text="hotword.name"></nuxt-link>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
+    <main-search v-else></main-search>
   </div>
 </template>
 
 <script>
+  import MainSearch from '~/components/mobile/search/MainSearch.vue'
   export default {
     name: 'home',
     data () {
       return {
-        keyword: '',
         activeType: 'model',
         showMainSearch: false,
         showStoreInfo: false,
         isMore: false,
         isShow: false,
         len: 0,
-        bgUrl: '/images/mobile/@2x/home/background@2x.png',
-        associate: {
-          show: false
-        }
+        bgUrl: '/images/mobile/@2x/home/background@2x.png'
       }
     },
-    props: {
-      hotwords: {
-        type: Array,
-        default () {
-          return [
-            {name: 'DSP1-DC5V-F', url: '/mobile/brand/componentDetail/0900300200000669'},
-            {name: 'Vishay', url: '/mobile/brand/30327265e42a871be050007f01003d96'},
-            {name: 'Panasonic', url: '/mobile/brand/30327265e47d871be050007f01003d96'}
-          ]
-        }
-      }
+    components: {
+      MainSearch
     },
-//    filters: {
-//      similarFilter: function (key) {
-//        let keyword = this.keyword
-//        let index = key.indexOf(keyword)
-//        if (index !== -1) {
-//          key = key.substring(0, index) + '<strong>' + key.sub(index, keyword.length) + '</strong>' + key.substring(index + keyword.length, key.length)
-//        }
-//        return key
-//      }
-//    },
     methods: {
       onHomeSearchClick () {
         this.showMainSearch = true
         this.$store.dispatch('searchData/getSearchHistory')
       },
-      onBlur () {
-        this.showMainSearch = false
-      },
-      onSearch (key) {
-        if (key && key !== '') {
-          this.keyword = key
-        }
-        if (this.keyword) {
-          this.associate.show = false
-          this.$router.push({path: '/mobile/search?w=' + encodeURIComponent(this.keyword)})
-        }
-      },
       matNumber (num) {
         if (num > 99999999) {
           this.isShow = true
@@ -198,38 +134,6 @@
       },
       loadCounts () {
         this.$store.dispatch('loadProductCounts', { _status: 'actived' })
-      },
-      onChange () {
-        if (!this.keyword) {
-          this.associate.show = false
-          this.$store.dispatch('resetSearchKeywords')
-        } else {
-          this.searchKeywords()
-        }
-        if (this.click_flag) {
-          this.associate.show = false
-        }
-      },
-      searchKeywords () {
-        this.associate.show = true
-        this.$store.dispatch('searchKeywords', { keyword: this.keyword })
-      },
-      onAssociateClick (word) {
-        this.keyword = word
-        this.onSearch()
-      }
-    },
-    created () {
-      this.$store.dispatch('resetSearchKeywords')
-    },
-    watch: {
-      'keyword': {
-        handler (val, oldVal) {
-          let keywords = this.similarKeywords.data
-          if (!keywords || !keywords.length) {
-            this.onChange()
-          }
-        }
       }
     },
     computed: {
@@ -238,13 +142,6 @@
       },
       counts () {
         return this.$store.state.product.common.counts.data
-      },
-      similarKeywords () {
-        return this.$store.state.search.keywords.data
-      },
-      searchHistory () {
-        console.log(this.$store.state.searchData)
-        return this.$store.state.searchData.searchHistory.searchHistory.data
       }
     }
   }
@@ -365,136 +262,4 @@
       margin:0;
       margin-top:.1rem;
     }
-  .main-search {
-    background: #fff;
-    .main-search-header {
-      height: .71rem;
-      background: #4391f7;
-      line-height: .66rem;
-      padding-left: .84rem;
-      input {
-        width: 4.78rem;
-        height: .54rem;
-        line-height: .54rem;
-        font-size: .23rem;
-        color: #999;
-        padding-left: .2rem;
-        border-bottom-left-radius: .05rem;
-        border-top-left-radius: .05rem;
-        border: .01rem solid #fff;
-        background: #fff;
-      }
-      span {
-        display: inline-block;
-        width: 1.02rem;
-        text-align: center;
-        height: .54rem;
-        line-height: .54rem;
-        color: #366df3;
-        font-size: .23rem;
-        margin-left: .02rem;
-        border-top-right-radius: .05rem;
-        border-bottom-right-radius: .05rem;
-        background: #fff;
-      }
-    }
-    .associate-list {
-      padding-top: .25rem;
-      background: #fff;
-      li {
-        height: 58px;
-        line-height: 58px;
-        padding: 0 45px;
-        border-bottom: .01rem solid #f1f0f0;
-        i {
-          font-size: .4rem;
-          margin-right: .24rem;
-          color: #ddd;
-        }
-        span {
-          color: #999;
-          font-size: .28rem;
-          line-height: 58px;
-          height: .58rem;
-          display: inline-block;
-        }
-        &:active, &:hover {
-          background: #eee;
-        }
-        &:last-child {
-          text-align: center;
-          font-size: .3rem;
-          color: #3976f4;
-          border-bottom: none;
-          &:active, &:hover {
-            background: #fff;
-          }
-        }
-      }
-    }
-    .hot-history {
-      .search-history {
-        padding-left: .51rem;
-        padding-top: .38rem;
-        >p {
-          font-size: .3rem;
-          color: #333;
-        }
-        ul {
-          text-align: left;
-          margin-top: .26rem;
-          li {
-            display: inline-block;
-            max-width: 2.83rem;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            margin-right: 10px;
-            background: #f2f6ff;
-            height: .56rem;
-            line-height: .56rem;
-            padding: 0 .12rem;
-            a {
-              font-size: .3rem;
-              color: #666;
-            }
-          }
-        }
-      }
-      .search-hot {
-        text-align: center;
-        margin-top: .3rem;
-        >img {
-          width: 2.56rem;
-          height: .67rem;
-        }
-        ul {
-          text-align: left;
-          padding-left: .51rem;
-          margin-top: .31rem;
-          li {
-            display: inline-block;
-            max-width: 2.83rem;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            margin-right: 10px;
-            background: #fef1eb;
-            height: .56rem;
-            line-height: .56rem;
-            padding: 0 .12rem;
-            a {
-              font-size: .3rem;
-              color: #666;
-            }
-            &:nth-child(1) {
-              a {
-                color: #fc5708;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
 </style>

components/mobile/MobileFooter.vue

@@ -38,6 +38,7 @@
     justify-content:space-between;
     border-top:.02rem solid #ccc;
     background: #ffffff;
+    z-index: 10;
   }
   .mobile-footer span{
     flex:1;

components/mobile/MobileHeader.vue

@@ -54,16 +54,19 @@
         <div class="cancel-share" @click="showShare=false">取消</div>
       </div>
     </div>
-    <div class="mobile-header" v-if="showHeader">
+    <div class="mobile-header" v-if="showHeader && !showMainSearch">
       <!--<a class="iconfont icon-fanhui" @click="goLastPage">返回</a>-->
       <p>{{title}}</p>
+      <span v-show="showSearch" @click="showMainSearch = true"><i class="icon-sousuo iconfont"></i>搜索</span>
     </div>
+    <main-search v-if="showMainSearch"></main-search>
     <i v-show="rightIcon=='share'" class="iconfont icon-fenxiang" @click="showShare = true"></i>
     <i v-show="rightIcon=='phone'" class="iconfont icon-dianhua" @click="showLink"></i>
   </div>
 </template>
 <script>
   import Clipboard from 'clipboard'
+  import MainSearch from '~/components/mobile/search/MainSearch.vue'
   export default {
     data () {
       return {
@@ -72,7 +75,16 @@
         rightIcon: 'share',
         showDefaultAddr: true,
         url: '',
-        clipboard: {}
+        clipboard: {},
+        showMainSearch: false
+      }
+    },
+    components: {
+      MainSearch
+    },
+    watch: {
+      $route: function (val, oldVal) {
+        this.showMainSearch = false
       }
     },
     computed: {
@@ -90,6 +102,9 @@
       },
       showHeader () {
         return this.$route.path !== '/'
+      },
+      showSearch () {
+        return this.$route.path !== '/' && !this.$route.path.startsWith('/mobile/search')
       }
     },
     mounted () {
@@ -220,6 +235,14 @@
     font-size:.28rem;
     color:#fff;
   }
+  .mobile-header span {
+    position: absolute;
+    right: .4rem;
+    font-size: .24rem;
+  }
+  .mobile-header span i {
+    font-size: .24rem;
+  }
   .mobile-nav >i{
     font-size: .4rem;
     position: fixed;

components/mobile/search/MainSearch.vue

@@ -0,0 +1,257 @@
+<template>
+  <div class="main-search">
+    <div class="main-search-header">
+      <input type="text" v-model="keyword" placeholder="请输入您要查找的型号或品牌" @keyup.13="onSearch()" autofocus>
+      <span @click="onSearch()">搜索</span>
+    </div>
+    <ul class="associate-list" v-show="associate.show">
+      <li @click="onAssociateClick(similar.code)" v-for="similar in similarKeywords.all">
+        <i class="icon-sousuo iconfont"></i>
+        <span>{{similar.code}}</span>
+      </li>
+      <li>查找“{{keyword}}”</li>
+    </ul>
+    <div class="hot-history" v-show="!associate.show">
+      <div class="search-history">
+        <p>历史搜索</p>
+        <ul>
+          <li v-for="item in searchHistory" @click="onSearch(item.keyword)">
+            <a>{{item.keyword}}</a>
+          </li>
+        </ul>
+      </div>
+      <div class="search-hot">
+        <img src="/images/mobile/@2x/home/hot-search.png" alt="">
+        <ul>
+          <li v-for="hotword in hotwords">
+            <nuxt-link :to="hotword.url" v-text="hotword.name"></nuxt-link>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'home',
+    data () {
+      return {
+        keyword: '',
+        associate: {
+          show: false
+        }
+      }
+    },
+    props: {
+      hotwords: {
+        type: Array,
+        default () {
+          return [
+            {name: 'DSP1-DC5V-F', url: '/mobile/brand/componentDetail/0900300200000669'},
+            {name: 'Vishay', url: '/mobile/brand/30327265e42a871be050007f01003d96'},
+            {name: 'Panasonic', url: '/mobile/brand/30327265e47d871be050007f01003d96'}
+          ]
+        }
+      }
+    },
+//    filters: {
+//      similarFilter: function (key) {
+//        let keyword = this.keyword
+//        let index = key.indexOf(keyword)
+//        if (index !== -1) {
+//          key = key.substring(0, index) + '<strong>' + key.sub(index, keyword.length) + '</strong>' + key.substring(index + keyword.length, key.length)
+//        }
+//        return key
+//      }
+//    },
+    methods: {
+      onSearch (key) {
+        if (key && key !== '') {
+          this.keyword = key
+        }
+        if (this.keyword) {
+          this.associate.show = false
+          this.$router.push({path: '/mobile/search?w=' + encodeURIComponent(this.keyword)})
+        }
+      },
+      onChange () {
+        if (!this.keyword) {
+          this.associate.show = false
+          this.$store.dispatch('resetSearchKeywords')
+        } else {
+          this.searchKeywords()
+        }
+        if (this.click_flag) {
+          this.associate.show = false
+        }
+      },
+      searchKeywords () {
+        this.associate.show = true
+        this.$store.dispatch('searchKeywords', { keyword: this.keyword })
+      },
+      onAssociateClick (word) {
+        this.keyword = word
+        this.onSearch()
+      }
+    },
+    created () {
+      this.$store.dispatch('resetSearchKeywords')
+    },
+    watch: {
+      'keyword': {
+        handler (val, oldVal) {
+          let keywords = this.similarKeywords.data
+          if (!keywords || !keywords.length) {
+            this.onChange()
+          }
+        }
+      }
+    },
+    computed: {
+      similarKeywords () {
+        return this.$store.state.search.keywords.data
+      },
+      searchHistory () {
+        return this.$store.state.searchData.searchHistory.searchHistory.data
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .main-search {
+    background: #fff;
+    height: -webkit-fill-available;
+    width: -webkit-fill-available;
+    position: fixed;
+    z-index: 9;
+    .main-search-header {
+      height: .71rem;
+      background: #4391f7;
+      line-height: .66rem;
+      padding-left: .84rem;
+      input {
+        width: 4.78rem;
+        height: .54rem;
+        line-height: .54rem;
+        font-size: .23rem;
+        color: #999;
+        padding-left: .2rem;
+        border-bottom-left-radius: .05rem;
+        border-top-left-radius: .05rem;
+        border: .01rem solid #fff;
+        background: #fff;
+      }
+      span {
+        display: inline-block;
+        width: 1.02rem;
+        text-align: center;
+        height: .54rem;
+        line-height: .54rem;
+        color: #366df3;
+        font-size: .23rem;
+        margin-left: .02rem;
+        border-top-right-radius: .05rem;
+        border-bottom-right-radius: .05rem;
+        background: #fff;
+      }
+    }
+    .associate-list {
+      padding-top: .25rem;
+      background: #fff;
+      li {
+        height: 58px;
+        line-height: 58px;
+        padding: 0 45px;
+        border-bottom: .01rem solid #f1f0f0;
+        i {
+          font-size: .4rem;
+          margin-right: .24rem;
+          color: #ddd;
+        }
+        span {
+          color: #999;
+          font-size: .28rem;
+          line-height: 58px;
+          height: .58rem;
+          display: inline-block;
+        }
+        &:active, &:hover {
+          background: #eee;
+        }
+        &:last-child {
+          text-align: center;
+          font-size: .3rem;
+          color: #3976f4;
+          border-bottom: none;
+          &:active, &:hover {
+            background: #fff;
+          }
+        }
+      }
+    }
+    .hot-history {
+      .search-history {
+        padding-left: .51rem;
+        padding-top: .38rem;
+        >p {
+          font-size: .3rem;
+          color: #333;
+        }
+        ul {
+          text-align: left;
+          margin-top: .26rem;
+          li {
+            display: inline-block;
+            max-width: 2.83rem;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            margin-right: 10px;
+            background: #f2f6ff;
+            height: .56rem;
+            line-height: .56rem;
+            padding: 0 .12rem;
+            a {
+              font-size: .3rem;
+              color: #666;
+            }
+          }
+        }
+      }
+      .search-hot {
+        text-align: center;
+        margin-top: .3rem;
+        >img {
+          width: 2.56rem;
+          height: .67rem;
+        }
+        ul {
+          text-align: left;
+          padding-left: .51rem;
+          margin-top: .31rem;
+          li {
+            display: inline-block;
+            max-width: 2.83rem;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            margin-right: 10px;
+            background: #fef1eb;
+            height: .56rem;
+            line-height: .56rem;
+            padding: 0 .12rem;
+            a {
+              font-size: .3rem;
+              color: #666;
+            }
+            &:nth-child(1) {
+              a {
+                color: #fc5708;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

pages/mobile/search/_keycode.vue

@@ -41,6 +41,7 @@
 
     <div class="none-state" v-if="!productList.expose">
       <img src="/images/mobile/@2x/sousuokongzhuangtai@2x.png">
+      <a @click="goLastPage">返回上一页</a>
     </div>
   </div>
 </template>
@@ -121,6 +122,9 @@
         } else {
           this.isClickCollect = false
         }
+      },
+      goLastPage: function () {
+        window.history.back(-1)
       }
     }
   }
@@ -136,8 +140,19 @@
         width:100%;
         img{
           margin:0 auto;
-          width:3rem;
-          hight:3rem;
+          width: 4.08rem;
+          height: 4.13rem;
+        }
+        a {
+          display: block;
+          font-size: .28rem;
+          color: #fff;
+          width: 1.88rem;
+          height: .54rem;
+          line-height: .54rem;
+          background: #418bf6;
+          margin: .7rem auto 0;
+          border-radius: .05rem;
         }
       }
       .search-item{

pages/mobile/user/index.vue

@@ -37,6 +37,7 @@
     </div>
     <div class="none-state" v-if="!(collectSave.content&&collectSave.content.length>0 || focusPage.content&&focusPage.content.length > 0)">
       <img src="/images/mobile/@2x/shoucangkongzhuangtai@2x.png">
+      <nuxt-link to="/">返回首页</nuxt-link>
     </div>
   </div>
 </template>
@@ -142,8 +143,19 @@
       width:100%;
       img{
         margin:0 auto;
-        width:3rem;
-        hight:3rem;
+        width: 4.08rem;
+        height: 4.13rem;
+      }
+      a {
+        display: block;
+        font-size: .28rem;
+        color: #fff;
+        width: 1.88rem;
+        height: .54rem;
+        line-height: .54rem;
+        background: #418bf6;
+        margin: .7rem auto 0;
+        border-radius: .05rem;
       }
     }
     .user-name{