huiting/miniprogram/pages/search/search.js

const util = require('../../utils/util.js')

Page({
  options: {
    styleIsolation: 'apply-shared'
  },

  // 页面的初始数据
  data: {
    toggleEnable: true,
    searchEnable: false,
    searchText: '',
    searched: false,
    hotTagData: [],
    hotBarData: [],
    pageToken: 0,
    searchResult: [],
    loading: false,
    searchHistory: []
  },

  update: function (e) {
    this.setData({
      searchText: e.detail.value,
      searched: false,
      searchResult: []
    })
  },

  focus: function () {
    if (!this.data.toggleEnable || this.data.searchEnable) {
      return
    }
    this.setData({
      toggleEnable: false,
      searchEnable: true
    })
    this.animate('.cancel-button', [{
        opacity: 0
      },
      {
        opacity: 1
      },
    ], 150)
    this.animate('.search-block', [{
        opacity: 0
      },
      {
        opacity: 1
      },
    ], 150)
    setTimeout(function () {
      this.setData({
        toggleEnable: true
      })
    }.bind(this), 200)
  },

  blur: function () {
    if (this.data.searchText === '') {
      this.cancel()
    }
  },

  search: function () {
    if (this.data.searchText === '') {
      return
    }
    let history = this.data.searchHistory
    if (history === undefined) history = []
    const index = history.indexOf(this.data.searchText)
    if (index !== -1) {
      history.splice(index, 1)
    }
    if (history.length > 9) {
      history.splice(9, history.length - 9)
    }
    history.splice(0, 0, this.data.searchText)
    this.setData({
      searched: true,
      searchHistory: history
    })
    wx.setStorage({
      key: 'searchHistory',
      data: history
    })
    wx.showLoading({
      title: '正在搜索'
    })
    wx.cloud.callFunction({
      name: 'listMessages',
      data: {
        keyword: this.data.searchText,
        page_token: 0,
        page_size: 20
      }
    }).then(res => {
      wx.hideLoading()
      if (res.result.status !== 'OK') {
        wx.showToast({
          title: res.result.errMsg,
          icon: 'none'
        })
        return
      }
      for (let i = 0; i < res.result.list.length; i++) {
        res.result.list[i] = util.dbToMsg(res.result.list[i])
        res.result.list[i].name = res.result.list[i].name.replace(new RegExp(this.data.searchText, 'gi'), '<span style="color: #009195;">$&</span>')
        res.result.list[i].brief = res.result.list[i].brief.replace(new RegExp(this.data.searchText, 'gi'), '<span style="color: #009195;">$&</span>')
        res.result.list[i].detail = res.result.list[i].detail.replace(new RegExp(this.data.searchText, 'gi'), '<span style="color: #009195;">$&</span>')
      }
      this.setData({
        searchResult: res.result.list,
        pageToken: res.result.next_page_token
      })
    })
  },

  loadMore: function () {
    if (this.data.loading) {
      return
    }
    this.setData({
      loading: true
    })
    wx.showNavigationBarLoading()
    wx.cloud.callFunction({
      name: 'listMessages',
      data: {
        keyword: this.data.searchText,
        page_token: this.data.pageToken,
        page_size: 20
      }
    }).then(res => {
      wx.hideNavigationBarLoading()
      if (res.result.status !== 'OK') {
        wx.showToast({
          title: res.result.errMsg,
          icon: 'none'
        })
        return
      }
      for (let i = 0; i < res.result.list.length; i++) {
        res.result.list[i] = util.dbToMsg(res.result.list[i])
        res.result.list[i].name = res.result.list[i].name.replace(new RegExp(this.data.searchText, 'gi'), '<span style="color: #009195;">$&</span>')
        res.result.list[i].brief = res.result.list[i].brief.replace(new RegExp(this.data.searchText, 'gi'), '<span style="color: #009195;">$&</span>')
        res.result.list[i].detail = res.result.list[i].detail.replace(new RegExp(this.data.searchText, 'gi'), '<span style="color: #009195;">$&</span>')
      }
      this.setData({
        searchResult: this.data.searchResult.concat(res.result.list),
        pageToken: res.result.next_page_token,
        loading: false
      })
    })
  },

  cancel: function () {
    if (!this.data.toggleEnable || !this.data.searchEnable) {
      return
    }
    this.setData({
      toggleEnable: false,
    })
    this.animate('.cancel-button', [{
        opacity: 1
      },
      {
        opacity: 0
      },
    ], 150)
    this.animate('.search-block', [{
        opacity: 1
      },
      {
        opacity: 0
      },
    ], 150)
    setTimeout(function () {
      this.setData({
        toggleEnable: true,
        searchEnable: false,
        searchText: '',
        searched: false,
        searchResult: []
      })
    }.bind(this), 200)
  },

  searchTag: function (e) {
    this.setData({
      searchText: e.currentTarget.dataset.searchTag
    })
    this.focus()
    this.search()
  },

  removeHistory: function (e) {
    let history = this.data.searchHistory
    if (history === undefined) history = []
    const index = history.indexOf(e.currentTarget.dataset.searchTag)
    if (index !== -1) {
      history.splice(index, 1)
    }
    this.setData({
      searchHistory: history
    })
    wx.setStorage({
      key: 'searchHistory',
      data: history
    })
  },

  viewMessage: function (e) {
    wx.navigateTo({
      url: '/pages/message/message'
    }).then(res => {
      res.eventChannel.emit('loadCommonData', {
        data: e.currentTarget.dataset.message
      })
    })
  },

  loadHotData: function () {
    wx.showNavigationBarLoading()
    const arr = []
    arr.push(wx.cloud.callFunction({
      name: 'listSearches'
    }))
    arr.push(wx.cloud.callFunction({
      name: 'listMessages',
      data: {
        hot: true
      }
    }))
    Promise.all(arr).then(res => {
      wx.hideNavigationBarLoading()
      if (res[0].result.status !== 'OK' || res[1].result.status !== 'OK') {
        wx.showToast({
          title: res[0].result.errMsg || res[1].result.errMsg,
          icon: 'none'
        })
        return
      }
      for (let i = 0; i < res[1].result.list.length; i++) {
        res[1].result.list[i].message = util.dbToMsg(res[1].result.list[i].message)
        const name = res[1].result.list[i].message.name
        res[1].result.list[i].message.hot_name = name.substr(0, 20) + (name.length > 20 ? '...' : '')
      }
      this.setData({
        hotTagData: res[0].result.list,
        hotBarData: res[1].result.list
      })
    })
  },

  onLoad: function () {
    wx.getStorage({
      key: 'searchHistory',
      success: function (res) {
        this.setData({
          searchHistory: res.data
        })
      }.bind(this)
    })
    this.loadHotData()
  }
});