@ecolovo/uniapp-components 1.0.10 → 2.0.1

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.d.ts

@@ -0,0 +1,2 @@
+export declare function round(val: number, precision?: number): number;
+export declare function round2(val: number): number;

package/utils/round.js

@@ -1,22 +1,10 @@
-/**
- * 四舍五入处理
- * @param {number} val 需要处理的数据
- * @param {number} precision 保留小数位数，默认不保留
- * @returns {number} 处理后的数据
- */
 export function round(val, precision = 0) {
 	if (val.toString().indexOf('e') >= 0) {
 		const exponential = val.toString().split('e');
-		return Math.round(exponential[0] + 'e' + (+exponential[1] + precision)) / Math.pow(10, precision);
+		return Math.round(+`${exponential[0]}e${+exponential[1] + precision}`) / 10 ** precision;
 	}
-	return Math.round(+val + 'e' + precision) / Math.pow(10, precision);
+	return Math.round(+`${val}e${precision}`) / 10 ** precision;
 }
-
-/**
- * 四舍五入处理，并保留 2 位小数
- * @param {number} val 需要处理的数据
- * @returns {number} 处理后的数据
- */
 export function round2(val) {
 	return round(val, 2);
 }

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.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="@dcloudio/types" />
+/** 胶囊按钮位置信息 */
+declare let menuButton: UniApp.GetMenuButtonBoundingClientRectRes | null;
+/** 胶囊按钮宽度，仅在 css 中使用，当有胶囊按钮时，表示胶囊按钮左边缘到屏幕右侧的宽度，否则为 `0px` */
+declare let menuButtonWidthInCss: string;
+/** 系统信息 */
+declare let windowInfo: UniApp.GetWindowInfoResult | null;
+/** 导航栏高度 */
+declare let navBarHeight: number;
+/** 导航栏顶部距离 */
+declare let navBarTopOffset: number;
+/** 导航栏底部距离 */
+declare let navBarBottomOffset: number;
+/** 底部安全区域高度 */
+declare let safeAreaInsetBottom: number;
+export {
+	menuButton,
+	menuButtonWidthInCss,
+	windowInfo,
+	navBarHeight,
+	navBarTopOffset,
+	navBarBottomOffset,
+	safeAreaInsetBottom,
+};

package/utils/windowInfo.js

@@ -1,12 +1,10 @@
 /** 默认导航栏高度 */
 const NAV_TITLE_HEIGHT = 44;
-/** 胶囊按钮位置信息
- * @type {UniApp.GetMenuButtonBoundingClientRectRes | null}
- */
+/** 胶囊按钮位置信息 */
 let menuButton = null;
-/** 系统信息
- * @type {UniApp.GetWindowInfoResult | null}
- */
+/** 胶囊按钮宽度，仅在 css 中使用，当有胶囊按钮时，表示胶囊按钮左边缘到屏幕右侧的宽度，否则为 `0px` */
+let menuButtonWidthInCss = '0px';
+/** 系统信息 */
 let windowInfo = null;
 /** 导航栏高度 */
 let navBarHeight = NAV_TITLE_HEIGHT;
@@ -14,23 +12,20 @@ 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 */
 menuButton = uni.getMenuButtonBoundingClientRect();
 /* #endif */
 windowInfo = uni.getWindowInfo();
 // eslint-disable-next-line no-console
 console.log('windowInfo:', windowInfo);
-
 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;
 }
@@ -39,35 +34,12 @@ const _safeAreaBottom = windowInfo.screenHeight - windowInfo.safeArea.bottom;
 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/utils/windowInfo.ts

@@ -0,0 +1,50 @@
+/** 默认导航栏高度 */
+const NAV_TITLE_HEIGHT = 44;
+
+/** 胶囊按钮位置信息 */
+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;
+/** 底部安全区域高度 */
+let safeAreaInsetBottom = uni.upx2px(50);
+
+/* #ifdef MP-WEIXIN || MP-ALIPAY */
+menuButton = uni.getMenuButtonBoundingClientRect();
+/* #endif */
+windowInfo = uni.getWindowInfo();
+// eslint-disable-next-line no-console
+console.log('windowInfo:', windowInfo);
+
+if (menuButton) {
+	if (navBarHeight < menuButton.height) {
+		navBarHeight = menuButton.height + 12;
+	}
+	navBarTopOffset = menuButton.top - (navBarHeight - menuButton.height) / 2;
+
+	menuButtonWidthInCss = 'calc(100vw - ' + menuButton.left + 'px)';
+} else {
+	navBarTopOffset = windowInfo.safeArea.top || windowInfo.statusBarHeight;
+}
+navBarBottomOffset = navBarTopOffset + navBarHeight;
+const _safeAreaBottom = windowInfo.screenHeight - windowInfo.safeArea.bottom;
+if (_safeAreaBottom) {
+	safeAreaInsetBottom = _safeAreaBottom;
+}
+
+export {
+	menuButton,
+	menuButtonWidthInCss,
+	windowInfo,
+	navBarHeight,
+	navBarTopOffset,
+	navBarBottomOffset,
+	safeAreaInsetBottom,
+};

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>