微信小程式雲開發6

搜尋功能，歷史記錄，以及搜尋結果連結

search.wxml

<!--components/search/search.wxml-->
<view class="{{ isFocus ? 'containerFocus' : 'container' }}">

  <view class="search">
    <view class="search-text">
      <text class="iconfont iconsousuo1"></text>
      <input type="text" placeholder="搜尋喵星人" bindfocus="handleFocus" bindconfirm="handleConfirm" confirm-type="search" />
    </view>
    <view wx:if="{{ isFocus }}" class="search-cancel" bindtap="handleCancel">取消</view>
  </view>

  <view class="search-history">
    <text>歷史記錄</text>
    <text bindtap="handleHistoryDelete" class="iconfont iconshanchu"></text>
  </view>
  <view class="search-history-btn">
    <text bindtap="handleHistoryItemDel" data-text="{{ item }}" wx:for="{{ historyList }}" wx:key="{{ index }}">{{ item }}</text>
  </view>

  <navigator wx:for="{{ searchList }}" wx:key="{{ index }}" url="{{ '/pages/detail/detail?userId=' + item._id }}" open-type="navigate">
    <view class="searchList-item">
      <view>
        <image src="{{ item.userPhoto }}" />
        <text>{{ item.nickName }}</text>
      </view>
      <text class="iconfont iconarrowRight"></text>
    </view>
  </navigator>
</view>

search.wxss

/* components/search/search.wxss */

.container{ position: fixed; left:0; top:0; width:100%; height:90rpx; z-index: 9999; overflow: hidden;}
.containerFocus{ position: fixed; left:0; top:0; width:100%; height:100%; z-index: 9999; background:#ccc;}
.search{ display: flex; align-items: center; margin:20rpx;}
.search-text{ display: flex; align-items: center; flex:1; border:1px #b4b5b6 solid; border-radius: 10rpx; height:60rpx; background: white;}
.search-text .iconsousuo1{ margin:0 10rpx;}
.search-text input{ flex:1;}
.search-cancel{  margin:0 10rpx; }

.search-history{ display: flex; justify-content: space-between; margin:20rpx; margin-bottom: 30rpx;}
.search-history-btn{ margin-bottom: 30rpx;}
.search-history-btn text{ border:1px #b4b5b6 solid; padding:10rpx 20rpx; background:white; border-radius: 20rpx; margin:10rpx;}

.searchList-item{ height:120rpx; border-bottom: 1px #b4b5b6 dashed; padding:10rpx; display: flex; align-items: center; justify-content: space-between;}
.searchList-item view{ display: flex; align-items: center;}
.searchList-item image{ width:100rpx; height:100rpx; border-radius: 50%;}

search.js

// components/search/search.js

const app = getApp()
const db = wx.cloud.database()

Component({
  /**
   * 元件的屬性列表
   */
  options: {
    styleIsolation: 'apply-shared'
  },
  properties: {

  },
  /**
   * 元件的初始資料
   */
  data: {
    isFocus : false,
    historyList : [],
    searchList : []
  },

  /**
   * 元件的方法列表
   */
  methods: {
    handleFocus(){

      wx.getStorage({
        key: "searchHistory",
        success: (res)=> {
          this.setData({
            historyList : res.data
          });
        }
      })

      this.setData({
        isFocus : true
      });
    },
    handleCancel(){
      this.setData({
        isFocus: false
      });
    },
    handleConfirm(ev){
      let value = ev.detail.value;
      let cloneHistoryList = [...this.data.historyList];
      cloneHistoryList.unshift(value);
      wx.setStorage({
        key: "searchHistory",
        data: [...new Set(cloneHistoryList)]
      });
      this.changeSearchList(value);
    },
    handleHistoryDelete(){
      wx.removeStorage({
        key: 'searchHistory',
        success:(res)=>{
          this.setData({
            historyList : []
          });
        }
      })
    },
    changeSearchList(value){
      db.collection('users').where({
        nickName: db.RegExp({
          regexp: value,
          options: 'i'
        })
      }).field({
        userPhoto : true,
        nickName : true
      }).get().then((res)=>{
        this.setData({
          searchList : res.data
        });
      });
    },
    handleHistoryItemDel(ev){
      let value = ev.target.dataset.text;
      this.changeSearchList(value);
    }
  }
})