微信小程序自定义组件---按季度筛选

想要的效果：

 根据微信小程序官网提供的picker多列选择器，选择第一列时，对应切换第二列数据。

首先解决数据的问题

/**
 * 获取季度数据
* @param {string} startYear 开始年份
* @param {string} endYear 结束年份
* @returns {Array} [{text: '2022年', id: 2022, children: [{text: '第一季度', id: 1}]}]
*/
export function getQuarterData(startYear, endYear) {
  let data = []
  for (var i = 0; i < (endYear - startYear + 1); i++) {
    var obj = {
      text: startYear + i + '年',
      id: startYear + i,
    }
    let qlist = []
    for (var j = 1; j < 5; j++) {
      let objs = {}
      if (new Date().getFullYear() == (startYear + i)) {
        var month = new Date().getMonth() + 1;
        var stage = Math.ceil(month / 3) + 1;
        if (j == stage) {
          objs.text = ` 第${j}季度`
          objs.id = j
          break
        } else {
          objs.text = ` 第${j}季度`
          objs.id = j
        }
      } else {
        objs.text = ` 第${j}季度`
        objs.id = j
      }
      qlist.push(objs)
    }
    obj.children = qlist.sort(_sortBy('id', true)) // 倒叙处理数据
    data.push(obj)
  }
  return data.sort(_sortBy('id', true)) //倒叙处理数据
  
}


/**
 * 对象数组根据某一属性排序
* @param {string} field
* @param {boolean} rev true表示升序排列，false降序排序
* @returns {function}
*/
export function _sortBy (field, rev) {
  if (rev === undefined) {
    rev = 1;
  } else {
    rev = (rev) ? 1 : -1;
  }
  return function (a, b) {
    let val1 = a[field] * 1;
    let val2 = b[field] * 1;
    if (val1 < val2) {
      return rev * 1;
    } else if (val1 > val2) {
      return rev * -1;
    }
  }
}

// index.wxml
<picker range="{{quarterNewList}}" value="{{quarters}}" range-key="text" mode="multiSelector" 
    bindchange="bindMultiPickerChange" 
    bindcolumnchange="bindMultiPickerColumnChange">
      {{quarter ? quarter : '请选择季度'}}
</picker>


// index.js
data: {
    quarterList: getQuarterData(2020, new Date().getFullYear()), 
    quarter: '', 
    quarters: [0,0], // 选择后的index集合
    quarterNewList: [[],[]] //数据集合
},
// 初始化数据
getNewList(options) {
    var array = this.data.quarterNewList;
    array[0] = this.data.quarterList;
    array[1] = array[0][0].children;
    this.setData({
      quarterNewList: array
    });
},

//点击确定选择结果
bindMultiPickerChange: function (e) {
    var result = e.detail.value;
    this.setData({
      quarters: result,
      quarter: this.data.quarterNewList[0][result[0]].text + this.data.quarterNewList[1][result[1]].text
    })
},
  //选择列变更时，下级数组变更
bindMultiPickerColumnChange: function (e) {
    var column = e.detail.column;
    var index = e.detail.value;
    var array = this.data.quarterNewList;
    if (column == 0) {
      array[1] = array[column][index].children;
      this.setData({
        quarterNewList: array
      });
    }
},

如果需要前端传季度时间段的话

// 在季度处理数据添加此行代码
objs.quarterDate = quarterDates(startYear + i, j)

/**
* 对象 季度时间段
* @param {Number} year 
* @param {Number} quarter 季度 1，2，3，4
*/
export function quarterDates(year, quarter) {
  let quarterDate = {
    startDate: '',
    endDate: ''
  }
  quarterDate.startDate = year + '-' + (3 * quarter - 2) + '-01' 
  let endDate = 3 * quarter == 12 ? (year*1+1 + '-' +  '01-01' ) : (year + '-' + (3 * quarter + 1) + '-01' ) 
    quarterDate.endDate = year + '-' + 3 * quarter + '-' + new Date(new Date(endDate).getTime() - 24* 60* 60*1000 ).getDate()
  return quarterDate
}