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

原创 于 2019-08-14 13:54:17 发布 · 7.1k 阅读 · 73 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序时间表 #未来一周 #未来7天 #预约未来7天 #未来一周时间表

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

未选中效果                                                                  选中效果

二、分析

根据图中的效果，可以一行一行的来写，总共有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遍历显示。

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

以第一行举例：

 <view class='row' style='background:{{selectArray[0].select?"#E0F0FF":"#ffffff"}}'>
        <view class='date-container'>
          <text class='date-text'>{{selectArray[0].week}}</text>
          <text class='date-text'>{{selectArray[0].date}}</text>
        </view>
        <block wx:for="{{timeArray}}" wx:for-index="idx" wx:for-item="itemName" wx:key="">
          <view wx:if="{{idx != 3}}" class='time-tab-container' style='background:{{itemName==selectArray[0].selectTime?"#59B0FF":""}}' data-content='0#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[0].selectTime?"#ffffff":dataArray[0].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[0].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
          <view wx:if="{{idx == 3}}" class='time-tab-container-right' style='background:{{itemName==selectArray[0].selectTime?"#59B0FF":""}}' data-content='0#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[0].selectTime?"#ffffff":dataArray[0].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[0].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
        </block>
      </view>

三、以组件形式实现

wxml：

<view class='root-container'>
  <view class='container'>
    <view class='title-container'>
      <text class='title'>选择时间</text>
      <text class='time'>{{time}}</text>
    </view>
    <view class='time-container'>
      <view class='row' style='background:{{selectArray[0].select?"#E0F0FF":"#ffffff"}}'>
        <view class='date-container'>
          <text class='date-text'>{{selectArray[0].week}}</text>
          <text class='date-text'>{{selectArray[0].date}}</text>
        </view>
        <block wx:for="{{timeArray}}" wx:for-index="idx" wx:for-item="itemName" wx:key="">
          <view wx:if="{{idx != 3}}" class='time-tab-container' style='background:{{itemName==selectArray[0].selectTime?"#59B0FF":""}}' data-content='0#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[0].selectTime?"#ffffff":dataArray[0].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[0].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
          <view wx:if="{{idx == 3}}" class='time-tab-container-right' style='background:{{itemName==selectArray[0].selectTime?"#59B0FF":""}}' data-content='0#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[0].selectTime?"#ffffff":dataArray[0].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[0].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
        </block>
      </view>
      <view class='row' style='background:{{selectArray[1].select?"#E0F0FF":"#ffffff"}}'>
        <view class='date-container'>
          <text class='date-text'>{{selectArray[1].week}}</text>
          <text class='date-text'>{{selectArray[1].date}}</text>
        </view>
        <block wx:for="{{timeArray}}" wx:for-index="idx" wx:for-item="itemName" wx:key="">
          <view wx:if="{{idx != 3}}" class='time-tab-container' style='background:{{itemName==selectArray[1].selectTime?"#59B0FF":""}}' data-content='1#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[1].selectTime?"#ffffff":dataArray[1].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[1].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
          <view wx:if="{{idx == 3}}" class='time-tab-container-right' style='background:{{itemName==selectArray[1].selectTime?"#59B0FF":""}}' data-content='0#{{itemName}}' data-content='1#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[1].selectTime?"#ffffff":dataArray[1].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[1].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
        </block>
      </view>
      <view class='row' style='background:{{selectArray[2].select?"#E0F0FF":"#ffffff"}}'>
        <view class='date-container'>
          <text class='date-text'>{{selectArray[2].week}}</text>
          <text class='date-text'>{{selectArray[2].date}}</text>
        </view>
        <block wx:for="{{timeArray}}" wx:for-index="idx" wx:for-item="itemName" wx:key="">
          <view wx:if="{{idx != 3}}" class='time-tab-container' style='background:{{itemName==selectArray[2].selectTime?"#59B0FF":""}}' data-content='2#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[2].selectTime?"#ffffff":dataArray[2].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[2].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
          <view wx:if="{{idx == 3}}" class='time-tab-container-right' style='background:{{itemName==selectArray[2].selectTime?"#59B0FF":""}}' data-content='0#{{itemName}}' data-content='2#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[2].selectTime?"#ffffff":dataArray[2].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[2].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
        </block>
      </view>
      <view class='row' style='background:{{selectArray[3].select?"#E0F0FF":"#ffffff"}}'>
        <view class='date-container'>
          <text class='date-text'>{{selectArray[3].week}}</text>
          <text class='date-text'>{{selectArray[3].date}}</text>
        </view>
        <block wx:for="{{timeArray}}" wx:for-index="idx" wx:for-item="itemName" wx:key="">
          <view wx:if="{{idx != 3}}" class='time-tab-container' style='background:{{itemName==selectArray[3].selectTime?"#59B0FF":""}}' data-content='3#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[3].selectTime?"#ffffff":dataArray[3].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[3].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
          <view wx:if="{{idx == 3}}" class='time-tab-container-right' style='background:{{itemName==selectArray[3].selectTime?"#59B0FF":""}}' data-content='0#{{itemName}}' data-content='3#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[3].selectTime?"#ffffff":dataArray[3].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[3].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
        </block>
      </view>
      <view class='row' style='background:{{selectArray[4].select?"#E0F0FF":"#ffffff"}}'>
        <view class='date-container'>
          <text class='date-text'>{{selectArray[4].week}}</text>
          <text class='date-text'>{{selectArray[4].date}}</text>
        </view>
        <block wx:for="{{timeArray}}" wx:for-index="idx" wx:for-item="itemName" wx:key="">
          <view wx:if="{{idx != 3}}" class='time-tab-container' style='background:{{itemName==selectArray[4].selectTime?"#59B0FF":""}}' data-content='4#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[4].selectTime?"#ffffff":dataArray[4].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[4].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
          <view wx:if="{{idx == 3}}" class='time-tab-container-right' style='background:{{itemName==selectArray[4].selectTime?"#59B0FF":""}}' data-content='0#{{itemName}}' data-content='4#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[4].selectTime?"#ffffff":dataArray[4].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[4].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
        </block>
      </view>

      <view class='row' style='background:{{selectArray[5].select?"#E0F0FF":"#ffffff"}}'>
        <view class='date-container'>
          <text class='date-text'>{{selectArray[5].week}}</text>
          <text class='date-text'>{{selectArray[5].date}}</text>
        </view>
        <block wx:for="{{timeArray}}" wx:for-index="idx" wx:for-item="itemName" wx:key="">
          <view wx:if="{{idx != 3}}" class='time-tab-container' style='background:{{itemName==selectArray[5].selectTime?"#59B0FF":""}}' data-content='5#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[5].selectTime?"#ffffff":dataArray[5].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[5].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
          <view wx:if="{{idx == 3}}" class='time-tab-container-right' style='background:{{itemName==selectArray[5].selectTime?"#59B0FF":""}}' data-content='0#{{itemName}}' data-content='5#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[5].selectTime?"#ffffff":dataArray[5].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[5].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
        </block>
      </view>

      <view class='row' style='background:{{selectArray[6].select?"#E0F0FF":"#ffffff"}}'>
        <view class='date-container-bottom'>
          <text class='date-text'>{{selectArray[6].week}}</text>
          <text class='date-text'>{{selectArray[6].date}}</text>
        </view>

        <block wx:for="{{timeArray}}" wx:for-index="idx" wx:for-item="itemName" wx:key="">
          <view wx:if="{{idx != 3}}" class='time-tab-container-bottom' style='background:{{itemName==selectArray[6].selectTime?"#59B0FF":""}}' data-content='6#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[6].selectTime?"#ffffff":dataArray[6].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[6].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
          <view wx:if="{{idx == 3}}" class='time-tab-container-right-bottom' style='background:{{itemName==selectArray[6].selectTime?"#59B0FF":""}}' data-content='0#{{itemName}}' data-content='6#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[6].selectTime?"#ffffff":dataArray[6].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[6].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
        </block>
      </view>
    </view>
    <view class='bottom-divider' />
  </view>
</view>

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中将组件添加进来，例如

<my-select-time id="select-time"  />

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

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

评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值