480 lines
12 KiB
Vue
480 lines
12 KiB
Vue
<template>
|
||
<view>
|
||
<view class="long-data-picker">
|
||
<picker-view :value="valueDate" indicator-class="select-line" :immediate-change="true"
|
||
:indicator-style="itemHeight" @change="bindDateChange">
|
||
|
||
<picker-view-column>
|
||
<view class="long-datetime-item" v-for="(item,index) in dates" :key="index">{{item}}</view>
|
||
</picker-view-column>
|
||
|
||
<picker-view-column>
|
||
<view class="long-datetime-item" v-for="(item,index) in hours" :key="index">{{item}}时</view>
|
||
</picker-view-column>
|
||
|
||
<picker-view-column>
|
||
<view class="long-datetime-item" v-for="(item,index) in minutes" :key="index">{{item}}分</view>
|
||
</picker-view-column>
|
||
|
||
</picker-view>
|
||
</view>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import moment from './moment.js' //导入文件
|
||
moment.locale('zh-cn')
|
||
export default {
|
||
name: "long-date",
|
||
props: {
|
||
chooseNum: {
|
||
type: Number,
|
||
default: 30
|
||
},
|
||
defaultTime: {
|
||
type: Date,
|
||
default: null
|
||
}
|
||
|
||
},
|
||
|
||
|
||
|
||
data() {
|
||
return {
|
||
itemHeight: `height: ${uni.upx2px(88)}px;`,
|
||
dates: [],
|
||
hours: [],
|
||
minutes: [],
|
||
formatdates: [],
|
||
currentTimePlus8Hours: null, // 新增属性
|
||
valueDate: [0, 0, 0]
|
||
};
|
||
},
|
||
|
||
computed: {
|
||
//自动计算当前时间
|
||
currentdateindex(nv) {
|
||
console.log(nv)
|
||
if (nv == 0) {
|
||
let h = parseInt(moment().format("HH"))
|
||
this.hours = []
|
||
for (let i = h; i < 24; i++) {
|
||
let str = i;
|
||
if (i < 10) {
|
||
str = '0' + str;
|
||
} else {
|
||
str = '' + str;
|
||
}
|
||
this.hours.push(str);
|
||
}
|
||
this.minutes = []
|
||
let m = parseInt(moment().format("mm"))
|
||
for (let i = 0; i < 60; i++) {
|
||
let str = i;
|
||
if (i < 10) {
|
||
str = '0' + str;
|
||
} else {
|
||
str = '' + str;
|
||
}
|
||
this.minutes.push(str);
|
||
}
|
||
}
|
||
}
|
||
|
||
},
|
||
mounted() {
|
||
// 获取当前时间
|
||
this.currentTime = new Date();
|
||
// 计算当前时间加8小时
|
||
this.currentTimePlus8Hours = new Date(this.currentTime);
|
||
this.currentTimePlus8Hours.setHours(this.currentTime.getHours());
|
||
|
||
// 使用传入的默认时间或当前时间加8小时作为基准
|
||
const baseTime = this.defaultTime || this.currentTimePlus8Hours;
|
||
this.initDate(baseTime);
|
||
// // 计算当前时间加8小时
|
||
// const now = new Date();
|
||
// now.setHours(now.getHours() + 8);
|
||
// this.currentTimePlus8Hours = now;
|
||
// this.initDate();
|
||
},
|
||
methods: {
|
||
//初始化时间
|
||
initDate(baseTime) {
|
||
// 设置日期数组
|
||
this.dates = [];
|
||
this.formatdates = [];
|
||
|
||
// 生成日期选项（从今天开始）
|
||
for (let i = 0; i <= this.chooseNum; i++) {
|
||
const date = moment(baseTime).add(i, 'days');
|
||
this.formatdates.push(date.format("YYYY-MM-DD"));
|
||
this.dates.push(date.format("MMMDo dddd"));
|
||
}
|
||
|
||
// 设置时间选项
|
||
this.updateTimeColumns(baseTime);
|
||
|
||
// 使用$nextTick确保DOM更新后再设置默认值
|
||
setTimeout(() => {
|
||
this.setDefaultValueDate();
|
||
}, 300)
|
||
},
|
||
|
||
// 设置默认选中当前时间+8小时的选项
|
||
setDefaultValueDate() {
|
||
const now = new Date();
|
||
// 计算当前时间+8小时的小时值
|
||
let targetHourStr = now.getHours() + 8;
|
||
if (targetHourStr >= 24) {
|
||
targetHourStr -= 24;
|
||
}
|
||
console.log(this.hours);
|
||
console.log(targetHourStr);
|
||
|
||
let targetDayStr = now.getDay();
|
||
console.log('targetDayStr',targetDayStr);
|
||
if (targetHourStr >= 24) {
|
||
// targetHourStr -= 24;
|
||
this.valueDate = [0, 0, 0];
|
||
}
|
||
|
||
// 在hours数组中查找对应的索引
|
||
const hourIndex = this.hours.findIndex(hour => hour == targetHourStr);
|
||
console.log(hourIndex);
|
||
// 设置valueDate，日期和分钟保持默认索引0，只设置小时索引
|
||
if (hourIndex !== -1) {
|
||
this.valueDate = [0, hourIndex, 0];
|
||
} else {
|
||
// 如果找不到对应小时（比如当前时间+8小时超过了今天的可选范围），保持默认
|
||
this.valueDate = [0, 0, 0];
|
||
}
|
||
},
|
||
|
||
updateTimeColumns(selectedDate) {
|
||
const isToday = moment(selectedDate).isSame(this.currentTime, 'day');
|
||
const now = new Date();
|
||
|
||
// 如果是今天，小时从当前小时开始
|
||
if (isToday) {
|
||
// let currentHour = now.getHours() + 8;
|
||
let currentHour = now.getHours();
|
||
let currentMinute = now.getMinutes();
|
||
|
||
// 生成小时选项（从当前小时到23）
|
||
this.hours = [];
|
||
|
||
for (let i = currentHour; i < 24; i++) {
|
||
this.hours.push(i.toString().padStart(2, '0'));
|
||
}
|
||
|
||
// 生成分钟选项（如果是当前小时，分钟从当前分钟开始；否则从0开始）
|
||
this.minutes = [];
|
||
for (let i = currentMinute; i < 60; i++) {
|
||
this.minutes.push(i.toString().padStart(2, '0'));
|
||
}
|
||
// let startMinute = (i === currentHour) ? currentMinute : 0;
|
||
// for (let i = 0; i < 60; i++) {
|
||
// this.minutes.push(i.toString().padStart(2, '0'));
|
||
// }
|
||
} else {
|
||
// 如果不是今天，小时和分钟都从0开始
|
||
this.hours = [];
|
||
|
||
for (let i = 0; i < 24; i++) {
|
||
this.hours.push(i.toString().padStart(2, '0'));
|
||
}
|
||
|
||
this.minutes = [];
|
||
for (let i = 0; i < 60; i++) {
|
||
this.minutes.push(i.toString().padStart(2, '0'));
|
||
}
|
||
}
|
||
},
|
||
|
||
bindDateChange(e) {
|
||
let valueArr = e.detail.value;
|
||
const selectedDate = this.formatdates[valueArr[0]];
|
||
const isToday = moment(selectedDate).isSame(this.currentTime, 'day');
|
||
|
||
// 更新时间列
|
||
this.updateTimeColumns(selectedDate);
|
||
|
||
// 获取选择的时间
|
||
let dateStr = this.formatdates[valueArr[0]];
|
||
let hourStr = this.hours[valueArr[1]];
|
||
let minuteStr = this.minutes[valueArr[2]];
|
||
|
||
// 验证时间是否在当前时间之后
|
||
const selectedTime = new Date(`${dateStr} ${hourStr}:${minuteStr}`);
|
||
if (selectedTime < this.currentTime) {
|
||
uni.showToast({
|
||
title: '不能选择过去的时间',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 验证时间是否在当前时间8小时之内
|
||
if (selectedTime < this.currentTimePlus8Hours) {
|
||
// 允许选择，不做任何处理
|
||
}
|
||
|
||
// 触发事件
|
||
this.$emit("select", {
|
||
time: moment(`${dateStr} ${hourStr}:${minuteStr}`).format("YYYY-MM-DD HH:mm")
|
||
});
|
||
}
|
||
|
||
|
||
// initDate() {
|
||
// const baseTime = this.defaultTime || new Date();
|
||
// // 使用 currentTimePlus8Hours 作为基准时间
|
||
// const currentdate = moment(this.currentTimePlus8Hours).format("MMM Do");
|
||
|
||
// // 设置日期数组
|
||
// this.dates = [];
|
||
// this.formatdates = [];
|
||
|
||
// for (let i = 0; i <= this.chooseNum; i++) {
|
||
// this.formatdates.push(moment(baseTime).add(i, 'days').format("YYYY-MM-DD"));
|
||
// this.dates.push(moment(baseTime).add(i, 'days').format("MMMDo dddd"));
|
||
// }
|
||
|
||
// // 设置小时数组（从当前时间加8小时的小时开始）
|
||
// let h = parseInt(moment(this.currentTimePlus8Hours).format("HH"));
|
||
// this.hours = [];
|
||
// for (let i = h; i < 24; i++) {
|
||
// let str = i;
|
||
// if (i < 10) {
|
||
// str = '0' + str;
|
||
// } else {
|
||
// str = '' + str;
|
||
// }
|
||
// this.hours.push(str);
|
||
// }
|
||
|
||
// // 设置分钟数组（从0开始）
|
||
// this.minutes = [];
|
||
// let m = parseInt(moment(this.currentTimePlus8Hours).format("mm"));
|
||
// for (let i = 0; i < 60; i++) {
|
||
// let str = i;
|
||
// if (i < 10) {
|
||
// str = '0' + str;
|
||
// } else {
|
||
// str = '' + str;
|
||
// }
|
||
// this.minutes.push(str);
|
||
// }
|
||
// },
|
||
|
||
|
||
// // initDate() {
|
||
// // let currentdate = moment().format("MMM Do");
|
||
// // //设置日期数组
|
||
// // this.dates = []
|
||
// // //格式化日期数组
|
||
// // this.formatdates = []
|
||
|
||
|
||
// // for (let i = 0; i <= this.chooseNum; i++) {
|
||
// // this.formatdates.push(moment().add(i, 'days').format("YYYY-MM-DD"))
|
||
// // this.dates.push(moment().add(i, 'days').format("MMMDo dddd"))
|
||
// // }
|
||
|
||
// // let h = parseInt(moment().format("HH"))
|
||
// // this.hours = []
|
||
// // for (let i = h; i < 24; i++) {
|
||
// // let str = i;
|
||
// // if (i < 10) {
|
||
// // str = '0' + str;
|
||
// // } else {
|
||
// // str = '' + str;
|
||
// // }
|
||
// // this.hours.push(str);
|
||
// // }
|
||
// // this.minutes = []
|
||
// // let m = parseInt(moment().format("mm"))
|
||
// // console.log(m);
|
||
// // for (let i = 0; i < 60; i++) {
|
||
// // let str = i;
|
||
// // if (i < 10) {
|
||
// // str = '0' + str;
|
||
// // } else {
|
||
// // str = '' + str;
|
||
// // }
|
||
// // this.minutes.push(str);
|
||
// // }
|
||
|
||
// // },
|
||
|
||
|
||
|
||
|
||
|
||
// //滚动切换时间
|
||
// bindDateChange(e) { //有效日期的滚动日期时间方法
|
||
// let valueArr = e.detail.value;
|
||
// this.hours = [];
|
||
// this.minutes = [];
|
||
|
||
// if (valueArr[0] != 0) {
|
||
// // 如果不是今天，小时从0开始
|
||
// for (let i = 0; i < 24; i++) {
|
||
// let str = i;
|
||
// if (i < 10) {
|
||
// str = '0' + str;
|
||
// } else {
|
||
// str = '' + str;
|
||
// }
|
||
// this.hours.push(str);
|
||
// }
|
||
// // 分钟从0开始
|
||
// for (let i = 0; i < 60; i++) {
|
||
// let str = i;
|
||
// if (i < 10) {
|
||
// str = '0' + str;
|
||
// } else {
|
||
// str = '' + str;
|
||
// }
|
||
// this.minutes.push(str);
|
||
// }
|
||
// } else {
|
||
// // 如果是今天，小时从当前时间加8小时的小时开始
|
||
// let h = parseInt(moment(this.currentTimePlus8Hours).format("HH"));
|
||
// this.hours = [];
|
||
// for (let i = h; i < 24; i++) {
|
||
// let str = i;
|
||
// if (i < 10) {
|
||
// str = '0' + str;
|
||
// } else {
|
||
// str = '' + str;
|
||
// }
|
||
// this.hours.push(str);
|
||
// }
|
||
|
||
// // 分钟从0开始
|
||
// this.minutes = [];
|
||
// let m = parseInt(moment(this.currentTimePlus8Hours).format("mm"));
|
||
// for (let i = 0; i < 60; i++) {
|
||
// let str = i;
|
||
// if (i < 10) {
|
||
// str = '0' + str;
|
||
// } else {
|
||
// str = '' + str;
|
||
// }
|
||
// this.minutes.push(str);
|
||
// }
|
||
// }
|
||
|
||
// let dateStr = this.formatdates[valueArr[0]];
|
||
// let hourStr = this.hours[valueArr[1]];
|
||
// let minuteStr = this.minutes[valueArr[2]];
|
||
// console.log(dateStr + ' ' + hourStr + ':' + minuteStr);
|
||
// this.$emit("select", {
|
||
// time: moment(dateStr + ' ' + hourStr + ':' + minuteStr).format("YYYY-MM-DD HH:mm")
|
||
// });
|
||
|
||
|
||
// },
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.long-data {
|
||
margin-top: 30rpx;
|
||
height: 80rpx;
|
||
background: #FFFFFF;
|
||
line-height: 80rpx;
|
||
padding-left: 30rpx;
|
||
padding-right: 30rpx;
|
||
border-bottom: 1px solid #eee;
|
||
/* position: relative; */
|
||
}
|
||
|
||
.long-data-check {
|
||
height: 40rpx;
|
||
width: 100%;
|
||
background: #e54d42;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 18rpx;
|
||
color: #fff;
|
||
line-height: 45rpx;
|
||
border-radius: 0rpx;
|
||
padding: 0px 20rpx;
|
||
font-size: 20rpx;
|
||
text-align: center;
|
||
border-radius: 20rpx;
|
||
|
||
}
|
||
|
||
.long-data-check-triangle {
|
||
width: 0;
|
||
height: 0;
|
||
border-top: 12rpx solid transparent;
|
||
border-left: 10rpx solid #e54d42;
|
||
border-bottom: 12rpx solid transparent;
|
||
position: absolute;
|
||
right: 223rpx;
|
||
top: 26rpx;
|
||
|
||
|
||
}
|
||
|
||
|
||
.long-data-fl {
|
||
float: left;
|
||
}
|
||
|
||
.long-data-fr {
|
||
float: right;
|
||
}
|
||
|
||
.long-data-changeTime {
|
||
color: #888;
|
||
font-size: 25rpx;
|
||
position: relative;
|
||
text-align: right;
|
||
padding: 0rpx 20rpx;
|
||
}
|
||
|
||
.long-data-changeTimeIcon {
|
||
color: #888;
|
||
}
|
||
|
||
.long-data-picker {
|
||
width: 100%;
|
||
height: 700rpx;
|
||
overflow: hidden;
|
||
background: #fff;
|
||
transition: height 0.3s;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.long-datetime-item {
|
||
text-align: center;
|
||
width: 100%;
|
||
height: 88upx;
|
||
line-height: 88upx;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
font-size: 30upx;
|
||
}
|
||
|
||
.long-data-picker picker-view {
|
||
height: 100%;
|
||
}
|
||
|
||
// 修改原有的上下边框颜色
|
||
::v-deep .select-line::after {
|
||
border-bottom: 3px solid #0CA013;
|
||
}
|
||
|
||
::v-deep .select-line::before {
|
||
border-top: 3px solid #0CA013;
|
||
}
|
||
</style> |