Archer_cdm
2 years ago
15 changed files with 1030 additions and 11 deletions
@ -0,0 +1,590 @@ |
|||||
|
// components/picker-timer/picker-time.js
|
||||
|
|
||||
|
Component({ |
||||
|
/** |
||||
|
* 组件的属性列表 |
||||
|
*/ |
||||
|
properties: { |
||||
|
pickerShow: { |
||||
|
type: Boolean, |
||||
|
observer: function (val) { //弹出动画
|
||||
|
if (val) { |
||||
|
let animation = wx.createAnimation({ |
||||
|
duration: 500, |
||||
|
timingFunction: "ease" |
||||
|
}); |
||||
|
let animationOpacity = wx.createAnimation({ |
||||
|
duration: 500, |
||||
|
timingFunction: "ease" |
||||
|
}); |
||||
|
setTimeout(() => { |
||||
|
animation.bottom(0).step(); |
||||
|
animationOpacity.opacity(0.7).step(); |
||||
|
this.setData({ |
||||
|
animationOpacity: animationOpacity.export(), |
||||
|
animationData: animation.export() |
||||
|
}) |
||||
|
}, 0); |
||||
|
} else { |
||||
|
let animation = wx.createAnimation({ |
||||
|
duration: 100, |
||||
|
timingFunction: "ease" |
||||
|
}); |
||||
|
let animationOpacity = wx.createAnimation({ |
||||
|
duration: 500, |
||||
|
timingFunction: "ease" |
||||
|
}); |
||||
|
animation.bottom(-320).step(); |
||||
|
animationOpacity.opacity(0).step(); |
||||
|
this.setData({ |
||||
|
animationOpacity: animationOpacity.export(), |
||||
|
animationData: animation.export() |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// 在picker滚动未停止前点确定,会使startValue数组各项归零,发生错误,这里判断并重新初始化
|
||||
|
// 微信新增了picker滚动的回调函数,已进行兼容
|
||||
|
if (this.data.startValue && this.data.endValue) { |
||||
|
let s = 0, e = 0; |
||||
|
let conf = this.data.config; |
||||
|
|
||||
|
this.data.startValue.map(val => { |
||||
|
if (val == 0) { |
||||
|
s++ |
||||
|
} |
||||
|
}) |
||||
|
this.data.endValue.map(val => { |
||||
|
if (val == 0) { |
||||
|
e++; |
||||
|
} |
||||
|
}); |
||||
|
let tmp = { |
||||
|
hour: 4, |
||||
|
minute: 5, |
||||
|
second: 6 |
||||
|
} |
||||
|
let n = tmp[conf.column]; |
||||
|
if (s >= n || e >= n) { |
||||
|
this.initPick(this.data.config); |
||||
|
this.setData({ |
||||
|
startValue: this.data.startValue, |
||||
|
endValue: this.data.endValue, |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
config: Object |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 组件的初始数据 |
||||
|
*/ |
||||
|
data: { |
||||
|
// pickerShow:true
|
||||
|
// limitStartTime: new Date().getTime()-1000*60*60*24*30,
|
||||
|
// limitEndTime: new Date().getTime(),
|
||||
|
// yearStart:2000,
|
||||
|
// yearEnd:2100
|
||||
|
}, |
||||
|
detached: function () { |
||||
|
console.log("dele"); |
||||
|
}, |
||||
|
attached: function () { }, |
||||
|
ready: function () { |
||||
|
this.readConfig(); |
||||
|
this.initPick(this.data.config || null); |
||||
|
this.setData({ |
||||
|
startValue: this.data.startValue, |
||||
|
endValue: this.data.endValue, |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
}, |
||||
|
/** |
||||
|
* 组件的方法列表 |
||||
|
*/ |
||||
|
methods: { |
||||
|
//阻止滑动事件
|
||||
|
onCatchTouchMove(e) { |
||||
|
|
||||
|
}, |
||||
|
//读取配置项
|
||||
|
readConfig() { |
||||
|
let limitEndTime = new Date().getTime(); |
||||
|
let limitStartTime = new Date().getTime() - 1000 * 60 * 60 * 24 * 30; |
||||
|
if (this.data.config) { |
||||
|
let conf = this.data.config; |
||||
|
|
||||
|
if (typeof conf.dateLimit == "number") { |
||||
|
limitStartTime = |
||||
|
new Date().getTime() - 1000 * 60 * 60 * 24 * conf.dateLimit; |
||||
|
} |
||||
|
if (conf.limitStartTime) { |
||||
|
|
||||
|
limitStartTime = new Date(conf.limitStartTime.replace(/-/g, '/')).getTime(); |
||||
|
} |
||||
|
|
||||
|
if (conf.limitEndTime) { |
||||
|
limitEndTime = new Date(conf.limitEndTime.replace(/-/g, '/')).getTime(); |
||||
|
} |
||||
|
|
||||
|
this.setData({ |
||||
|
yearStart: conf.yearStart || 2000, |
||||
|
yearEnd: conf.yearEnd || 2100, |
||||
|
endDate: conf.endDate || false, |
||||
|
dateLimit: conf.dateLimit || false, |
||||
|
hourColumn: |
||||
|
conf.column == "hour" || |
||||
|
conf.column == "minute" || |
||||
|
conf.column == "second", |
||||
|
minColumn: conf.column == "minute" || conf.column == "second", |
||||
|
secColumn: conf.column == "second" |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
let limitStartTimeArr = formatTime(limitStartTime); |
||||
|
let limitEndTimeArr = formatTime(limitEndTime); |
||||
|
|
||||
|
this.setData({ |
||||
|
limitStartTime, |
||||
|
limitStartTimeArr, |
||||
|
limitEndTime, |
||||
|
limitEndTimeArr |
||||
|
}); |
||||
|
}, |
||||
|
//滚动开始
|
||||
|
handlePickStart: function (e) { |
||||
|
this.setData({ |
||||
|
isPicking: true |
||||
|
}) |
||||
|
}, |
||||
|
//滚动结束
|
||||
|
handlePickEnd: function (e) { |
||||
|
this.setData({ |
||||
|
isPicking: false |
||||
|
}) |
||||
|
}, |
||||
|
onConfirm: function () { |
||||
|
//滚动未结束时不能确认
|
||||
|
if (this.data.isPicking) { return } |
||||
|
let startTime = new Date(this.data.startPickTime.replace(/-/g, "/")); |
||||
|
let endTime = new Date(this.data.endPickTime.replace(/-/g, "/")); |
||||
|
if (startTime <= endTime || !this.data.endDate) { |
||||
|
this.setData({ |
||||
|
startTime, |
||||
|
endTime |
||||
|
}); |
||||
|
let startArr = formatTime(startTime).arr; |
||||
|
let endArr = formatTime(endTime).arr; |
||||
|
let format0 = function (num) { |
||||
|
return num < 10 ? '0' + num : num |
||||
|
} |
||||
|
|
||||
|
let startTimeBack = |
||||
|
startArr[0] + |
||||
|
"-" + |
||||
|
format0(startArr[1]) + |
||||
|
"-" + |
||||
|
format0(startArr[2]) |
||||
|
// +
|
||||
|
// " " +
|
||||
|
// (this.data.hourColumn ? format0(startArr[3]) : "00") +
|
||||
|
// ":" +
|
||||
|
// (this.data.minColumn ? format0(startArr[4]) : "00") +
|
||||
|
// ":" +
|
||||
|
// (this.data.secColumn ? format0(startArr[5]) : "00")
|
||||
|
; |
||||
|
|
||||
|
let endTimeBack = |
||||
|
endArr[0] + |
||||
|
"-" + |
||||
|
format0(endArr[1]) + |
||||
|
"-" + |
||||
|
format0(endArr[2]) |
||||
|
// +
|
||||
|
// " " +
|
||||
|
// (this.data.hourColumn ? format0(endArr[3]) : "00") +
|
||||
|
// ":" +
|
||||
|
// (this.data.minColumn ? format0(endArr[4]) : "00") +
|
||||
|
// ":" +
|
||||
|
// (this.data.secColumn ? format0(endArr[5]) : "00")
|
||||
|
; |
||||
|
|
||||
|
let time = { |
||||
|
startTime: startTimeBack, |
||||
|
endTime: endTimeBack |
||||
|
}; |
||||
|
|
||||
|
//触发自定义事件
|
||||
|
this.triggerEvent("setPickerTime", time); |
||||
|
this.triggerEvent("hidePicker", {}); |
||||
|
} else { |
||||
|
wx.showToast({ |
||||
|
icon: "none", |
||||
|
title: "开始时间必须小于结束时间" |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
hideModal: function () { |
||||
|
|
||||
|
this.triggerEvent("hidePicker", {}); |
||||
|
}, |
||||
|
changeStartDateTime: function (e) { |
||||
|
let val = e.detail.value; |
||||
|
|
||||
|
this.compareTime(val, "start"); |
||||
|
}, |
||||
|
|
||||
|
changeEndDateTime: function (e) { |
||||
|
let val = e.detail.value; |
||||
|
this.compareTime(val, "end"); |
||||
|
}, |
||||
|
//比较时间是否在范围内
|
||||
|
compareTime(val, type) { |
||||
|
let h = val[3] ? this.data.HourList[val[3]] : "00"; |
||||
|
let m = val[4] ? this.data.MinuteList[val[4]] : "00"; |
||||
|
let s = val[5] ? this.data.SecondList[val[5]] : "00"; |
||||
|
let time = |
||||
|
this.data.YearList[val[0]] + |
||||
|
"-" + |
||||
|
this.data.MonthList[val[1]] + |
||||
|
"-" + |
||||
|
this.data.DayList[val[2]] + |
||||
|
" " + |
||||
|
h + |
||||
|
":" + |
||||
|
m + |
||||
|
":" + |
||||
|
s; |
||||
|
|
||||
|
let start = this.data.limitStartTime; |
||||
|
let end = this.data.limitEndTime; |
||||
|
let timeNum = new Date(time.replace(/-/g, '/')).getTime(); |
||||
|
let year, month, day, hour, min, sec, limitDate; |
||||
|
let tempArr = [] |
||||
|
|
||||
|
// if (!this.data.dateLimit){
|
||||
|
// limitDate = [
|
||||
|
// this.data.YearList[val[0]],
|
||||
|
// this.data.MonthList[val[1]],
|
||||
|
// this.data.DayList[val[2]],
|
||||
|
// this.data.HourList[val[3]],
|
||||
|
// this.data.MinuteList[val[4]],
|
||||
|
// this.data.SecondList[val[5]]]
|
||||
|
// } else if (type == "start" && timeNum > new Date(this.data.endPickTime.replace(/-/g, '/')) && this.data.config.endDate) {
|
||||
|
// limitDate = formatTime(this.data.endPickTime).arr;
|
||||
|
|
||||
|
// } else if (type == "end" && timeNum < new Date(this.data.startPickTime.replace(/-/g, '/'))) {
|
||||
|
// limitDate = formatTime(this.data.startPickTime).arr;
|
||||
|
|
||||
|
// } else if (timeNum < start) {
|
||||
|
// limitDate = this.data.limitStartTimeArr.arr;
|
||||
|
|
||||
|
// } else if (timeNum > end) {
|
||||
|
// limitDate = this.data.limitEndTimeArr.arr;
|
||||
|
|
||||
|
// } else {
|
||||
|
// limitDate = [
|
||||
|
// this.data.YearList[val[0]],
|
||||
|
// this.data.MonthList[val[1]],
|
||||
|
// this.data.DayList[val[2]],
|
||||
|
// this.data.HourList[val[3]],
|
||||
|
// this.data.MinuteList[val[4]],
|
||||
|
// this.data.SecondList[val[5]]
|
||||
|
// ]
|
||||
|
|
||||
|
// }
|
||||
|
|
||||
|
if (!this.data.dateLimit) { |
||||
|
limitDate = [ |
||||
|
this.data.YearList[val[0]], |
||||
|
this.data.MonthList[val[1]], |
||||
|
this.data.DayList[val[2]], |
||||
|
this.data.HourList[val[3]], |
||||
|
this.data.MinuteList[val[4]], |
||||
|
this.data.SecondList[val[5]]] |
||||
|
} else { |
||||
|
limitDate = [ |
||||
|
this.data.YearList[val[0]], |
||||
|
this.data.MonthList[val[1]], |
||||
|
this.data.DayList[val[2]], |
||||
|
this.data.HourList[val[3]], |
||||
|
this.data.MinuteList[val[4]], |
||||
|
this.data.SecondList[val[5]] |
||||
|
] |
||||
|
|
||||
|
} |
||||
|
|
||||
|
year = limitDate[0]; |
||||
|
month = limitDate[1]; |
||||
|
day = limitDate[2]; |
||||
|
hour = limitDate[3]; |
||||
|
min = limitDate[4]; |
||||
|
sec = limitDate[5]; |
||||
|
|
||||
|
if (type == "start") { |
||||
|
this.setStartDate(year, month, day, hour, min, sec); |
||||
|
} else if (type == "end") { |
||||
|
this.setEndDate(year, month, day, hour, min, sec); |
||||
|
} |
||||
|
}, |
||||
|
getDays: function (year, month) { |
||||
|
let daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; |
||||
|
if (month === 2) { |
||||
|
return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0 |
||||
|
? 29 |
||||
|
: 28; |
||||
|
} else { |
||||
|
return daysInMonth[month - 1]; |
||||
|
} |
||||
|
}, |
||||
|
initPick: function (initData) { |
||||
|
const date = initData.initStartTime ? new Date(initData.initStartTime.replace(/-/g, '/')) : new Date(); |
||||
|
const endDate = initData.initEndTime ? new Date(initData.initEndTime.replace(/-/g, '/')) : new Date(); |
||||
|
// const startDate = new Date(date.getTime() - 1000 * 60 * 60 * 24);
|
||||
|
const startDate = date; |
||||
|
const startYear = date.getFullYear(); |
||||
|
const startMonth = date.getMonth() + 1; |
||||
|
const startDay = date.getDate(); |
||||
|
const startHour = date.getHours(); |
||||
|
const startMinute = date.getMinutes(); |
||||
|
const startSecond = date.getSeconds(); |
||||
|
|
||||
|
const endYear = endDate.getFullYear(); |
||||
|
const endMonth = endDate.getMonth() + 1; |
||||
|
const endDay = endDate.getDate(); |
||||
|
const endHour = endDate.getHours(); |
||||
|
const endMinute = endDate.getMinutes(); |
||||
|
const endSecond = endDate.getSeconds(); |
||||
|
|
||||
|
let YearList = []; |
||||
|
let MonthList = []; |
||||
|
let DayList = []; |
||||
|
let HourList = []; |
||||
|
let MinuteList = []; |
||||
|
let SecondList = []; |
||||
|
|
||||
|
//设置年份列表
|
||||
|
for (let i = this.data.yearStart; i <= this.data.yearEnd; i++) { |
||||
|
YearList.push(i); |
||||
|
} |
||||
|
|
||||
|
// 设置月份列表
|
||||
|
for (let i = 1; i <= 12; i++) { |
||||
|
MonthList.push(i); |
||||
|
} |
||||
|
// 设置日期列表
|
||||
|
for (let i = 1; i <= 31; i++) { |
||||
|
DayList.push(i); |
||||
|
} |
||||
|
// 设置时列表
|
||||
|
for (let i = 0; i <= 23; i++) { |
||||
|
if (0 <= i && i < 10) { |
||||
|
i = "0" + i; |
||||
|
} |
||||
|
HourList.push(i); |
||||
|
} |
||||
|
// 分|秒
|
||||
|
for (let i = 0; i <= 59; i++) { |
||||
|
if (0 <= i && i < 10) { |
||||
|
i = "0" + i; |
||||
|
} |
||||
|
MinuteList.push(i); |
||||
|
SecondList.push(i); |
||||
|
} |
||||
|
|
||||
|
this.setData({ |
||||
|
YearList, |
||||
|
MonthList, |
||||
|
DayList, |
||||
|
HourList, |
||||
|
MinuteList, |
||||
|
SecondList |
||||
|
}); |
||||
|
|
||||
|
this.setStartDate(startYear, startMonth, startDay, startHour, startMinute, startSecond); |
||||
|
this.setEndDate(endYear, endMonth, endDay, endHour, endMinute, endSecond); |
||||
|
|
||||
|
//!!!
|
||||
|
// setTimeout(() => {
|
||||
|
// this.setStartDate(nowYear, nowMonth, nowDay, nowHour, nowMinute)
|
||||
|
// this.setEndDate(nowYear, nowMonth, nowDay, nowHour, nowMinute)
|
||||
|
// }, 0);
|
||||
|
}, |
||||
|
setPickerDateArr(type, year, month, day, hour, minute, second) { |
||||
|
let yearIdx = 0; |
||||
|
let monthIdx = 0; |
||||
|
let dayIdx = 0; |
||||
|
let hourIdx = 0; |
||||
|
let minuteIdx = 0; |
||||
|
let secondIdx = 0; |
||||
|
|
||||
|
this.data.YearList.map((v, idx) => { |
||||
|
if (parseInt(v) === year) { |
||||
|
yearIdx = idx; |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
this.data.MonthList.map((v, idx) => { |
||||
|
if (parseInt(v) === month) { |
||||
|
monthIdx = idx; |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 重新设置日期列表
|
||||
|
let DayList = []; |
||||
|
for (let i = 1; i <= this.getDays(year, month); i++) { |
||||
|
DayList.push(i); |
||||
|
} |
||||
|
|
||||
|
DayList.map((v, idx) => { |
||||
|
if (parseInt(v) === day) { |
||||
|
dayIdx = idx; |
||||
|
} |
||||
|
}); |
||||
|
if (type == "start") { |
||||
|
this.setData({ startDayList: DayList }); |
||||
|
} else if (type == "end") { |
||||
|
this.setData({ endDayList: DayList }); |
||||
|
} |
||||
|
|
||||
|
this.data.HourList.map((v, idx) => { |
||||
|
if (parseInt(v) === parseInt(hour)) { |
||||
|
hourIdx = idx; |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
this.data.MinuteList.map((v, idx) => { |
||||
|
if (parseInt(v) === parseInt(minute)) { |
||||
|
minuteIdx = idx; |
||||
|
} |
||||
|
}); |
||||
|
this.data.SecondList.map((v, idx) => { |
||||
|
if (parseInt(v) === parseInt(second)) { |
||||
|
secondIdx = idx; |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
return { |
||||
|
yearIdx, |
||||
|
monthIdx, |
||||
|
dayIdx, |
||||
|
hourIdx, |
||||
|
minuteIdx, |
||||
|
secondIdx |
||||
|
}; |
||||
|
}, |
||||
|
setStartDate: function (year, month, day, hour, minute, second) { |
||||
|
let pickerDateArr = this.setPickerDateArr( |
||||
|
"start", |
||||
|
year, |
||||
|
month, |
||||
|
day, |
||||
|
hour, |
||||
|
minute, |
||||
|
second |
||||
|
); |
||||
|
this.setData({ |
||||
|
startYearList: this.data.YearList, |
||||
|
startMonthList: this.data.MonthList, |
||||
|
// startDayList: this.data.DayList,
|
||||
|
startHourList: this.data.HourList, |
||||
|
startMinuteList: this.data.MinuteList, |
||||
|
startSecondList: this.data.SecondList, |
||||
|
startValue: [ |
||||
|
pickerDateArr.yearIdx, |
||||
|
pickerDateArr.monthIdx, |
||||
|
pickerDateArr.dayIdx, |
||||
|
pickerDateArr.hourIdx, |
||||
|
pickerDateArr.minuteIdx, |
||||
|
pickerDateArr.secondIdx |
||||
|
], |
||||
|
startPickTime: |
||||
|
this.data.YearList[pickerDateArr.yearIdx] + |
||||
|
"-" + |
||||
|
this.data.MonthList[pickerDateArr.monthIdx] + |
||||
|
"-" + |
||||
|
this.data.DayList[pickerDateArr.dayIdx] + |
||||
|
" " + |
||||
|
this.data.HourList[pickerDateArr.hourIdx] + |
||||
|
":" + |
||||
|
this.data.MinuteList[pickerDateArr.minuteIdx] + |
||||
|
":" + |
||||
|
this.data.SecondList[pickerDateArr.secondIdx] |
||||
|
}); |
||||
|
}, |
||||
|
setEndDate: function (year, month, day, hour, minute, second) { |
||||
|
let pickerDateArr = this.setPickerDateArr( |
||||
|
"end", |
||||
|
year, |
||||
|
month, |
||||
|
day, |
||||
|
hour, |
||||
|
minute, |
||||
|
second |
||||
|
); |
||||
|
|
||||
|
this.setData({ |
||||
|
endYearList: this.data.YearList, |
||||
|
endMonthList: this.data.MonthList, |
||||
|
// endDayList: this.data.DayList,
|
||||
|
endHourList: this.data.HourList, |
||||
|
endMinuteList: this.data.MinuteList, |
||||
|
endSecondList: this.data.SecondList, |
||||
|
endValue: [ |
||||
|
pickerDateArr.yearIdx, |
||||
|
pickerDateArr.monthIdx, |
||||
|
pickerDateArr.dayIdx, |
||||
|
pickerDateArr.hourIdx, |
||||
|
pickerDateArr.minuteIdx, |
||||
|
pickerDateArr.secondIdx |
||||
|
], |
||||
|
endPickTime: |
||||
|
this.data.YearList[pickerDateArr.yearIdx] + |
||||
|
"-" + |
||||
|
this.data.MonthList[pickerDateArr.monthIdx] + |
||||
|
"-" + |
||||
|
this.data.DayList[pickerDateArr.dayIdx] + |
||||
|
" " + |
||||
|
this.data.HourList[pickerDateArr.hourIdx] + |
||||
|
":" + |
||||
|
this.data.MinuteList[pickerDateArr.minuteIdx] + |
||||
|
":" + |
||||
|
this.data.SecondList[pickerDateArr.secondIdx] |
||||
|
}); |
||||
|
}, |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
function formatTime(date) { |
||||
|
|
||||
|
if (typeof date == 'string' || 'number') { |
||||
|
try { |
||||
|
date = date.replace(/-/g, '/')//兼容ios
|
||||
|
} catch (error) { |
||||
|
} |
||||
|
date = new Date(date) |
||||
|
} |
||||
|
|
||||
|
const year = date.getFullYear() |
||||
|
const month = date.getMonth() + 1 |
||||
|
const day = date.getDate() |
||||
|
const hour = date.getHours() |
||||
|
const minute = date.getMinutes() |
||||
|
const second = date.getSeconds() |
||||
|
|
||||
|
return { |
||||
|
str: [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':'), |
||||
|
arr: [year, month, day, hour, minute, second] |
||||
|
} |
||||
|
} |
||||
|
function formatNumber(n) { |
||||
|
n = n.toString() |
||||
|
return n[1] ? n : '0' + n |
||||
|
} |
@ -0,0 +1,3 @@ |
|||||
|
{ |
||||
|
"component": true |
||||
|
} |
@ -0,0 +1,75 @@ |
|||||
|
<!--components/timePicker/timePicker.wxml--> |
||||
|
<!-- 自定义时间筛选器 --> |
||||
|
<view hidden="{{!pickerShow}}"> |
||||
|
<view class="picker-container {{pickerShow?'show_picker':'hide_picker'}}" animation="{{animationData}}"> |
||||
|
<!-- 取消 --> |
||||
|
<view class="btn-box" catchtouchmove="onCatchTouchMove"> |
||||
|
<view class="pick_btn" bindtap="hideModal"> |
||||
|
<image src="../../images/approvalCenter/close.svg" class="img-32"></image> |
||||
|
</view> |
||||
|
<!-- <view class='pick_btn' style="color: #6068B2" bindtap="onConfirm">确定</view> --> |
||||
|
</view> |
||||
|
<view class="time-part"> |
||||
|
<view class="left"> |
||||
|
<!-- style="height: {{endDate?'120px':'250px'}};" --> |
||||
|
<picker-view class='sensorTypePicker' indicator-style='height: 35px;' bindchange="changeStartDateTime" |
||||
|
value="{{startValue}}" bindpickstart="handlePickStart" bindpickend="handlePickEnd"> |
||||
|
<picker-view-column style="min-width: 70px;flex-shrink: 0"> |
||||
|
<view class='picker-item' wx:for="{{startYearList}}" wx:key='*this'>{{item}}年</view> |
||||
|
</picker-view-column> |
||||
|
<picker-view-column> |
||||
|
<view class='picker-item' wx:for="{{startMonthList}}" wx:key='*this'>{{item}}月</view> |
||||
|
</picker-view-column> |
||||
|
<picker-view-column> |
||||
|
<view class='picker-item' wx:for="{{startDayList}}" wx:key='*this'>{{item}}日</view> |
||||
|
</picker-view-column> |
||||
|
<!-- <picker-view-column hidden="{{!hourColumn}}"> |
||||
|
<view class='picker-item' wx:for="{{startHourList}}" wx:key='*this'>{{item}}时</view> |
||||
|
</picker-view-column> |
||||
|
<picker-view-column hidden="{{!minColumn}}"> |
||||
|
<view class='picker-item' wx:for="{{startMinuteList}}" wx:key='*this'>{{item}}分</view> |
||||
|
</picker-view-column> |
||||
|
<picker-view-column hidden="{{!secColumn}}"> |
||||
|
<view class='picker-item' wx:for="{{startSecondList}}" wx:key='*this'>{{item}}秒</view> |
||||
|
</picker-view-column> --> |
||||
|
</picker-view> |
||||
|
</view> |
||||
|
<view class='to' style='margin-top: 4px;margin-bottom: 4px;'>至</view> |
||||
|
<view class="right"> |
||||
|
<view wx:if="{{endDate}}"> |
||||
|
<picker-view class='sensorTypePicker' indicator-style='height: 35px;' bindchange="changeEndDateTime" |
||||
|
bindpickstart="handlePickStart" bindpickend="handlePickEnd" value="{{endValue}}"> |
||||
|
<picker-view-column style="min-width: 70px;flex-shrink: 0"> |
||||
|
<view class='picker-item' wx:for="{{endYearList}}" wx:key='*this' style="min-width: 70px;">{{item}}年 |
||||
|
</view> |
||||
|
</picker-view-column> |
||||
|
<picker-view-column> |
||||
|
<view class='picker-item' wx:for="{{endMonthList}}" wx:key='*this'>{{item}}月</view> |
||||
|
</picker-view-column> |
||||
|
|
||||
|
|
||||
|
<picker-view-column> |
||||
|
<view class='picker-item' wx:for="{{endDayList}}" wx:key='*this'>{{item}}日</view> |
||||
|
</picker-view-column> |
||||
|
<!-- <picker-view-column hidden="{{!hourColumn}}" > |
||||
|
<view class='picker-item' wx:for="{{endHourList}}" wx:key='*this'>{{item}}时</view> |
||||
|
</picker-view-column> |
||||
|
<picker-view-column hidden="{{!minColumn}}"> |
||||
|
<view class='picker-item' wx:for="{{endMinuteList}}" wx:key='*this'>{{item}}分</view> |
||||
|
</picker-view-column> |
||||
|
<picker-view-column hidden="{{!secColumn}}"> |
||||
|
<view class='picker-item' wx:for="{{startSecondList}}" wx:key='*this'>{{item}}秒</view> |
||||
|
</picker-view-column> --> |
||||
|
</picker-view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
<view class="btn-bottom"> |
||||
|
<button class="bottom-btn" bindtap="onConfirm">确定</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- 遮罩 --> |
||||
|
<view class="sensorType-screen" bindtap="hideModal" catchtouchmove="onCatchTouchMove" |
||||
|
animation="{{animationOpacity}}" /> |
||||
|
</view> |
@ -0,0 +1,133 @@ |
|||||
|
/* components/timePicker/timePicker.wxss */ |
||||
|
|
||||
|
.picker-item { |
||||
|
line-height: 100rpx; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
/* 自定义时间 */ |
||||
|
.picker-container { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
/* justify-content: center; */ |
||||
|
align-items: center; |
||||
|
|
||||
|
width: 100%; |
||||
|
overflow: hidden; |
||||
|
position: fixed; |
||||
|
bottom: -640rpx; |
||||
|
left: 0; |
||||
|
/* height: 0; */ |
||||
|
transition: height 0.5s; |
||||
|
z-index: 2000; |
||||
|
background: white; |
||||
|
border-top: 1px solid #EFEFF4; |
||||
|
} |
||||
|
|
||||
|
.time-part { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
width: 100%; |
||||
|
padding: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.sensorType-screen { |
||||
|
width: 100vw; |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
background: #000; |
||||
|
opacity: 0; |
||||
|
overflow: hidden; |
||||
|
z-index: 1999; |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.left { |
||||
|
width: 40%; |
||||
|
/* border: 1px solid red; */ |
||||
|
} |
||||
|
|
||||
|
.right { |
||||
|
width: 40%; |
||||
|
/* border: 1px solid red; */ |
||||
|
} |
||||
|
|
||||
|
.sensorTypePicker { |
||||
|
height: 250rpx; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
|
||||
|
.picker-item { |
||||
|
line-height: 100rpx; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
font-size: 32rpx; |
||||
|
/* overflow: hidden; */ |
||||
|
} |
||||
|
|
||||
|
.box { |
||||
|
padding: 0 20rpx; |
||||
|
} |
||||
|
|
||||
|
/* 至 */ |
||||
|
.to { |
||||
|
width: 10%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 600; |
||||
|
color: #282828; |
||||
|
/* border: 1px solid #000; */ |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.btn-box { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
align-items: center; |
||||
|
border-bottom: 2rpx solid #eee; |
||||
|
} |
||||
|
|
||||
|
.pick_btn { |
||||
|
padding: 14rpx 30rpx; |
||||
|
color: #ccc; |
||||
|
/* background-color: #159; */ |
||||
|
} |
||||
|
|
||||
|
.show_picker { |
||||
|
height: 320px; |
||||
|
} |
||||
|
|
||||
|
.hide_picker { |
||||
|
height: 0; |
||||
|
} |
||||
|
|
||||
|
.img-32 { |
||||
|
width: 32rpx; |
||||
|
height: 32rpx; |
||||
|
} |
||||
|
|
||||
|
.bottom-btn { |
||||
|
width: 710rpx; |
||||
|
height: 90rpx; |
||||
|
background: #2F54FF; |
||||
|
border-radius: 54px; |
||||
|
line-height: 90rpx; |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 600; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
.btn-bottom { |
||||
|
margin: auto 20rpx 40rpx; |
||||
|
} |
After Width: | Height: | Size: 795 B |
After Width: | Height: | Size: 362 B |
Loading…
Reference in new issue