@ecolovo/uniapp-components 1.0.0

package/components/list-page/list-page.vue

@@ -0,0 +1,150 @@
+<template>
+	<page-cpn
+		:custom="custom"
+		:title="title"
+		:theme="theme"
+		:has-footer="hasFooter"
+		:use-scroll="useScroll"
+		enable-refresh
+		:refreshing="isRefreshing"
+		:loading="loading"
+		:class="componentClassNames"
+		@refresh="onRefresh"
+		@reach-bottom="onLoadMore"
+	>
+		<data-list-cpn
+			:paging-data="pagingData"
+			:show-load-more="showLoadMore"
+			:loading-more="isLoadingMore"
+			@load-more="onLoadMore"
+		>
+			<slot></slot>
+		</data-list-cpn>
+
+		<empty-cpn v-if="!pagingData || pagingData.data.length === 0" :class="$style['ListPage--empty']"></empty-cpn>
+
+		<template v-if="hasFooter" #footer>
+			<slot name="footer"></slot>
+		</template>
+	</page-cpn>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import DataListCpn from '../data-list/data-list.vue';
+import EmptyCpn from '../empty/empty.vue';
+import PageCpn from '../page/page.vue';
+
+export default {
+	name: 'AppListPage',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	components: { PageCpn, DataListCpn, EmptyCpn },
+	mixins: [componentName],
+	props: {
+		/** 是否使用自定义导航栏 */
+		custom: {
+			type: Boolean,
+			default: true,
+		},
+		/** 页面标题 */
+		title: {
+			type: String,
+			default: '',
+		},
+		/** 页面头部样式，主要用于控制导航栏字体颜色 */
+		theme: {
+			type: String,
+			default: 'light',
+		},
+		/** 是否使用底部操作栏 */
+		hasFooter: {
+			type: Boolean,
+			default: false,
+		},
+		/** 是否使用scroll-view */
+		useScroll: {
+			type: Boolean,
+			default: true,
+		},
+		/** 分页大小 */
+		pagingData: {
+			type: Object,
+			default: null,
+		},
+		// /** 分页大小 */
+		// pageSize: {
+		// 	type: [Number, String],
+		// 	default: 0,
+		// },
+		/** 是否显示加载更多 */
+		showLoadMore: {
+			type: Boolean,
+			default: true,
+		},
+		/** 页面加载 */
+		loading: {
+			type: [Boolean, String],
+			default: false,
+		},
+	},
+	data() {
+		return {
+			/** 是否正在刷新中 */
+			isRefreshing: false,
+			/** 是否正在加载更多中 */
+			isLoadingMore: false,
+			/** scroll-view 的当前滚动距离 */
+			scrollOffset: 0,
+			/** 传递给 scroll-view ，用于控制其滚动距离 */
+			scrollTop: 0,
+			/** 传递给 scroll-view ，用于控制其是否有滚动动画 */
+			scrollWithAnimation: true,
+		};
+	},
+	methods: {
+		/** 触发下拉刷新 */
+		onRefresh() {
+			if (this.isRefreshing) {
+				return;
+			}
+
+			this.isRefreshing = true;
+			const { promise, resolve, reject } = Promise.withResolvers();
+			promise.finally(() => {
+				this.isRefreshing = false;
+				uni.stopPullDownRefresh();
+			});
+			this.$emit('refresh', { resolve, reject });
+		},
+		/** 抵达底部触发加载更多 */
+		onLoadMore() {
+			if (this.isLoadingMore) {
+				return;
+			}
+			if (!this.pagingData.hasMore) {
+				return;
+			}
+
+			this.isLoadingMore = true;
+			const { promise, resolve, reject } = Promise.withResolvers();
+			promise.finally(() => {
+				this.isLoadingMore = false;
+				uni.stopPullDownRefresh();
+			});
+			this.$emit('reach-bottom', { resolve, reject });
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+.ListPage--empty {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+</style>

package/components/load-more/load-more.vue

@@ -0,0 +1,97 @@
+<template>
+	<view :class="componentClassNames">
+		<template v-if="end">
+			<view :class="$style['LoadMore--content']">{{ endTitle }}</view>
+		</template>
+		<view v-else-if="loading" :class="$style['LoadMore--content']">
+			<icon-cpn icon="loading-dot-spinner"></icon-cpn>
+			加载中...
+		</view>
+		<view v-else :class="$style['LoadMore--content']" @click="$emit('load-more')">上滑或点击加载更多</view>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import IconCpn from '../icon/icon.vue';
+
+export default {
+	name: 'AppLoadMore',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	components: { IconCpn },
+	mixins: [componentName],
+	props: {
+		/** 是否到最后一页 */
+		end: {
+			type: Boolean,
+			default: false,
+		},
+		/** 是否加载中 */
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+		/** 到最后一页时文本 */
+		endTitle: {
+			type: String,
+			default: '没有更多了',
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+// 定义外部变量
+$component-name: 'load-more';
+$component-vars: $load-more;
+%external-vars {
+	@include UTILS__DEFINE_COMPONENT_VARS();
+}
+
+.LoadMore {
+	@extend %external-vars;
+	box-sizing: content-box;
+	height: UTILS__LOCAL_VAR(height);
+	color: UTILS__LOCAL_VAR(color);
+	text-align: center;
+	padding-top: UTILS__LOCAL_VAR(space);
+	font-size: UTILS__GLOBAL_VAR(font-size, normal);
+}
+.LoadMore--content {
+	box-sizing: border-box;
+	position: relative;
+	width: 100%;
+	height: 100%;
+	padding: 0 calc(20% + #{UTILS__LOCAL_VAR(space)});
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	&::before {
+		content: '';
+		display: block;
+		position: absolute;
+		top: 50%;
+		left: 20rpx;
+		width: 20%;
+		height: 4rpx;
+		transform: translateY(-50%);
+		background: linear-gradient(to right, transparent, #ccc 75%);
+	}
+	&::after {
+		content: '';
+		display: block;
+		position: absolute;
+		top: 50%;
+		right: 20rpx;
+		width: 20%;
+		height: 4rpx;
+		transform: translateY(-50%);
+		background: linear-gradient(to left, transparent, #ccc 75%);
+	}
+}
+</style>

package/components/loading/animations/loading-animation1.vue

@@ -0,0 +1,92 @@
+<template>
+	<view :class="componentClassNames">
+		<view :class="$style['LoadingAnimation1--dot']"></view>
+		<view :class="$style['LoadingAnimation1--dot']"></view>
+	</view>
+</template>
+
+<script>
+import componentName from '../../../mixins/componentName';
+
+export default {
+	name: 'AppLoadingAnimation1',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	mixins: [componentName],
+};
+</script>
+
+<style lang="scss" module>
+.LoadingAnimation1 {
+	width: 1em;
+	aspect-ratio: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	.LoadingAnimation1--dot {
+		width: 0.2em;
+		height: 0.2em;
+		margin-right: 0.2em;
+		border-radius: 50%;
+		position: relative;
+
+		&:first-child {
+			background: #12b32d;
+			animation: first-ani 1s linear infinite alternate;
+		}
+
+		&:last-child {
+			background: #ff1929;
+			animation: second-ani 1s linear infinite alternate;
+			margin-right: 0;
+		}
+	}
+
+	@keyframes first-ani {
+		0% {
+			left: 0;
+		}
+
+		25% {
+			left: 0.4em;
+		}
+
+		50% {
+			left: 0.4em;
+		}
+
+		75% {
+			left: 0;
+		}
+
+		to {
+			left: 0;
+		}
+	}
+
+	@keyframes second-ani {
+		0% {
+			right: 0;
+		}
+
+		25% {
+			right: 0.4em;
+		}
+
+		50% {
+			right: 0.4em;
+		}
+
+		75% {
+			right: 0;
+		}
+
+		to {
+			right: 0;
+		}
+	}
+}
+</style>

package/components/loading/animations/loading-animation2.vue

@@ -0,0 +1,28 @@
+<template>
+	<view :class="componentClassNames">
+		<icon-cpn icon="loading" :class="$style['LoadingAnimation2--icon']" />
+	</view>
+</template>
+
+<script>
+import componentName from '../../../mixins/componentName';
+import IconCpn from '../../icon/icon.vue';
+
+export default {
+	name: 'AppLoadingAnimation2',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	components: { IconCpn },
+	mixins: [componentName],
+};
+</script>
+
+<style lang="scss" module>
+.LoadingAnimation2 {
+	.LoadingAnimation2--icon {
+		--animation-duration: 1.2s;
+	}
+}
+</style>

package/components/loading/animations/loading-animation3.vue

@@ -0,0 +1,81 @@
+<template>
+	<view :class="componentClassNames">
+		<view :class="$style['LoadingAnimation3--animation']"></view>
+	</view>
+</template>
+
+<script>
+import componentName from '../../../mixins/componentName';
+
+export default {
+	name: 'AppLoadingAnimation3',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	mixins: [componentName],
+};
+</script>
+
+<style lang="scss" module>
+.LoadingAnimation3 {
+	height: 1em;
+	aspect-ratio: 1;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	.LoadingAnimation3--animation {
+		// 载体大小
+		$main-size: 0.1em;
+		// 左边点 x 坐标便移量
+		$left-x: (-3.5 * $main-size);
+		// 右边点 x 坐标便移量
+		$right-x: 3.5 * $main-size;
+		// 载体 y 坐标便移量
+		$translate-y: 4 * $main-size;
+		// 小点尺寸
+		$size-s: 0.5 * $main-size;
+		// 大点尺寸
+		$size-l: 1.5 * $main-size;
+
+		color: inherit;
+		width: $main-size;
+		aspect-ratio: 1;
+		border-radius: 50%;
+		box-shadow: $left-x $translate-y 0 $size-s, 0 $translate-y 0 $size-s, $right-x $translate-y 0 $size-s;
+		translate: 0 (-1 * $translate-y);
+		animation: loading-dots 1.5s infinite linear;
+
+		@keyframes loading-dots {
+			15% {
+				box-shadow: $left-x $translate-y 0 $size-l, 0 $translate-y 0 $size-s, $right-x $translate-y 0 $size-s;
+			}
+			30% {
+				box-shadow: $left-x $translate-y 0 $size-s, 0 $translate-y 0 $size-l, $right-x $translate-y 0 $size-s;
+			}
+			45% {
+				box-shadow: $left-x $translate-y 0 $size-s, 0 $translate-y 0 $size-s, $right-x $translate-y 0 $size-l;
+			}
+			60% {
+				box-shadow: $left-x $translate-y 0 $size-s, 0 $translate-y 0 $size-s, $right-x $translate-y 0 $size-s;
+			}
+		}
+
+		// @keyframes loading-dots2 {
+		// 	25% {
+		// 		box-shadow: $left-x $translate-y 0 $size-l, 0 $translate-y 0 $size-s, $right-x $translate-y 0 $size-s;
+		// 	}
+		// 	50% {
+		// 		box-shadow: $left-x $translate-y 0 $size-s, 0 $translate-y 0 $size-l, $right-x $translate-y 0 $size-s;
+		// 	}
+		// 	75% {
+		// 		box-shadow: $left-x $translate-y 0 $size-s, 0 $translate-y 0 $size-s, $right-x $translate-y 0 $size-l;
+		// 	}
+		// 	100% {
+		// 		box-shadow: $left-x $translate-y 0 $size-s, 0 $translate-y 0 $size-s, $right-x $translate-y 0 $size-s;
+		// 	}
+		// }
+	}
+}
+</style>

package/components/loading/animations/loading-animation4.vue

@@ -0,0 +1,74 @@
+<template>
+	<view :class="componentClassNames">
+		<view :class="$style['LoadingAnimation4--animation']"></view>
+	</view>
+</template>
+
+<script>
+import componentName from '../../../mixins/componentName';
+
+export default {
+	name: 'AppLoadingAnimation4',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	mixins: [componentName],
+};
+</script>
+
+<style lang="scss" module>
+.LoadingAnimation4 {
+	height: 1.2em;
+	aspect-ratio: 1;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	.LoadingAnimation4--animation {
+		width: 1em;
+		aspect-ratio: 1;
+		border-radius: 50%;
+		border: 0.1em solid currentcolor;
+		animation: spinner-1 0.8s infinite linear alternate, spinner-2 1.6s infinite linear;
+
+		@keyframes spinner-1 {
+			0% {
+				clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
+			}
+			12.5% {
+				clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
+			}
+			25% {
+				clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
+			}
+			50% {
+				clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
+			}
+			62.5% {
+				clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
+			}
+			75% {
+				clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);
+			}
+			100% {
+				clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);
+			}
+		}
+		@keyframes spinner-2 {
+			0% {
+				transform: scaleY(1) rotate(0deg);
+			}
+			49.99% {
+				transform: scaleY(1) rotate(135deg);
+			}
+			50% {
+				transform: scaleY(-1) rotate(0deg);
+			}
+			100% {
+				transform: scaleY(-1) rotate(-135deg);
+			}
+		}
+	}
+}
+</style>

package/components/loading/loading.vue

@@ -0,0 +1,91 @@
+<template>
+	<view :class="componentClassNames" @touchmove.stop.prevent="doNothing">
+		<!-- #ifdef APP-PLUS -->
+		<cover-view :class="$style['Loading--wrapper-cover']" @touchmove.stop.prevent="doNothing"></cover-view>
+		<!-- #endif -->
+		<view :class="$style['Loading--content']">
+			<loading-animation3 :class="$style['Loading--icon']" />
+			<view :class="$style['Loading--title']">
+				{{ title }}
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import LoadingAnimation3 from './animations/loading-animation3.vue';
+
+export default {
+	name: 'AppLoading',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	components: { LoadingAnimation3 },
+	mixins: [componentName],
+	props: {
+		title: {
+			type: String,
+			default: '加载中...',
+		},
+	},
+	methods: {
+		doNothing() {},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+$component-name: 'badge';
+
+.Loading {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	z-index: UTILS__z-index();
+	background: #0000004d;
+
+	/* #ifdef APP-PLUS */
+	.Loading--wrapper-cover {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background: transparent;
+	}
+	/* #endif */
+
+	.Loading--content {
+		color: UTILS__GLOBAL_VAR(color, background);
+		background: UTILS__GLOBAL_VAR(color, foreground);
+		width: 200rpx;
+		height: 200rpx;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		border-radius: 20rpx;
+	}
+
+	.Loading--icon {
+		font-size: 80rpx;
+	}
+
+	.Loading--title {
+		margin-top: 20rpx;
+		font-size: 24rpx;
+	}
+}
+</style>

package/components/message-box/message-box.vue

@@ -0,0 +1,60 @@
+<template>
+	<dialog-cpn
+		:value="value"
+		:cancel="false"
+		hide-on-confirm
+		confirm="我知道了"
+		modal
+		:title="title"
+		:class="componentClassNames"
+		@input="$emit('input', $event)"
+		@confirm="$_onConfirm()"
+	>
+		{{ content }}
+	</dialog-cpn>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import DialogCpn from '../dialog/dialog.vue';
+
+export default {
+	name: 'AppMessageBox',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	components: { DialogCpn },
+	mixins: [componentName],
+	props: {
+		/** 是否可见 */
+		value: {
+			type: Boolean,
+			default: false,
+		},
+		/** 对话框标题 */
+		title: {
+			type: String,
+			default: '提示',
+		},
+		/** 是否模态 */
+		content: {
+			type: String,
+			default: '',
+		},
+	},
+	created() {
+		this._promise = new Promise((resolve) => {
+			this._resolve = resolve;
+		});
+	},
+	methods: {
+		show() {
+			return this._promise;
+		},
+		$_onConfirm() {
+			this._resolve();
+		},
+	},
+};
+</script>