【金秋打卡】第10天 全新升级，基于Vue3新标准，打造后台综合解决方案 第十讲

课程名称： 全新升级，基于Vue3新标准，打造后台综合解决方案

课程章节： 列表排序解决方案与实现热门文章排名功能

主讲老师： Sunday

课程内容：

今天学习的内容包括：

创建文章功能的实现

课程收获：

10.1 心得：

"use strict";
var app = getApp();
Component({
  properties: {
    historyKey: {
      type: String,
      value: '',
      observer: "onHistoryKeyChange"
    },
  },


  data: {
    historyList: [],
    isHiddenHistory: false,
    searchList: [],
    isHiddenTips: true,
  },


  methods: {

    onHistoryKeyChange: function onHistoryKeyChange() {
      this.setData({
        historyKey: this.data.historyKey,
      });
      let _this = this;
      wx.getStorage({
        key: this.data.historyKey,
        success(res) {
          if (res.data != undefined && res.data != null && res.data.length > 0) {
            let historyList = JSON.parse(res.data);
            _this.setData({
              historyList: historyList.reverse()
            });
          }
        }
      })
    },

    onBindSearchList: function (e) {
      this.setData({
        searchList: e
      });

      // console.log(this.data.searchList);
    },
    /**
     * 输入内容变化
     * @param {*} e 
     */
    onSearchInputChange: function onSearchInputChange(e) {
      this.setData({
        isHiddenHistory: e.detail.content.length > 0 ? true : false,
        isHiddenTips: e.detail.content.length > 0 ? false : true
      });

      if (e.detail.content.length > 0) {
        this.triggerEvent("onSearchChange", e.detail.content);
      }
    },

    /**
     * 点击搜索
     * @param {*} e 
     */
    onClickSearchSubmit: function onClickSearchSubmit(e) {
      this.setData({
        isHiddenTips: true,
      });
      if (e.detail.content == '') {
        return;
      }
      let isAddToHistoryList = true;
      this.data.historyList.forEach(function (value, index) {
        if (e.detail.content == value) {
          isAddToHistoryList = false;
        }
      });
      if (isAddToHistoryList) {
        this.data.historyList.push(e.detail.content);
        this.setData({
          historyList: this.data.historyList.reverse().slice(0, 5),
        });
        wx.setStorage({
          key: this.data.historyKey,
          data: JSON.stringify(this.data.historyList.reverse().slice(0, 5))
        });
      }
      this.triggerEvent('onClickSubmit', { content: e.detail.content });
    },




    /**
     * 点击搜索历史item
     * @param {*} e 
     */
    onClickHistoryItem: function onClickHistoryItem(e) {
      this.setData({
        isHiddenHistory: true,
      });
      this.searchInput = this.selectComponent("#searchInput");
      this.searchInput.onChangeInputValue(e.detail);
      this.triggerEvent('onClickSubmit', { content: e.detail });
    },

    /**
       * 点击搜索建议item
       * @param {*} e 
       */
    onClickItem: function onClickItem(e) {
      this.setData({
        isHiddenTips: true,
      });
      
      this.searchInput = this.selectComponent("#searchInput");
      this.searchInput.onChangeInputValue(e.currentTarget.dataset.name);

      this.data.historyList.push(e.currentTarget.dataset.name);
      this.setData({
        historyList: this.data.historyList.reverse().slice(0, 5),
      });
      wx.setStorage({
        key: this.data.historyKey,
        data: JSON.stringify(this.data.historyList.reverse().slice(0, 5))
      });
      this.triggerEvent('onClickSubmit', { content: e.currentTarget.dataset.name });
    },

    /**
     * 点击清空历史搜索
     * @param {*} e 
     */
    onClickClearHistory: function onClickClearHistory(e) {
      this.setData({
        historyList: [],
      });
      wx.setStorage({
        key: this.data.historyKey,
        data: JSON.stringify([])
      });
    },



  }
});

.container {
  display: flex;
  background-color: #fff;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  flex-direction: column;
}


.search_tips,.tips_item_container{
  display: flex;
  background-color: #fff;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.search_tips{
  flex-direction: column;
}

.tips_item_container{
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  margin: 0 32rpx;
  border-bottom: 1rpx solid #F6F6F6;
}

.right_arrow{
  width: 15rpx;
  height: 25rpx;
  flex-shrink: 0;
  margin-left: 10rpx;
  margin-right: 10rpx;
}

.tips_item_content{
  line-height: 34rpx;
  font-size: 24rpx;
  flex-shrink: 0;
  text-align: center;
  color: #333333;
}