代码优化

src/views/search/index.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="search-container">
-    <!--搜索栏-->
-    <form action="/">
+    <div class="search-nav-bar">
+      <van-icon
+        size="16"
+        name="arrow-left"
+        style="padding: 12px 0 12px 12px"
+        @click="$router.back()"
+      />
+      <!--搜索栏-->
       <van-search
         v-model="searchText"
         style="width: 100%"
@@ -12,10 +18,10 @@
         @cancel="onCancel"
       >
         <template #action>
-          <div @click="onCancel">取消</div>
+          <div @click="onSearch">搜索</div>
         </template>
       </van-search>
-    </form>
+    </div>
     <search-words v-if="searchText == ''" :hot-list="hotList" />
     <!--联想建议-->
     <search-suggestion v-else-if="searchText" :search-text="searchText" />
@@ -73,7 +79,10 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.search-nav-bar {
+  display: flex;
+  align-items: center;
+}
 </style>
 

src/views/search/list.vue

@@ -1,34 +1,38 @@
 <template>
   <div class="search-list">
-    <nav-bar v-model="value" @handleSearch="handleSearch" />
-    <filter-bar @changeGoods="changeGoods($event)" />
-
-    <van-list
-      v-model="loading"
-      :finished="finished"
-      finished-text="没有更多了"
-      :immediate-check="false"
-      @load="onReachBottom"
-    >
-      <div class="main">
-        <goods-item
-          v-for="(item,idx) in list"
-          :key="idx"
-          :goods-id="item.id"
-          :img="item.picUrl"
-          :title="item.name"
-          :desc="item.brief"
-          :price="item.retailPrice"
-          :discount="item.counterPrice"
-        />
-      </div>
-    </van-list>
-    <van-empty v-if="list && list.length <=0 " description="没有搜索到商品" />
+    <nav-bar v-model="curSearchText" @handleSearch="handleSearch" />
+    <div v-if="searchText == curSearchText">
+      <filter-bar @changeGoods="changeGoods($event)" />
+      <van-list
+        v-model="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        :immediate-check="false"
+        @load="onReachBottom"
+      >
+        <div class="main">
+          <goods-item
+            v-for="(item,idx) in list"
+            :key="idx"
+            :goods-id="item.id"
+            :img="item.picUrl"
+            :title="item.name"
+            :desc="item.brief"
+            :price="item.retailPrice"
+            :discount="item.counterPrice"
+          />
+        </div>
+      </van-list>
+      <van-empty v-if="list && list.length <=0 " description="没有搜索到商品" />
+    </div>
+    <!--联想建议-->
+    <search-suggestion v-else :search-text="curSearchText" />
   </div>
 </template>
 
 <script>
 import { getSearchList } from '@/api/search'
+import SearchSuggestion from './modules/Suggest'
 import NavBar from './modules/NavBar'
 import FilterBar from './modules/FilterBar'
 import GoodsItem from '@/components/GoodsItem'
@@ -37,12 +41,14 @@ export default {
   name: 'SearchList',
   components: {
     NavBar,
+    SearchSuggestion,
     FilterBar,
     GoodsItem
   },
   data() {
     return {
-      value: '',
+      searchText: '',
+      curSearchText: '',
       list: [],
       pageSize: 10,
       pageNum: 1,
@@ -66,7 +72,8 @@ export default {
       duration: 0
     })
     const { keyword } = this.$route.query
-    this.value = keyword
+    this.searchText = keyword
+    this.curSearchText = keyword
     this.keyword = keyword
     this.getList()
   },