时间上的处理
有段时间没弄小程序了,现在又来堆点低级问题处理,需求如下,预定类型小程序的一个页面,之前很少会计算time,应为都是后台返回,但是这次有点特殊,后台不好弄,我就全权接下呗,不怕需求难,就怕需求多啊。
- 状态的简单管理,可选,不可选,选中
- 上面是更具当天得出未来七天日期
- 下面是固定时间段,选中后增加半小时,取消后恢复
给看客老爷上图
一:选择状态的处理
从图中就可以看到有3中状态,我用的0,1,2来设置状态;0:可选,1:选中,2:不可选(被他人选完了)
时间分为上下午,所以我分成了2个数组,也是为了view
里面好wx:for
。(时间是固定的这十几个)
状态2
是不可选,直接修改css
.cannotchoos{
background: #E5E5E5;
border-radius: 4px;
pointer-events: none;
}
状态0,1
切换
<view class="weui-tab__content">
<view class='am today'>
<text class='title'>上午</text><text class='space-time'>9:00 ~ 13:00</text>
<view class='time-List'>
<view class="time {{item.chooseBol == 1 ? 'allowchoos' : item.chooseBol == 2 ? 'cannotchoos' : ''}}" wx:for='{{timesAm}}' wx:key='index' data-id='{{item.id}}' data-text='{{item.time}}' bindtap='choose'>
{{item.time}}
</view>
</view>
</view>
<view class='pm today'>
<text class='title'>下午</text><text class='space-time'>13:00 ~ 19:00</text>
<view class='time-List'>
<view class="time {{item.chooseBol == 1 ? 'allowchoos' : item.chooseBol == 2 ? 'cannotchoos' : ''}}" wx:for='{{timesPm}}' wx:key='index' data-id='{{item.id}}' data-text='{{item.time}}' bindtap='choose'>
{{item.time}}
</view>
</view>
</view>
choose:function (e) {
var id = e.currentTarget.dataset.id-1
var arr = this.data.times
var index = arr.indexOf(e.currentTarget.dataset.id) // 搜索数组中是否有选中的id,有就删除,反之添加
if (id < 8) {
this.data.timesAm[id].chooseBol = 1
} else {
this.data.timesPm[id - 8].chooseBol = 1
}
if (index != -1) {
arr.splice(index, 1)
if (id < 8) {
this.data.timesAm[id].chooseBol = 0
} else {
this.data.timesPm[id - 8].chooseBol = 0
}
} else {
arr.push(e.currentTarget.dataset.id)
}
arr.sort(function (num1, num2) { // 从小到大排序
return num1 - num2
})
this.setData({
times: arr,
timesAm: this.data.timesAm,
timesPm: this.data.timesPm
})
},
二:未来七天
// 处理未来七天的函数
dealTime: function (num) { // num:未来天数
var time = new Date() // 获取当前时间日期
var date = new Date(time.setDate(time.getDate() + num)).getDate() //这里先获取日期,在按需求设置日期,最后获取需要的
var month = time.getMonth() + 1 // 获取月份
var day = time.getDay() // 获取星期
switch (day){ // 格式化
case 0: day = "(周七)"
break
case 1: day = "(周一)"
break
case 2: day = "(周二)"
break
case 3: day = "(周三)"
break
case 4: day = "(周四)"
break
case 5: day = "(周五)"
break
case 6: day = "(周六)"
break
}
var obj = {
date: date,
day: day,
month: month
}
return obj // 返回对象
}
在onload
中循环调用,获取未来7天
onLoad: function (options) {
var that = this;
var arr = []
for (let i = 0; i < 7; i++) {
arr.push(this.dealTime(i))
}
arr[0].date = '今天' // 格式化当前日期为 '今天'
arr[0].day = ''
this.setData({
aWeek: arr // 赋值给data
})
},
最后得到:
三:选择指定时间,增加30分钟间隔
30分钟时间间隔,是当选中可选中的时间之后,显示出当前时间~时间+30,就像这样:
====>
// 换算时间 将选取的时间 都增加30分钟
var text = e.currentTarget.dataset.text // 获取选中的时间字符串
var time = new Date(new Date().toDateString() + ' ' + text) // 将选中的时间字符串拼接到日期上 获取这个时间日期
var newtime = new Date(time.setMinutes(time.getMinutes() + 30)).toTimeString().replace(/[\u4e00-\u9fa5]/g, '') // 设置时间30分钟 在正则去除
newtime = newtime.slice(0, newtime.lastIndexOf(':')) //筛选去掉秒
然后放入到上面状态管理的那个choose的函数中即可,相信有人会有更好的办法,还往大牛指导