搜索页取消按钮

components/mobile/MobileHeader.vue

@@ -60,7 +60,7 @@
         <span v-show="showSearch" @click="showMainSearch = true"><i class="icon-sousuo iconfont"></i>搜索</span>
       </p>
     </div>
-    <main-search v-if="showMainSearch"></main-search>
+    <main-search v-if="showMainSearch" @cancelSearchAction="onCancelSearch"></main-search>
     <i v-show="rightIcon=='share'" class="iconfont icon-fenxiang" @click="showShare = true" @touchmove="onTouchMove($event)"></i>
     <i v-show="rightIcon=='phone'" class="iconfont icon-dianhua" @click="showLink" @touchmove="onTouchMove($event)"></i>
   </div>
@@ -220,6 +220,9 @@
         e.preventDefault()
         e.target.style.left = x * 2 / 100.0 + 'rem'
         e.target.style.top = y * 2 / 100.0 + 'rem'
+      },
+      onCancelSearch: function () {
+        this.showMainSearch = false
       }
     }
   }

components/mobile/brand/BrandCenter.vue

@@ -47,7 +47,7 @@
     data () {
       return {
         initArr: [
-          'ABCD', 'EFGH', 'IJKL', 'MNOP', 'QRST', 'UVWX', 'YZ', '0~9', '其他'
+          'ABCD', 'EFGH', 'IJKL', 'MNOP', 'QRST', 'UVWX', 'YZ', '0~9'
         ],
         activeIndex: this.$route.params.initial,
         isScrolled: false

components/mobile/search/MainSearch.vue

@@ -3,6 +3,7 @@
     <div class="main-search-header">
       <input type="text" v-model="keyword" placeholder="请输入您要查找的型号或品牌" @keyup.13="onSearch()" autofocus>
       <span @click="onSearch()">搜索</span>
+      <a @click="cancelSearch">取消</a>
     </div>
     <ul class="associate-list" v-show="associate.show">
       <li @click="onAssociateClick(similar.code)" v-for="similar in similarKeywords.all">
@@ -92,6 +93,9 @@
       onAssociateClick (word) {
         this.keyword = word
         this.onSearch()
+      },
+      cancelSearch: function () {
+        this.$emit('cancelSearchAction')
       }
     },
     created () {
@@ -132,7 +136,7 @@
       display: flex;
       align-items: center;
       input {
-        width: 4.78rem;
+        width: 4.48rem;
         height: .54rem;
         line-height: .54rem;
         font-size: .23rem;
@@ -156,6 +160,11 @@
         border-bottom-right-radius: .05rem;
         background: #fff;
       }
+      a {
+        font-size: .27rem;
+        color: #fff;
+        margin-left: .2rem;
+      }
     }
     .associate-list {
       padding-top: .25rem;