@ecolovo/uniapp-components 1.0.9 → 2.0.0

package/utils/price.ts

@@ -0,0 +1,57 @@
+interface FormatPriceOption {
+	/** 精度，默认为 2 */
+	precision: number;
+	/** 是否补齐小数部分 0 */
+	padDecimal: boolean;
+}
+interface FormatPriceResult {
+	/** 格式化的价格字符串 */
+	price: string;
+	/** 是否负值 */
+	negative: boolean;
+	/** 整数部分价格 */
+	integer: string;
+	/** 小数部分价格 */
+	decimal: string;
+	/** 价格对应数值 */
+	number: number;
+}
+
+/**
+ * 格式化价格
+ * @param price 价格
+ */
+export function formatPrice(price: number | string, option?: FormatPriceOption): FormatPriceResult {
+	if (isNaN(Number(price))) {
+		return {
+			price: '',
+			negative: false,
+			integer: '',
+			decimal: '',
+			number: NaN,
+		};
+	}
+	price = Number(price);
+	let negative = false;
+	if (price < 0) {
+		negative = true;
+		price = -price;
+	}
+	const integer = Math.floor(price).toString();
+	const decimalNum = Math.round(Number(price + 'e' + (option?.precision ?? 2))) % 100;
+	let decimal: string;
+	if (option?.padDecimal ?? true) {
+		decimal = '.' + decimalNum.toString().padStart(option?.precision ?? 2, '0');
+	} else {
+		if (decimalNum === 0) decimal = '';
+		else decimal = decimalNum.toString().slice(1);
+	}
+	const formattedPrice = `${negative ? '-' : ''}${integer}.${decimal}`;
+	return {
+		price: formattedPrice, // 价格字符串
+		negative,
+		integer, // 整数部分
+		decimal, // 小数部分
+		number: Number(formattedPrice),
+	};
+}

package/utils/round.ts

@@ -0,0 +1,11 @@
+export function round(val: number, precision = 0): number {
+	if (val.toString().indexOf('e') >= 0) {
+		const exponential = val.toString().split('e');
+		return Math.round(+`${exponential[0]}e${+exponential[1]! + precision}`) / 10 ** precision;
+	}
+	return Math.round(+`${val}e${precision}`) / 10 ** precision;
+}
+
+export function round2(val: number): number {
+	return round(val, 2);
+}

package/utils/{windowInfo.js → windowInfo.ts}

@@ -1,22 +1,19 @@
 /** 默认导航栏高度 */
 const NAV_TITLE_HEIGHT = 44;
-/** 胶囊按钮位置信息
- * @type {UniApp.GetMenuButtonBoundingClientRectRes | null}
- */
-let menuButton = null;
-/** 系统信息
- * @type {UniApp.GetWindowInfoResult | null}
- */
-let windowInfo = null;
+
+/** 胶囊按钮位置信息 */
+let menuButton: UniApp.GetMenuButtonBoundingClientRectRes | null = null;
+/** 胶囊按钮宽度，仅在 css 中使用，当有胶囊按钮时，表示胶囊按钮左边缘到屏幕右侧的宽度，否则为 `0px` */
+let menuButtonWidthInCss: string = '0px';
+/** 系统信息 */
+let windowInfo: UniApp.GetWindowInfoResult | null = null;
 /** 导航栏高度 */
 let navBarHeight = NAV_TITLE_HEIGHT;
 /** 导航栏顶部距离 */
 let navBarTopOffset = 0;
 /** 导航栏底部距离 */
 let navBarBottomOffset = NAV_TITLE_HEIGHT;
-/** 底部安全区域高度
- * @type {number}
- */
+/** 底部安全区域高度 */
 let safeAreaInsetBottom = uni.upx2px(50);
 
 /* #ifdef MP-WEIXIN || MP-ALIPAY */
@@ -30,7 +27,9 @@ if (menuButton) {
 	if (navBarHeight < menuButton.height) {
 		navBarHeight = menuButton.height + 12;
 	}
-	navBarTopOffset = menuButton.top - (navBarHeight - menuButton.height) / 3;
+	navBarTopOffset = menuButton.top - (navBarHeight - menuButton.height) / 2;
+
+	menuButtonWidthInCss = 'calc(100vw - ' + menuButton.left + 'px)';
 } else {
 	navBarTopOffset = windowInfo.safeArea.top || windowInfo.statusBarHeight;
 }
@@ -40,34 +39,12 @@ if (_safeAreaBottom) {
 	safeAreaInsetBottom = _safeAreaBottom;
 }
 
-/** mixin */
-const windowInfoMixin = {
-	computed: {
-		/** 胶囊按钮位置信息 */
-		menuButton: () => menuButton,
-		/** 胶囊按钮宽度 */
-		menuButtonWidth() {
-			return this.menuButton ? 'calc(100vw - ' + this.menuButton.left + 'px)' : '0px';
-		},
-		/** 系统信息 */
-		windowInfo: () => windowInfo,
-		/** 导航栏高度 */
-		navBarHeight: () => navBarHeight,
-		/** 导航栏顶部距离 */
-		navBarTopOffset: () => navBarTopOffset,
-		/** 导航栏底部距离 */
-		navBarBottomOffset: () => navBarBottomOffset,
-		/** 底部安全区域高度 */
-		safeAreaInsetBottom: () => safeAreaInsetBottom,
-	},
-};
-
 export {
 	menuButton,
+	menuButtonWidthInCss,
 	windowInfo,
 	navBarHeight,
 	navBarTopOffset,
 	navBarBottomOffset,
 	safeAreaInsetBottom,
-	windowInfoMixin,
 };

package/components/checkbox-group2/checkbox.vue

@@ -1,109 +0,0 @@
-<template>
-	<view :class="componentClassNames" @click="toggle()">
-		<icon-cpn
-			v-if="icon"
-			:icon="currentValue ? checkedIcon || 'checkbox-checked' : uncheckedIcon || 'checkbox-unchecked'"
-			tap-size="50rpx"
-			:class="[$style['Checkbox2--icon'], { [$style['Checkbox2--checked']]: currentValue }]"
-		/>
-		<view :class="$style['Checkbox2--text']">
-			<slot></slot>
-		</view>
-	</view>
-</template>
-
-<script>
-import componentName from '../../mixins/componentName';
-import IconCpn from '../icon/icon.vue';
-
-export default {
-	name: 'Checkbox2',
-	options: {
-		virtualHost: true,
-		styleIsolation: 'shared',
-	},
-	components: { IconCpn },
-	mixins: [componentName],
-	props: {
-		/** 值 */
-		value: {
-			type: [Boolean, null],
-			default: null,
-		},
-		/** 是否显示勾选图标 */
-		icon: {
-			type: Boolean,
-			default: true,
-		},
-		/** 选中时的图标 */
-		checkedIcon: {
-			type: String,
-			default: '',
-		},
-		/** 未选中时的图标 */
-		uncheckedIcon: {
-			type: String,
-			default: '',
-		},
-	},
-	data() {
-		return {
-			innerValue: false,
-		};
-	},
-	computed: {
-		currentValue: {
-			get: function () {
-				return this.value === null ? this.innerValue : this.value;
-			},
-			set: function (val) {
-				this.$emit('input', val);
-				this.innerValue = val;
-				this.$emit('change', val);
-			},
-		},
-	},
-	methods: {
-		/** 切换选择 */
-		toggle(checked) {
-			if (checked === undefined || checked === null) {
-				this.currentValue = !this.currentValue;
-				return;
-			}
-
-			if (this.currentValue !== !!checked) {
-				this.currentValue = !!checked;
-			}
-		},
-	},
-};
-</script>
-
-<style lang="scss" module>
-@use '../../styles/index' as *;
-
-// 定义外部变量
-$component-name: 'checkbox';
-$component-vars: $checkbox;
-%external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS();
-}
-
-.Checkbox2 {
-	@extend %external-vars;
-	display: flex;
-	align-items: center;
-
-	.Checkbox2--icon {
-		flex: none;
-		margin-right: 12rpx;
-		color: UTILS__LOCAL_VAR(unchecked-color);
-	}
-	.Checkbox2--checked {
-		color: UTILS__LOCAL_VAR(checked-color);
-	}
-	.Checkbox2--text {
-		flex: 0 1 auto;
-	}
-}
-</style>

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

@@ -1,209 +0,0 @@
-<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: 'DatetimePickerView',
-	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

@@ -1,235 +0,0 @@
-<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: 'DatetimePicker',
-	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>

package/components/form/mixin.js

@@ -1,13 +0,0 @@
-export const isFormReadonly = {
-	inject: {
-		formProps: {
-			from: 'formProps',
-			default: {},
-		},
-	},
-	computed: {
-		isFormReadonly() {
-			return this.formProps.readonly;
-		},
-	},
-};