Skip to content

S
schedule
Commit f7df661b by xiexiaoqin
Options

fix: fix check value and refator

parent aca0556b
Showing with 133 additions and 110 deletions
components/meetingTimePicker/meetingTimePicker.acss
......@@ -7,6 +7,9 @@ picker-view .column {
font-size: 34rpx;
color: #191F25;
}
.pick-column{
border-left: 100vw solid transparent;
}
.column-1 {
flex: 1;
......
components/meetingTimePicker/meetingTimePicker.axml
......@@ -2,19 +2,19 @@
<view class="tab">
<view class="{{currentTab == 'start' ? 'active' : ''}}" id='start' onTap="changeTab">
<text>开始时间</text>
<text>{{startTime}}</text>
<text>{{startWeekDay}}</text>
<text>{{start.showTime}}</text>
<text>{{start.weekDay}}</text>
</view>
<view class="{{currentTab == 'end' ? 'active' : ''}}" id='end' onTap="changeTab">
<block a:if="{{!isEndTimeCustom}}">
<text>持续时间</text>
<text>{{duration}}</text>
<text>结束至{{durationEndTime}}</text>
<text>{{duration.label}}</text>
<text>结束至{{duration.showTime}}</text>
</block>
<block a:else>
<text>结束时间</text>
<text>{{endTime}}</text>
<text>{{endWeekDay}}</text>
<text>{{end.showTime}}</text>
<text>{{end.weekDay}}</text>
</block>
</view>
</view>
......@@ -22,7 +22,7 @@
<text class="error">{{error}}</text>
<text onTap="changeWay" a:if="{{!isEndTimeCustom}}">自定义结束时间</text></view>
<view class="picker-area">
<picker-view style="height: {{ 34 * visibleItemCount }}px" value="{{pickValue}}" onChange="onChange">
<picker-view style="height: {{ 34 * visibleItemCount }}px" indicator-class="pick-column" value="{{pickValue}}" onChange="onChange">
<block a:if="{{currentTab == 'end' && !isEndTimeCustom}}">
<picker-view-column>
<view class="column" key={"{item.value}}" a:for="{{durationList}}">{{item.label}}</view>
......
components/meetingTimePicker/meetingTimePicker.js
......@@ -33,7 +33,7 @@ function GetDateStr(AddDayCount) {
const res = getYMDWHMIN(time);
return res.y + '年' + res.m + "月" + res.d + "日 " + res.w;
}
// 获取年月日周时分
// 获取年月日周时分秒
function getYMDWHMIN(date) {
const y = date.getFullYear();
const m = padZero(date.getMonth() + 1);
......@@ -41,36 +41,22 @@ function getYMDWHMIN(date) {
const w = weekList[date.getDay()];
const h = padZero(date.getHours());
const min = padZero(date.getMinutes());
const second = padZero(date.getSeconds())
return {
y, m, d, w, h, min
y, m, d, w, h, min, second
}
}
// 时间格式转化为03月01日 14:00
function getTabShowDateByDate(date) {
function getShowTime(date) {
const res = getYMDWHMIN(date);
return res.m + "月" + res.d + "日 " + res.h + ':' + res.min;
}
function getdhmByPickValue(pickValue) {
const d = timeData[pickValue[0]];
const h = timeHour[pickValue[1]];
const m = timeMin[pickValue[2]];
return { d, h, m }
}
function getTabShowDateByPickValue(pickValue) {
const { d, h, m } = getdhmByPickValue(pickValue);
const time = `${d.slice(5, 10)} ${h}:${m}`;
const weekDay = d.slice(-2);
return { time, weekDay }
}
// 根据column值获取标准时间格式 2019/2/2 16:00
function getPostTimeByPickValue(pickValue) {
const { d, h, m } = getdhmByPickValue(pickValue);
const newD = d.slice(0, 10).replace('年', '/').replace('月', '/').replace('日', '/');
return newD + ' ' + h + ':' + m
function getPickerValue(date) {
const res = getYMDWHMIN(date);
return [timeData.indexOf(res.y + "年" + res.m + "月" + res.d + "日 " + res.w), timeHour.indexOf(res.h), timeMin.indexOf(res.min)];
}
// 将周几转换为今天，明天, 昨天
function getTabShowWeekByDate(futureData) {
const date = new Date(futureData);
function getWeekDay(date) {
let week = '今天';
//同年同月
if (currentDate.getFullYear() == date.getFullYear() &&
......@@ -92,17 +78,33 @@ function getTabShowWeekByDate(futureData) {
}
// 根据开始时间和持续时间计算结束时间 2019/2/2 16:00
function getEndTime(startTime, duration) {
let newDate = new Date(startTime);
function getEndTimeByDuration(startDate, duration) {
const newDate = new Date(startDate); //新创建一个时间对象，以免改变startDate
var min = newDate.getMinutes();
newDate.setMinutes(min + duration);
const res = getYMDWHMIN(newDate);
return res.y + '/' + res.m + '/' + res.d + ' ' + res.h + ':' + res.min;
}
// 获取结束至时间的显示 16:00
function getDurationEndTime(startTime, duration) {
return getEndTime(startTime, duration).slice(-5);
function getDurationShowTime(startDate, duration) {
return getEndTimeByDuration(startDate, duration).slice(-5);
}
// 根据column值获取标准时间格式 2019/2/2 16:00
function getDateByPickValue(pickValue) {
const d = timeData[pickValue[0]];
const h = timeHour[pickValue[1]];
const m = timeMin[pickValue[2]];
const newD = d.slice(0, 10).replace('年', '/').replace('月', '/').replace('日', '/') + ' ' + h + ':' + m + ':00';
return new Date(newD)
}
// 时间格式转化为2019/2/2 16:00
function getPostTimeByDate(date) {
const res = getYMDWHMIN(date);
return res.y + '/' + res.m + "/" + res.d + " " + res.h + ':' + res.min;
}
// 获取持续时间 {value,lable,index}
function getDuration(startDate, endDate) {
const time = endDate.getTime() - startDate.getTime();
......@@ -126,39 +128,35 @@ function getDurationValue(durationLable) {
});
return value
}
// 获取时间格式的pick value用于pick column回显
function getPickerValue(date) {
const res = getYMDWHMIN(date);
const pickerValue = [timeData.indexOf(res.y + "年" + res.m + "月" + res.d + "日 " + res.w), timeHour.indexOf(res.h), timeMin.indexOf(res.min)];
return pickerValue
}
Component({
mixins: [],
data: {
currentTab: 'start',
timeData: timeData,
timeHour: timeHour,
timeMin: timeMin,
durationList: durationList,
currentTab: 'start',
isEndTimeCustom: false,
//用于pick column回显
startPickValue: [],
endPickValue: [],
endDurationPickValue: [1],
// 当前 pick column回显
pickValue: [],
//开始、结束时间tab数据
startWeekDay: '今天',
startTime: '',
endWeekDay: '今天',
endTime: '',
//持续结束时间tab数据
duration: '2小时',
//已选择的标准时间格式数据
postStartTime: '',
postEndTime: '',
durationEndTime: '',
error: ''
pickValue: [],// 当前 pick column回显
error: '',
start: {
pickValue: [],
weekDay: '今天',
showTime: '',
},
end: {
pickValue: [],
weekDay: '今天',
showTime: '',
},
duration: {
pickValue: [1],
showTime: '',
label: '2小时',
},
startPostTime: '',
endPostTime: ''
},
props: {
},
......@@ -183,82 +181,97 @@ Component({
if (this.props.endTime) {
endDate = new Data(thia.props.endTime);
}
//开始和结束时间,持续时间赋值
this.changeStart(startDate);
this.changeEnd(endDate);
this.setData({
startPickValue: getPickerValue(startDate),
startTime: getTabShowDateByDate(startDate),
postStartTime: startDate,
pickValue: getPickerValue(startDate),
endPickValue: getPickerValue(endDate),
endTime: getTabShowDateByDate(endDate),
postEndTime: endDate
pickValue: getPickerValue(startDate)
});
// 如果持续时间不在范围内，需要改变默认显示结束时间的方式
const duration = getDuration(startDate, endDate);
if (duration) {
this.setData({
duration: duration.label,
durationEndTime: getDurationEndTime(startDate, duration.value),
endDurationPickValue: [duration.index]
})
const durationData = getDuration(startDate, endDate);
// 在范围内
if (durationData) {
this.changeDuration(startDate, durationData);
} else {
this.setData({
isEndTimeCustom: true
})
}
},
changeStart(startDate, pickValue) {
this.setData({
startPostTime: startDate,
start: {
pickValue: pickValue || getPickerValue(startDate),
showTime: getShowTime(startDate),
weekDay: getWeekDay(startDate)
}
})
},
changeEnd(endDate, pickValue) {
this.setData({
endPostTime: endDate,
end: {
pickValue: pickValue || getPickerValue(endDate),
showTime: getShowTime(endDate),
weekDay: getWeekDay(endDate)
}
})
},
changeDuration(startDate, durationData, pickValue) {
this.setData({
duration: {
label: durationData.label,
showTime: getDurationShowTime(startDate, durationData.value),
pickValue: pickValue || [durationData.index]
}
})
},
onChange(e) {
const pickValue = e.detail.value;
const timeData = getTabShowDateByPickValue(pickValue);
//改变开始时间，改变持续时间的结束时间
if (this.data.currentTab === 'start') {
const postStartTime = getPostTimeByPickValue(pickValue);
this.setData({
startTime: timeData.time,
startWeekDay: getTabShowWeekByDate(postStartTime),
startPickValue: pickValue,
postStartTime
});
const startDate = getDateByPickValue(pickValue);
this.changeStart(startDate, pickValue);
// 如果是持续时间面板，改变持续时间的结束时间
const durationValue = getDurationValue(this.data.duration.label);
if (!this.data.isEndTimeCustom) {
this.setData({
durationEndTime: getDurationEndTime(postStartTime, getDurationValue(this.data.duration))
'duration.showTime': getDurationShowTime(startDate, durationValue),
endDurationPostTime: getEndTimeByDuration(startDate, durationValue)
})
} else {
this.checkValue(startDate, this.data.endPostTime);
}
}
// 改变结束时间，这里结束时间和持续时间互不影响
// 改变结束时间，结束时间和持续时间互不影响
else if (this.data.currentTab === 'end') {
const postEndTime = getPostTimeByPickValue(pickValue);
if (this.data.isEndTimeCustom) {
this.setData({
endTime: timeData.time,
endWeekDay: getTabShowWeekByDate(postEndTime),
endPickValue: pickValue,
postEndTime
});
const endDate = getDateByPickValue(pickValue);
this.changeEnd(endDate, pickValue);
this.checkValue(this.data.startPostTime, endDate);
} else {
const durationData = durationList[pickValue[0]];
this.setData({
duration: durationData.label,
durationEndTime: getDurationEndTime(this.data.postStartTime, durationData.value),
endDurationPickValue: pickValue,
postEndTime: getEndTime(this.data.postStartTime, durationData.value)
});
this.changeDuration(this.data.startPostTime, durationData, pickValue);
}
}
this.checkValue(this.data.postStartTime, this.data.postEndTime);
},
changeTab(e) {
const currentTab = e.currentTarget.id;
this.setData({
currentTab
})
//pick coulum 回显
if (currentTab === 'end' && !this.data.isEndTimeCustom) {
return this.setData({
currentTab,
pickValue: this.data.endDurationPickValue
pickValue: this.data.duration.pickValue
});
}
this.setData({
currentTab,
pickValue: this.data[`${currentTab}PickValue`]
pickValue: this.data[`${currentTab}`].pickValue
});
},
changeWay() {
......@@ -268,14 +281,14 @@ Component({
//如果在end tab 切换， 需要设置结束时间的pick column回显
if (this.data.currentTab == 'end') {
this.setData({
pickValue: this.data.endPickValue
pickValue: this.data.end.pickValue
});
}
},
checkValue(postStartTime, postEndTime) {
if (new Date(postEndTime).getTime() <= new Date(postStartTime).getTime()) {
checkValue(startPostTime, endPostTime) {
if (endPostTime.getTime() <= startPostTime.getTime()) {
this.setData({
error: '开始时间小于结束时间'
error: '结束时间小于开始时间'
})
return false;
} else {
......@@ -286,11 +299,18 @@ Component({
}
},
complete() {
const { postStartTime, postEndTime } = this.data;
if (this.checkValue(postStartTime, postEndTime)) {
const { startPostTime, endPostTime, endDurationPostTime } = this.data;
if (this.data.isEndTimeCustom) {
if (this.checkValue(startPostTime, endPostTime)) {
this.props.onComplete({
startTime: getPostTimeByDate(startPostTime),
endTime: getPostTimeByDate(endPostTime)
})
}
} else {
this.props.onComplete({
startTime: postStartTime,
endTime: postEndTime
startTime: getPostTimeByDate(startPostTime),
endTime: endDurationPostTime
})
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment