feat(event): 移除补丁日历组件，时间抽屉改为自绘滚动日历
- 移除 components/patched-calendar 五件补丁版日历组件与 pages.json 的 up-calendar 映射，恢复使用 uview-plus 原始 up-calendar - 时间抽屉改为自绘：顶置"近 7/30/90 天"快捷范围、星期行 + 月份网格， scroll-view 懒渲染（窗口外月份占位，避免一次渲染 130+ 月） - 滚动驱动懒渲染窗口更新（按 rpx 偏移量差阈值触发） - 最多回溯 10 年，提供按快捷范围点选直接填满起止
This commit is contained in:
parent
ae767adbdf
commit
f5fe717d7d
|
|
@ -1,109 +0,0 @@
|
|||
<template>
|
||||
<view class="u-calendar-header u-border-bottom">
|
||||
<text
|
||||
class="u-calendar-header__title"
|
||||
v-if="showTitle"
|
||||
>{{ title }}</text>
|
||||
<text
|
||||
class="u-calendar-header__subtitle"
|
||||
v-if="showSubtitle"
|
||||
>{{ subtitle }}</text>
|
||||
<view class="u-calendar-header__weekdays">
|
||||
<text class="u-calendar-header__weekdays__weekday">{{ weekText[0] }}</text>
|
||||
<text class="u-calendar-header__weekdays__weekday">{{ weekText[1] }}</text>
|
||||
<text class="u-calendar-header__weekdays__weekday">{{ weekText[2] }}</text>
|
||||
<text class="u-calendar-header__weekdays__weekday">{{ weekText[3] }}</text>
|
||||
<text class="u-calendar-header__weekdays__weekday">{{ weekText[4] }}</text>
|
||||
<text class="u-calendar-header__weekdays__weekday">{{ weekText[5] }}</text>
|
||||
<text class="u-calendar-header__weekdays__weekday">{{ weekText[6] }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mpMixin } from 'uview-plus/libs/mixin/mpMixin';
|
||||
import { mixin } from 'uview-plus/libs/mixin/mixin';
|
||||
export default {
|
||||
name: 'u-calendar-header',
|
||||
mixins: [mpMixin, mixin],
|
||||
props: {
|
||||
// 标题
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 副标题
|
||||
subtitle: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 是否显示标题
|
||||
showTitle: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否显示副标题
|
||||
showSubtitle: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 星期文本
|
||||
weekText: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
name() {
|
||||
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.u-calendar-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 4px;
|
||||
|
||||
&__title {
|
||||
font-size: 16px;
|
||||
color: $u-main-color;
|
||||
text-align: center;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: 14px;
|
||||
color: $u-main-color;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&__weekdays {
|
||||
@include flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&__weekday {
|
||||
font-size: 13px;
|
||||
color: $u-main-color;
|
||||
line-height: 30px;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,632 +0,0 @@
|
|||
<template>
|
||||
<view class="u-calendar-month-wrapper" ref="u-calendar-month-wrapper">
|
||||
<view v-for="(item, index) in months" :key="index" :class="[`u-calendar-month-${index}`]"
|
||||
:ref="`u-calendar-month-${index}`" :id="`month-${index}`">
|
||||
<text v-if="index !== 0" class="u-calendar-month__title">{{ monthTitle(item) }}</text>
|
||||
<view class="u-calendar-month__days">
|
||||
<view v-if="showMark" class="u-calendar-month__days__month-mark-wrapper">
|
||||
<text class="u-calendar-month__days__month-mark-wrapper__text">{{ item.month }}</text>
|
||||
</view>
|
||||
<view class="u-calendar-month__days__day" v-for="(item1, index1) in item.date" :key="index1"
|
||||
:style="[dayStyle(index, index1, item1)]" @tap="clickHandler(index, index1, item1)"
|
||||
:class="[item1.selected && 'u-calendar-month__days__day__select--selected']">
|
||||
<view class="u-calendar-month__days__day__select" :style="[daySelectStyle(index, index1, item1)]">
|
||||
<text class="u-calendar-month__days__day__select__info"
|
||||
:class="[(item1.disabled || isForbid(item1) ) ? 'u-calendar-month__days__day__select__info--disabled' : '']"
|
||||
:style="[textStyle(item1)]">{{ item1.day }}</text>
|
||||
<text v-if="getBottomInfo(index, index1, item1)"
|
||||
class="u-calendar-month__days__day__select__buttom-info"
|
||||
:class="[(item1.disabled || isForbid(item1) ) ? 'u-calendar-month__days__day__select__buttom-info--disabled' : '']"
|
||||
:style="[textStyle(item1)]">{{ getBottomInfo(index, index1, item1) }}</text>
|
||||
<text v-if="item1.dot" class="u-calendar-month__days__day__select__dot"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef APP-NVUE
|
||||
// 由于nvue不支持百分比单位，需要查询宽度来计算每个日期的宽度
|
||||
const dom = uni.requireNativePlugin('dom')
|
||||
// #endif
|
||||
import { mpMixin } from 'uview-plus/libs/mixin/mpMixin';
|
||||
import { mixin } from 'uview-plus/libs/mixin/mixin';
|
||||
import { addUnit, toast, sleep } from 'uview-plus/libs/function/index';
|
||||
import { colorGradient } from 'uview-plus/libs/function/colorGradient';
|
||||
import test from 'uview-plus/libs/function/test';
|
||||
import defProps from 'uview-plus/libs/config/props';
|
||||
import dayjs from 'uview-plus/components/u-datetime-picker/dayjs.esm.min.js';
|
||||
import { t } from 'uview-plus/libs/i18n'
|
||||
export default {
|
||||
name: 'u-calendar-month',
|
||||
mixins: [mpMixin, mixin],
|
||||
props: {
|
||||
// 是否显示月份背景色
|
||||
showMark: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 主题色，对底部按钮和选中日期有效
|
||||
color: {
|
||||
type: String,
|
||||
default: '#3c9cff'
|
||||
},
|
||||
// 月份数据
|
||||
months: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// 日期选择类型
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'single'
|
||||
},
|
||||
// 日期行高
|
||||
rowHeight: {
|
||||
type: [String, Number],
|
||||
default: 58
|
||||
},
|
||||
// mode=multiple时，最多可选多少个日期
|
||||
maxCount: {
|
||||
type: [String, Number],
|
||||
default: Infinity
|
||||
},
|
||||
// mode=range时，第一个日期底部的提示文字
|
||||
startText: {
|
||||
type: String,
|
||||
default: '开始'
|
||||
},
|
||||
// mode=range时，最后一个日期底部的提示文字
|
||||
endText: {
|
||||
type: String,
|
||||
default: '结束'
|
||||
},
|
||||
// 默认选中的日期，mode为multiple或range是必须为数组格式
|
||||
defaultDate: {
|
||||
type: [Array, String, Date],
|
||||
default: null
|
||||
},
|
||||
// 最小的可选日期
|
||||
minDate: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// 最大可选日期
|
||||
maxDate: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// 如果没有设置maxDate，则往后推多少个月
|
||||
maxMonth: {
|
||||
type: [String, Number],
|
||||
default: 2
|
||||
},
|
||||
// 是否为只读状态，只读状态下禁止选择日期
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: () => defProps.calendar.readonly
|
||||
},
|
||||
// 日期区间最多可选天数，默认无限制，mode = range时有效
|
||||
maxRange: {
|
||||
type: [Number, String],
|
||||
default: Infinity
|
||||
},
|
||||
// 范围选择超过最多可选天数时的提示文案，mode = range时有效
|
||||
rangePrompt: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 范围选择超过最多可选天数时，是否展示提示文案，mode = range时有效
|
||||
showRangePrompt: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否允许日期范围的起止时间为同一天，mode = range时有效
|
||||
allowSameDay: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
forbidDays: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
forbidDaysToast: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 每个日期的宽度
|
||||
width: 0,
|
||||
// 当前选中的日期item
|
||||
item: {},
|
||||
selected: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selectedChange: {
|
||||
immediate: true,
|
||||
handler(n) {
|
||||
this.setDefaultDate()
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 多个条件的变化，会引起选中日期的变化，这里统一管理监听
|
||||
selectedChange() {
|
||||
return [this.minDate, this.maxDate, this.defaultDate]
|
||||
},
|
||||
// 性能补丁：选中日期的 O(1) 哈希索引。原实现每次点击要对全部 396+ 个格子
|
||||
// 执行 selected.some(dateSame)（dayjs 逐个比对），复杂度 O(格子数 × 选中天数)，
|
||||
// 选中范围越大越卡。selected 为 YYYY-MM-DD 字符串数组，可直接进 Set。
|
||||
selectedSet() {
|
||||
return new Set(this.selected)
|
||||
},
|
||||
// 性能补丁：range 模式选中区间的时间戳边界，避免每格多次 dayjs 解析比较
|
||||
selectedRange() {
|
||||
if (this.mode === 'range' && this.selected.length >= 2) {
|
||||
const first = this.selected[0]
|
||||
const last = this.selected[this.selected.length - 1]
|
||||
return {
|
||||
first,
|
||||
last,
|
||||
firstTs: dayjs(first).valueOf(),
|
||||
lastTs: dayjs(last).valueOf()
|
||||
}
|
||||
}
|
||||
return null
|
||||
},
|
||||
dayStyle(index1, index2, item) {
|
||||
return (index1, index2, item) => {
|
||||
const style = {}
|
||||
let week = item.week
|
||||
// 不进行四舍五入的形式保留2位小数
|
||||
const dayWidth = Number(parseFloat(this.width / 7).toFixed(3).slice(0, -1))
|
||||
// 得出每个日期的宽度
|
||||
// #ifdef APP-NVUE
|
||||
style.width = addUnit(dayWidth, 'px')
|
||||
// #endif
|
||||
style.height = addUnit(this.rowHeight, 'px')
|
||||
if (index2 === 0) {
|
||||
// 获取当前为星期几，如果为0，则为星期天，减一为每月第一天时，需要向左偏移的item个数
|
||||
week = (week === 0 ? 7 : week) - 1
|
||||
style.marginLeft = addUnit(week * dayWidth, 'px')
|
||||
}
|
||||
if (this.mode === 'range') {
|
||||
// 之所以需要这么写，是因为DCloud公司的iOS客户端导致的bug
|
||||
style.paddingLeft = 0
|
||||
style.paddingRight = 0
|
||||
style.paddingBottom = 0
|
||||
style.paddingTop = 0
|
||||
}
|
||||
return style
|
||||
}
|
||||
},
|
||||
daySelectStyle() {
|
||||
return (index1, index2, item) => {
|
||||
let date = dayjs(item.date).format("YYYY-MM-DD"),
|
||||
style = {}
|
||||
// 判断date是否在selected数组中（哈希查找替代逐个 dayjs 比对）
|
||||
if (this.selectedSet.has(date)) {
|
||||
style.backgroundColor = this.color
|
||||
}
|
||||
if (this.mode === 'single') {
|
||||
if (date === this.selected[0]) {
|
||||
// 因为需要对nvue的兼容，只能这么写，无法缩写，也无法通过类名控制等等
|
||||
style.borderTopLeftRadius = '3px'
|
||||
style.borderBottomLeftRadius = '3px'
|
||||
style.borderTopRightRadius = '3px'
|
||||
style.borderBottomRightRadius = '3px'
|
||||
}
|
||||
} else if (this.mode === 'range') {
|
||||
if (this.selected.length >= 2) {
|
||||
// 第一个日期设置左上角和左下角的圆角
|
||||
if (date === this.selectedRange.first) {
|
||||
style.borderTopLeftRadius = '3px'
|
||||
style.borderBottomLeftRadius = '3px'
|
||||
}
|
||||
// 最后一个日期设置右上角和右下角的圆角
|
||||
if (date === this.selectedRange.last) {
|
||||
style.borderTopRightRadius = '3px'
|
||||
style.borderBottomRightRadius = '3px'
|
||||
}
|
||||
// 处于第一和最后一个之间的日期，背景色设置为浅色（时间戳比较替代 dayjs 对象比较）
|
||||
const ts = dayjs(date).valueOf()
|
||||
if (ts > this.selectedRange.firstTs && ts < this.selectedRange.lastTs) {
|
||||
style.backgroundColor = colorGradient(this.color, '#ffffff', 100)[90]
|
||||
// 增加一个透明度，让范围区间的背景色也能看到底部的mark水印字符
|
||||
style.opacity = 0.7
|
||||
}
|
||||
} else if (this.selected.length === 1) {
|
||||
// 之所以需要这么写，是因为uni-app的iOS客户端的bug
|
||||
// 进行还原操作，否则在nvue的iOS，uni-app有bug，会导致诡异的表现
|
||||
style.borderTopLeftRadius = '3px'
|
||||
style.borderBottomLeftRadius = '3px'
|
||||
}
|
||||
} else {
|
||||
if (this.selectedSet.has(date)) {
|
||||
style.borderTopLeftRadius = '3px'
|
||||
style.borderBottomLeftRadius = '3px'
|
||||
style.borderTopRightRadius = '3px'
|
||||
style.borderBottomRightRadius = '3px'
|
||||
}
|
||||
}
|
||||
return style
|
||||
}
|
||||
},
|
||||
// 某个日期是否被选中
|
||||
textStyle() {
|
||||
return (item) => {
|
||||
const date = dayjs(item.date).format("YYYY-MM-DD"),
|
||||
style = {}
|
||||
// 选中的日期，提示文字设置白色
|
||||
if (this.selectedSet.has(date)) {
|
||||
style.color = '#ffffff'
|
||||
}
|
||||
if (this.mode === 'range' && this.selectedRange) {
|
||||
// 如果是范围选择模式，第一个和最后一个之间的日期，文字颜色设置为高亮的主题色
|
||||
const ts = dayjs(date).valueOf()
|
||||
if (ts > this.selectedRange.firstTs && ts < this.selectedRange.lastTs) {
|
||||
style.color = this.color
|
||||
}
|
||||
}
|
||||
return style
|
||||
}
|
||||
},
|
||||
// 获取底部的提示文字
|
||||
getBottomInfo() {
|
||||
return (index1, index2, item) => {
|
||||
const date = dayjs(item.date).format("YYYY-MM-DD")
|
||||
const bottomInfo = item.bottomInfo
|
||||
// 当为日期范围模式时，且选择的日期个数大于0时
|
||||
if (this.mode === 'range' && this.selected.length > 0) {
|
||||
if (this.selected.length === 1) {
|
||||
// 选择了一个日期时，如果当前日期为数组中的第一个日期，则显示底部文字为“开始”
|
||||
if (date === this.selected[0]) return this.startText
|
||||
else return bottomInfo
|
||||
} else {
|
||||
// 如果数组中的日期大于2个时，第一个和最后一个显示为开始和结束日期
|
||||
if (date === this.selected[0] && date === this.selected[1]) {
|
||||
// 如果长度为2，且第一个等于第二个日期，则提示语放在同一个item中
|
||||
return `${this.startText}/${this.endText}`
|
||||
} else if (date === this.selected[0]) {
|
||||
return this.startText
|
||||
} else if (date === this.selected[this.selected.length - 1]) {
|
||||
return this.endText
|
||||
} else {
|
||||
return bottomInfo
|
||||
}
|
||||
}
|
||||
} else {
|
||||
return bottomInfo
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
emits: ['monthSelected', 'updateMonthTop'],
|
||||
methods: {
|
||||
init() {
|
||||
// 初始化默认选中
|
||||
this.$emit('monthSelected', this.selected)
|
||||
this.$nextTick(() => {
|
||||
// 这里需要另一个延时，因为获取宽度后，会进行月份数据渲染，只有渲染完成之后，才有真正的高度
|
||||
// 因为nvue下，$nextTick并不是100%可靠的
|
||||
sleep(10).then(() => {
|
||||
this.getWrapperWidth()
|
||||
this.getMonthRect()
|
||||
})
|
||||
})
|
||||
},
|
||||
monthTitle(item) {
|
||||
if (uni.getLocale() == 'zh-Hans' || uni.getLocale() == 'zh-Hant') {
|
||||
return item.year + '年' + (item.month < 10 ? '0' + item.month : item.month) + '月'
|
||||
} else {
|
||||
return (item.month < 10 ? '0' + item.month : item.month) + '/' + item.year
|
||||
}
|
||||
},
|
||||
isForbid(item) {
|
||||
let date = dayjs(item.date).format("YYYY-MM-DD")
|
||||
if (this.mode !== 'range' && this.forbidDays.includes(date)) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
// 判断两个日期是否相等
|
||||
dateSame(date1, date2) {
|
||||
return dayjs(date1).isSame(dayjs(date2))
|
||||
},
|
||||
// 获取月份数据区域的宽度，因为nvue不支持百分比，所以无法通过css设置每个日期item的宽度
|
||||
getWrapperWidth() {
|
||||
// #ifdef APP-NVUE
|
||||
dom.getComponentRect(this.$refs['u-calendar-month-wrapper'], res => {
|
||||
this.width = res.size.width
|
||||
})
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
this.$uGetRect('.u-calendar-month-wrapper').then(size => {
|
||||
this.width = size.width
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
getMonthRect() {
|
||||
// 获取每个月份数据的尺寸，用于父组件在scroll-view滚动事件中，监听当前滚动到了第几个月份
|
||||
const promiseAllArr = this.months.map((item, index) => this.getMonthRectByPromise(
|
||||
`u-calendar-month-${index}`))
|
||||
// 一次性返回
|
||||
Promise.all(promiseAllArr).then(
|
||||
sizes => {
|
||||
let height = 1
|
||||
const topArr = []
|
||||
for (let i = 0; i < this.months.length; i++) {
|
||||
// 添加到months数组中，供scroll-view滚动事件中，判断当前滚动到哪个月份
|
||||
topArr[i] = height
|
||||
height += sizes[i].height
|
||||
}
|
||||
// 由于微信下，无法通过this.months[i].top的形式(引用类型)去修改父组件的month的top值，所以使用事件形式对外发出
|
||||
this.$emit('updateMonthTop', topArr)
|
||||
})
|
||||
},
|
||||
// 获取每个月份区域的尺寸
|
||||
getMonthRectByPromise(el) {
|
||||
// #ifndef APP-NVUE
|
||||
// $uGetRect为uView自带的节点查询简化方法，详见文档介绍：https://uview-plus.jiangruyi.com/js/getRect.html
|
||||
// 组件内部一般用this.$uGetRect，对外的为uni.$u.getRect，二者功能一致，名称不同
|
||||
return new Promise(resolve => {
|
||||
this.$uGetRect(`.${el}`).then(size => {
|
||||
resolve(size)
|
||||
})
|
||||
})
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-NVUE
|
||||
// nvue下，使用dom模块查询元素高度
|
||||
// 返回一个promise，让调用此方法的主体能使用then回调
|
||||
return new Promise(resolve => {
|
||||
dom.getComponentRect(this.$refs[el][0], res => {
|
||||
resolve(res.size)
|
||||
})
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
// 点击某一个日期
|
||||
clickHandler(index1, index2, item) {
|
||||
if (this.readonly) {
|
||||
return;
|
||||
}
|
||||
this.item = item
|
||||
const date = dayjs(item.date).format("YYYY-MM-DD")
|
||||
if (item.disabled) return
|
||||
if (this.isForbid(item)) {
|
||||
uni.showToast({
|
||||
title: this.forbidDaysToast
|
||||
})
|
||||
return
|
||||
}
|
||||
// selected 是 YYYY-MM-DD 字符串数组，浅拷贝即可，避免深度克隆的递归开销
|
||||
let selected = this.selected.slice()
|
||||
if (this.mode === 'single') {
|
||||
// 单选情况下，让数组中的元素为当前点击的日期
|
||||
selected = [date]
|
||||
} else if (this.mode === 'multiple') {
|
||||
if (selected.some(item => this.dateSame(item, date))) {
|
||||
// 如果点击的日期已在数组中，则进行移除操作，也就是达到反选的效果
|
||||
const itemIndex = selected.findIndex(item => item === date)
|
||||
selected.splice(itemIndex, 1)
|
||||
} else {
|
||||
// 如果点击的日期不在数组中，且已有的长度小于总可选长度时，则添加到数组中去
|
||||
if (selected.length < this.maxCount) selected.push(date)
|
||||
}
|
||||
} else {
|
||||
// 选择区间形式
|
||||
if (selected.length === 0 || selected.length >= 2) {
|
||||
// 如果原来就为0或者大于2的长度，则当前点击的日期，就是开始日期
|
||||
selected = [date]
|
||||
} else if (selected.length === 1) {
|
||||
// 如果已经选择了开始日期
|
||||
const existsDate = selected[0]
|
||||
// 如果当前选择的日期小于上一次选择的日期，则当前的日期定为开始日期
|
||||
if (dayjs(date).isBefore(existsDate)) {
|
||||
selected = [date]
|
||||
} else if (dayjs(date).isAfter(existsDate)) {
|
||||
// 当前日期减去最大可选的日期天数，如果大于起始时间，则进行提示
|
||||
if(dayjs(dayjs(date).subtract(this.maxRange, 'day')).isAfter(dayjs(selected[0])) && this.showRangePrompt) {
|
||||
if(this.rangePrompt) {
|
||||
toast(this.rangePrompt)
|
||||
} else {
|
||||
toast(t("up.calendar.daysExceed", { days: this.maxRange }))
|
||||
}
|
||||
return
|
||||
}
|
||||
// 如果当前日期大于已有日期，将当前的添加到数组尾部
|
||||
selected.push(date)
|
||||
const startDate = selected[0]
|
||||
const endDate = selected[1]
|
||||
const arr = []
|
||||
let i = 0
|
||||
do {
|
||||
// 将开始和结束日期之间的日期添加到数组中
|
||||
arr.push(dayjs(startDate).add(i, 'day').format("YYYY-MM-DD"))
|
||||
i++
|
||||
// 累加的日期小于结束日期时，继续下一次的循环
|
||||
} while (dayjs(startDate).add(i, 'day').isBefore(dayjs(endDate)))
|
||||
// 为了一次性修改数组，避免computed中多次触发，这里才用arr变量一次性赋值的方式，同时将最后一个日期添加近来
|
||||
arr.push(endDate)
|
||||
selected = arr
|
||||
} else {
|
||||
// 选择区间时，只有一个日期的情况下，且不允许选择起止为同一天的话，不允许选择自己
|
||||
if (selected[0] === date && !this.allowSameDay) return
|
||||
selected.push(date)
|
||||
}
|
||||
}
|
||||
}
|
||||
this.setSelected(selected)
|
||||
},
|
||||
// 设置默认日期
|
||||
setDefaultDate() {
|
||||
if (!this.defaultDate) {
|
||||
// 如果没有设置默认日期，则将当天日期设置为默认选中的日期
|
||||
const selected = [dayjs().format("YYYY-MM-DD")]
|
||||
return this.setSelected(selected, false)
|
||||
}
|
||||
let defaultDate = []
|
||||
const minDate = this.minDate || dayjs().format("YYYY-MM-DD")
|
||||
const maxDate = this.maxDate || dayjs(minDate).add(this.maxMonth - 1, 'month').format("YYYY-MM-DD")
|
||||
if (this.mode === 'single') {
|
||||
// 单选模式，可以是字符串或数组，Date对象等
|
||||
if (!test.array(this.defaultDate)) {
|
||||
defaultDate = [dayjs(this.defaultDate).format("YYYY-MM-DD")]
|
||||
} else {
|
||||
defaultDate = [this.defaultDate[0]]
|
||||
}
|
||||
} else {
|
||||
// 如果为非数组，则不执行
|
||||
if (!test.array(this.defaultDate)) return
|
||||
defaultDate = this.defaultDate
|
||||
}
|
||||
// 过滤用户传递的默认数组，取出只在可允许最大值与最小值之间的元素
|
||||
defaultDate = defaultDate.filter(item => {
|
||||
return dayjs(item).isAfter(dayjs(minDate).subtract(1, 'day')) && dayjs(item).isBefore(dayjs(
|
||||
maxDate).add(1, 'day'))
|
||||
})
|
||||
this.setSelected(defaultDate, false)
|
||||
},
|
||||
setSelected(selected, event = true) {
|
||||
this.selected = selected
|
||||
event && this.$emit('monthSelected', this.selected,'tap')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.u-calendar-month-wrapper {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.u-calendar-month {
|
||||
|
||||
&__title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 14px;
|
||||
line-height: 42px;
|
||||
height: 42px;
|
||||
color: $u-main-color;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&__days {
|
||||
position: relative;
|
||||
@include flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&__month-mark-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@include flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&__text {
|
||||
font-size: 155px;
|
||||
color: rgba(231, 232, 234, 0.83);
|
||||
}
|
||||
}
|
||||
|
||||
&__day {
|
||||
@include flex;
|
||||
padding: 2px;
|
||||
/* #ifndef APP-NVUE */
|
||||
// vue下使用css进行宽度计算，因为某些安卓机会无法进行js获取父元素宽度进行计算得出，会有偏移
|
||||
width: calc(100% / 7);
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
|
||||
&__select {
|
||||
flex: 1;
|
||||
@include flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
&__dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 100px;
|
||||
background-color: $u-error;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 7px;
|
||||
}
|
||||
|
||||
&__buttom-info {
|
||||
color: $u-content-color;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
&--selected {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
color: #cacbcd;
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
|
||||
&--selected {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
color: #cacbcd;
|
||||
}
|
||||
}
|
||||
|
||||
&--selected {
|
||||
background-color: $u-primary;
|
||||
@include flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&--range-selected {
|
||||
opacity: 0.3;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&--range-start-selected {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&--range-end-selected {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,169 +0,0 @@
|
|||
import { defineMixin } from 'uview-plus/libs/vue'
|
||||
import defProps from 'uview-plus/libs/config/props.js'
|
||||
|
||||
export const props = defineMixin({
|
||||
props: {
|
||||
// 日历顶部标题
|
||||
title: {
|
||||
type: String,
|
||||
default: () => defProps.calendar.title
|
||||
},
|
||||
// 是否显示标题
|
||||
showTitle: {
|
||||
type: Boolean,
|
||||
default: () => defProps.calendar.showTitle
|
||||
},
|
||||
// 是否显示副标题
|
||||
showSubtitle: {
|
||||
type: Boolean,
|
||||
default: () => defProps.calendar.showSubtitle
|
||||
},
|
||||
// 日期类型选择，single-选择单个日期，multiple-可以选择多个日期，range-选择日期范围
|
||||
mode: {
|
||||
type: String,
|
||||
default: () => defProps.calendar.mode
|
||||
},
|
||||
// mode=range时，第一个日期底部的提示文字
|
||||
startText: {
|
||||
type: String,
|
||||
default: () => defProps.calendar.startText
|
||||
},
|
||||
// mode=range时，最后一个日期底部的提示文字
|
||||
endText: {
|
||||
type: String,
|
||||
default: () => defProps.calendar.endText
|
||||
},
|
||||
// 自定义列表
|
||||
customList: {
|
||||
type: Array,
|
||||
default: () => defProps.calendar.customList
|
||||
},
|
||||
// 主题色，对底部按钮和选中日期有效
|
||||
color: {
|
||||
type: String,
|
||||
default: () => defProps.calendar.color
|
||||
},
|
||||
// 最小的可选日期
|
||||
minDate: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.calendar.minDate
|
||||
},
|
||||
// 最大可选日期
|
||||
maxDate: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.calendar.maxDate
|
||||
},
|
||||
// 默认选中的日期，mode为multiple或range是必须为数组格式
|
||||
defaultDate: {
|
||||
type: [Array, String, Date, null],
|
||||
default: () => defProps.calendar.defaultDate
|
||||
},
|
||||
// mode=multiple时，最多可选多少个日期
|
||||
maxCount: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.calendar.maxCount
|
||||
},
|
||||
// 日期行高
|
||||
rowHeight: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.calendar.rowHeight
|
||||
},
|
||||
// 日期格式化函数
|
||||
formatter: {
|
||||
type: [Function, null],
|
||||
default: () => defProps.calendar.formatter
|
||||
},
|
||||
// 是否显示农历
|
||||
showLunar: {
|
||||
type: Boolean,
|
||||
default: () => defProps.calendar.showLunar
|
||||
},
|
||||
// 是否显示月份背景色
|
||||
showMark: {
|
||||
type: Boolean,
|
||||
default: () => defProps.calendar.showMark
|
||||
},
|
||||
// 确定按钮的文字
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: () => defProps.calendar.confirmText
|
||||
},
|
||||
// 确认按钮处于禁用状态时的文字
|
||||
confirmDisabledText: {
|
||||
type: String,
|
||||
default: () => defProps.calendar.confirmDisabledText
|
||||
},
|
||||
// 是否显示日历弹窗
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: () => defProps.calendar.show
|
||||
},
|
||||
// 是否允许点击遮罩关闭日历
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
default: () => defProps.calendar.closeOnClickOverlay
|
||||
},
|
||||
// 是否为只读状态，只读状态下禁止选择日期
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: () => defProps.calendar.readonly
|
||||
},
|
||||
// 是否展示确认按钮
|
||||
showConfirm: {
|
||||
type: Boolean,
|
||||
default: () => defProps.calendar.showConfirm
|
||||
},
|
||||
// 日期区间最多可选天数，默认无限制，mode = range时有效
|
||||
maxRange: {
|
||||
type: [Number, String],
|
||||
default: () => defProps.calendar.maxRange
|
||||
},
|
||||
// 范围选择超过最多可选天数时的提示文案，mode = range时有效
|
||||
rangePrompt: {
|
||||
type: String,
|
||||
default: () => defProps.calendar.rangePrompt
|
||||
},
|
||||
// 范围选择超过最多可选天数时，是否展示提示文案，mode = range时有效
|
||||
showRangePrompt: {
|
||||
type: Boolean,
|
||||
default: () => defProps.calendar.showRangePrompt
|
||||
},
|
||||
// 是否允许日期范围的起止时间为同一天，mode = range时有效
|
||||
allowSameDay: {
|
||||
type: Boolean,
|
||||
default: () => defProps.calendar.allowSameDay
|
||||
},
|
||||
// 圆角值
|
||||
round: {
|
||||
type: [Boolean, String, Number],
|
||||
default: () => defProps.calendar.round
|
||||
},
|
||||
// 最多展示月份数量
|
||||
monthNum: {
|
||||
type: [Number, String],
|
||||
default: 3
|
||||
},
|
||||
// 星期文案
|
||||
weekText: {
|
||||
type: Array,
|
||||
default: defProps.calendar.weekText
|
||||
},
|
||||
forbidDays: {
|
||||
type: Array,
|
||||
default: defProps.calendar.forbidDays
|
||||
},
|
||||
forbidDaysToast:{
|
||||
type: String,
|
||||
default: defProps.calendar.forbidDaysToast
|
||||
},
|
||||
monthFormat:{
|
||||
type: String,
|
||||
default: defProps.calendar.monthFormat
|
||||
},
|
||||
// 是否页面内展示
|
||||
pageInline:{
|
||||
type: Boolean,
|
||||
default: defProps.calendar.pageInline
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -1,421 +0,0 @@
|
|||
<template>
|
||||
<u-popup
|
||||
:show="show"
|
||||
mode="bottom"
|
||||
:closeable="!pageInline"
|
||||
@close="close"
|
||||
:round="round"
|
||||
:pageInline="pageInline"
|
||||
:closeOnClickOverlay="closeOnClickOverlay"
|
||||
>
|
||||
<view class="u-calendar">
|
||||
<uHeader
|
||||
:title="title"
|
||||
:subtitle="subtitle"
|
||||
:showSubtitle="showSubtitle"
|
||||
:showTitle="showTitle"
|
||||
:weekText="weekText"
|
||||
></uHeader>
|
||||
<scroll-view
|
||||
:style="{
|
||||
height: addUnit(listHeight, 'px')
|
||||
}"
|
||||
scroll-y
|
||||
@scroll="onScroll"
|
||||
:scroll-top="scrollTop"
|
||||
:scrollIntoView="scrollIntoView"
|
||||
>
|
||||
<uMonth
|
||||
:color="color"
|
||||
:rowHeight="rowHeight"
|
||||
:showMark="showMark"
|
||||
:months="months"
|
||||
:mode="mode"
|
||||
:maxCount="maxCount"
|
||||
:startText="startText"
|
||||
:endText="endText"
|
||||
:defaultDate="defaultDate"
|
||||
:minDate="innerMinDate"
|
||||
:maxDate="innerMaxDate"
|
||||
:maxMonth="monthNum"
|
||||
:readonly="readonly"
|
||||
:maxRange="maxRange"
|
||||
:rangePrompt="rangePrompt"
|
||||
:showRangePrompt="showRangePrompt"
|
||||
:allowSameDay="allowSameDay"
|
||||
:forbidDays="forbidDays"
|
||||
:forbidDaysToast="forbidDaysToast"
|
||||
:monthFormat="monthFormat"
|
||||
ref="month"
|
||||
@monthSelected="monthSelected"
|
||||
@updateMonthTop="updateMonthTop"
|
||||
></uMonth>
|
||||
</scroll-view>
|
||||
<slot name="footer" v-if="showConfirm">
|
||||
<view class="u-calendar__confirm">
|
||||
<u-button
|
||||
shape="circle"
|
||||
:text="
|
||||
buttonDisabled ? confirmDisabledText : confirmText
|
||||
"
|
||||
:color="color"
|
||||
@click="confirm"
|
||||
:disabled="buttonDisabled"
|
||||
></u-button>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
</u-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uHeader from './header.vue'
|
||||
import uMonth from './month.vue'
|
||||
import { props } from './props.js'
|
||||
import util from './util.js'
|
||||
import dayjs from 'uview-plus/components/u-datetime-picker/dayjs.esm.min.js';
|
||||
import Calendar from 'uview-plus/libs/util/calendar.js'
|
||||
import { mpMixin } from 'uview-plus/libs/mixin/mpMixin.js'
|
||||
import { mixin } from 'uview-plus/libs/mixin/mixin.js'
|
||||
import { addUnit, getPx, range, error, padZero } from 'uview-plus/libs/function/index';
|
||||
import test from 'uview-plus/libs/function/test';
|
||||
/**
|
||||
* Calendar 日历
|
||||
* @description 此组件用于单个选择日期，范围选择日期等，日历被包裹在底部弹起的容器中.
|
||||
* @tutorial https://uview-plus.jiangruyi.com/components/calendar.html
|
||||
*
|
||||
* @property {String} title 标题内容 (默认 日期选择 )
|
||||
* @property {Boolean} showTitle 是否显示标题 (默认 true )
|
||||
* @property {Boolean} showSubtitle 是否显示副标题 (默认 true )
|
||||
* @property {String} mode 日期类型选择 single-选择单个日期，multiple-可以选择多个日期，range-选择日期范围 （ 默认 'single' )
|
||||
* @property {String} startText mode=range时，第一个日期底部的提示文字 (默认 '开始' )
|
||||
* @property {String} endText mode=range时，最后一个日期底部的提示文字 (默认 '结束' )
|
||||
* @property {Array} customList 自定义列表
|
||||
* @property {String} color 主题色，对底部按钮和选中日期有效 (默认 ‘#3c9cff' )
|
||||
* @property {String | Number} minDate 最小的可选日期 (默认 0 )
|
||||
* @property {String | Number} maxDate 最大可选日期 (默认 0 )
|
||||
* @property {Array | String| Date} defaultDate 默认选中的日期，mode为multiple或range是必须为数组格式
|
||||
* @property {String | Number} maxCount mode=multiple时，最多可选多少个日期 (默认 Number.MAX_SAFE_INTEGER )
|
||||
* @property {String | Number} rowHeight 日期行高 (默认 56 )
|
||||
* @property {Function} formatter 日期格式化函数
|
||||
* @property {Boolean} showLunar 是否显示农历 (默认 false )
|
||||
* @property {Boolean} showMark 是否显示月份背景色 (默认 true )
|
||||
* @property {String} confirmText 确定按钮的文字 (默认 '确定' )
|
||||
* @property {String} confirmDisabledText 确认按钮处于禁用状态时的文字 (默认 '确定' )
|
||||
* @property {Boolean} show 是否显示日历弹窗 (默认 false )
|
||||
* @property {Boolean} closeOnClickOverlay 是否允许点击遮罩关闭日历 (默认 false )
|
||||
* @property {Boolean} readonly 是否为只读状态，只读状态下禁止选择日期 (默认 false )
|
||||
* @property {String | Number} maxRange 日期区间最多可选天数，默认无限制，mode = range时有效
|
||||
* @property {String} rangePrompt 范围选择超过最多可选天数时的提示文案，mode = range时有效
|
||||
* @property {Boolean} showRangePrompt 范围选择超过最多可选天数时，是否展示提示文案，mode = range时有效 (默认 true )
|
||||
* @property {Boolean} allowSameDay 是否允许日期范围的起止时间为同一天，mode = range时有效 (默认 false )
|
||||
* @property {Number|String} round 圆角值，默认无圆角 (默认 0 )
|
||||
* @property {Number|String} monthNum 最多展示的月份数量 (默认 3 )
|
||||
* @property {Array} weekText 星期文案 (默认 ['一', '二', '三', '四', '五', '六', '日'] )
|
||||
*
|
||||
* @event {Function()} confirm 点击确定按钮时触发 选择日期相关的返回参数
|
||||
* @event {Function()} close 日历关闭时触发 可定义页面关闭时的回调事件
|
||||
* @example <u-calendar :defaultDate="defaultDateMultiple" :show="show" mode="multiple" @confirm="confirm">
|
||||
</u-calendar>
|
||||
* */
|
||||
export default {
|
||||
name: 'u-calendar',
|
||||
mixins: [mpMixin, mixin, props],
|
||||
components: {
|
||||
uHeader,
|
||||
uMonth
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 需要显示的月份的数组
|
||||
months: [],
|
||||
// 在月份滚动区域中，当前视图中月份的index索引
|
||||
monthIndex: 0,
|
||||
// 月份滚动区域的高度
|
||||
listHeight: 0,
|
||||
// month组件中选择的日期数组
|
||||
selected: [],
|
||||
scrollIntoView: '',
|
||||
scrollIntoViewScroll: '',
|
||||
scrollTop:0,
|
||||
// 过滤处理方法
|
||||
innerFormatter: (value) => value
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
scrollIntoView: {
|
||||
immediate: true,
|
||||
handler(n) {
|
||||
// console.log('scrollIntoView', n)
|
||||
}
|
||||
},
|
||||
selectedChange: {
|
||||
immediate: true,
|
||||
handler(n) {
|
||||
this.setMonth()
|
||||
}
|
||||
},
|
||||
// 打开弹窗时，设置月份数据
|
||||
show: {
|
||||
immediate: true,
|
||||
handler(n) {
|
||||
if (n) {
|
||||
this.setMonth()
|
||||
} else {
|
||||
// 关闭时重置scrollIntoView，否则会出现二次打开日历，当前月份数据显示不正确。
|
||||
// scrollIntoView需要有一个值变动过程，才会产生作用。
|
||||
this.scrollIntoView = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 由于maxDate和minDate可以为字符串(2021-10-10)，或者数值(时间戳)，但是dayjs如果接受字符串形式的时间戳会有问题，这里进行处理
|
||||
innerMaxDate() {
|
||||
return test.number(this.maxDate)
|
||||
? Number(this.maxDate)
|
||||
: this.maxDate
|
||||
},
|
||||
innerMinDate() {
|
||||
return test.number(this.minDate)
|
||||
? Number(this.minDate)
|
||||
: this.minDate
|
||||
},
|
||||
// 多个条件的变化，会引起选中日期的变化，这里统一管理监听
|
||||
selectedChange() {
|
||||
return [this.innerMinDate, this.innerMaxDate, this.defaultDate]
|
||||
},
|
||||
subtitle() {
|
||||
// 初始化时，this.months为空数组，所以需要特别判断处理
|
||||
if (this.months.length) {
|
||||
if (uni.getLocale() == 'zh-Hans' || uni.getLocale() == 'zh-Hant') {
|
||||
return this.months[this.monthIndex].year + '年' + (this.months[this.monthIndex].month < 10 ? '0' + this.months[this.monthIndex].month : this.months[this.monthIndex].month) + '月'
|
||||
} else {
|
||||
return (this.months[this.monthIndex].month < 10 ? '0' + this.months[this.monthIndex].month : this.months[this.monthIndex].month) + '/' + this.months[this.monthIndex].year
|
||||
}
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
buttonDisabled() {
|
||||
// 如果为range类型，且选择的日期个数不足1个时，让底部的按钮出于disabled状态
|
||||
if (this.mode === 'range') {
|
||||
if (this.selected.length <= 1) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.start = Date.now()
|
||||
this.init()
|
||||
},
|
||||
emits: ["confirm", "close"],
|
||||
methods: {
|
||||
addUnit,
|
||||
// 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用
|
||||
setFormatter(e) {
|
||||
this.innerFormatter = e
|
||||
},
|
||||
// month组件内部选择日期后，通过事件通知给父组件
|
||||
monthSelected(e,scene ='init') {
|
||||
this.selected = e
|
||||
if (!this.showConfirm) {
|
||||
// 在不需要确认按钮的情况下，如果为单选，或者范围多选且已选长度大于2，则直接进行返还
|
||||
if (
|
||||
this.mode === 'multiple' ||
|
||||
this.mode === 'single' ||
|
||||
(this.mode === 'range' && this.selected.length >= 2)
|
||||
) {
|
||||
if( scene === 'init'){
|
||||
return
|
||||
}
|
||||
if( scene === 'tap') {
|
||||
this.$emit('confirm', this.selected)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
init() {
|
||||
// 校验maxDate，不能小于minDate。
|
||||
if (
|
||||
this.innerMaxDate &&
|
||||
this.innerMinDate &&
|
||||
new Date(this.innerMaxDate).getTime() < new Date(this.innerMinDate).getTime()
|
||||
) {
|
||||
return error('maxDate不能小于minDate时间')
|
||||
}
|
||||
// 滚动区域的高度
|
||||
let bottomPadding = 0;
|
||||
if (this.pageInline) {
|
||||
bottomPadding = 0
|
||||
} else {
|
||||
bottomPadding = 30
|
||||
}
|
||||
this.listHeight = this.rowHeight * 5 + bottomPadding
|
||||
this.setMonth()
|
||||
},
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
// 点击确定按钮
|
||||
confirm() {
|
||||
if (!this.buttonDisabled) {
|
||||
this.$emit('confirm', this.selected)
|
||||
}
|
||||
},
|
||||
// 获得两个日期之间的月份数
|
||||
getMonths(minDate, maxDate) {
|
||||
const minYear = dayjs(minDate).year()
|
||||
const minMonth = dayjs(minDate).month() + 1
|
||||
const maxYear = dayjs(maxDate).year()
|
||||
const maxMonth = dayjs(maxDate).month() + 1
|
||||
return (maxYear - minYear) * 12 + (maxMonth - minMonth) + 1
|
||||
},
|
||||
// 设置月份数据
|
||||
setMonth() {
|
||||
// 最小日期的毫秒数
|
||||
const minDate = this.innerMinDate || dayjs().valueOf()
|
||||
// 如果没有指定最大日期，则往后推3个月
|
||||
const maxDate =
|
||||
this.innerMaxDate ||
|
||||
dayjs(minDate)
|
||||
.add(this.monthNum - 1, 'month')
|
||||
.valueOf()
|
||||
// 最大最小月份之间的共有多少个月份，
|
||||
const months = range(
|
||||
1,
|
||||
this.monthNum,
|
||||
this.getMonths(minDate, maxDate)
|
||||
)
|
||||
// 先清空数组
|
||||
this.months = []
|
||||
for (let i = 0; i < months; i++) {
|
||||
this.months.push({
|
||||
date: new Array(
|
||||
dayjs(minDate).add(i, 'month').daysInMonth()
|
||||
)
|
||||
.fill(1)
|
||||
.map((item, index) => {
|
||||
// 日期，取值1-31
|
||||
let day = index + 1
|
||||
// 星期，0-6，0为周日
|
||||
const week = dayjs(minDate)
|
||||
.add(i, 'month')
|
||||
.date(day)
|
||||
.day()
|
||||
const date = dayjs(minDate)
|
||||
.add(i, 'month')
|
||||
.date(day)
|
||||
.format('YYYY-MM-DD')
|
||||
let bottomInfo = ''
|
||||
if (this.showLunar) {
|
||||
// 将日期转为农历格式
|
||||
const lunar = Calendar.solar2lunar(
|
||||
dayjs(date).year(),
|
||||
dayjs(date).month() + 1,
|
||||
dayjs(date).date()
|
||||
)
|
||||
bottomInfo = lunar.IDayCn
|
||||
}
|
||||
let config = {
|
||||
day,
|
||||
week,
|
||||
// 小于最小允许的日期，或者大于最大的日期，则设置为disabled状态
|
||||
disabled:
|
||||
dayjs(date).isBefore(
|
||||
dayjs(minDate).format('YYYY-MM-DD')
|
||||
) ||
|
||||
dayjs(date).isAfter(
|
||||
dayjs(maxDate).format('YYYY-MM-DD')
|
||||
),
|
||||
// 返回一个日期对象，供外部的formatter获取当前日期的年月日等信息，进行加工处理
|
||||
date: new Date(date),
|
||||
bottomInfo,
|
||||
dot: false,
|
||||
month:
|
||||
dayjs(minDate).add(i, 'month').month() + 1
|
||||
}
|
||||
const formatter =
|
||||
this.formatter || this.innerFormatter
|
||||
return formatter(config)
|
||||
}),
|
||||
// 当前所属的月份
|
||||
month: dayjs(minDate).add(i, 'month').month() + 1,
|
||||
// 当前年份
|
||||
year: dayjs(minDate).add(i, 'month').year()
|
||||
})
|
||||
}
|
||||
},
|
||||
// 滚动到默认设置的月份
|
||||
scrollIntoDefaultMonth(selected) {
|
||||
// 查询默认日期在可选列表的下标
|
||||
const _index = this.months.findIndex(({
|
||||
year,
|
||||
month
|
||||
}) => {
|
||||
month = padZero(month)
|
||||
return `${year}-${month}` === selected
|
||||
})
|
||||
if (_index !== -1) {
|
||||
// #ifndef MP-WEIXIN
|
||||
this.$nextTick(() => {
|
||||
this.scrollIntoView = `month-${_index}`
|
||||
this.scrollIntoViewScroll = this.scrollIntoView
|
||||
})
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
this.scrollTop = this.months[_index].top || 0;
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
// scroll-view滚动监听
|
||||
onScroll(event) {
|
||||
// 不允许小于0的滚动值，如果scroll-view到顶了，继续下拉，会出现负数值
|
||||
const scrollTop = Math.max(0, event.detail.scrollTop)
|
||||
// 将当前滚动条数值，除以滚动区域的高度，可以得出当前滚动到了哪一个月份的索引
|
||||
for (let i = 0; i < this.months.length; i++) {
|
||||
if (scrollTop >= (this.months[i].top || this.listHeight)) {
|
||||
this.monthIndex = i
|
||||
this.scrollIntoViewScroll = `month-${i}`
|
||||
}
|
||||
}
|
||||
},
|
||||
// 更新月份的top值
|
||||
updateMonthTop(topArr = []) {
|
||||
// 设置对应月份的top值，用于onScroll方法更新月份
|
||||
topArr.map((item, index) => {
|
||||
this.months[index].top = item
|
||||
})
|
||||
|
||||
// 获取默认日期的下标
|
||||
if (!this.defaultDate) {
|
||||
// 如果没有设置默认日期，则将当天日期设置为默认选中的日期
|
||||
const selected = dayjs().format("YYYY-MM")
|
||||
this.scrollIntoDefaultMonth(selected)
|
||||
return
|
||||
}
|
||||
let selected = dayjs().format("YYYY-MM");
|
||||
// 单选模式，可以是字符串或数组，Date对象等
|
||||
if (!test.array(this.defaultDate)) {
|
||||
selected = dayjs(this.defaultDate).format("YYYY-MM")
|
||||
} else {
|
||||
selected = dayjs(this.defaultDate[0]).format("YYYY-MM");
|
||||
}
|
||||
this.scrollIntoDefaultMonth(selected)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-calendar {
|
||||
&__confirm {
|
||||
padding: 7px 18px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
import dayjs from 'uview-plus/components/u-datetime-picker/dayjs.esm.min.js';
|
||||
export default {
|
||||
methods: {
|
||||
// 设置月份数据
|
||||
setMonth() {
|
||||
// 月初是周几
|
||||
const day = dayjs(this.date).date(1).day()
|
||||
const start = day == 0 ? 6 : day - 1
|
||||
|
||||
// 本月天数
|
||||
const days = dayjs(this.date).endOf('month').format('D')
|
||||
|
||||
// 上个月天数
|
||||
const prevDays = dayjs(this.date).endOf('month').subtract(1, 'month').format('D')
|
||||
|
||||
// 日期数据
|
||||
const arr = []
|
||||
// 清空表格
|
||||
this.month = []
|
||||
|
||||
// 添加上月数据
|
||||
arr.push(
|
||||
...new Array(start).fill(1).map((e, i) => {
|
||||
const day = prevDays - start + i + 1
|
||||
|
||||
return {
|
||||
value: day,
|
||||
disabled: true,
|
||||
date: dayjs(this.date).subtract(1, 'month').date(day).format('YYYY-MM-DD')
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
// 添加本月数据
|
||||
arr.push(
|
||||
...new Array(days - 0).fill(1).map((e, i) => {
|
||||
const day = i + 1
|
||||
|
||||
return {
|
||||
value: day,
|
||||
date: dayjs(this.date).date(day).format('YYYY-MM-DD')
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
// 添加下个月
|
||||
arr.push(
|
||||
...new Array(42 - days - start).fill(1).map((e, i) => {
|
||||
const day = i + 1
|
||||
|
||||
return {
|
||||
value: day,
|
||||
disabled: true,
|
||||
date: dayjs(this.date).add(1, 'month').date(day).format('YYYY-MM-DD')
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
// 分割数组
|
||||
for (let n = 0; n < arr.length; n += 7) {
|
||||
this.month.push(
|
||||
arr.slice(n, n + 7).map((e, i) => {
|
||||
e.index = i + n
|
||||
|
||||
// 自定义信息
|
||||
const custom = this.customList.find((c) => c.date == e.date)
|
||||
|
||||
// 农历
|
||||
if (this.lunar) {
|
||||
const {
|
||||
IDayCn,
|
||||
IMonthCn
|
||||
} = this.getLunar(e.date)
|
||||
e.lunar = IDayCn == '初一' ? IMonthCn : IDayCn
|
||||
}
|
||||
|
||||
return {
|
||||
...e,
|
||||
...custom
|
||||
}
|
||||
})
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -79,7 +79,6 @@
|
|||
"easycom": {
|
||||
"autoscan": true,
|
||||
"custom": {
|
||||
"^up-calendar$": "@/components/patched-calendar/u-calendar.vue",
|
||||
"^u-(.*)": "uview-plus/components/u-$1/u-$1.vue",
|
||||
"^up-(.*)": "uview-plus/components/u-$1/u-$1.vue"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -79,9 +79,7 @@
|
|||
</view>
|
||||
</up-popup>
|
||||
|
||||
<!-- 时间抽屉：顶部下拉，内嵌日历范围选择 -->
|
||||
<!-- 注意：up-popup 内容区自带 @touchmove.stop.prevent，会吞掉日历内 scroll-view 的滚动手势，
|
||||
所以日历不放在 up-popup 插槽里，而是用条件渲染 + 自绘遮罩实现抽屉 -->
|
||||
<!-- 时间抽屉：自绘遮罩 + 顶部面板（滚动式日历：懒渲染，窗口外月份占位） -->
|
||||
<view v-if="drawer === 'time'" class="time-mask" @click="closeDrawer" @touchmove.stop.prevent="noop" />
|
||||
<view v-if="drawer === 'time'" class="time-drawer">
|
||||
<view class="time-drawer-header">
|
||||
|
|
@ -90,40 +88,70 @@
|
|||
<up-icon name="close" size="20" color="#909399" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="time-drawer-body">
|
||||
<up-calendar
|
||||
:key="calendarKey"
|
||||
mode="range"
|
||||
:show="drawer === 'time'"
|
||||
:page-inline="true"
|
||||
:show-confirm="false"
|
||||
:show-title="false"
|
||||
:show-subtitle="true"
|
||||
:row-height="48"
|
||||
:month-num="calendarMonthNum"
|
||||
:min-date="calendarMinDate"
|
||||
:max-date="calendarMaxDate"
|
||||
:allow-same-day="true"
|
||||
:max-range="31"
|
||||
range-prompt="单次最多选择31天"
|
||||
:show-range-prompt="true"
|
||||
start-text="开始"
|
||||
end-text="结束"
|
||||
color="#2CCB98"
|
||||
:default-date="calendarDefaultDate"
|
||||
@confirm="onCalendarConfirm"
|
||||
@close="closeDrawer"
|
||||
/>
|
||||
|
||||
<!-- 快捷范围：点选直接填满起止 -->
|
||||
<view class="quick-row">
|
||||
<view
|
||||
v-for="q in quickRanges"
|
||||
:key="q.label"
|
||||
class="quick-chip"
|
||||
:class="{ 'quick-chip--active': activeQuick === q.label }"
|
||||
@click="applyQuick(q)"
|
||||
>
|
||||
<text>{{ q.label }}</text>
|
||||
</view>
|
||||
<!-- 确定按钮：自绘钉底。组件内 footer 在 pageInline 多层嵌套下定位不可控。
|
||||
选满起止日期时 showConfirm=false 的组件会自动 emit confirm（中间态），
|
||||
这里只记录值不关闭抽屉，由这枚按钮确认后才写入筛选 -->
|
||||
</view>
|
||||
|
||||
<!-- 星期行：钉在滚动区上方 -->
|
||||
<view class="cal-weekdays">
|
||||
<text v-for="w in weekdayLabels" :key="w" class="cal-weekday">{{ w }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 滚动日历：scroll-view 纵向滚月，懒渲染（窗口外月份只渲染占位高度） -->
|
||||
<view class="cal-scroll-wrap">
|
||||
<scroll-view
|
||||
class="cal-scroll"
|
||||
scroll-y
|
||||
:scroll-into-view="calAnchorId"
|
||||
scroll-anchoring
|
||||
@scroll="onCalScroll"
|
||||
>
|
||||
<view
|
||||
v-for="m in renderedMonths"
|
||||
:key="m.key"
|
||||
:id="m.key"
|
||||
class="cal-month"
|
||||
:style="m.placeholder ? { height: m.height + 'rpx' } : {}"
|
||||
>
|
||||
<template v-if="!m.placeholder">
|
||||
<view class="cal-month-title">
|
||||
<text>{{ m.title }}</text>
|
||||
</view>
|
||||
<view class="cal-grid">
|
||||
<view
|
||||
v-for="(cell, i) in m.cells"
|
||||
:key="i"
|
||||
class="cal-cell"
|
||||
:class="cell.cls"
|
||||
@click="pickDate(cell)"
|
||||
>
|
||||
<view v-if="cell.day" class="cal-day" :class="cell.dayCls">
|
||||
<text class="cal-day-num">{{ cell.day }}</text>
|
||||
<text v-if="cell.tag" class="cal-day-tag">{{ cell.tag }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view class="time-drawer-footer">
|
||||
<up-button
|
||||
shape="circle"
|
||||
:text="calendarReady ? '确定' : '请选择起止日期'"
|
||||
:text="rangeReady ? '确定' : '请选择起止日期'"
|
||||
color="#2CCB98"
|
||||
:disabled="!calendarReady"
|
||||
:disabled="!rangeReady"
|
||||
@click="onConfirmClick"
|
||||
/>
|
||||
</view>
|
||||
|
|
@ -133,15 +161,38 @@
|
|||
<script>
|
||||
import { getSceneList } from '@/api/scene'
|
||||
|
||||
// 日历可回溯的年数，按需调整（monthNum 会随 minDate 动态计算，无需同步改）
|
||||
const CALENDAR_YEARS_BACK = 1
|
||||
// 日历可回溯的年数（仅约束可翻到的最早月份，不影响性能）
|
||||
const CALENDAR_YEARS_BACK = 10
|
||||
const WEEKDAY_LABELS = ['一', '二', '三', '四', '五', '六', '日']
|
||||
|
||||
const pad2 = (n) => String(n).padStart(2, '0')
|
||||
// Date -> 'YYYY-MM-DD'（本地时区）
|
||||
const fmtDate = (d) => `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`
|
||||
// 'YYYY-MM-DD' -> 当日零点 Date
|
||||
const parseDate = (s) => {
|
||||
const [y, m, d] = s.split('-').map(Number)
|
||||
return new Date(y, m - 1, d)
|
||||
}
|
||||
// 生成快捷范围选项：近 N 天（含今天）
|
||||
const quickRange = (days) => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setDate(start.getDate() - (days - 1))
|
||||
return { label: `近${days}天`, start: fmtDate(start), end: fmtDate(end) }
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
drawer: '', // '' | 'scene' | 'status' | 'time'
|
||||
calendarKey: 0, // 强制重建日历，规避内部 selected 状态残留
|
||||
pendingRange: [], // 日历临时选中的起止日期，点确定按钮才写入 filters
|
||||
windowWidth: 375, // 窗口宽（px），onLoad 时取系统信息，用于 px→rpx 换算
|
||||
calScroll: 0, // 当前滚动位置（rpx 近似，用于懒渲染窗口判定）
|
||||
calAnchorId: '', // scroll-into-view 定位的月份锚点
|
||||
pendingStart: '', // 临时起点
|
||||
pendingEnd: '', // 临时终点
|
||||
activeQuick: '',
|
||||
weekdayLabels: WEEKDAY_LABELS,
|
||||
quickRanges: [quickRange(7), quickRange(30), quickRange(90)],
|
||||
filters: {
|
||||
sceneId: 0, // 0 表示全部
|
||||
status: 0,
|
||||
|
|
@ -167,42 +218,121 @@ export default {
|
|||
const hit = this.statusOptions.find((o) => o.id === this.filters.status)
|
||||
return hit ? hit.name : '全部状态'
|
||||
},
|
||||
// 日历可选范围：过去一年 ~ 今天（不传 minDate 时组件默认从当月开始，无法回看历史）。
|
||||
calendarMinDate() {
|
||||
// 可选范围边界
|
||||
minLimit() {
|
||||
const d = new Date()
|
||||
d.setFullYear(d.getFullYear() - CALENDAR_YEARS_BACK)
|
||||
return d.getTime()
|
||||
d.setDate(1)
|
||||
return fmtDate(d)
|
||||
},
|
||||
calendarMaxDate() {
|
||||
return Date.now()
|
||||
maxLimit() {
|
||||
return fmtDate(new Date())
|
||||
},
|
||||
// up-calendar 的 monthNum 同时参与 maxDate 兜底计算：未传 maxDate 时月份终点是
|
||||
// minDate + monthNum 个月；传了 maxDate 后它又反过来限制可渲染的月份数。
|
||||
// 所以这里动态算出 min~max 实际跨过的月数，保证完整展示过去一年。
|
||||
calendarMonthNum() {
|
||||
return (
|
||||
(new Date(this.calendarMaxDate).getFullYear() -
|
||||
new Date(this.calendarMinDate).getFullYear()) *
|
||||
12 +
|
||||
new Date(this.calendarMaxDate).getMonth() -
|
||||
new Date(this.calendarMinDate).getMonth() +
|
||||
1
|
||||
)
|
||||
// 全部月份元数据：从最早月到当月，含每月份的估算高度（用于占位与滚动定位）
|
||||
monthMetas() {
|
||||
const metas = []
|
||||
const start = parseDate(this.minLimit)
|
||||
const now = new Date()
|
||||
const endY = now.getFullYear()
|
||||
const endM = now.getMonth()
|
||||
let y = start.getFullYear()
|
||||
let m = start.getMonth()
|
||||
let top = 0
|
||||
while (y < endY || (y === endY && m <= endM)) {
|
||||
const weeks = this.monthWeeks(y, m)
|
||||
// 标题行 + 周数×行高（格子 aspect 决定行高≈格子宽×1.15，按 750rpx/7 估算）
|
||||
const height = 96 + weeks * Math.round((750 / 7) * 1.15) + 16
|
||||
metas.push({
|
||||
key: `m-${y}-${m}`,
|
||||
year: y,
|
||||
month: m,
|
||||
title: `${y}年${pad2(m + 1)}月`,
|
||||
top,
|
||||
height
|
||||
})
|
||||
top += height
|
||||
if (m === 11) {
|
||||
y += 1
|
||||
m = 0
|
||||
} else {
|
||||
m += 1
|
||||
}
|
||||
}
|
||||
return metas
|
||||
},
|
||||
// 日历回显：已选范围作为 defaultDate（range 模式要求数组）。
|
||||
calendarDefaultDate() {
|
||||
const dates = [this.filters.startDate, this.filters.endDate].filter(Boolean)
|
||||
return dates.length === 2 ? dates : []
|
||||
// 懒渲染：只渲染滚动窗口（±4 个月）内的月份，窗口外用等高占位
|
||||
renderedMonths() {
|
||||
// 滚动位置近似映射到月份索引：找 top 包含 calScroll 的月份
|
||||
const viewRpx = 1400 // 滚动窗口可视高度近似（rpx）
|
||||
const buffer = 3000 // 窗口前后缓冲（rpx）
|
||||
const lo = this.calScroll - buffer
|
||||
const hi = this.calScroll + viewRpx + buffer
|
||||
return this.monthMetas.map((meta) => {
|
||||
const inWindow = meta.top + meta.height > lo && meta.top < hi
|
||||
if (!inWindow) {
|
||||
return { ...meta, placeholder: true, cells: [] }
|
||||
}
|
||||
return {
|
||||
...meta,
|
||||
placeholder: false,
|
||||
cells: this.buildMonthCells(meta.year, meta.month)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 日历当前是否已选满起止日期（pendingRange 在日历选中时更新）。
|
||||
calendarReady() {
|
||||
return this.pendingRange.length >= 2
|
||||
// 起止都已选定
|
||||
rangeReady() {
|
||||
return !!this.pendingStart && !!this.pendingEnd
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// px→rpx 换算基准
|
||||
const info = uni.getWindowInfo ? uni.getWindowInfo() : uni.getSystemInfoSync()
|
||||
this.windowWidth = info.windowWidth || 375
|
||||
this.loadScenes()
|
||||
},
|
||||
methods: {
|
||||
// 单格数据：区间内/端点/禁用态一次性算好，模板零逻辑
|
||||
buildCell(dateStr, day) {
|
||||
const disabled = dateStr < this.minLimit || dateStr > this.maxLimit
|
||||
let dayCls = ''
|
||||
let tag = ''
|
||||
if (!disabled) {
|
||||
if (this.pendingStart && dateStr === this.pendingStart) {
|
||||
dayCls = 'cal-day--start'
|
||||
tag = this.pendingStart === this.pendingEnd ? '起/止' : '开始'
|
||||
} else if (this.pendingEnd && dateStr === this.pendingEnd) {
|
||||
dayCls = 'cal-day--end'
|
||||
tag = '结束'
|
||||
} else if (
|
||||
this.pendingStart &&
|
||||
this.pendingEnd &&
|
||||
dateStr > this.pendingStart &&
|
||||
dateStr < this.pendingEnd
|
||||
) {
|
||||
dayCls = 'cal-day--in'
|
||||
}
|
||||
}
|
||||
return { day, date: dateStr, disabled, cls: { 'cal-cell--disabled': disabled }, dayCls, tag }
|
||||
},
|
||||
// 某年某月的格子（含前置空格）
|
||||
buildMonthCells(y, m) {
|
||||
const firstDay = new Date(y, m, 1)
|
||||
const lead = (firstDay.getDay() + 6) % 7
|
||||
const daysInMonth = new Date(y, m + 1, 0).getDate()
|
||||
const cells = []
|
||||
for (let i = 0; i < lead; i++) cells.push({ day: 0 })
|
||||
for (let d = 1; d <= daysInMonth; d++) {
|
||||
cells.push(this.buildCell(`${y}-${pad2(m + 1)}-${pad2(d)}`, d))
|
||||
}
|
||||
return cells
|
||||
},
|
||||
// 某月占满的周数（1 个前置空格也占一行）
|
||||
monthWeeks(y, m) {
|
||||
const firstDay = new Date(y, m, 1)
|
||||
const lead = (firstDay.getDay() + 6) % 7
|
||||
const daysInMonth = new Date(y, m + 1, 0).getDate()
|
||||
return Math.ceil((lead + daysInMonth) / 7)
|
||||
},
|
||||
// 动态加载场所列表：复用场景接口，后端 /scene/list 就绪后自动走真实请求。
|
||||
// 失败时保留"全部"选项不阻塞筛选（toast 由请求封装统一弹出）。
|
||||
async loadScenes() {
|
||||
|
|
@ -217,11 +347,21 @@ export default {
|
|||
noop() {},
|
||||
openDrawer(name) {
|
||||
if (name === 'time') {
|
||||
// 重建日历实例：up-calendar 内部选中态不会随 defaultDate 变化重置
|
||||
this.calendarKey += 1
|
||||
// 回显已提交的日期范围，避免重开抽屉时按钮误判为“未选择”
|
||||
const dates = [this.filters.startDate, this.filters.endDate].filter(Boolean)
|
||||
this.pendingRange = dates.length === 2 ? dates : []
|
||||
// 回显已提交的起止；无提交时默认定位当月
|
||||
this.pendingStart = this.filters.startDate
|
||||
this.pendingEnd = this.filters.endDate
|
||||
this.activeQuick = ''
|
||||
const focus = this.filters.startDate || fmtDate(new Date())
|
||||
const d = parseDate(focus)
|
||||
const meta = this.monthMetas.find(
|
||||
(mm) => mm.year === d.getFullYear() && mm.month === d.getMonth()
|
||||
)
|
||||
this.calScroll = meta ? meta.top : 0
|
||||
// scroll-into-view 需要值变化才生效：先清空再在下个循环赋值
|
||||
this.calAnchorId = ''
|
||||
this.$nextTick(() => {
|
||||
this.calAnchorId = meta ? meta.key : ''
|
||||
})
|
||||
}
|
||||
this.drawer = name
|
||||
},
|
||||
|
|
@ -244,26 +384,53 @@ export default {
|
|||
// eslint-disable-next-line no-console
|
||||
console.log('[event filters]', { ...this.filters })
|
||||
},
|
||||
// 日历选中变化（showConfirm=false 时组件在选满起止时自动触发 confirm）：
|
||||
// 只记录临时选择，不关闭抽屉——最终提交由底部自绘确定按钮完成。
|
||||
onCalendarConfirm(dateArr) {
|
||||
if (!Array.isArray(dateArr) || dateArr.length < 2) {
|
||||
return
|
||||
// 滚动：把 px 滚动值换算回 rpx（750 / 窗口宽），驱动懒渲染窗口移动
|
||||
onCalScroll(e) {
|
||||
const px = e.detail.scrollTop || 0
|
||||
const rpx = px * (750 / this.windowWidth)
|
||||
// 跨过一定占位高度差再更新，减少 computed 重算频率
|
||||
if (Math.abs(rpx - this.calScroll) > 200) {
|
||||
this.calScroll = rpx
|
||||
}
|
||||
this.pendingRange = dateArr
|
||||
},
|
||||
// 自绘确定按钮：提交临时选择并写入筛选值。
|
||||
// range 模式选满后 confirm 会带完整日期数组（起止之间每一天都在内），
|
||||
// 所以取数组首尾作为起止日期，而非前两个元素。
|
||||
// 点击日期：第一击定起点，第二击定终点（早于起点则重定起点），选满后再点重选
|
||||
pickDate(cell) {
|
||||
if (!cell.day || cell.disabled) return
|
||||
const date = cell.date
|
||||
if (!this.pendingStart || (this.pendingStart && this.pendingEnd)) {
|
||||
this.pendingStart = date
|
||||
this.pendingEnd = ''
|
||||
this.activeQuick = ''
|
||||
} else if (date < this.pendingStart) {
|
||||
this.pendingStart = date
|
||||
this.activeQuick = ''
|
||||
} else {
|
||||
this.pendingEnd = date
|
||||
this.activeQuick = ''
|
||||
}
|
||||
},
|
||||
// 快捷范围：直接填满起止并定位到起点月
|
||||
applyQuick(q) {
|
||||
this.pendingStart = q.start
|
||||
this.pendingEnd = q.end
|
||||
this.activeQuick = q.label
|
||||
const d = parseDate(q.start)
|
||||
const meta = this.monthMetas.find(
|
||||
(mm) => mm.year === d.getFullYear() && mm.month === d.getMonth()
|
||||
)
|
||||
this.calAnchorId = ''
|
||||
this.$nextTick(() => {
|
||||
this.calAnchorId = meta ? meta.key : ''
|
||||
})
|
||||
},
|
||||
// 确定按钮：提交临时起止并写入筛选值
|
||||
onConfirmClick() {
|
||||
if (!this.calendarReady) {
|
||||
if (!this.rangeReady) {
|
||||
return
|
||||
}
|
||||
const start = this.pendingRange[0]
|
||||
const end = this.pendingRange[this.pendingRange.length - 1]
|
||||
this.filters.startDate = start
|
||||
this.filters.endDate = end
|
||||
this.filters.timeText = `${start} 至 ${end}`
|
||||
this.filters.startDate = this.pendingStart
|
||||
this.filters.endDate = this.pendingEnd
|
||||
this.filters.timeText = `${this.pendingStart} 至 ${this.pendingEnd}`
|
||||
this.closeDrawer()
|
||||
this.handle()
|
||||
}
|
||||
|
|
@ -442,116 +609,166 @@ export default {
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
.time-drawer-body {
|
||||
/* 占满抽屉剩余空间；日历内部 scroll-view 通过 calc 抬高到填满 body，
|
||||
组件内的确定按钮再用绝对定位钉回 body 底部，消除按钮下方空白 */
|
||||
/* 快捷范围行 */
|
||||
.quick-row {
|
||||
display: flex;
|
||||
padding: 20rpx 24rpx 4rpx;
|
||||
}
|
||||
|
||||
.quick-chip {
|
||||
flex: 1;
|
||||
margin-right: 16rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f6f8;
|
||||
border: 1rpx solid transparent;
|
||||
border-radius: 999rpx;
|
||||
font-size: 24rpx;
|
||||
color: #606266;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&--active {
|
||||
background: #e9fff3;
|
||||
border-color: #2ccb98;
|
||||
color: #12a37a;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
/* 星期行：钉在滚动区上方 */
|
||||
.cal-weekdays {
|
||||
display: flex;
|
||||
padding: 0 16rpx;
|
||||
border-bottom: 1rpx solid #f0f1f3;
|
||||
}
|
||||
|
||||
.cal-weekday {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: #909399;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
|
||||
/* 滚动日历容器：占满抽屉剩余空间 */
|
||||
.cal-scroll-wrap {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 日历滚动窗口高度。
|
||||
pageInline 下 up-calendar 内部仍套着 u-popup（.u-popup → .u-transition → .u-popup__content），
|
||||
这几层默认高度都是 auto，导致 scroll-view 的百分比高度无法解析
|
||||
（退化成内容高度=全部月份堆叠、滚动窗口失效）。这里把中间层逐级撑到 100%，
|
||||
再让 scroll-view 用 flex 填满 header 以下的剩余空间，实现自适应、无空隙。 */
|
||||
.time-drawer-body :deep(.u-popup),
|
||||
.time-drawer-body :deep(.u-transition),
|
||||
.time-drawer-body :deep(.u-popup__content) {
|
||||
.cal-scroll {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.time-drawer-body :deep(.u-calendar) {
|
||||
/* 月份块 */
|
||||
.cal-month {
|
||||
padding: 8rpx 16rpx 0;
|
||||
}
|
||||
|
||||
.cal-month-title {
|
||||
height: 72rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #2a2d33;
|
||||
}
|
||||
|
||||
/* 日期网格：固定 42 格（前置空格 + 当月天），节点数恒定 */
|
||||
.cal-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cal-cell {
|
||||
width: calc(100% / 7);
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
padding: 4rpx;
|
||||
aspect-ratio: 1 / 1.15;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
|
||||
&--disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
.cal-day {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 16rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 12rpx;
|
||||
|
||||
&:active {
|
||||
background: #f2f3f5;
|
||||
}
|
||||
|
||||
.time-drawer-body :deep(.u-calendar-header) {
|
||||
&--start,
|
||||
&--end {
|
||||
background: #2ccb98;
|
||||
}
|
||||
|
||||
&--start.cal-day--end {
|
||||
background: #2ccb98;
|
||||
}
|
||||
|
||||
&--in {
|
||||
background: #e9fff3;
|
||||
border-radius: 0;
|
||||
|
||||
&:active {
|
||||
background: #ddf6ec;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cal-day-num {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #2a2d33;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.cal-day--start .cal-day-num,
|
||||
.cal-day--end .cal-day-num {
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cal-day--in .cal-day-num {
|
||||
color: #12a37a;
|
||||
}
|
||||
|
||||
/* 开始/结束小字标注 */
|
||||
.cal-day-tag {
|
||||
font-size: 18rpx;
|
||||
line-height: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
/* 起止回显：只占内容高度，不与日历滚动区平分空间 */
|
||||
.range-preview {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26rpx;
|
||||
color: #6b6f76;
|
||||
min-height: 56rpx;
|
||||
}
|
||||
|
||||
.time-drawer-body :deep(.u-calendar .u-scroll-view),
|
||||
.time-drawer-body :deep(.u-calendar scroll-view) {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
/* 确定按钮：不依赖组件内 footer（在多层嵌套里定位/裁切不可控），
|
||||
在 body 底部自绘一枚按钮，选满起止日期后可点 */
|
||||
.time-drawer-footer {
|
||||
flex-shrink: 0;
|
||||
padding: 16rpx 24rpx calc(16rpx + env(safe-area-inset-bottom));
|
||||
border-top: 1rpx solid #f0f1f3;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
/* 副标题（当前滚动到的月份）：弱化为居中小胶囊 */
|
||||
.time-drawer-body :deep(.u-calendar-header__subtitle) {
|
||||
align-self: center;
|
||||
margin: 8rpx 0 4rpx;
|
||||
padding: 4rpx 24rpx;
|
||||
background: #f2f3f5;
|
||||
border-radius: 999rpx;
|
||||
height: auto;
|
||||
line-height: 40rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #6b6f76;
|
||||
}
|
||||
|
||||
/* 星期行 */
|
||||
.time-drawer-body :deep(.u-calendar-header__weekdays) {
|
||||
padding: 8rpx 0;
|
||||
border-bottom: 1rpx solid #f0f1f3;
|
||||
}
|
||||
|
||||
.time-drawer-body :deep(.u-calendar-header__weekdays__weekday) {
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: #909399;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.time-drawer-body :deep(.u-calendar-month-wrapper) {
|
||||
/* 不能加横向 padding：首日偏移用 JS 实测容器宽计算、格子宽用 CSS 百分比，
|
||||
两者对 padding 的包含不同会造成偏差，偏移大的月份首行末尾格子会被挤换行 */
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* 每月标题行 */
|
||||
.time-drawer-body :deep(.u-calendar-month__title) {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #2a2d33;
|
||||
padding: 16rpx 12rpx;
|
||||
line-height: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
|
||||
/* 月份背景水印：默认 155px 过大过亮，缩小压淡 */
|
||||
.time-drawer-body :deep(.u-calendar-month__days__month-mark-wrapper__text) {
|
||||
font-size: 110rpx;
|
||||
color: rgba(231, 232, 234, 0.4);
|
||||
}
|
||||
|
||||
.time-drawer-body :deep(.u-calendar-month__days__day) {
|
||||
padding: 8rpx;
|
||||
}
|
||||
|
||||
/* 日期字号恢复正常可读尺寸（此前随抽屉缩小被误压） */
|
||||
.time-drawer-body :deep(.u-calendar-month__days__day__select__info) {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #2a2d33;
|
||||
}
|
||||
|
||||
/* 开始/结束提示小字 */
|
||||
.time-drawer-body :deep(.u-calendar-month__days__day__select__buttom-info) {
|
||||
font-size: 20rpx;
|
||||
color: #6b6f76;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue