添加搜索建议

src/api/home.js

@@ -1,8 +1,8 @@
 import request from '@/utils/request'
 
-export function getGoodsList(query) {
+export function getRecommonGoodsList(query) {
   return request({
-    url: '/home/goodsList',
+    url: '/home/recommonGoodsList',
     method: 'get',
     params: query
   })

src/api/search.js

@@ -14,3 +14,11 @@ export function getSearchList(data) {
     params: data
   })
 }
+
+export function getSearchSuggest(data) {
+  return request({
+    url: '/search/sugguest',
+    method: 'get',
+    params: data
+  })
+}

src/permission.js

@@ -4,7 +4,7 @@ import { Toast } from 'vant'
 import { getToken } from '@/utils/auth' // get token from cookie
 import { pathMatcher } from '@/utils/index'
 
-const whiteList = ['/login', '/registry', '/', '/index', '/category', '/detail/**', '/diamondGoodsList/**'] // 白名单
+const whiteList = ['/login', '/registry', '/', '/index', '/category', '/detail/**', '/diamondGoodsList/**', '/search/**'] // 白名单
 
 router.beforeEach(async(to, from, next) => {
   // 设置标题

src/views/home/index.vue

@@ -2,7 +2,7 @@
   <div class="home">
     <Header />
     <Swiper :banner-list="bannerList" />
-    <Category :cate-list="cateList" />
+    <Diamond :diamond-list="diamondList" />
     <!-- <Session :session-list="sessionList" /> -->
     <Goods-limit
       v-model="isLoading"
@@ -31,13 +31,13 @@
 </template>
 
 <script>
-import { getHomeData, getGoodsList } from '@/api/home'
+import { getHomeData, getRecommonGoodsList } from '@/api/home'
 import Header from './modules/Header'
 import Swiper from './modules/Swiper'
 // import Goods from './modules/Goods'
 import Goods from './modules/GoodsVantCard'
 import GoodsLimit from './modules/GoodsLimit'
-import Category from './modules/Category'
+import Diamond from './modules/Diamond'
 // import Session from './modules/Session'
 import Skeleton from './modules/Skeleton'
 
@@ -46,7 +46,7 @@ export default {
   components: {
     Header,
     Swiper,
-    Category,
+    Diamond,
     // Session,
     Goods,
     GoodsLimit,
@@ -56,7 +56,7 @@ export default {
     return {
       mallConfig: {},
       bannerList: [],
-      cateList: [],
+      diamondList: [],
       sessionList: [],
       newGoodsList: [],
       hotGoodsList: [],
@@ -70,13 +70,14 @@ export default {
   },
   mounted() {
     this.getHomeIndexData()
+    this.getRecommonGoodsList()
   },
   methods: {
     getHomeIndexData() {
       getHomeData().then(res => {
         const { map } = res
         this.bannerList = map.bannerList
-        this.cateList = map.categoryList
+        this.diamondList = map.diamondList
         this.sessionList = [
           {
             '_id': '5f5b1ec83f8b304102b77e8d',
@@ -106,11 +107,10 @@ export default {
         this.newGoodsList = map.newGoodsList
         this.hotGoodsList = map.hotGoodsList
         this.isSkeletonShow = false
-        this.getGoodsList()
       })
     },
-    getGoodsList() {
-      getGoodsList({
+    getRecommonGoodsList() {
+      getRecommonGoodsList({
         pageSize: this.pageSize,
         pageNum: this.pageNum
       }).then(res => {
@@ -125,7 +125,7 @@ export default {
     // reach-bottom
     onReachBottom() {
       this.pageNum += 1
-      this.getGoodsList()
+      this.getRecommonGoodsList()
     }
   }
 }

src/views/home/modules/Diamond.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- https://www.jianshu.com/p/c7ecd50f2e52 -->
-  <div class="home-category">
+  <div class="home-diamond">
     <div ref="scroll" class="scroll-wrapper">
       <div class="scroll-content">
         <div v-for="(cate,idx) in list" :key="idx" class="scroll-item__wrapper">
@@ -27,7 +27,7 @@ import BScroll from '@better-scroll/core'
 
 export default {
   props: {
-    cateList: {
+    diamondList: {
       type: Array,
       default() {
         return []
@@ -43,8 +43,8 @@ export default {
   computed: {
     list() {
       let rlt = {}
-      const data = this.cateList
-      const len = this.cateList.length
+      const data = this.diamondList
+      const len = this.diamondList.length
       if (len <= 5) {
         rlt = {
           prev: data,
@@ -66,7 +66,7 @@ export default {
     }
   },
   watch: {
-    cateList(val) {
+    diamondList(val) {
       if (val.length > 5) {
         this.$nextTick(() => {
           this.init()
@@ -118,7 +118,7 @@ export default {
 <style lang="scss" scoped>
 @import "@/styles/variables.scss";
 
-.home-category {
+.home-diamond {
   padding: 24px 0;
   background: #fff;
   .scroll-wrapper {

src/views/home/modules/Header.vue

@@ -52,9 +52,8 @@ export default {
     align-items: center;
     font-size: 26px;
     color: #8e8e8ec9;
-    background: #f5f5f5;
+    background: #f7f8fa;
     line-height: 10px;
-    border-radius: 25px;
   }
 }
 .placeholder {

src/views/search/index.vue

@@ -1,32 +1,59 @@
 <template>
-  <div class="search">
-    <nav-bar v-model="value" :default-search="defaultSearch" @handleSearch="handleSearch" />
-    <search-words :hot-list="hotList" />
+  <div class="search-container">
+    <!--搜索栏-->
+    <form action="/">
+      <van-search
+        v-model="searchText"
+        style="width: 100%"
+        show-action
+        placeholder="搜索商品名称"
+        @search="onSearch"
+        @focus="isResultShow = false"
+        @cancel="onCancel"
+      >
+        <template #action>
+          <div @click="onCancel">取消</div>
+        </template>
+      </van-search>
+    </form>
+    <search-words v-if="searchText == ''" :hot-list="hotList" />
+    <!--联想建议-->
+    <search-suggestion v-else-if="searchText" :search-text="searchText" />
   </div>
 </template>
 
 <script>
 import { getHotList } from '@/api/search'
-import NavBar from './modules/NavBar'
 import SearchWords from './modules/Words'
-
+import SearchSuggestion from './modules/Suggest'
 export default {
-  name: 'Search',
+  name: 'SearchIndex',
   components: {
-    NavBar,
+    SearchSuggestion,
     SearchWords
   },
   data() {
     return {
-      value: '',
       defaultSearch: '',
-      hotList: []
+      hotList: [],
+      searchText: '', // 输入搜索框的内容
+      isResultShow: false // 控制搜索结果的显示状态
     }
   },
-  mounted() {
-    this.getHot()
-  },
   methods: {
+    onSearch(val) {
+      // 展示搜索结果
+      this.isResultShow = true
+      this.$router.push({
+        path: '/search/list',
+        query: {
+          keyword: this.searchText
+        }
+      })
+    },
+    onCancel() {
+      this.$router.back()
+    },
     getHot() {
       getHotList().then(res => {
         this.hotList = res.map.data
@@ -45,3 +72,8 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+
+</style>
+

src/views/search/index1.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="search">
+    <nav-bar v-model="value" :default-search="defaultSearch" @handleSearch="handleSearch" />
+    <search-words :hot-list="hotList" />
+  </div>
+</template>
+
+<script>
+import { getHotList } from '@/api/search'
+import NavBar from './modules/NavBar'
+import SearchWords from './modules/Words'
+
+export default {
+  name: 'Search',
+  components: {
+    NavBar,
+    SearchWords
+  },
+  data() {
+    return {
+      value: '',
+      defaultSearch: '',
+      hotList: []
+    }
+  },
+  mounted() {
+    this.getHot()
+  },
+  methods: {
+    getHot() {
+      getHotList().then(res => {
+        this.hotList = res.map.data
+        this.defaultSearch = res.map.default
+      }).catch(e => {})
+      // this.hotList = ['衣服', '手机', '三体书籍三体书籍', '鞋子', '箱包']
+    },
+    handleSearch(value) {
+      this.$router.push({
+        path: '/search/list',
+        query: {
+          keyword: value
+        }
+      })
+    }
+  }
+}
+</script>

src/views/search/modules/NavBar.vue

@@ -13,9 +13,8 @@
       show-action
       clearable
       autofocus
-      shape="round"
       @search="onSearch"
-      @cancel="$router.back()"
+      @cancel="onCancel"
     >
       <template #action>
         <div @click="onSearch">搜索</div>
@@ -64,6 +63,9 @@ export default {
       }
       this.$store.dispatch('search/setKey', key)
       this.$emit('handleSearch', key)
+    },
+    onCancel() {
+      this.value = ''
     }
   }
 }

src/views/search/modules/Suggest.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="search-suggestion">
+    <van-cell
+      v-for="(str, index) in suggestions"
+      :key="index"
+      icon="search"
+      :title="str"
+      @click="search(str)"
+    >
+      <div slot="title" v-html="hightlight(str)" />
+    </van-cell>
+  </div>
+</template>
+<script>
+import { getSearchSuggest } from '@/api/search'
+import { debounce } from 'lodash'
+// /*// 函数防抖
+// const fn = _.debounce(function () {
+//   console.log('hello')
+// }, 1000)
+//
+// fn()
+// fn()
+// setTimeout(() => {
+//   fn()
+// }, 1200)
+// fn()*/
+export default {
+  name: 'SearchSuggestion',
+  props: {
+    searchText: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      suggestions: [] // 联想建议数据列表
+    }
+  },
+  watch: {
+    searchText: {
+    // 当数据发生变化则会执行 handler处理函数
+      handler: debounce(async function() {
+      // 发请求
+        const { map } = await getSearchSuggest({ keyword: this.searchText })
+        this.suggestions = map.suggest
+      }, 200),
+      // async handler () {
+      //   // 发请求
+      //   const { data } = await getSearchSuggestions(this.searchText)
+      //   this.suggestions = data.data.options
+      // },
+      immediate: true // 该回调将会在侦听开始之后被立即调用
+    }
+  },
+  methods: {
+    search(str) {
+      this.$router.push({
+        path: '/search/list',
+        query: {
+          keyword: str
+        }
+      })
+    },
+    hightlight(str) {
+      // RegExp()是正则表达式的构造函数
+      // 参数1： 字符串
+      // 参数2： 匹配模式
+      // 返回值： 正则对象
+      const regStr = new RegExp(this.searchText, 'gi')
+      return str.replace(regStr, `<span style="color: red">${this.searchText}</span>`)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
+