430 lines
12 KiB
Vue
430 lines
12 KiB
Vue
<template>
|
||
<uni-popup ref="popup" type="bottom" border-radius="20rpx 20rpx 0 0" background-color="#fff" style="z-index: 20000">
|
||
<!-- 时间选择滚轮 -->
|
||
<view class="region-body">
|
||
<image class="region-body__close" @click="close"
|
||
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/693c54b5-f5a5-4aa0-8d7b-6123250f9839">
|
||
</image>
|
||
<view class="region-body__header"> 请选择时间段 </view>
|
||
<picker-view v-model="pickerValue" @change="handleTimeChange" class="picker-scroll"
|
||
:indicator-style="indicatorStyle" immediate-change>
|
||
<picker-view-column v-if="pickerShowList[0]">
|
||
<view class="picker-item" v-for="(year, index) in years" :key="index">
|
||
{{ year }}年
|
||
</view>
|
||
</picker-view-column>
|
||
<picker-view-column v-if="pickerShowList[1]">
|
||
<view class="picker-item" v-for="(month, index) in months" :key="index">
|
||
{{ month }}月
|
||
</view>
|
||
</picker-view-column>
|
||
<picker-view-column v-if="pickerShowList[2]">
|
||
<view class="picker-item" v-for="(date, index) in dates[pickerValue[0]][pickerValue[1]]"
|
||
:key="index">
|
||
{{ date }}日
|
||
</view>
|
||
</picker-view-column>
|
||
<picker-view-column v-if="pickerShowList[3]">
|
||
<view class="picker-item" v-for="(hour, index) in hours" :key="index">
|
||
{{ hour }}时
|
||
</view>
|
||
</picker-view-column>
|
||
<picker-view-column v-if="pickerShowList[4]">
|
||
<view class="picker-item" v-for="(minute, index) in minutes" :key="index">
|
||
{{ minute }}分
|
||
</view>
|
||
</picker-view-column>
|
||
</picker-view>
|
||
<view class="region-body__btn" :class="{'noSure':timeCompareComputed}" @tap="confirmTime">确认
|
||
{{ `(${formatTime})` }}
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
sureTime: null,
|
||
default_times: "",
|
||
business_time: "",
|
||
indicatorStyle: "height: 68rpx;",
|
||
pickerValue: [0, 0, 0, 0, 0],
|
||
pickerShowList: [1, 1, 1, 1, 1],
|
||
years: [],
|
||
months: Array.from({
|
||
length: 12
|
||
}, (_, i) => i + 1),
|
||
dates: [],
|
||
hours: Array.from({
|
||
length: 24
|
||
}, (_, i) => i),
|
||
minutes: Array.from({
|
||
length: 60
|
||
}, (_, i) => i),
|
||
};
|
||
},
|
||
props: {
|
||
value: String,
|
||
timeIndex: {
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
timeList: {
|
||
type: Array,
|
||
},
|
||
type: {
|
||
type: String,
|
||
default: 'datetimerange', //datetimerange:年月日时分；daterange：年月日;yearMonth年月；
|
||
},
|
||
startYear:{
|
||
type: Number,
|
||
default: 1980,
|
||
},
|
||
endDistanceYear:{
|
||
type: Number,
|
||
default: 20,//结束时间，与当前时间点相距的时间
|
||
},
|
||
},
|
||
created() {
|
||
//初始化滑块显示行数
|
||
if (this.type == 'datetimerange') {
|
||
this.pickerShowList = [1, 1, 1, 1, 1]
|
||
this.pickerValue = [0, 0, 0, 0, 0]
|
||
} else if (this.type == 'daterange') {
|
||
this.pickerShowList = [1, 1, 1]
|
||
this.pickerValue = [0, 0, 0]
|
||
} else if (this.type == 'yearMonth') {
|
||
this.pickerShowList = [1, 1]
|
||
this.pickerValue = [0, 0]
|
||
}
|
||
//初始化时间数组
|
||
this.setTimesList();
|
||
},
|
||
computed: {
|
||
//获取当月最大天数
|
||
formatTime() {
|
||
if (this.type == 'datetimerange') {
|
||
// 将“/”替换为“-”，并保持时间补零逻辑
|
||
this.sureTime = `${this.years[this.pickerValue[0]]}-${this.months[
|
||
this.pickerValue[1]
|
||
]
|
||
.toString()
|
||
.padStart(2, "0")}-${this.dates[this.pickerValue[0]][
|
||
this.pickerValue[1]
|
||
][this.pickerValue[2]]
|
||
?.toString()
|
||
.padStart(2, "0")} ${this.hours[this.pickerValue[3]]
|
||
.toString()
|
||
.padStart(2, "0")}:${this.minutes[this.pickerValue[4]]
|
||
.toString()
|
||
.padStart(2, "0")}:00`;
|
||
} else if (this.type == 'daterange') {
|
||
this.sureTime = `${this.years[this.pickerValue[0]]}-${this.months[
|
||
this.pickerValue[1]
|
||
]
|
||
.toString()
|
||
.padStart(2, "0")}-${this.dates[this.pickerValue[0]][
|
||
this.pickerValue[1]
|
||
][this.pickerValue[2]]
|
||
?.toString()
|
||
.padStart(2, "0")}`;
|
||
} else if (this.type == 'yearMonth') {
|
||
this.sureTime = `${this.years[this.pickerValue[0]]}-${this.months[
|
||
this.pickerValue[1]
|
||
]
|
||
.toString()
|
||
.padStart(2, "0")}`;
|
||
}
|
||
return this.sureTime;
|
||
},
|
||
timeCompareComputed() {
|
||
if ((this.timeIndex == 0 && this.timeList[1]) || (this.timeIndex == 1 && this.timeList[0]) && this
|
||
.formatTime) {
|
||
if (this.timeIndex == 0) {
|
||
// 开始时间
|
||
if (!this.timeCompare(this.formatTime, this.timeList[1])) {
|
||
return true;
|
||
} else {
|
||
return false;
|
||
}
|
||
} else {
|
||
// 结束时间
|
||
if (!this.timeCompare(this.timeList[0], this.formatTime)) {
|
||
return true;
|
||
} else {
|
||
return false;
|
||
}
|
||
}
|
||
}
|
||
},
|
||
},
|
||
watch: {
|
||
value: {
|
||
handler(newVal) {
|
||
if (newVal) {
|
||
this.setPickerValue();
|
||
}
|
||
},
|
||
immediate: true,
|
||
},
|
||
},
|
||
methods: {
|
||
setTimesList() {
|
||
// 初始化时间数组
|
||
const currentYear = new Date().getFullYear();
|
||
const startYear = this.startYear; // 开始年份
|
||
const endYear = currentYear + this.endDistanceYear; // 结束年份
|
||
const yearCount = endYear - startYear + 1; // 总年数
|
||
|
||
for (let i = 0; i < yearCount; i++) {
|
||
const year = startYear + i;
|
||
this.years.push(year);
|
||
this.dates[i] = [];
|
||
for (let n = 1; n <= 12; n++) {
|
||
let num = this.getMonthDay(year, n); // 使用当前循环的年份计算天数
|
||
this.dates[i][n - 1] = Array.from({
|
||
length: num
|
||
},
|
||
(_, idx) => idx + 1
|
||
);
|
||
}
|
||
}
|
||
|
||
// 无value时设置默认当前时间
|
||
if (!this.value) {
|
||
this.setDefaultPickerValue();
|
||
}
|
||
},
|
||
|
||
// 新增：设置默认当前时间的索引
|
||
setDefaultPickerValue() {
|
||
const now = new Date();
|
||
const currentYear = now.getFullYear();
|
||
const currentMonth = now.getMonth() + 1; // 转换为1-12
|
||
const currentDate = now.getDate();
|
||
const currentHour = now.getHours();
|
||
const currentMinute = now.getMinutes();
|
||
|
||
// 计算各维度索引
|
||
const yearIndex = this.years.findIndex(y => y === currentYear);
|
||
const monthIndex = this.months.findIndex(m => m === currentMonth);
|
||
const dayIndex = this.dates[yearIndex]?.[monthIndex]?.findIndex(d => d === currentDate) ?? 0;
|
||
const hourIndex = this.hours.findIndex(h => h === currentHour);
|
||
const minuteIndex = this.minutes.findIndex(m => m === currentMinute);
|
||
|
||
this.pickerValue = [yearIndex, monthIndex, dayIndex, hourIndex, minuteIndex];
|
||
},
|
||
|
||
setPickerValue() {
|
||
if (this.value) {
|
||
// 统一将输入的日期字符串中的“-”替换为“/”，兼容解析
|
||
const normalizedValue = this.value.replace(/-/g, '/');
|
||
|
||
if (this.type == 'datetimerange') {
|
||
// 解析时间字符串 '2024/05/27 11:31:00'
|
||
const [datePart, timePart] = normalizedValue.split(" ");
|
||
const [year, month, day] = datePart.split("/").map(Number);
|
||
// 时间部分用 : 分隔，取前两位（小时和分钟），忽略秒数
|
||
const [hour, minute] = timePart.split(":").map(Number);
|
||
|
||
// 计算各部分在数组中的索引
|
||
const yearIndex = this.years.findIndex((y) => y === year);
|
||
const monthIndex = this.months.findIndex((m) => m === month);
|
||
const dayIndex = this.dates[yearIndex]?.[monthIndex]?.findIndex((d) => d === day) ?? 0;
|
||
const hourIndex = this.hours.findIndex((h) => h === hour);
|
||
const minuteIndex = this.minutes.findIndex((m) => m === minute);
|
||
|
||
// 设置pickerValue
|
||
this.pickerValue = [
|
||
yearIndex,
|
||
monthIndex,
|
||
dayIndex,
|
||
hourIndex,
|
||
minuteIndex,
|
||
];
|
||
} else if (this.type == 'daterange') {
|
||
// 解析时间字符串 '2024/05/27'
|
||
const [year, month, day] = normalizedValue.split("/").map(Number);
|
||
|
||
// 计算各部分在数组中的索引
|
||
const yearIndex = this.years.findIndex((y) => y === year);
|
||
const monthIndex = this.months.findIndex((m) => m === month);
|
||
const dayIndex = this.dates[yearIndex]?.[monthIndex]?.findIndex((d) => d === day) ?? 0;
|
||
|
||
// 设置pickerValue
|
||
this.pickerValue = [
|
||
yearIndex,
|
||
monthIndex,
|
||
dayIndex,
|
||
];
|
||
} else if (this.type == 'yearMonth') {
|
||
// 解析时间字符串 '2024/05'
|
||
const [year, month] = normalizedValue.split("/").map(Number);
|
||
|
||
// 计算各部分在数组中的索引
|
||
const yearIndex = this.years.findIndex((y) => y === year);
|
||
const monthIndex = this.months.findIndex((m) => m === month);
|
||
|
||
// 设置pickerValue
|
||
this.pickerValue = [
|
||
yearIndex,
|
||
monthIndex
|
||
];
|
||
}
|
||
|
||
}
|
||
},
|
||
getMonthDay(year, month) {
|
||
let days = new Date(year, month, 0).getDate();
|
||
return days;
|
||
},
|
||
// 处理时间变化
|
||
handleTimeChange(e) {
|
||
this.pickerValue = e.detail.value;
|
||
},
|
||
openTimePopup() {
|
||
this.$refs.popup.open();
|
||
},
|
||
close() {
|
||
this.$refs.popup.close();
|
||
},
|
||
// 确认选择
|
||
confirmTime() {
|
||
if ((this.timeIndex == 0 && this.timeList[1]) || (this.timeIndex == 1 && this.timeList[0])) {
|
||
if (this.timeIndex == 0) {
|
||
// 开始时间
|
||
if (!this.timeCompare(this.formatTime, this.timeList[1])) {
|
||
uni.showToast({
|
||
title: "开始时间不能大于结束时间",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
} else {
|
||
// 结束时间
|
||
if (!this.timeCompare(this.timeList[0], this.formatTime)) {
|
||
uni.showToast({
|
||
title: "结束时间不能小于开始时间",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
this.$emit("input", this.sureTime);
|
||
this.$emit("confirmTime", this.sureTime);
|
||
this.$refs.popup.close();
|
||
},
|
||
//比较开始时间结束时间大小
|
||
timeCompare(dateStr1, dateStr2) {
|
||
if (this.timeIndex >= 0) {
|
||
// 处理日期格式：将“-”替换为“/”，纯日期补充为当天0点
|
||
const formatDate = (str) => {
|
||
// 先将所有“-”替换为“/”，兼容iOS解析
|
||
const normalized = str.replace(/-/g, '/');
|
||
// 判断是否包含时间部分（是否有空格）
|
||
if (!normalized.includes(' ')) {
|
||
return normalized + ' 00:00:00'; // 纯日期补全为当天0点
|
||
}
|
||
return normalized;
|
||
};
|
||
|
||
try {
|
||
// 格式化并转换为时间戳
|
||
const time1 = new Date(formatDate(dateStr1)).getTime();
|
||
const time2 = new Date(formatDate(dateStr2)).getTime();
|
||
// 时间戳比较（避免字符串比较的潜在问题）
|
||
return time2 > time1;
|
||
} catch (error) {
|
||
console.error('日期格式错误:', error);
|
||
return false; // 格式错误时返回默认值
|
||
}
|
||
} else {
|
||
return true;
|
||
}
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
/* 样式部分不变 */
|
||
.region-body {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
background: #fff;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
|
||
&__close {
|
||
width: 22rpx;
|
||
height: 22rpx;
|
||
position: absolute;
|
||
top: 44rpx;
|
||
right: 30rpx;
|
||
}
|
||
|
||
&__header {
|
||
padding: 40rpx 0;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
line-height: 45rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
&__btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 690rpx;
|
||
height: 80rpx;
|
||
background: #E8101E;
|
||
border-radius: 38rpx;
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #ffffff;
|
||
line-height: 39rpx;
|
||
text-align: right;
|
||
font-style: normal;
|
||
margin: 0 30rpx;
|
||
}
|
||
|
||
.noSure {
|
||
background-color: #ccc;
|
||
}
|
||
}
|
||
|
||
.region-scroll {
|
||
height: 100%;
|
||
}
|
||
|
||
.picker-scroll {
|
||
height: 400rpx;
|
||
}
|
||
|
||
.picker-item {
|
||
height: 68rpx;
|
||
line-height: 68rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.region-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 24rpx 0;
|
||
border-bottom: 1rpx solid #eeeeee;
|
||
}
|
||
|
||
.region-item.checkbox-item {
|
||
padding: 20rpx 0;
|
||
width: 100%;
|
||
justify-content: flex-start !important;
|
||
align-items: center !important;
|
||
}
|
||
</style> |