@ecolovo/uniapp-components 1.0.0

package/components/numpad/numpad.vue

@@ -0,0 +1,224 @@
+<template>
+	<view :class="componentClassNames">
+		<button-cpn
+			v-for="btn in buttons"
+			:key="btn.key"
+			:cool-down="0"
+			:class="[$style['Numpad--key'], $style[btn.className]]"
+			@click="onClick(btn)"
+		>
+			<icon-cpn v-if="btn.icon" :icon="btn.icon" />
+			<text v-else>{{ btn.title || btn.key }}</text>
+		</button-cpn>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import { freezeDeep } from '../../utils/freezeDeep';
+import ButtonCpn from '../button/button.vue';
+import IconCpn from '../icon/icon.vue';
+
+/** 默认最小值 */
+const MIN = 0;
+/** 默认最大值 */
+const MAX = 9999;
+
+const buttons = freezeDeep([
+	{ key: '1', type: 'number' },
+	{ key: '2', type: 'number' },
+	{ key: '3', type: 'number' },
+	{ key: 'delete', type: 'delete', icon: 'play' },
+	{ key: '4', type: 'number' },
+	{ key: '5', type: 'number' },
+	{ key: '6', type: 'number' },
+	{ key: 'clear', type: 'clear', title: '清空' },
+	{ key: '7', type: 'number' },
+	{ key: '8', type: 'number' },
+	{ key: '9', type: 'number' },
+	{ key: '-', type: '-', title: '+/-', className: 'Numpad--negative-key' },
+	{ key: '.', type: 'dot' },
+	{ key: '0', type: 'number', className: 'Numpad--zero-key' },
+]);
+
+export default {
+	name: 'AppNumpad',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	components: { ButtonCpn, IconCpn },
+	mixins: [componentName],
+	props: {
+		/** 绑定值 */
+		value: {
+			type: [String, Number],
+			default: '',
+		},
+		/** 小数的精度 */
+		precision: {
+			type: Number,
+			default: 0,
+		},
+		/** 允许输入的最大值 */
+		max: {
+			type: Number,
+			default: MAX,
+		},
+		/** 允许输入的最小值 */
+		min: {
+			type: Number,
+			default: MIN,
+		},
+	},
+	data() {
+		return {
+			buttons,
+		};
+	},
+	computed: {
+		editValue: {
+			get() {
+				return this.value || this.value === 0 ? this.value.toString() : '';
+			},
+			set(val) {
+				this.$emit('input', val);
+			},
+		},
+	},
+	created() {},
+	methods: {
+		/** 点击按钮 */
+		onClick(btn) {
+			switch (btn.type) {
+				case 'number':
+					this.onInputNumber(btn.key);
+					break;
+				case 'dot':
+					this.onInputDot();
+					break;
+				case '-':
+					this.onNegative();
+					break;
+				case 'delete':
+					this.onDelete();
+					break;
+				case 'clear':
+					this.onClear();
+					break;
+			}
+		},
+		/** 输入数字 */
+		onInputNumber(key) {
+			const nextValue = this.editValue + key;
+			if (Number(nextValue) <= this.min) {
+				this.editValue = this.min + '';
+				return;
+			}
+			if (Number(nextValue) >= this.max) {
+				this.editValue = this.max + '';
+				return;
+			}
+
+			if (this.editValue === '0') {
+				if (key === '0') return;
+				this.editValue = key;
+				return;
+			}
+
+			if (this.precision > 0 && this.editValue.includes('.')) {
+				const decimalPart = this.editValue.split('.')[1];
+				if (decimalPart.length >= this.precision) {
+					return;
+				}
+			}
+
+			this.editValue += key;
+		},
+		/** 输入小数点 */
+		onInputDot() {
+			if (this.precision <= 0) return;
+			if (this.editValue.includes('.')) return;
+
+			if (this.editValue) {
+				this.editValue += '.';
+			} else {
+				this.editValue = '0.';
+			}
+		},
+		/** 负号 */
+		onNegative() {
+			if (this.min >= 0) return;
+
+			const nextValue = -this.editValue;
+			if (nextValue < this.min) {
+				this.editValue = this.min + '';
+				return;
+			}
+			if (nextValue > this.max) {
+				this.editValue = this.max + '';
+				return;
+			}
+
+			if (this.editValue.startsWith('-')) {
+				this.editValue = this.editValue.slice(1);
+			} else {
+				this.editValue = '-' + this.editValue;
+			}
+		},
+		/** 删除 */
+		onDelete() {
+			if (!this.editValue) return;
+
+			this.editValue = this.editValue.slice(0, -1);
+		},
+		/** 清空 */
+		onClear() {
+			this.editValue = '';
+		},
+		// onConfirm() {
+		// 	this.$emit('input', false);
+		// 	this.$emit('confirm', { value: this.editValue, number: Number(this.editValue) });
+		// },
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+// 定义外部变量
+$component-name: 'numpad';
+$component-vars: $numpad;
+%external-vars {
+	@include UTILS__DEFINE_COMPONENT_VARS();
+}
+
+.Numpad {
+	@extend %external-vars;
+	width: 100%;
+	height: 400rpx;
+	display: grid;
+	gap: 12rpx 12rpx;
+	grid-auto-flow: row;
+	grid-template-columns: repeat(3, 4fr) 3fr;
+
+	.Numpad--key {
+		width: 100%;
+		height: 100%;
+		font-size: 38rpx;
+		box-shadow: 2px 2px 4px 0 #00000040;
+		&:not(.Numpad--confirm-key) {
+			color: UTILS__GLOBAL_VAR(color, foreground);
+			#{UTILS__VAR_NAME(theme, button)}: white;
+			#{UTILS__VAR_NAME(active-mask, button)}: UTILS__GLOBAL_VAR(theme, primary);
+		}
+	}
+	.Numpad--zero-key {
+		grid-area: auto / span 2;
+	}
+	.Numpad--negative-key {
+		grid-area: span 2 / auto;
+	}
+}
+</style>

package/components/page/page-body.vue

@@ -0,0 +1,227 @@
+<template>
+	<view
+		:class="[componentClassNames, useScroll ? $style['PageBody--with-scroll'] : $style['PageBody--no-scroll']]"
+		:style="styleStr"
+	>
+		<!-- 不使用 scroll-view ，即直接使用 Page 的滚动功能 -->
+		<view v-if="!useScroll" :class="$style['PageBody--body']">
+			<view :class="$style['PageBody--content']">
+				<slot></slot>
+			</view>
+		</view>
+		<scroll-view
+			v-else-if="enableRefresh"
+			scroll-y
+			refresher-enabled
+			:refresher-triggered="refreshing"
+			:scroll-with-animation="scrollWithAnimation"
+			:scroll-top="scrollTop"
+			:class="$style['PageBody--scroll-body']"
+			@refresherrefresh="$emit('refresh')"
+			@scroll="$_handleScroll"
+			@scrolltolower="$emit('reach-bottom')"
+		>
+			<view :class="$style['PageBody--content']">
+				<slot></slot>
+			</view>
+		</scroll-view>
+		<scroll-view
+			v-else
+			scroll-y
+			:scroll-with-animation="scrollWithAnimation"
+			:scroll-top="scrollTop"
+			:class="$style['PageBody--scroll-body']"
+			@scroll="$_handleScroll"
+			@scrolltolower="$emit('reach-bottom')"
+		>
+			<view :class="$style['PageBody--content']">
+				<slot></slot>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+/**
+ * 页面内容部分容器组件，不单独使用，通过 page 组件间接引入
+ */
+
+import debounce from 'lodash-es/debounce';
+import componentName from '../../mixins/componentName';
+import windowInfoMixin from '../../mixins/windowInfo';
+
+/** 滚动动画持续时长 */
+const SCROLL_ANIMATION_DURATION = 300;
+
+export default {
+	name: 'AppPageBody',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	mixins: [componentName, windowInfoMixin],
+	props: {
+		/** 是否有自定义导航头 */
+		hasCustomNav: {
+			type: Boolean,
+			default: true,
+		},
+		/** 是否有底部区域 */
+		hasFooter: {
+			type: Boolean,
+			default: false,
+		},
+		/** 是否使用scroll-view */
+		useScroll: {
+			type: Boolean,
+			default: false,
+		},
+		/** 是否是 tab 页 */
+		isTabPage: {
+			type: Boolean,
+			default: false,
+		},
+		/** 是否启用下拉刷新，仅 useScroll 为 true 时有效 */
+		enableRefresh: {
+			type: Boolean,
+			default: false,
+		},
+		/** 是否触发下拉刷新，仅 useScroll 为 true 时有效 */
+		refreshing: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			/** scroll-view 的当前滚动距离 */
+			scrollOffset: 0,
+			/** 传递给 scroll-view ，用于控制其滚动距离 */
+			scrollTop: 0,
+			/** 传递给 scroll-view ，用于控制其是否有滚动动画 */
+			scrollWithAnimation: true,
+		};
+	},
+	computed: {
+		styleStr() {
+			return [
+				`--header-bar-bottom: ${this.navBarBottomOffset}px;`,
+				`--safe-area-bottom: ${this.isTabPage ? 0 : this.safeAreaInsetBottom}px;`,
+				...(this.hasCustomNav ? [] : ['--header-placeholder-height: 0px;']),
+				...(this.hasFooter
+					? ['--bottom-safe-height: 0px;']
+					: ['--footer-placeholder-height: 0px;', '--bottom-safe-height: var(--safe-area-bottom);']),
+			].join(' ');
+		},
+	},
+	methods: {
+		$_debounceScroll: debounce(function () {
+			uni.createSelectorQuery()
+				/* #ifndef MP-ALIPAY */
+				.in(this)
+				/* #endif */
+				.select('.' + this.$style['PageBody--scroll-body'])
+				.fields({ size: true, scrollOffset: true }, (data) => {
+					if (data.scrollHeight - data.height - data.scrollTop <= 50) {
+						this.$emit('reach-bottom');
+					}
+				})
+				.exec();
+		}, 100),
+		/** 处理 scroll-view 滚动 */
+		$_handleScroll(e) {
+			this.scrollOffset = e.detail.scrollTop;
+			this.$emit('scroll', e.detail);
+			if (this.useScroll) {
+				this.$_debounceScroll(this.loadedPages);
+			}
+		},
+		/** 滚动到顶部
+		 * @param {number} position 滚动到与顶部的距离
+		 * @param {boolean} animation 是否有滚动动画
+		 */
+		scrollToTop(position = 0, animation = true) {
+			if (this.useScroll) {
+				this.scrollWithAnimation = animation;
+				this.$nextTick(() => {
+					this.scrollTop = typeof this.scrollTop === 'number' ? position + 'px' : position;
+					this.scrollOffset = position;
+					setTimeout(() => {
+						this.scrollWithAnimation = true;
+					}, SCROLL_ANIMATION_DURATION);
+				});
+			} else {
+				uni.pageScrollTo({
+					scrollTop: position,
+					duration: animation ? SCROLL_ANIMATION_DURATION : 0,
+				});
+			}
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+// 定义外部变量
+$component-name: 'page-body';
+$component-vars: $page-body;
+%external-vars {
+	@include UTILS__DEFINE_COMPONENT_VARS();
+}
+
+:host {
+	display: block;
+}
+
+.PageBody {
+	@extend %external-vars;
+
+	--header-placeholder-height: calc(var(--header-bar-bottom) + #{UTILS__VAR(extra-height, page-header, 0px)});
+	--footer-placeholder-height: calc(var(--safe-area-bottom) + #{UTILS__VAR(height, page-footer, 100rpx)});
+
+	box-sizing: border-box;
+	padding-top: var(--header-placeholder-height);
+	padding-bottom: var(--footer-placeholder-height);
+	&.PageBody--with-scroll {
+		height: 100vh;
+	}
+	&.PageBody--no-scroll {
+		min-height: 100vh;
+		display: flex;
+	}
+}
+
+.PageBody--body {
+	position: relative;
+	background: UTILS__LOCAL_VAR(background);
+	width: 100%;
+	padding-bottom: var(--bottom-safe-height);
+	box-sizing: border-box;
+
+	display: flex;
+	flex-direction: column;
+}
+.PageBody--scroll-body {
+	position: relative;
+	background: UTILS__LOCAL_VAR(background);
+	width: 100%;
+	height: 100%;
+}
+
+.PageBody--content {
+	position: relative;
+	width: 100%;
+	min-height: 100%;
+	padding: UTILS__LOCAL_VAR(padding-y) UTILS__LOCAL_VAR(padding-x);
+	box-sizing: border-box;
+
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	.PageBody--scroll-body & {
+		padding-bottom: calc(var(--padding-y) + var(--bottom-safe-height));
+	}
+}
+</style>

package/components/page/page-footer.vue

@@ -0,0 +1,75 @@
+<template>
+	<view :class="componentClassNames" :style="styleStr" @touchmove.stop.prevent="doNothing">
+		<view :class="$style['PageFooter--content']">
+			<slot></slot>
+		</view>
+	</view>
+</template>
+
+<script>
+/**
+ * 页面页脚部分容器组件，不单独使用，通过 page 组件间接引入
+ */
+
+import componentName from '../../mixins/componentName';
+import windowInfoMixin from '../../mixins/windowInfo';
+
+export default {
+	name: 'AppPageFooter',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	mixins: [componentName, windowInfoMixin],
+	props: {
+		/** 是否是 tab 页 */
+		isTabPage: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	computed: {
+		styleStr() {
+			return `--safe-area-bottom: ${(this.isTabPage ? 0 : this.safeAreaInsetBottom) + 'px'};`;
+		},
+	},
+	methods: {
+		doNothing() {},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+// 定义外部变量
+$component-name: 'page-footer';
+$component-vars: $page-footer;
+%external-vars {
+	@include UTILS__DEFINE_COMPONENT_VARS();
+}
+
+:host {
+	display: block;
+}
+
+.PageFooter {
+	@extend %external-vars;
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background: UTILS__LOCAL_VAR(background);
+	padding-bottom: var(--safe-area-bottom);
+	box-sizing: border-box;
+	z-index: UTILS__z-index();
+	box-shadow: 0 -4rpx 4rpx 4rpx #ccc;
+}
+
+// 将内容占满空间
+.PageFooter--content {
+	height: UTILS__LOCAL_VAR(height);
+	padding: 0 UTILS__LOCAL_VAR(spacing-horizontal);
+	box-sizing: border-box;
+}
+</style>