@ecolovo/uniapp-components 1.0.0

package/components/date-picker/date-picker.vue

@@ -0,0 +1,237 @@
+<template>
+	<view :class="componentClassNames">
+		<selector-cpn
+			:value="showText"
+			:readonly="isReadonly"
+			:disabled="disabled"
+			:placeholder="placeholder"
+			@click="showPicker"
+		>
+			<slot>{{ showText }}</slot>
+		</selector-cpn>
+
+		<!-- 选择器弹框 -->
+		<popup-cpn
+			v-if="isShowPopup"
+			ref="popup"
+			v-model="isShowPopup"
+			:cancel="false"
+			title="选择日期"
+			@click.native.stop.prevent="doNothing"
+			@confirm="onConfirm"
+		>
+			<view v-if="range" :class="$style['DatePicker--date-selector']">
+				<view
+					:class="[
+						$style['DatePicker--date-input'],
+						{ [$style['DatePicker--date-checked']]: 'start' === checkedDateType },
+					]"
+					@click="selectDateType('start')"
+				>
+					{{ startStr }}
+				</view>
+				<text :class="$style['DatePicker--date-separator']">至</text>
+				<view
+					:class="[
+						$style['DatePicker--date-input'],
+						{ [$style['DatePicker--date-checked']]: 'end' === checkedDateType },
+					]"
+					@click="selectDateType('end')"
+				>
+					{{ endStr }}
+				</view>
+			</view>
+
+			<view v-show="checkedDateType === 'start'">
+				<date-picker-view-cpn v-model="startStr" :min="min" :max="max" @change="onChangeStart" />
+			</view>
+			<view v-if="range" v-show="checkedDateType === 'end'">
+				<date-picker-view-cpn v-model="endStr" :min="min" :max="max" @change="onChangeEnd" />
+			</view>
+		</popup-cpn>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import { isFormReadonly } from '../form/mixin';
+import { formatDate, toDate } from '../../utils/date';
+import PopupCpn from '../popup/popup.vue';
+import SelectorCpn from '../selector/selector.vue';
+import DatePickerViewCpn from './date-picker-view.vue';
+
+export default {
+	name: 'AppDatePicker',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	components: { PopupCpn, SelectorCpn, DatePickerViewCpn },
+	mixins: [componentName, isFormReadonly],
+	props: {
+		/** 绑定值 */
+		value: {
+			type: [String, null, Array],
+			default: null,
+		},
+		/** 是否禁用 */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		/** 是否只读 */
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
+		/** 占位文本 */
+		placeholder: {
+			type: String,
+			default: '请选择',
+		},
+		/** 是选择日期范围 */
+		range: {
+			type: Boolean,
+			default: false,
+		},
+		/** 是否在选择开始日期时，同步修改结束日期，且保持时间差 */
+		keepDiff: {
+			type: Boolean,
+			default: false,
+		},
+		/** 结束日期是否可以与开始日期相同 */
+		canSame: {
+			type: Boolean,
+			default: true,
+		},
+		/** 在选择的日期后面拼接时间字符串，如果传入的是数组，会分别对应添加到范围日期值后 */
+		timeAppend: {
+			type: [String, Array],
+			default: '',
+		},
+		/** 最小日期 */
+		min: {
+			type: String,
+			default: '',
+		},
+		/** 最大日期 */
+		max: {
+			type: String,
+			default: '',
+		},
+	},
+	data() {
+		return {
+			/** 选择框是否可见 */
+			isShowPopup: false,
+			/** 开始日期 */
+			startStr: '',
+			/** 结束日期 */
+			endStr: '',
+			/** 当前选中的日期类型 */
+			checkedDateType: 'start',
+		};
+	},
+	computed: {
+		isReadonly() {
+			return this.readonly || this.isFormReadonly;
+		},
+		startDate() {
+			return formatDate(toDate(this.range && Array.isArray(this.value) ? this.value[0] : this.value));
+		},
+		endDate() {
+			return formatDate(toDate(this.range && Array.isArray(this.value) ? this.value[1] : ''));
+		},
+		showText() {
+			return this.range && this.startDate && this.endDate
+				? `${this.startDate} 至 ${this.endDate}`
+				: this.startDate;
+		},
+	},
+	methods: {
+		doNothing() {},
+		/** 显示选择器弹出框 */
+		showPicker() {
+			if (this.disabled || this.isReadonly) {
+				return;
+			}
+
+			this.checkedDateType = 'start';
+
+			let [start, end] = [this.startDate, this.endDate];
+			this.startStr = start || formatDate(new Date());
+			this.endStr = end || formatDate(new Date(Date.now() + (this.canSame ? 0 : 8.64e7)));
+
+			this.isShowPopup = true;
+			this.$emit('show');
+		},
+		/** 选中日期类型 */
+		selectDateType(type) {
+			if (this.checkedDateType !== type) this.checkedDateType = type;
+		},
+		onChangeStart(dateStr) {
+			if (!this.range) return;
+
+			const timeDiff = toDate(this.endStr).getTime() - toDate(dateStr).getTime();
+			if (this.endStr <= dateStr || this.keepDiff) {
+				if (this.keepDiff) {
+					this.endStr = formatDate(new Date(toDate(dateStr).getTime() + timeDiff));
+				} else if (!this.canSame) {
+					this.endStr = formatDate(new Date(toDate(dateStr).getTime() + 8.64e7));
+				} else {
+					this.endStr = dateStr;
+				}
+			}
+		},
+		onChangeEnd(dateStr) {
+			if (dateStr <= this.startStr) {
+				if (this.canSame) {
+					this.endStr = this.startStr;
+				} else {
+					this.endStr = formatDate(new Date(toDate(this.startStr).getTime() + 8.64e7));
+				}
+			}
+		},
+		onConfirm() {
+			this.$refs.popup.close();
+			const startAppend = Array.isArray(this.timeAppend) ? this.timeAppend[0] : this.timeAppend;
+			const endAppend = Array.isArray(this.timeAppend) ? this.timeAppend[1] : this.timeAppend;
+			const start = startAppend ? `${this.startStr} ${startAppend}` : this.startStr;
+			const end = endAppend ? `${this.endStr} ${endAppend}` : this.endStr;
+			this.$emit('input', this.range ? [start, end] : start);
+			this.$emit('change', this.range ? [start, end] : start);
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+.DatePicker {
+	width: 100%;
+	height: 100%;
+}
+.DatePicker--date-input {
+	flex: 1;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 72rpx;
+	background: UTILS__GLOBAL_VAR(color, background);
+	border-radius: 12rpx;
+	transition: color 0.3s, background 0.3s;
+	&.DatePicker--date-checked {
+		background: UTILS__GLOBAL_VAR(theme, primary);
+		color: #fff;
+	}
+}
+.DatePicker--date-separator {
+	margin: 0 20rpx;
+}
+.DatePicker--date-selector {
+	margin-top: 20rpx;
+	display: flex;
+	align-items: center;
+}
+</style>

package/components/datetime-picker/datetime-picker-view.vue

@@ -0,0 +1,209 @@
+<template>
+	<picker-view
+		immediate-change
+		:value="pickerValue"
+		:class="componentClassNames"
+		@change="handlePickerChange"
+		@pickend="onPickEnd"
+	>
+		<picker-view-column>
+			<view v-for="item in yearOptions" :key="item" :class="$style['DatetimePickerView--option']">
+				{{ item }} 年
+			</view>
+		</picker-view-column>
+		<picker-view-column>
+			<view v-for="item in monthOptions" :key="item" :class="$style['DatetimePickerView--option']">
+				{{ item }} 月
+			</view>
+		</picker-view-column>
+		<picker-view-column>
+			<view v-for="item in dateOptions" :key="item" :class="$style['DatetimePickerView--option']">
+				{{ item }} 日
+			</view>
+		</picker-view-column>
+		<picker-view-column>
+			<view v-for="item in hourOptions" :key="item" :class="$style['DatetimePickerView--option']">
+				{{ item }} 时
+			</view>
+		</picker-view-column>
+		<picker-view-column v-if="minuteStep > 0">
+			<view v-for="item in minuteOptions" :key="item" :class="$style['DatetimePickerView--option']">
+				{{ item }} 分
+			</view>
+		</picker-view-column>
+	</picker-view>
+</template>
+
+<script>
+import range from 'lodash-es/range';
+import componentName from '../../mixins/componentName';
+import { formatDate, toDate } from '../../utils/date';
+
+/** 年份选项 */
+const yearOptions = (function () {
+	const arr = [];
+	for (let i = 1900; i <= 2099; i++) {
+		arr.push(i);
+	}
+	return arr;
+})();
+
+/** 获取指定日期所在月份的日期选项列表 */
+function getDateOptions(date) {
+	date = new Date(date);
+	date.setMonth(date.getMonth() + 1, 0);
+	const max = date.getDate();
+	return range(1, max + 1);
+}
+
+export default {
+	name: 'AppDatetimePickerView',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	mixins: [componentName],
+	props: {
+		/** 绑定值 */
+		value: {
+			type: [String, null],
+			default: null,
+		},
+		/** 是否在选择开始日期时，同步修改结束日期，且保持时间差 */
+		keepDiff: {
+			type: Boolean,
+			default: false,
+		},
+		/** 结束日期是否可以与开始日期相同 */
+		canSame: {
+			type: Boolean,
+			default: false,
+		},
+		/** 最小日期 */
+		min: {
+			type: String,
+			default: '',
+		},
+		/** 最大日期 */
+		max: {
+			type: String,
+			default: '',
+		},
+		/** 分钟步长 */
+		minuteStep: {
+			type: Number,
+			default: 5,
+		},
+	},
+	data() {
+		return {
+			innerValue: '',
+			/** 年份选项列表 */
+			yearOptions: yearOptions,
+			/** 月份选项列表 */
+			monthOptions: range(1, 13),
+			/** 日期选项列表 */
+			dateOptions: [],
+			/** 小时选项列表 */
+			hourOptions: range(0, 24),
+			/** 分钟选项列表 */
+			minuteOptions: [],
+			/** picker-view 绑定值 */
+			pickerValue: [0, 0, 0, 0, 0],
+		};
+	},
+	computed: {
+		currentValue: {
+			get: function () {
+				return this.value === null ? this.innerValue : this.value;
+			},
+			set: function (value) {
+				this.$emit('input', value);
+				this.innerValue = value;
+				this.$emit('change', value);
+			},
+		},
+	},
+	created() {
+		this.minuteOptions = range(0, 60, this.minuteStep);
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.syncPickerValue(this.currentValue || new Date());
+		});
+	},
+	methods: {
+		/** 同步 picker-view 选中索引 */
+		syncPickerValue(date) {
+			const dateObj = toDate(date || new Date());
+			const [Y, M, D, h, m] = formatDate(dateObj, 'YYYY-MM-DD-HH-mm').split('-');
+			this.dateOptions = getDateOptions(dateObj);
+			const i1 = this.yearOptions.indexOf(Number(Y));
+			const i2 = this.monthOptions.indexOf(Number(M));
+			const i3 = this.dateOptions.indexOf(Number(D));
+			const i4 = this.hourOptions.indexOf(Number(h));
+			const i5 = Math.max(
+				this.minuteOptions.indexOf(Math.round(Number(m) / this.minuteStep) * this.minuteStep),
+				0
+			);
+			this.$nextTick(() => {
+				this.pickerValue =
+					typeof this.pickerValue[0] === 'number'
+						? [i1, i2, i3, i4, i5].map((item) => item.toString())
+						: [i1, i2, i3, i4, i5];
+			});
+		},
+		/** picker-view 选项值变化处理 */
+		handlePickerChange(e) {
+			const newPickerValue = e.detail.value;
+			/** 获取变化的列 */
+			const col = this.pickerValue.findIndex((item, index) => Number(item) !== Number(newPickerValue[index]));
+			const year = this.yearOptions[newPickerValue[0]];
+			const month = this.monthOptions[newPickerValue[1]];
+			// 如果改变的是年份或月份，需要重新获取日期列表
+			if (col === 0 || col === 1) {
+				this.dateOptions = getDateOptions(toDate(`${year}-${month}-01`));
+				newPickerValue[2] = Math.min(
+					newPickerValue[2] === -1 ? this.dateOptions.length - 1 : newPickerValue[2],
+					this.dateOptions.length - 1
+				);
+			}
+			const date = this.dateOptions[newPickerValue[2]];
+			const hour = this.hourOptions[newPickerValue[3]];
+			const minute = this.minuteStep >= 0 ? this.minuteOptions[newPickerValue[4]] : '00';
+
+			this.pickerValue = newPickerValue;
+			const dateValue = new Date(year, month - 1, date, hour, minute, 0, 0);
+			let dateStr = formatDate(dateValue, formatDate.DATE_MINUTE_WITH_YEAR);
+			if (this.min && dateStr < this.min) {
+				dateStr = this.min;
+			}
+			if (this.max && dateStr > this.max) {
+				dateStr = this.max;
+			}
+			this.currentValue = dateStr;
+		},
+		/** 滑动结束处理，保持选择器显示值与输入框值一致 */
+		onPickEnd() {
+			this.$nextTick(() => {
+				this.syncPickerValue(this.currentValue);
+			});
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+.DatetimePickerView {
+	margin-top: 24rpx;
+	height: 300rpx;
+}
+.DatetimePickerView--option {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	white-space: nowrap;
+}
+</style>

package/components/datetime-picker/datetime-picker.vue

@@ -0,0 +1,235 @@
+<template>
+	<view :class="componentClassNames">
+		<selector-cpn
+			:value="showText"
+			:readonly="isReadonly"
+			:disabled="disabled"
+			:placeholder="placeholder"
+			@click="showPicker"
+		/>
+
+		<!-- 选择器弹框 -->
+		<popup-cpn
+			v-if="isShowPopup"
+			ref="popup"
+			v-model="isShowPopup"
+			:cancel="false"
+			title="选择时间"
+			@click.native.stop.prevent="doNothing"
+			@confirm="onConfirm"
+		>
+			<view v-show="checkedDateType === 'start'">
+				<datetime-picker-view-cpn
+					v-model="startStr"
+					:min="min"
+					:max="max"
+					:minute-step="minuteStep"
+					@change="onChangeStart"
+				/>
+			</view>
+			<view v-if="range" v-show="checkedDateType === 'end'">
+				<datetime-picker-view-cpn
+					v-model="endStr"
+					:min="min"
+					:max="max"
+					:minute-step="minuteStep"
+					@change="onChangeEnd"
+				/>
+			</view>
+		</popup-cpn>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import { isFormReadonly } from '../form/mixin';
+import { formatDate, toDate } from '../../utils/date';
+import PopupCpn from '../popup/popup.vue';
+import SelectorCpn from '../selector/selector.vue';
+import DatetimePickerViewCpn from './datetime-picker-view.vue';
+
+const DATE_FORMAT = formatDate.DATE_MINUTE_WITH_YEAR;
+
+export default {
+	name: 'AppDatetimePicker',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	components: { PopupCpn, SelectorCpn, DatetimePickerViewCpn },
+	mixins: [componentName, isFormReadonly],
+	props: {
+		/** 绑定值 */
+		value: {
+			type: [String, null, Array],
+			default: null,
+		},
+		/** 是否禁用 */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		/** 是否只读 */
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
+		/** 占位文本 */
+		placeholder: {
+			type: String,
+			default: '请选择',
+		},
+		/** 是否日期范围选择器 */
+		range: {
+			type: Boolean,
+			default: false,
+		},
+		/** 是否在选择开始日期时，同步修改结束日期，且保持时间差 */
+		keepDiff: {
+			type: Boolean,
+			default: false,
+		},
+		/** 结束日期是否可以与开始日期相同 */
+		canSame: {
+			type: Boolean,
+			default: true,
+		},
+		/** 在选择的日期后面拼接时间字符串，如果传入的是数组，会分别对应添加到范围日期值后 */
+		timeAppend: {
+			type: [String, Array],
+			default: '',
+		},
+		/** 最小日期 */
+		min: {
+			type: String,
+			default: '',
+		},
+		/** 最大日期 */
+		max: {
+			type: String,
+			default: '',
+		},
+		/** 分钟步长 */
+		minuteStep: {
+			type: Number,
+			default: 5,
+		},
+	},
+	data() {
+		return {
+			/** 选择框是否可见 */
+			isShowPopup: false,
+			/** 开始日期 */
+			startStr: '',
+			/** 结束日期 */
+			endStr: '',
+			/** 当前选中的日期类型 */
+			checkedDateType: 'start',
+		};
+	},
+	computed: {
+		isReadonly() {
+			return this.readonly || this.isFormReadonly;
+		},
+		startDate() {
+			return formatDate(
+				toDate(this.range && Array.isArray(this.value) ? this.value[0] : this.value),
+				DATE_FORMAT
+			);
+		},
+		endDate() {
+			return formatDate(toDate(this.range && Array.isArray(this.value) ? this.value[1] : ''), DATE_FORMAT);
+		},
+		showText() {
+			return this.range && this.startDate && this.endDate
+				? `${this.startDate} 至 ${this.endDate}`
+				: this.startDate;
+		},
+	},
+	methods: {
+		doNothing() {},
+		/** 显示选择器弹出框 */
+		showPicker() {
+			if (this.disabled || this.isReadonly) {
+				return;
+			}
+
+			this.checkedDateType = 'start';
+
+			let [start, end] = [this.startDate, this.endDate];
+			this.startStr = start || formatDate(new Date(), DATE_FORMAT);
+			this.endStr = end || formatDate(new Date(Date.now() + (this.canSame ? 0 : 8.64e7)), DATE_FORMAT);
+
+			this.isShowPopup = true;
+			this.$emit('show');
+		},
+		/** 选中日期类型 */
+		selectDateType(type) {
+			if (this.checkedDateType !== type) this.checkedDateType = type;
+		},
+		onChangeStart(dateStr) {
+			if (!this.range) return;
+
+			const timeDiff = toDate(this.endStr).getTime() - toDate(dateStr).getTime();
+			if (this.endStr <= dateStr || this.keepDiff) {
+				if (this.keepDiff) {
+					this.endStr = formatDate(new Date(toDate(dateStr).getTime() + timeDiff), DATE_FORMAT);
+				} else if (!this.canSame) {
+					this.endStr = formatDate(new Date(toDate(dateStr).getTime() + 8.64e7), DATE_FORMAT);
+				} else {
+					this.endStr = dateStr;
+				}
+			}
+		},
+		onChangeEnd(dateStr) {
+			if (dateStr <= this.startStr) {
+				if (this.canSame) {
+					this.endStr = this.startStr;
+				} else {
+					this.endStr = formatDate(new Date(toDate(this.startStr).getTime() + 8.64e7), DATE_FORMAT);
+				}
+			}
+		},
+		onConfirm() {
+			this.$refs.popup.close();
+			const startAppend = Array.isArray(this.timeAppend) ? this.timeAppend[0] : this.timeAppend;
+			const endAppend = Array.isArray(this.timeAppend) ? this.timeAppend[1] : this.timeAppend;
+			const start = startAppend ? `${this.startStr} ${startAppend}` : this.startStr;
+			const end = endAppend ? `${this.endStr} ${endAppend}` : this.endStr;
+			this.$emit('input', this.range ? [start, end] : start);
+			this.$emit('change', this.range ? [start, end] : start);
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+.DatetimePicker {
+	width: 100%;
+	height: 100%;
+}
+.DatetimePicker--date-input {
+	flex: 1;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 72rpx;
+	background: UTILS__GLOBAL_VAR(color, background);
+	border-radius: 12rpx;
+	transition: color 0.3s, background 0.3s;
+	&.DatetimePicker--date-checked {
+		background: UTILS__GLOBAL_VAR(theme, primary);
+		color: #fff;
+	}
+}
+.DatetimePicker--date-separator {
+	margin: 0 20rpx;
+}
+.DatetimePicker--date-selector {
+	margin-top: 20rpx;
+	display: flex;
+	align-items: center;
+}
+</style>