uview-ultra 4.5.46

package/components/up-calendar/month.uvue

@@ -0,0 +1,565 @@
+<template>
+	<view class="up-calendar-month-wrapper" ref="up-calendar-month-wrapper">
+		<view v-for="(item, index) in monthsInner" :key="index" :class="[`up-calendar-month-` + index.toString()]"
+			:ref="`up-calendar-month-` + index.toString()" :id="`month-` + index.toString()">
+			<text v-if="index != 0" class="up-calendar-month__title">{{ item['year'] }}年{{ item['month'] }}月</text>
+			<view class="up-calendar-month__days">
+				<view v-if="showMark" class="up-calendar-month__days__month-mark-wrapper">
+					<text class="up-calendar-month__days__month-mark-wrapper__text">{{ item['month'] }}</text>
+				</view>
+				<template v-for="(item1, index1) in item.date" :key="index1">
+					<view class="up-calendar-month__days__day"
+						:style="[dayStyle(index, index1, item1)]" @tap="clickHandler(index, index1, item1)"
+						:class="{'up-calendar-month__days__day__select--selected': item1.selected}">
+						<view class="up-calendar-month__days__day__select" :style="[daySelectStyle(index, index1, item1)]">
+							<text class="up-calendar-month__days__day__select__info"
+								:class="{'up-calendar-month__days__day__select__info--disabled': item1.disabled}"
+								:style="[textStyle(item1)]">{{ item1['day'] }}</text>
+							<text v-if="getBottomInfo(index, index1, item1)"
+								class="up-calendar-month__days__day__select__buttom-info"
+								:class="{'up-calendar-month__days__day__select__buttom-info--disabled' : item1['disabled']}"
+								:style="[textStyle(item1)]">
+								{{ getBottomInfo(index, index1, item1) }}
+							</text>
+							<text v-if="item1['dot']" class="up-calendar-month__days__day__select__dot"></text>
+						</view>
+					</view>
+				</template>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="uts">
+	import type { PropType } from 'vue';
+	import { computed, getCurrentInstance, nextTick, onMounted, ref, watch } from 'vue';
+	import { addUnit, getWindowInfo, upGetRect } from '../../libs/function/index.uts';
+	import { colorGradient } from '../../libs/function/colorGradient.uts';
+	import { array as testArray } from '../../libs/function/test.uts';
+	import defProps from './calendar.uts';
+	import {dayuts} from '@/uni_modules/lime-dayuts';
+	import { UPCalendarMonthsItemDate, UPCalendarMonthsItem } from './types.uts'
+	defineOptions({
+		styleIsolation: 'app-and-page',
+		name: 'up-calendar-month'
+})
+
+const props = defineProps({
+	showMark: {
+		type: Boolean,
+		default: true
+	},
+	color: {
+		type: String,
+		default: '#3c9cff'
+	},
+	months: {
+		type: Array as PropType<Array<UPCalendarMonthsItem>>,
+		default(): Array<UPCalendarMonthsItem> {
+			return [] as Array<UPCalendarMonthsItem>
+		}
+	},
+	mode: {
+		type: String,
+		default: 'single'
+	},
+	rowHeight: {
+		type: [String, Number],
+		default: 58
+	},
+	maxCount: {
+		type: [String, Number],
+		default: Infinity
+	},
+	startText: {
+		type: String,
+		default: '开始'
+	},
+	endText: {
+		type: String,
+		default: '结束'
+	},
+	defaultDate: {
+		type: [Array, String, Date],
+		default: null
+	},
+	minDate: {
+		type: [String, Number],
+		default: 0
+	},
+	maxDate: {
+		type: [String, Number],
+		default: 0
+	},
+	maxMonth: {
+		type: [String, Number],
+		default: 2
+	},
+	readonly: {
+		type: Boolean,
+		default: ((defProps['calendar'] as UTSJSONObject)['readonly'] as boolean)
+	},
+	maxRange: {
+		type: [Number, String],
+		default: 365
+	},
+	rangePrompt: {
+		type: String,
+		default: ''
+	},
+	showRangePrompt: {
+		type: Boolean,
+		default: true
+	},
+	allowSameDay: {
+		type: Boolean,
+		default: false
+	},
+	todayDate: {
+		type: String,
+		default: ''
+	},
+	todayColor: {
+		type: String,
+		default: ''
+	}
+})
+
+const emit = defineEmits(['monthSelected', 'updateMonthTop'])
+const instance = getCurrentInstance()!.proxy!
+
+const width = ref(0)
+const item = ref<UPCalendarMonthsItemDate | null>(null)
+const monthsInner = ref([] as Array<UPCalendarMonthsItem>)
+const selected = ref([] as Array<string>)
+
+const selectedChange = computed((): any => {
+	return [props.minDate, props.maxDate, props.defaultDate]
+})
+
+const resolvedTodayColor = computed((): string => {
+	return props.todayColor != '' ? props.todayColor : props.color
+})
+
+const rangeMiddleColor = computed((): string => {
+	return colorGradient(props.color, '#ffffff', 100)[90]
+})
+
+const rangeStartDate = computed((): string => {
+	return selected.value.length > 0 ? selected.value[0] : ''
+})
+
+const rangeEndDate = computed((): string => {
+	return selected.value.length >= 2 ? selected.value[selected.value.length - 1] : ''
+})
+
+const dateSame = (date1: string, date2: string): boolean => {
+	return dayuts(date1).isSame(dayuts(date2))
+}
+
+const isSelectedDate = (date: string): boolean => {
+	const sameDate = (element: string): boolean => dateSame(element, date)
+	return selected.value.some(sameDate)
+}
+
+const dayStyle = (index1: number, index2: number, item: UPCalendarMonthsItemDate): any => {
+	const style = {} as UTSJSONObject
+	if (item != null) {
+		let week: number = item.week
+		style['height'] = addUnit(props.rowHeight)
+		if (index2 == 0) {
+			week = (week == 0 ? 7 : week) - 1
+			style['marginLeft'] = `${(week / 7) * 100}%`
+		}
+	}
+	if (props.mode == 'range') {
+		style['padding'] = 0
+	}
+	return style
+}
+
+const daySelectStyle = (index1: number, index2: number, item: UPCalendarMonthsItemDate): UTSJSONObject => {
+	const date = item['dateStr'] != null ? item['dateStr'] as string : dayuts(item['date']).format("YYYY-MM-DD")
+	const style = {} as UTSJSONObject
+	const sameDate = (element: string): boolean => dateSame(element, date)
+	if (selected.value.some(sameDate)) {
+		style['backgroundColor'] = props.color
+	}
+	if (props.todayDate != '' && dateSame(date, props.todayDate)) {
+		style['border'] = `1px solid ${resolvedTodayColor.value}`
+		style['boxSizing'] = 'border-box'
+	}
+	if (props.mode == 'single') {
+		if (selected.value.length > 0 && date == selected.value[0]) {
+			style['borderRadius'] = '3px'
+		}
+	} else if (props.mode == 'range') {
+		if (selected.value.length >= 2) {
+			const len = selected.value.length - 1
+			if (dateSame(date, selected.value[0])) {
+				style['borderTopLeftRadius'] = '3px'
+				style['borderBottomLeftRadius'] = '3px'
+			}
+			if (dateSame(date, selected.value[len])) {
+				style['borderTopRightRadius'] = '3px'
+				style['borderBottomRightRadius'] = '3px'
+			}
+			if (date > rangeStartDate.value && date < rangeEndDate.value) {
+				style['backgroundColor'] = rangeMiddleColor.value
+				style['opacity'] = 0.7
+			}
+		} else if (selected.value.length == 1) {
+			style['borderTopLeftRadius'] = '3px'
+			style['borderBottomLeftRadius'] = '3px'
+		}
+	} else if (selected.value.some(sameDate)) {
+		style['borderRadius'] = '3px'
+	}
+	return style
+}
+
+const textStyle = (item: UPCalendarMonthsItemDate): UTSJSONObject => {
+	const date = item['dateStr'] != null ? item['dateStr'] as string : dayuts(item['date']).format("YYYY-MM-DD")
+	const style = {} as UTSJSONObject
+	const sameDate = (element: string): boolean => dateSame(element, date)
+	if (selected.value.some(sameDate)) {
+		style['color'] = '#ffffff'
+	}
+	if (props.mode === 'range' && selected.value.length >= 2) {
+		if (date > rangeStartDate.value && date < rangeEndDate.value) {
+			style['color'] = props.color
+		}
+	}
+	if (props.todayDate != '' && dateSame(date, props.todayDate) && !isSelectedDate(date)) {
+		style['color'] = resolvedTodayColor.value
+	}
+	return style
+}
+
+const getBottomInfo = (index1: number, index2: number, item: UPCalendarMonthsItemDate): string => {
+	const date = item['dateStr'] != null ? item['dateStr'] as string : dayuts(item['date']).format("YYYY-MM-DD")
+	let bottomInfo = ''
+	if (item['bottomInfo'] != null) {
+		bottomInfo = item['bottomInfo'].toString()
+	}
+	if (props.mode === 'range' && selected.value.length > 0) {
+		if (selected.value.length == 1) {
+			if (dateSame(date, selected.value[0])) return props.startText
+			return bottomInfo
+		}
+		const len = selected.value.length - 1
+		if (dateSame(date, selected.value[0]) && dateSame(date, selected.value[1]) && len == 1) {
+			return `${props.startText}/${props.endText}`
+		} else if (dateSame(date, selected.value[0])) {
+			return props.startText
+		} else if (dateSame(date, selected.value[len])) {
+			return props.endText
+		}
+		return bottomInfo
+	}
+	return bottomInfo
+}
+
+const getWrapperWidth = (): void => {
+	upGetRect('.up-calendar-month-wrapper', false, instance).then((res: NodeInfo) => {
+		let currentWidth = res.width ?? 0
+		if (currentWidth <= 0) {
+			currentWidth = getWindowInfo().windowWidth
+		}
+		width.value = currentWidth
+	})
+}
+
+const getMonthRectByPromise = (el: any): Promise<NodeInfo> => {
+	return upGetRect(`.${el}`, false, instance)
+}
+
+const getMonthRect = (): void => {
+	const months = props.months == null ? [] as Array<UPCalendarMonthsItem> : props.months as Array<UPCalendarMonthsItem>
+	const promiseAllArr: Array<Promise<NodeInfo>> = months.map((item: UPCalendarMonthsItem, index): Promise<NodeInfo> => {
+		return getMonthRectByPromise(`up-calendar-month-${index}`)
+	})
+	Promise.all(promiseAllArr).then((res: NodeInfo[]) => {
+		const sizes = res as NodeInfo[]
+		let height = 1
+		const topArr = [] as Array<number>
+		for (let i = 0; i < months.length; i++) {
+			topArr.push(height)
+			height += sizes[i].height ?? 0
+		}
+		emit('updateMonthTop', topArr)
+	})
+}
+
+const init = (): void => {
+	nextTick(() => {
+		getWrapperWidth()
+		getMonthRect()
+	})
+}
+
+function setSelected(nextSelected: Array<string>, event: boolean = true): void {
+	selected.value = nextSelected
+	if (event) {
+		emit('monthSelected', selected.value, 'tap')
+	}
+}
+
+const clickHandler = (index1: number, index21: number, currentItem: UPCalendarMonthsItemDate): void => {
+	if (props.readonly) {
+		return
+	}
+	item.value = currentItem
+	const date = currentItem['dateStr'] != null ? currentItem['dateStr'] as string : dayuts(currentItem['date']).format("YYYY-MM-DD")
+	const disabled = currentItem.disabled ?? false
+	if (disabled) return
+	let nextSelected = [...selected.value]
+	if (props.mode === 'single') {
+		nextSelected = [date]
+	} else if (props.mode === 'multiple') {
+		const sameDate = (element: string): boolean => dateSame(element, date)
+		if (nextSelected.some(sameDate)) {
+			const itemIndex = nextSelected.findIndex((item: string): boolean => item === date)
+			nextSelected.splice(itemIndex, 1)
+		} else if (nextSelected.length < (props.maxCount as number)) {
+			nextSelected.push(date)
+		}
+	} else {
+		if (nextSelected.length == 0 || nextSelected.length >= 2) {
+			nextSelected = [date]
+		} else if (nextSelected.length == 1) {
+			const existsDate = nextSelected[0]
+			if (dayuts(date).isBefore(existsDate)) {
+				nextSelected = [date]
+			} else if (dayuts(date).isAfter(existsDate)) {
+				nextSelected.push(date)
+				const startDate = nextSelected[0]
+				const endDate = nextSelected[1]
+				const arr = [] as Array<string>
+				let i = 0
+				do {
+					arr.push(dayuts(startDate).add(i, 'day').format("YYYY-MM-DD"))
+					i++
+				} while (dayuts(startDate).add(i, 'day').isBefore(dayuts(endDate)))
+				arr.push(endDate)
+				nextSelected = arr
+			} else {
+				if (nextSelected[0] === date && props.allowSameDay != true) return
+				nextSelected.push(date)
+			}
+		}
+	}
+	setSelected(nextSelected)
+}
+
+const setDefaultDate = (): void => {
+	if (props.defaultDate == null) {
+		const defaultSelected = [dayuts().format("YYYY-MM-DD")]
+		setSelected(defaultSelected, false)
+		return
+	}
+	let defaultDate = [] as Array<string>
+	const minDateData = props.minDate != null ? props.minDate.toString() : ''
+	const maxDateData = props.maxDate != null ? props.maxDate.toString() : ''
+	const minDate = minDateData != '' ? minDateData : dayuts().format("YYYY-MM-DD")
+	const maxDate = maxDateData != '' ? maxDateData : dayuts(minDate).add(props.maxMonth as number - 1, 'month').format("YYYY-MM-DD")
+	if (props.mode === 'single') {
+		if (!testArray(props.defaultDate)) {
+			defaultDate = [dayuts(props.defaultDate as any).format("YYYY-MM-DD")]
+		} else {
+			const tmp = dayuts((props.defaultDate as Array<any>)[0]).format("YYYY-MM-DD")
+			defaultDate = [tmp]
+		}
+	} else {
+		if (!testArray(props.defaultDate)) return
+		defaultDate = props.defaultDate as Array<string>
+	}
+	defaultDate = defaultDate.filter((item: string): boolean => {
+		return dayuts(item).isAfter(dayuts(minDate).subtract(1, 'day')) && dayuts(item).isBefore(dayuts(maxDate).add(1, 'day'))
+	})
+	setSelected(defaultDate, false)
+}
+
+const selectDate = (date: string): void => {
+	const targetDate = dayuts(date).format("YYYY-MM-DD")
+	for (let monthIndex = 0; monthIndex < monthsInner.value.length; monthIndex++) {
+		const dayIndex = monthsInner.value[monthIndex].date.findIndex((item: UPCalendarMonthsItemDate): boolean => {
+			const itemDate = item['dateStr'] != null ? item['dateStr'] as string : dayuts(item['date']).format("YYYY-MM-DD")
+			return dateSame(itemDate, targetDate)
+		})
+		if (dayIndex != -1) {
+			clickHandler(monthIndex, dayIndex, monthsInner.value[monthIndex].date[dayIndex])
+			return
+		}
+	}
+}
+
+watch(selectedChange, () => {
+	setDefaultDate()
+}, { immediate: true })
+
+watch((): Array<UPCalendarMonthsItem> => props.months == null ? [] as Array<UPCalendarMonthsItem> : props.months as Array<UPCalendarMonthsItem>, (value: Array<UPCalendarMonthsItem>) => {
+	monthsInner.value = value
+}, { immediate: true })
+
+onMounted(() => {
+	init()
+})
+
+defineExpose({
+	width,
+	item,
+	monthsInner,
+	selected,
+	selectedChange,
+	resolvedTodayColor,
+	rangeMiddleColor,
+	rangeStartDate,
+	rangeEndDate,
+	dayStyle,
+	daySelectStyle,
+	textStyle,
+	getBottomInfo,
+	init,
+	dateSame,
+	isSelectedDate,
+	getWrapperWidth,
+	getMonthRect,
+	getMonthRectByPromise,
+	clickHandler,
+	setDefaultDate,
+	setSelected,
+	selectDate
+})
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	.up-calendar-month-wrapper {
+		margin-top: 4px;
+	}
+
+	.up-calendar-month {
+
+		&__title {
+			display: flex;
+			flex-direction: column;
+			font-size: 14px;
+			line-height: 42px;
+			height: 42px;
+			color: $up-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 */
+				// vue下使用css进行宽度计算，因为某些安卓机会无法进行js获取父元素宽度进行计算得出，会有偏移
+				width: calc(100% / 7);
+				box-sizing: border-box;
+				/* #endif */
+				/* #ifdef APP */
+				width: 14.285%;
+				/* #endif */
+
+				&__select {
+					flex: 1;
+					@include flex;
+					align-items: center;
+					justify-content: center;
+					position: relative;
+
+					&__dot {
+						width: 7px;
+						height: 7px;
+						border-radius: 100px;
+						background-color: $up-error;
+						position: absolute;
+						top: 12px;
+						right: 7px;
+					}
+
+					&__buttom-info {
+						color: $up-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: $up-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>