小程序按月份查询账单

预览效果

思路

一般后台接口会提供你两个查询参数：startDate和endDate 那么怎样用这两个参数做一个漂亮的账单页面呢？

1.获取当前时间

```javascript
	var YEAR = util.formatYear(new Date());
    var MONTH = util.formatMonth(new Date());
    var day = util.formatDay(new Date());
    var endTime = new Date();

其中util中的几个方法：

//获取月份
const formatMonth = date => {
  const month = date.getMonth() + 1
  return month;
}
//获取年份
const formatYear = date => {
  const year = date.getFullYear()
  return year;
}
//获取天
const formatDay = date => {
  const day = date.getDate()
  return day;
}

别忘了在module.exports函数中添加方法名

2.转换起止时间的时间格式（时间戳转字符串）

	var StringEndTime = this.DatetoYYYMMDD(endTime);
    var StringStartTime = this.getLastMonthTime(StringEndTime);

//时间格式转换
  DatetoYYYMMDD(dt) {
    var str = dt.toISOString();
    return str.substring(0, str.indexOf("T"));
  },

//获取上月时间字符串
  getLastMonthTime:function(time){
    //console.log(time)
    var year = parseInt(time.substring(0,4))
    var month = parseInt(time.substring(5,7));
    var day = parseInt(time.substring(8, 10));
    var StringDate = '';
   // console.log(year+'年'+month+'月'+day+'日')

    if (month > 10) {
      if (day != 1) {
        StringDate = year + '-' + month + '-01'
      } else {
        StringDate = year + '-' + (month - 1) + '-01'
      }
    } else if (month == 10) {
      if (day != 1) {
        StringDate = year + '-' + month + '-01'
      } else {
        StringDate = year + '-0' + (month - 1) + '-01'
      }
    } else if (month<10 && month>1) {
      if (day != 1) {
        StringDate = year + '-0' + month + '-01'
      } else {
        StringDate = year + '-0' + (month - 1) + '-01'
      }
    }  else if (month == 1) {
      if (day != 1) {
        StringDate = year + '-0' + month + '-01'
      } else {
        StringDate = (year - 1) + '-12' + '-01'
      }
    }
    return StringDate
  },

3.获取数据（传参）

this.loadData(StringStartTime, StringEndTime)

loadData: function (startTime,endTime){
	......
}

4.data赋值

data: {
    TabCur: 0,
    scrollLeft: 0,
    //当前月份
    month:'',
    //当前年份
    year:'',
    //时间
    time:'',
    //时间表
    monthList:[],
    startTime:'',
    endTime:''
  },

this.setData({
      year:YEAR,
      month:MONTH
    });
    for(var i=0; i<12; i++){
     // console.log('结束时间' + StringEndTime)
      //console.log('开始时间'+ StringStartTime)
      var newarray = [{
        month: MONTH + ' 月',
        startTime: StringStartTime,
        endTime: StringEndTime,
      }]
      if(MONTH==0){
        MONTH=12
        var newarray = [{
          month: MONTH + ' 月',
          startTime: StringStartTime,
          endTime: StringEndTime,
        }]
        this.setData({
          monthList:  this .data.monthList.concat(newarray)
        })
      }else{
        this.setData({
          monthList: this.data.monthList.concat(newarray)
        });
      }
      MONTH = MONTH - 1;
      StringEndTime = StringStartTime;
      StringStartTime = this.getLastMonthTime(StringStartTime)
    }
    
   // console.log(this.data.monthList)
  },

5.页面导航渲染

UI组件我用的是colorUI （百度colorUI就可以了）

tabSelect(e) {
    this.setData({
      endTime: e.currentTarget.dataset.endtime,
      startTime: e.currentTarget.dataset.starttime,
      TabCur: e.currentTarget.dataset.id,
      scrollLeft: (e.currentTarget.dataset.id - 1) * 60
    })
    wx.showLoading({ title: '加载中...', mask: true });
    this.setData({
      currentPage: 1
    });
    var startTime = this.data.startTime;
    var endTime = this.data.endTime;
    //获取账单数据
    this.loadData(startTime, endTime);
    wx.hideLoading();
  },

wxml

<!--账单页面-->
<view class="cu-bar bg-white solid-bottom margin-top">
  <view class="action">
    <text class="cuIcon-title text-blue "></text> 我的账单（近一年）
  </view>
</view>
<scroll-view scroll-x class="bg-white nav" scroll-with-animation scroll-left="{{scrollLeft}}">
  <view class="cu-item {{index==TabCur?'text-green cur':''}}" wx:key wx:for="{{monthList}}" bindtap="tabSelect" data-id="{{index}}" data-endtime="{{item.endTime}}" data-starttime="{{item.startTime}}">
     {{item.month}}
  </view>
</scroll-view>
<view wx:for="{{monthList}}" wx:key wx:if="{{index==TabCur}}" >
  <view wx:for="{{contentlist}}" wx:key="id" wx:for-item="i" data-wtype="{{i.wtype}}" data-refoid="{{i.refoid}}" class="bg-grey padding margin" style="height:130rpx;">
      <view class="left">
        
      </view>
      <view class="right"></view>
    </view>
</view>

至此，大功告成。有不明白的同学可以留言。