提交app
This commit is contained in:
guanj
177
components/Cn-timepicker/Cn-timepicker.vue
Normal file
177
components/Cn-timepicker/Cn-timepicker.vue
Normal file
@@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<picker
|
||||
mode="multiSelector"
|
||||
@change="bindPickerChange"
|
||||
@columnchange="handleColumnChange"
|
||||
:value="multiIndex"
|
||||
:range="onlyYear ? yearsArray : multiArray"
|
||||
>
|
||||
<view class="time-season">
|
||||
<text>
|
||||
<text v-if="showMonth">{{ year + '-' + season }} </text>
|
||||
<text v-else-if="year">{{ year + (year ? '年' : '') + (onlyYear ? '' : season) }} </text>
|
||||
<text v-else class="prompt">请选择时间 </text>
|
||||
</text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
yearsMin: {
|
||||
type: Number,
|
||||
default: 5,
|
||||
},
|
||||
yearsMax: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
onlyYear: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
showMonth: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
const now = new Date()
|
||||
this.currentYear = now.getFullYear() // 保存当前年份
|
||||
this.currentMonth = now.getMonth() + 1 // 保存当前月份（1-12）
|
||||
this.currentSeason = Math.ceil(this.currentMonth / 3) // 保存当前季度（1-4）
|
||||
|
||||
const yearArr = this.handleYear()
|
||||
const seasonArr = ['一季度', '二季度', '三季度', '四季度']
|
||||
const monthArr = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
|
||||
return {
|
||||
multiArray: [yearArr, this.showMonth ? monthArr : seasonArr],
|
||||
multiIndex: [this.handleYear(true), 0],
|
||||
yearsArray: [yearArr],
|
||||
year: '',
|
||||
season: '',
|
||||
// 原始完整的时间数组（用于恢复）
|
||||
fullMonthArr: [...monthArr],
|
||||
fullSeasonArr: [...seasonArr]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const now = new Date()
|
||||
this.year = now.getFullYear().toString()
|
||||
const month = now.getMonth() + 1
|
||||
|
||||
// 初始化时就过滤当前年份的时间范围
|
||||
this.updateTimeRange(this.currentYear)
|
||||
|
||||
if (this.showMonth) {
|
||||
this.multiIndex = [5, month - 1]
|
||||
this.season = month < 10 ? `0${month}` : `${month}`
|
||||
} else {
|
||||
let key = 0
|
||||
if (month >= 1 && month <= 3) {
|
||||
key = 0
|
||||
this.season = '一季度'
|
||||
} else if (month >= 4 && month <= 6) {
|
||||
key = 1
|
||||
this.season = '二季度'
|
||||
} else if (month >= 7 && month <= 9) {
|
||||
key = 2
|
||||
this.season = '三季度'
|
||||
} else {
|
||||
key = 3
|
||||
this.season = '四季度'
|
||||
}
|
||||
this.multiIndex = [5, key]
|
||||
}
|
||||
|
||||
this.$emit('timeSeasonC', {
|
||||
year: this.year,
|
||||
season: this.season,
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 处理年份
|
||||
handleYear(nowYearIndex) {
|
||||
let optionsArray = []
|
||||
let years = new Date().getFullYear()
|
||||
for (let i = years - this.yearsMin; i <= years + this.yearsMax; i++) {
|
||||
optionsArray.push(i)
|
||||
}
|
||||
if (nowYearIndex) {
|
||||
return optionsArray.indexOf(years)
|
||||
}
|
||||
return optionsArray
|
||||
},
|
||||
// 列变化事件：切换年份时动态调整时间范围
|
||||
handleColumnChange(e) {
|
||||
// 只有切换第一列（年份列）时才处理
|
||||
if (e.detail.column === 0) {
|
||||
const selectedYear = this.multiArray[0][e.detail.value]
|
||||
// 更新时间范围（月份/季度）
|
||||
this.updateTimeRange(selectedYear)
|
||||
// 修正索引：如果当前选中的时间超出新范围，重置为最后一个选项
|
||||
const timeLength = this.multiArray[1].length
|
||||
if (this.multiIndex[1] >= timeLength) {
|
||||
this.multiIndex[1] = timeLength - 1
|
||||
}
|
||||
}
|
||||
},
|
||||
// 核心：根据选中年份更新时间范围
|
||||
updateTimeRange(selectedYear) {
|
||||
if (this.onlyYear) return // 只选年份时无需处理
|
||||
|
||||
if (selectedYear === this.currentYear) {
|
||||
// 当前年份：只显示到当前月/当前季度
|
||||
if (this.showMonth) {
|
||||
// 过滤月份：只保留1到当前月
|
||||
this.multiArray[1] = this.fullMonthArr.slice(0, this.currentMonth)
|
||||
} else {
|
||||
// 过滤季度：只保留1到当前季度
|
||||
this.multiArray[1] = this.fullSeasonArr.slice(0, this.currentSeason)
|
||||
}
|
||||
} else {
|
||||
// 非当前年份：恢复完整的时间数组
|
||||
this.multiArray[1] = this.showMonth ? [...this.fullMonthArr] : [...this.fullSeasonArr]
|
||||
}
|
||||
},
|
||||
// 确认选择时间
|
||||
bindPickerChange: function (e) {
|
||||
this.multiIndex = e.detail.value
|
||||
|
||||
this.year = this.multiArray[0][this.multiIndex[0]]
|
||||
if (this.onlyYear) {
|
||||
this.$emit('timeSeasonC', { year: this.year })
|
||||
} else {
|
||||
this.season = this.multiArray[1][this.multiIndex[1]]
|
||||
this.$emit('timeSeasonC', {
|
||||
year: this.year,
|
||||
season: this.season,
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 62rpx !important;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
padding: 10rpx 20rpx;
|
||||
line-height: 38rpx;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.time-season {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.prompt {
|
||||
font-size: 24rpx;
|
||||
color: grey;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user