【微信小程序】微信小程序实现未来一周时间表，时间表中显示时间段和是否可以预约或使用

一、效果图（时间为灰色为该时间段不可使用）

未选中效果                                                                  选中效果

二、分析

根据图中的效果，可以一行一行的来写，总共有7行，每一行的第一列都是周几+日期，第一列以后都是时间段。

1、处理第一列：可以写js，获取未来一周的日期和日期对应是周几

let time = util.formatDate(new Date());

let date = util.getDatesNoZero(8, time);

这个date是一个长度为8的数组，因为我们要显示从明天开始的日期，所以应该取索引为1以后的数据

以下是util

const formatDate = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  return [year, month, day].map(formatNumber).join('-')

}

function getDatesNoZero(days, todate) {
  var dateArry = [];
  for (var i = 0; i < days; i++) {
    var dateObj = dateLaterNoZero(todate, i);
    dateArry.push(dateObj)
  }
  return dateArry;
}

function dateLaterNoZero(dates, later) {
  let dateObj = {};
  let show_day = new Array('周日', '周一', '周二', '周三', '周四', '周五', '周六');
  let date = new Date(dates);
  date.setDate(date.getDate() + later);
  let day = date.getDay();
  let yearDate = date.getFullYear();
  let month = date.getMonth() + 1;
  let dayFormate = date.getDate();
  dateObj.time = yearDate + '-' + month + '-' + dayFormate;
  dateObj.week = show_day[day];
  return dateObj;
}

module.exports = {
  formatDate: formatDate,
  getDatesNoZero: getDatesNoZero,
}

2、处理第一列之后的时间段

这个时间段需求上都是固定的，2个小时为一段，可以把时间段数据放入数组，页面上通过wx:for遍历显示。

点击某一个时间段该行会变成浅蓝色，该时间段会变成深蓝色，字体颜色变成白色，字体变粗，这些可以通过动态改变样式来实现

以第一行举例：

 
        
          {{selectArray[0].week}}
          {{selectArray[0].date}}
        
        
          
            {{itemName}}
          
          
            {{itemName}}
          
        
      

三、以组件形式实现

wxml：

  
    
      选择时间
      {{time}}
    
    
      
        
          {{selectArray[0].week}}
          {{selectArray[0].date}}
        
        
          
            {{itemName}}
          
          
            {{itemName}}
          
        
      
      
        
          {{selectArray[1].week}}
          {{selectArray[1].date}}
        
        
          
            {{itemName}}
          
          
            {{itemName}}
          
        
      
      
        
          {{selectArray[2].week}}
          {{selectArray[2].date}}
        
        
          
            {{itemName}}
          
          
            {{itemName}}
          
        
      
      
        
          {{selectArray[3].week}}
          {{selectArray[3].date}}
        
        
          
            {{itemName}}
          
          
            {{itemName}}
          
        
      
      
        
          {{selectArray[4].week}}
          {{selectArray[4].date}}
        
        
          
            {{itemName}}
          
          
            {{itemName}}
          
        
      

      
        
          {{selectArray[5].week}}
          {{selectArray[5].date}}
        
        
          
            {{itemName}}
          
          
            {{itemName}}
          
        
      

      
        
          {{selectArray[6].week}}
          {{selectArray[6].date}}
        

        
          
            {{itemName}}
          
          
            {{itemName}}
          
        
      
    
    
  

js：

var util = require('../../utils/util.js')

Component({
  /**
   * 组件的属性列表
   */
  properties: {},

  /**
   * 组件的初始数据
   */
  data: {
    timeArray: ["8:00", "10:30", "13:30", "16:00"],
    timeSlotArray: ["8:00-10:00", "10:30-12:30", "13:30-15:30", "16:00-18:00"],
    dataArray: [{
      time: [false, false, false, false]
    }, {
      time: [false, false, false, false]
    }, {
      time: [false, false, false, false]
    }, {
      time: [false, false, false, false]
    }, {
      time: [false, false, false, false]
    }, {
      time: [false, false, false, false]
    }, {
      time: [false, false, false, false]
    }],
    selectArray: [{
      week: "",
      date: "",
      select: false,
      selectTime: ""
    }, {
      week: "",
      date: "",
      select: false,
      selectTime: ""
    }, {
      week: "",
      date: "",
      select: false,
      selectTime: ""
    }, {
      week: "",
      date: "",
      select: false,
      selectTime: ""
    }, {
      week: "",
      date: "",
      select: false,
      selectTime: ""
    }, {
      week: "",
      date: "",
      select: false,
      selectTime: ""
    }, {
      week: "",
      date: "",
      select: false,
      selectTime: ""
    }],
    time: "",
    selectTimeForServer: "",
    canSubscribe: true
  },

  /**
   * 组件的方法列表
   */
  methods: {
    pushSchedule(scheduleMap) {
      var index = 0;
      for (var day in scheduleMap) {
        this.data.selectArray[index].date = day
        var scheduleDayArray = scheduleMap[day]
        var timeArray = this.data.dataArray[index].time
        for (var i = 0; i < scheduleDayArray.length; i++) {
          if (scheduleDayArray[i].checked == 1) {
            timeArray[i] = true
          } else {
            timeArray[i] = false
          }
        }
        this.data.dataArray[index].time = timeArray
        index = index + 1
      }
      this.setData({
        selectArray: this.data.selectArray,
        dataArray: this.data.dataArray
      })
    },
    onItemClick: function(e) {
      var data = e.currentTarget.dataset.content;
      var dateArray = data.split("-")
      //0#8:00
      var dataSplitArray = data.split("#");
      let temp = this.data.selectArray;
      for (var i = 0; i < temp.length; i++) {
        if (i == dataSplitArray[0]) {
          temp[i].select = true;
          temp[i].selectTime = dataSplitArray[1]
          continue;
        }
        temp[i].select = false;
        temp[i].selectTime = "";
      }
      let time = util.formatDate(new Date());
      var timeArray = util.getDates(8, time)
      var dataIndex = this.data.timeArray.indexOf(dataSplitArray[1])
      this.setData({
        selectArray: temp,
        time: temp[dataSplitArray[0]].date + " " + temp[dataSplitArray[0]].week + " " + this.data.timeSlotArray[dataIndex],
        selectTimeForServer: timeArray[parseInt(dataSplitArray[0]) + 1].time + " " + this.data.timeSlotArray[dataIndex]
      })

      if (this.data.dataArray[dataSplitArray[0]].time[dataIndex]) {
        this.data.canSubscribe = true
      } else {
        this.data.canSubscribe = false;
      }

      this.triggerEvent('selectTime', {
        "time4Server": this.data.selectTimeForServer,
        "time": this.data.time
      }, {});
    }
  },

  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行

      let time = util.formatDate(new Date());
      console.log(time)
      let date = util.getDatesNoZero(8, time);
      console.log(date);
      let temp = this.data.selectArray;
      for (var i = 1; i < date.length; i++) {
        if (i == 1) {
          temp[0].week = "明天";
          temp[0].date = date[1].time.split("-")[1] + "月" + date[1].time.split("-")[2] + "日";
          continue;
        }
        temp[i - 1].week = date[i].week;
        temp[i - 1].date = date[i].time.split("-")[1] + "月" + date[i].time.split("-")[2] + "日";
      }
      this.setData({
        selectArray: temp,
        //初始化time
        // time: temp[0].date +" "+ temp[0].week + " " + this.data.timeSlotArray[0]
      })
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },

  },
})

WXSS :

.root-container {
  display: flex;
  flex-direction: column;
  width: 710rpx;
  background: #f6f6f6;
}

.container {
  width: 710rpx;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16rpx;
}

.title-container {
  width: 710rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.title {
  margin-left: 20rpx;
  margin-top: 30rpx;
  font-size: 36rpx;
  color: #333;
  font-weight: 700;
  margin-bottom: 30rpx;
}

.time {
  margin-left: 40rpx;
  font-size: 32rpx;
  color: #59b0ff;
  font-weight: 700;
}

.time-container {
  width: 710rpx;
  display: flex;
  flex-direction: column;
}

.row {
  /* 边框样式 dotted solid double dashed 点状 实线 双线 虚线*//* border-style: solid; */
  border-color: #e6e6e6;
  width: 710rpx;
  display: flex;
  flex-direction: row;
}

.date-container {
  border-left: none;
  border-right: 1px solid #e6e6e6;
  border-top: 1px solid #e6e6e6;
  border-bottom: none;
  width: 142rpx;
  height: 106rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.date-container-bottom{
 border-left: none;
  border-right: 1px solid #e6e6e6;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  width: 142rpx;
  height: 106rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.time-tab-container {
  border-left: none;
  border-right: 1px solid #e6e6e6;
  border-top: 1px solid #e6e6e6;
  border-bottom: none;
  width: 142rpx;
  height: 106rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.time-tab-container-right {
  border-left: none;
  border-right: none;
  border-top: 1px solid #e6e6e6;
  border-bottom: none;
  width: 142rpx;
  height: 106rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.time-tab-container-bottom {
  border-left: none;
  border-right: 1px solid #e6e6e6;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  width: 142rpx;
  height: 106rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.time-tab-container-right-bottom {
  border-left: none;
  border-right: none;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  width: 142rpx;
  height: 106rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.date-text {
  font-size: 28rpx;
  color: #666;
}

.time-tab {
  font-size: 32rpx;
  color: #333;
}
.bottom-divider{
  width: 710rpx;
  background: #ffffff;
  border-radius: 0 0 16rpx 16rpx;
  height: 40rpx;
}

四、组件的使用

先在page下的index.json中引用这个组件,然后再page下的wxml中将组件添加进来，例如

初始化数据以及展示数据：

var data = {
	"8月15日": [{
		checked: 1,
		day: "8月15日",
		startTime: "2019-08-15 08:00:00",
		endTime: "2019-08-15 10:00:00",
		timeDes: "8:00-10:00",
		week: "周四"
	}, {
		checked: 1,
		day: "8月15日",
		startTime: "2019-08-15 10:30:00",
		endTime: "2019-08-15 12:30:00",
		timeDes: "8:00-10:00",
		week: "周四"
	}, {
		checked: 1,
		day: "8月15日",
		startTime: "2019-08-15 13:30:00",
		endTime: "2019-08-15 15:30:00",
		timeDes: "8:00-10:00",
		week: "周四"
	}, {
		checked: 1,
		day: "8月15日",
		startTime: "2019-08-15 16:00:00",
		endTime: "2019-08-15 18:00:00",
		timeDes: "8:00-10:00",
		week: "周四"
	}]
}
this.selectTime = this.selectComponent('#select-time')
this.selectTime.pushSchedule(data)

 调用效果如下

    

end