From d8b41fff43a2cee6a8f714ffa807623b15803786 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Fri, 20 Oct 2023 15:21:35 +0800
Subject: [PATCH] fix:立行立改Uniapp小程序新建项目

---
 uni_modules/uview-ui/components/u-calendar/u-calendar.vue |  384 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 384 insertions(+), 0 deletions(-)

diff --git a/uni_modules/uview-ui/components/u-calendar/u-calendar.vue b/uni_modules/uview-ui/components/u-calendar/u-calendar.vue
new file mode 100644
index 0000000..511f993
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-calendar/u-calendar.vue
@@ -0,0 +1,384 @@
+<template>
+	<u-popup
+		:show="show"
+		mode="bottom"
+		closeable
+		@close="close"
+		:round="round"
+		:closeOnClickOverlay="closeOnClickOverlay"
+	>
+		<view class="u-calendar">
+			<uHeader
+				:title="title"
+				:subtitle="subtitle"
+				:showSubtitle="showSubtitle"
+				:showTitle="showTitle"
+			></uHeader>
+			<scroll-view
+				:style="{
+                    height: $u.addUnit(listHeight)
+                }"
+				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"
+					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 '../../libs/util/dayjs.js'
+import Calendar from '../../libs/util/calendar.js'
+/**
+ * Calendar ������
+ * @description  ������������������������������������������������������������������������������������������������������.
+ * @tutorial https://www.uviewui.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 )
+ *
+ * @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: [uni.$u.mpMixin, uni.$u.mixin, props],
+	components: {
+		uHeader,
+		uMonth
+	},
+	data() {
+		return {
+			// ������������������������������
+			months: [],
+			// ���������������������������������������������������index������
+			monthIndex: 0,
+			// ���������������������������
+			listHeight: 0,
+			// month������������������������������
+			selected: [],
+			scrollIntoView: '',
+			scrollTop:0,
+			// ������������������
+			innerFormatter: (value) => value
+		}
+	},
+	watch: {
+		selectedChange: {
+			immediate: true,
+			handler(n) {
+				this.setMonth()
+			}
+		},
+		// ������������������������������������
+		show: {
+			immediate: true,
+			handler(n) {
+				this.setMonth()
+			}
+		}
+	},
+	computed: {
+		// ������maxDate���minDate������������������(2021-10-10)���������������(���������)���������dayjs������������������������������������������������������������������������
+		innerMaxDate() {
+			return uni.$u.test.number(this.maxDate)
+				? Number(this.maxDate)
+				: this.maxDate
+		},
+		innerMinDate() {
+			return uni.$u.test.number(this.minDate)
+				? Number(this.minDate)
+				: this.minDate
+		},
+		// ���������������������������������������������������������������������������������
+		selectedChange() {
+			return [this.innerMinDate, this.innerMaxDate, this.defaultDate]
+		},
+		subtitle() {
+			// ���������������this.months���������������������������������������������
+			if (this.months.length) {
+				return `${this.months[this.monthIndex].year}���${
+					this.months[this.monthIndex].month
+				}���`
+			} 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()
+	},
+	methods: {
+		// ������������������������������������������������props������������������������ref������������
+		setFormatter(e) {
+			this.innerFormatter = e
+		},
+		// month������������������������������������������������������������
+		monthSelected(e) {
+			this.selected = e
+			if (!this.showConfirm) {
+				// ������������������������������������������������������������������������������������������������2������������������������
+				if (
+					this.mode === 'multiple' ||
+					this.mode === 'single' ||
+					(this.mode === 'range' && this.selected.length >= 2)
+				) {
+					this.$emit('confirm', this.selected)
+				}
+			}
+		},
+		init() {
+			// ������maxDate���������������minDate
+			if (
+				this.innerMaxDate &&
+				this.innerMinDate &&
+				new Date(this.innerMaxDate).getTime() < new Date(this.innerMinDate).getTime()
+			) {
+				return uni.$u.error('maxDate������������minDate')
+			}
+			// ���������������������
+			this.listHeight = this.rowHeight * 5 + 30
+			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 = uni.$u.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 = uni.$u.padZero(month)
+				return `${year}-${month}` === selected
+			})
+			if (_index !== -1) {
+				// #ifndef MP-WEIXIN
+				this.$nextTick(() => {
+					this.scrollIntoView = `month-${_index}`
+				})
+				// #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
+				}
+			}
+		},
+		// ���������������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 (!uni.$u.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>
+@import '../../libs/css/components.scss';
+
+.u-calendar {
+	&__confirm {
+		padding: 7px 18px;
+	}
+}
+</style>

--
Gitblit v1.8.0