社区首页 >专栏 >[mini-blog][v1.6.0]体现后台管理功能的价值时刻到了——丰富文章的筛选

[mini-blog][v1.6.0]体现后台管理功能的价值时刻到了——丰富文章的筛选

Bug生活2048

发布于 2019-06-20 12:57:29

50200

代码可运行

文章被收录于专栏：Bug生活2048Bug生活2048

运行总次数：0

代码可运行

上一次迭代把后台管理的功能实现了七七八八，这次迭代终于可以派上用场了。

对用户的效果

这次改版，用户最直观的效果就是可以对文章进行筛选了，最早期的一版，只能通过简单的搜索框进行筛选：

原首页

而现在，丰富了筛选功能，可以对文章一些维度排序，也可以根据文章的标签进行筛选了。

排序

标签搜索

后台支撑

排序的功能由于之前就有设计文章浏览,评论,点赞等维度的计数，所以只需要根据数据源尽心排序即可。

而标签筛选的功能主要依赖文章与标签关联的数据源，而公众号同步过来的文章本身是没有此属性的，所以依赖后台管理维护标签的功能来构造文章和标签之间的关系。

维护效果的界面如下，优先通过标签管理维护基础标签，然后在文章管理中可以进行绑定了。

维护标签

文章绑定标签

核心代码解析

标签选中、未选中效果

首先是初始化，因为标签的基础数据和文章已选中的标签是保存在两个集合中的，所以构造初始化页面的时候需要组装两部分的数据：

  /**
   * 显示设置文章标签窗口
   * @param {*} e 
   */
  showLabelModal: async function (e) {
    wx.showLoading({
      title: '标签加载中...',
    })

    let that = this
    let postId = e.currentTarget.dataset.postid
    let label = e.currentTarget.dataset.label
    let labelList = await api.getLabelList()
    let otherLabels = []
    if (label.length > 0) {
      for (var i = 0; i < label.length; i++) {
        otherLabels.push({
          name: label[i],
          checked: true
        })
      }
    }

    for (var index in labelList.result.data) {
      let labelRes = otherLabels.filter((a) => labelList.result.data[index].value == a.name)
      if (labelRes.length > 0) { continue; }

      otherLabels.push({
        name: labelList.result.data[index].value,
        checked: false
      })
    }

    that.setData({
      isShowLabelModel: true,
      selectedLabels: label,
      otherLabels: otherLabels,
      showCurPostId: postId
    })

    wx.hideLoading()

  },

其次是点击选中标签时，需要根据选中状态去变换颜色，并动态更新选中的标签集合，用于最后保存到数据库中：

  /**
   * 选择标签
   * @param {} e 
   */
  chooseLabelCheckbox(e) {
    let that = this
    let selectedLabels = that.data.selectedLabels
    let otherLabels = that.data.otherLabels;
    let name = e.currentTarget.dataset.value;
    let checked = e.currentTarget.dataset.checked;

    for (let i = 0; i < otherLabels.length; i++) {
      if (otherLabels[i].name == name) {
        otherLabels[i].checked = !otherLabels[i].checked;
        break
      }
    }
    //原本选中的移除
    if (checked) {
      var index = selectedLabels.indexOf(name);
      if (index > -1) {
        selectedLabels.splice(index, 1);
      }
    }
    //未选中的新增到集合中
    else {
      selectedLabels.push(name)
    }

    that.setData({
      otherLabels: otherLabels,
      selectedLabels: selectedLabels
    })
  },

Tab切换时的下拉

首页新增最新，热门，标签三个tab选项，每次切换时需要重新加载文章列表，这个问题应该不大，但需要注意下拉的地方，需要根据当前tab状态的值进行下拉翻页加载数据。

目前我是定义了一个变量，在tab切换时同步更新这个变量，在下拉时根据该变量进行数据加载：

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: async function () {
    let whereItem=this.data.whereItem
    await this.getPostsList(whereItem[0],whereItem[1],whereItem[2])
  },