代码优化

src/views/search/index.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="search-container">
+    <div class="search-nav-bar">
+      <van-icon
+        size="16"
+        name="arrow-left"
+        style="padding: 12px 0 12px 12px"
+        @click="$router.back()"
+      />
       <!--搜索栏-->
-    <form action="/">
       <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,8 +1,8 @@
 <template>
   <div class="search-list">
-    <nav-bar v-model="value" @handleSearch="handleSearch" />
+    <nav-bar v-model="curSearchText" @handleSearch="handleSearch" />
+    <div v-if="searchText == curSearchText">
       <filter-bar @changeGoods="changeGoods($event)" />
-
       <van-list
         v-model="loading"
         :finished="finished"
@@ -25,10 +25,14 @@
       </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()
   },