Improvement of wechat applet 29 hot search list ②

29.1 Static construction of historical record plate

---

  <block wx:else>
        <!--  Search the history section -->
        <view class="history">
            <view class="title"> history </view>
            <view class="historyItem">
                Fade
            </view>
            <view class="historyItem">
                 as boundless as the sea and sky 
            </view>
            <view class="historyItem">
                Fade
            </view>
            <view class="historyItem">
                 as boundless as the sea and sky 
            </view>
            <view class="historyItem">
                Fade
            </view>
            <view class="historyItem">
                 as boundless as the sea and sky 
            </view>
            <view class="historyItem">
                Fade
            </view>
            <view class="historyItem">
                 as boundless as the sea and sky 
            </view>
            <view class="historyItem">
                Fade
            </view>
            <view class="historyItem">
                 as boundless as the sea and sky 
            </view>
            <view class="historyItem">
                Fade
            </view>
            <view class="historyItem">
                 as boundless as the sea and sky 
            </view>
<!--  Delete -->
            <text class="iconfont icon-shanchu delete"></text>

        </view>
        <!-- Hot search list -->
        <view class="hotContainer">
            <view class="title"> Hot search list </view>
            <!--  Hot search list -->
            <view class="hotList">
                <view class="hotItem" wx:for="{
     {hotList}}" wx:key="score">
                    <text class="order">{
   {index + 1}}</text>
                    <text>{
   {item.searchWord}}</text>
                    <image class="iconImg" wx:if="{
     {item.iconUrl}}" src="{
     {item.iconUrl}}"></image>
                </view>
            </view>
        </view>
    </block>

/*  Search history */

.history {
    
    position: relative;
    display: flex;
    flex-wrap: wrap;
    line-height: 50rpx;
    margin: 20rpx 0;
}

.history .title {
    
    font-size: 28rpx;
    height: 40rpx;
    line-height: 40rpx;
}

.history .historyItem {
    
    height: 40rpx;
    line-height: 40rpx;
    font-size: 26rpx;
    background: #ededed;
    margin-left: 20rpx;
    margin-bottom: 20rpx;
    padding: 0 30rpx;
    border-radius: 20rpx;
}

.history .delete {
    
    position: absolute;
    bottom: -36rpx;
    right: 15rpx;
    font-size: 36rpx;
}

---

29.2 Add and delete history

<view class="searchContainer">
<!--  Head -->
    <view class="header">
        <view class="searchInput">
            <text class="iconfont icon-sousuo searchIcon"></text>
            <input value="{
     {searchContent}}" bindinput="handelInputChange" type="text" input placeholder="{
     {placeholderContent}}" placeholder-class="placeholder"></input>
            <text class="clear" bindtap="clearSearchContent" hidden="{
     {!searchContent}}">X</text>
        </view>
        <text class="cancel" bindtap="cancelSearch"> Cancel </text>
    </view>
    <block wx:if="{
     {searchList.length}}">
        <!--  Search content display -->
        <view class="showSearchContent">
            <view class="searchContent"> Search content ：{
   {searchContent}}</view>
            <view class="searchList">
                <view class="searchItem" wx:for="{
     {searchList}}" wx:key="id">
                    <text class="iconfont icon-sousuo"></text>
                    <text class="itemName">{
   {item.name}}</text>
                </view>
            </view>
        </view>
    </block>

    <block wx:else>
        <!--  Search the history section -->
        <view class="history" wx:if="{
     {historyList.length}}">
            <view class="title"> history </view>
            <view class="historyItem" wx:for="{
     {historyList}}" wx:key="item">
                {
   {item}}
            </view>
<!--  Delete -->
            <text class="iconfont icon-shanchu delete" bindtap="deleteHistory"></text>

        </view>
        <!-- Hot search list -->
        <view class="hotContainer">
            <view class="title"> Hot search list </view>
            <!--  Hot search list -->
            <view class="hotList">
                <view class="hotItem" wx:for="{
     {hotList}}" wx:key="score">
                    <text class="order">{
   {index + 1}}</text>
                    <text>{
   {item.searchWord}}</text>
                    <image class="iconImg" wx:if="{
     {item.iconUrl}}" src="{
     {item.iconUrl}}"></image>
                </view>
            </view>
        </view>
    </block>

</view>

/* pages/search/search.wxss */

.searchContainer {
    
    padding: 0 20rpx;
}

.header {
    
    display: flex;
    height: 60rpx;
    line-height: 60rpx;
    padding: 10rpx 0;
}

.searchInput {
    
    position: relative;
    flex: 1;
    background: rgba(237,237,237,0.3);
    border-right: 30rpx;
}

.clear {
    
    z-index: 10;
    position: absolute;
    right: 30rpx;
    top: 0;
    font-size: 30rpx;
}

.cancel {
    
    width: 100rpx;
    text-align: center;
}

.searchIcon {
    
    position: absolute;
    left: 5rpx;
}

.itemName{
    
    margin: 0 20rpx;
}

.searchInput input{
    
    margin-left: 50rpx;
    height: 60rpx;
}

/*h5  One of the new features , Can be  placeholder  Set up  class  and   style */
.placeholder {
    
    color: #d43c33;
    font-size: 28rpx;
}

/* Hot search list */
.hotContainer .title {
    
    margin-top: 30rpx;
    font-size: 28rpx;
    height: 80rpx;
    line-height: 80rpx;
    border-bottom: 1rpx solid #eee;
}

.hotList {
    
    display: flex;
    flex-wrap: wrap;
}

.hotItem {
    
    width: 50%;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 26rpx;
}

.hotItem .order {
    
    margin: 0 10rpx;
}

.hotItem .iconImg {
    
    width: 35rpx;
    height: 20rpx;
    margin-left: 10rpx;
}

/* Search content display */

.searchContent {
    
    color: rgba(107, 100, 238, 0.96);
    height: 80rpx;
    line-height: 82rpx;
    font-size: 24rpx;
    border-bottom: 1rpx solid #d43c33;
}

.searchItem {
    
    height: 80rpx;
    line-height: 80rpx;
    display: flex;
}

.searchItem .content {
    
    flex: 1;
    margin-left: 20rpx;
    border-bottom: 1rpx solid #eee;
    font-size: 26rpx;
}

/*  Search history */

.history {
    
    position: relative;
    display: flex;
    flex-wrap: wrap;
    line-height: 50rpx;
    margin: 20rpx 0;
}

.history .title {
    
    font-size: 28rpx;
    height: 40rpx;
    line-height: 40rpx;
}

.history .historyItem {
    
    height: 40rpx;
    line-height: 40rpx;
    font-size: 26rpx;
    background: #ededed;
    margin-left: 20rpx;
    margin-bottom: 20rpx;
    padding: 0 30rpx;
    border-radius: 20rpx;
}

.history .delete {
    
    position: absolute;
    bottom: -36rpx;
    right: 15rpx;
    font-size: 36rpx;
}

// pages/search/search.js
import request from "../../utils/request";
let isSend = false; //  be used for   function   Throttling use 
Page({
    

    /** *  Initial data of the page  */
    data: {
    
        placeholderContent: '', // placeholder  Content 
        hotList: [], //  Hot search list data 
        searchContent: '', //  Form item data entered by the user 
        searchList: [], //  Keyword fuzzy matching data 
        historyList: [], //  History list 
    },

    /** *  Life cycle function -- Monitor page loading  */
    onLoad(options) {
    
        //  Get initialization data 
        this.getInitData();
        //  Get history 
        this.getSearchHistory();
    },

    //  Get initialized data 
    async getInitData() {
    
        let placeholderData = await request("search/default",{
    });
        let hotListData = await request("search/hot/detail");
        this.setData({
    
            placeholderContent: placeholderData.data.showKeyword,
            hotList: hotListData.data
        });
    },

    //  Function to get local history 
    getSearchHistory(){
    
      let historyList = wx.getStorageSync('searchHistory');
      if(historyList){
    
          this.setData({
    
              historyList
          })
      }
    },

    deleteHistory(){
    
        wx.showModal({
    
            content:" Are you sure to delete ？",
            success: (res) => {
    
                if(res.confirm){
    
                    this.setData({
    
                        historyList: []
                    });
                    wx.removeStorageSync('searchHistory');
                }
            },
        });
    },

    cancelSearch(){
    
        this.setData({
    
            searchContent: '',
            searchList: []
        })
    },

    clearSearchContent(){
    
      this.setData({
    
          searchContent: ''
      })
    },

    //  obtain   Function of searching data 

    async getSearchList(){
    
        if(!this.data.searchContent){
    
            this.setData({
    
                searchList: []
            });
            return;
        }

        let searchListData = await request("search", {
    keywords: this.data.searchContent, limit: 10});
        this.setData({
    
            searchList: searchListData.result.songs
        })

        //  Keywords to search   Add to   In search history 
        let {
    searchContent, historyList} = this.data;
        if(historyList.indexOf(searchContent) !== -1){
    
            historyList.splice(historyList.indexOf(searchContent),1);
        }
        historyList.unshift(searchContent);
        this.setData({
    
            historyList
        });

        wx.setStorageSync('searchHistory',historyList);
    },

    //  The event that the content of the form changes 
    handelInputChange(event) {
    
        console.log(event);
        this.setData({
    
            searchContent: event.detail.value.trim()
        });

        //  Function throttling 
        if (isSend) {
    
            return;
        }
        isSend = true;

        setTimeout(() => {
    
            isSend = false;
            this.getSearchList();
        }, 500);
    },

    /** *  Life cycle function -- Listening page first rendering completed  */
    onReady() {
    

    },

    /** *  Life cycle function -- Monitor page display  */
    onShow() {
    

    },

    /** *  Life cycle function -- Monitor page hidden  */
    onHide() {
    

    },

    /** *  Life cycle function -- Monitor page uninstall  */
    onUnload() {
    

    },

    /** *  Page related event handler -- Monitor user pull-down action  */
    onPullDownRefresh() {
    

    },

    /** *  Handling function of page pull bottom event  */
    onReachBottom() {
    

    },

    /** *  Users click the upper right corner to share  */
    onShareAppMessage() {
    

    }
})