微信小程序周历表预约课程

把周历表的 星期一 提了出来，因为其他天也是一样的，这样更加方便查看。

每一天都可以添加多个时间段，这里的时间就是 时：分（01:00），点击‘+’添加一行开始时间和结束时间，点击‘-’删除最后一行

wxml

    
        星期一
        
            
        
        
            
        
    
    
        
                              
                
                    
                
            
                             
                
            
                              
                
                    
                
             
             
                
             
        
    

js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    fromlist: [],
    index: 0,
    lists: [0],
    week1: [],
    newList: [],
  },

  /**
   * 开始日期--时间
   */
  bindTimeChange1: function (e) {
    var nowIdx = e.currentTarget.dataset.idx;//获取当前索引
    var val = e.detail.value;//获取输入的值
    var oldVal = this.data.lists;
    oldVal[nowIdx] = val;//修改对应索引值的内容  
    this.setData({
      time1: oldVal
    })  
  },

  /**
   * 结束日期--时间
   */
  bindTimesChange1: function (e) {
    var nowIdx = e.currentTarget.dataset.idx;//获取当前索引
    var val = e.detail.value;//获取输入的值
    var oldVal = this.data.lists;
    oldVal[nowIdx] = val;//修改对应索引值的内容  
    this.setData({
      times1: oldVal
    })
  },

  /**
   * 追加开始结束日期
   */
  add1: function () {
    var lists = this.data.lists;
    var newData = {};
    lists.push(newData);//实质是添加lists数组内容，使for循环多一次
    this.setData({
      lists: lists,
    })
  },

  /**
   * 删除开始结束日期
  */
  del1: function (e) {
    var lists = this.data.lists;
    var newData = {};
    lists.pop(newData);
    if (this.data.lists.length < 1) {
      lists = [0]
    }
    this.setData({
      lists: lists
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 提交 
   */
  formSubmit: function (e) {
    var formData = e.detail.value;

    var time1 = this.data.time1;
    var times1 = this.data.times1;
    var week1 = [];
    var datatime = time1 ? time1.length : 0;
    for (var i = 0; i < datatime; i++) {
      week1[i] = { "stime": time1[i], "etime": times1[i] }
    }    

    var froms = {
      'Week_1': week1,
    }
    let sign = md5.md5(JSON.stringify(froms))
    let params = {
      'from': JSON.stringify(froms),
      'sign': sign,
    };

    wx.login({
      success: function (res) {
        var that = this
        wx.request({
          url: "接口URL",
          method: 'POST',
          data: params,
          header: {
            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
            'Gtoken': Gtoken,
            'Verification': Verification,
            'cookie': wx.getStorageSync("sessionid")
          },
          success: function (res) {
            console.log(res);
            if (res.data.code == 200) {
              wx.showToast({
                title: '添加成功',//这里打印出成功                
                icon: 'success',
                duration: 1000
              })
              wx.navigateTo({
                url: '../../pages/leaguclass/leaguclass',
              });
            } else {
              wx.showToast({
                title: '添加失败',
                icon: 'loading',
                duration: 1500
              })
            }
          }
        })
      }
    })
  },
})

wxss

.week{
  border-bottom: 1px solid #f3f3f3;
  zoom: 1;
}
.week_left{
  float: left;
  padding-top: 20rpx;
}
.week_day{
  display: inline-block;
  line-height: 40rpx;
  vertical-align: middle;
}
.remove{
  display: inline-block;
  width: 30rpx;
  height: 30rpx;
  margin: 0 10rpx;
  vertical-align: middle;
}
.week_right{
  padding-left: 20rpx;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
}
.week_right_one{
  padding-left: 60rpx !important;
}
.time{
  -webkit-text-fill-color: rgba(0,0,0,0.6);
  -webkit-opacity: 1;
  background: #fff;
  color: rgba(0,0,0,0.6);
  font-size: 28rpx;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  padding-left: 40rpx;
  box-sizing: border-box;
  border: none;
  text-align: right;
  height: 100rpx;
  width: 190rpx;
}