搜索界面-业务逻辑处理

一、获取文本输入内容

​ input组件参考地址：https://uniapp.dcloud.io/component/input?id=input (opens new window)

1. 添加右下角点击按钮事件

2. 调整右下角显示文字

3. 父子组件实现数据双向绑定

   // NavVar组件
    computed: {
       // 动态获取searchvalue内容
       searchVal: {
         get () {
           return this.parentVal
         },
         set (val) {
           this.$emit('updateVal', val)
           if (!val) {
             this.$emit('sendSearchData')
           }
         }
       }
     }
   

4. 处理空数据内容，清空操作后返回一个空的searchList

二、云函数定义并返回数据

1. 定义云函数

 const list = await db.collection('article')
    .aggregate() // 使用聚合的形式进行数据的获取
    // 使用正则表达式进行模糊匹配，只要是包含，就进行返回操作
    .match({ title: new RegExp(searchVal) })
    .project({
      content: 0 // 本次查询不需要返回文章详情给前端
    })
    .end()

2. 前端进行数据渲染处理

     async _sendSearchData (val) {
         if (!this.parentVal) {
           this.searchList = []
           return
         }
          const { articleList, total } = await this.$http.get_search_data({ searchVal: this.parentVal })
         this.searchList = articleList
         this.total = total
       }
   

三、处理历史记录切换显示

1. 定义现实状态标识

   // searchPage
    data() {
      return {
        isShowHistory:true,
         historyList:[],
      }
    }
   

2. 点击卡片生成历史记录

   通过自定义事件形式传递数据到search界面

    openHistory(val) {
         this.parentVal = val
         this._sendSearchData()
       }
   

3. 点击卡片实现搜索内容保存

   // searchPaage  
   openHistory(val) {
         this.parentVal = val
         this._sendSearchData()
       }
   // mutaitions.js处理
     // 设置历史收藏信息
     setHistory (state, val) {
       let list = state.historyList;
       // 判断是否包含当前搜索的内容，包含直接不执行任何操作
       if (list.length > 0 && list.findIndex(item => item === val) > -1) return
       list.unshift(val);
       uni.setStorageSync('historyList', list)
       state.historyList = list;
     },
    // state.js进行初始值绑定
    export default {
     historyList: uni.getStorageSync('historyList') || []
   }
   

4. 点击历史记录文字实现搜索功能

     // 弹出搜索内容
       openHistory(val) {
         this.parentVal = val
         this._sendSearchData()
       },  
   

5. 实现点击清空按钮处理清空历史记录操作，通过listCard发送自定义事件，searchPage接收到自定义事件后，通过出发mutation里面的指定事件，进行state的指定属性清空操作

   // mutations.js
     // 清空搜索历史信息
     cleanHistory (state) {
       uni.removeStorageSync('historyList')
       state.historyList = []
       uni.showToast({
         title: "清空完成",
         icon: "success"
       })
     }