@ecolovo/uniapp-components 1.0.0

package/components/page/page-header.vue

@@ -0,0 +1,222 @@
+<template>
+	<view
+		:class="[componentClassNames, theme === 'dark' ? $style['PageHeader--dark'] : $style['PageHeader--light']]"
+		:style="styleStr"
+	>
+		<!-- 标题栏 -->
+		<view
+			:class="[
+				$style['PageHeader--title-bar'],
+				{
+					[$style['PageHeader--title-icon-1']]: iconCount === 1,
+					[$style['PageHeader--title-icon-2']]: iconCount === 2,
+				},
+			]"
+		>
+			<view :class="$style['PageHeader--nav-icon']">
+				<navigator
+					v-if="hasBack"
+					open-type="navigateBack"
+					:class="$style['PageHeader--back-icon']"
+					hover-class="none"
+				>
+					<icon-cpn icon="nav-back"></icon-cpn>
+				</navigator>
+				<navigator
+					v-if="hasHome"
+					:url="homePageUrl"
+					open-type="reLaunch"
+					:class="$style['PageHeader--home-icon']"
+					hover-class="none"
+				>
+					<icon-cpn icon="nav-home"></icon-cpn>
+				</navigator>
+			</view>
+			<view
+				:class="[
+					$style['PageHeader--title'],
+					$style['PageHeader--title-ellipsis'],
+					{ 'PageHeader--title-center': center },
+				]"
+			>
+				<slot>{{ title }}</slot>
+			</view>
+		</view>
+		<!-- 标题栏下的额外内容，需设置高度 -->
+		<view :class="$style['PageHeader--extra']">
+			<slot name="extra"></slot>
+		</view>
+	</view>
+</template>
+
+<script>
+/**
+ * 页面头部部分容器组件，不单独使用，通过 page 组件间接引入
+ */
+
+import componentName from '../../mixins/componentName';
+import windowInfoMixin from '../../mixins/windowInfo';
+import IconCpn from '../icon/icon.vue';
+
+export default {
+	name: 'AppPageHeader',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	components: { IconCpn },
+	mixins: [componentName, windowInfoMixin],
+	props: {
+		/** 导航栏标题 */
+		title: {
+			type: String,
+			default: '',
+		},
+		/** 导航栏标题是否居中显示 */
+		center: {
+			type: Boolean,
+			default: false,
+		},
+		/** 主题，只能是 'light' 和 'dark' 中的一个 */
+		theme: {
+			type: String,
+			default: 'light',
+		},
+		/** 导航按钮类型: 0 = 不显示，1 = 返回，2 = 首页，3 = 返回|首页 */
+		navType: {
+			type: Number,
+			default: 1,
+		},
+	},
+	computed: {
+		/** 首页路径 */
+		homePageUrl() {
+			// TODO HOME_PATH
+			return process.env.VUE_APP_HOME_PATH;
+		},
+		/** 是否显示返回按钮 */
+		hasBack() {
+			return this.navType & 1;
+		},
+		/** 是否显示首页按钮 */
+		hasHome() {
+			return this.navType & 2;
+		},
+		/** 导航按钮个数 */
+		iconCount() {
+			return Math.ceil(this.navType / 2);
+		},
+		styleStr() {
+			return [
+				`--title-bar-top: ${this.navBarTopOffset}px;`,
+				`--title-bar-height: ${this.navBarHeight}px;`,
+				`--title-bar-bottom: ${this.navBarBottomOffset}px;`,
+				`--menu-button-width: ${this.menuButtonWidth};`,
+			].join(' ');
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+// 定义外部变量
+$component-name: 'page-header';
+$component-vars: $page-header;
+%external-vars {
+	@include UTILS__DEFINE_COMPONENT_VARS();
+}
+
+:host {
+	display: block;
+}
+
+.PageHeader {
+	@extend %external-vars;
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	overflow: hidden; // BFC
+	background: UTILS__LOCAL_VAR(background);
+	z-index: UTILS__z-index();
+}
+
+// 亮色主题对应样式
+.PageHeader--light {
+	color: UTILS__LOCAL_VAR(color-light);
+}
+// 暗色主题对应样式
+.PageHeader--dark {
+	color: UTILS__LOCAL_VAR(color-dark);
+}
+
+// 标题栏
+.PageHeader--title-bar {
+	position: relative;
+	font-size: UTILS__LOCAL_VAR(font-size);
+	font-weight: 600;
+	margin-top: var(--title-bar-top);
+	width: 100%;
+	height: var(--title-bar-height);
+	line-height: var(--title-bar-height);
+	overflow: hidden;
+}
+// 标题栏中的返回按钮
+.PageHeader--nav-icon {
+	position: absolute;
+	top: 0;
+	left: 10rpx;
+}
+.PageHeader--back-icon,
+.PageHeader--home-icon {
+	width: var(--title-bar-height);
+	height: var(--title-bar-height);
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+}
+.PageHeader--title-icon-2 {
+	.PageHeader--nav-icon::before {
+		content: '';
+		display: block;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		height: 50%;
+		width: 2px;
+		background: #555;
+		border-radius: 1px;
+		transform: translate(-50%, -50%);
+	}
+}
+// 标题
+.PageHeader--title {
+	--title-bar-left-padding: 20rpx;
+	width: 100%;
+	padding: 0 var(--menu-button-width) 0 var(--title-bar-left-padding);
+	box-sizing: border-box;
+	&.PageHeader--title-ellipsis {
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+	.PageHeader--title-icon-1 & {
+		--title-bar-left-padding: calc(var(--title-bar-height) + 20rpx);
+	}
+	.PageHeader--title-icon-2 & {
+		--title-bar-left-padding: calc(var(--title-bar-height) * 2 + 20rpx);
+	}
+	&.PageHeader--title-center {
+		text-align: center;
+		padding: 0 max(var(--title-bar-left-padding), var(--menu-button-width));
+	}
+}
+
+.PageHeader--extra {
+	width: 100%;
+	height: UTILS__LOCAL_VAR(extra-height);
+	overflow: hidden;
+}
+</style>

package/components/page/page.vue

@@ -0,0 +1,128 @@
+<template>
+	<view :class="componentClassNames">
+		<page-header-cpn v-if="custom" :theme="theme" :title="title">
+			<template #extra>
+				<slot name="header-extra"></slot>
+			</template>
+		</page-header-cpn>
+
+		<page-body-cpn
+			ref="body"
+			:has-custom-nav="custom"
+			:has-footer="hasFooter && $slots.footer"
+			:use-scroll="useScroll"
+			:is-tab-page="isTabPage"
+			:enable-refresh="enableRefresh"
+			:refreshing="refreshing"
+			@scroll="$emit('scroll', $event)"
+			@refresh="$emit('refresh')"
+			@reach-bottom="$emit('reach-bottom')"
+		>
+			<slot></slot>
+		</page-body-cpn>
+
+		<page-footer-cpn v-if="hasFooter && $slots.footer" :is-tab-page="isTabPage">
+			<slot name="footer"></slot>
+		</page-footer-cpn>
+
+		<loading-cpn v-if="loading" :title="loading === true ? '加载中...' : loading" />
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import LoadingCpn from '../loading/loading.vue';
+import PageBodyCpn from './page-body.vue';
+import PageFooterCpn from './page-footer.vue';
+import PageHeaderCpn from './page-header.vue';
+
+export default {
+	name: 'AppPage',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	components: { LoadingCpn, PageBodyCpn, PageFooterCpn, PageHeaderCpn },
+	mixins: [componentName],
+	props: {
+		/** 页面标题 */
+		title: {
+			type: String,
+			default: '',
+		},
+		/** 是否使用自定义导航栏 */
+		custom: {
+			type: Boolean,
+			default: true,
+		},
+		/** 是否使用底部操作栏 */
+		hasFooter: {
+			type: Boolean,
+			default: true,
+		},
+		/** 是否使用scroll-view */
+		useScroll: {
+			type: Boolean,
+			default: true,
+		},
+		/** 是否启用下拉刷新，仅 useScroll 为 true 时有效 */
+		enableRefresh: {
+			type: Boolean,
+			default: false,
+		},
+		/** 是否触发下拉刷新，仅 useScroll 为 true 时有效 */
+		refreshing: {
+			type: [Boolean, null],
+			default: null,
+		},
+		/** 页面加载 */
+		loading: {
+			type: [Boolean, String],
+			default: false,
+		},
+		/** 分页大小 */
+		pageSize: {
+			type: [Number, String],
+			default: 0,
+		},
+		/** 是否显示加载更多 */
+		showLoadMore: {
+			type: Boolean,
+			default: true,
+		},
+		/** 页面头部样式，主要用于控制导航栏字体颜色 */
+		theme: {
+			type: String,
+			default: 'light',
+		},
+	},
+	computed: {
+		isTabPage() {
+			return false;
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+// 定义外部变量
+$component-name: 'page';
+$component-vars: $page;
+%external-vars {
+	@include UTILS__DEFINE_COMPONENT_VARS();
+}
+
+:host {
+	display: block;
+}
+
+.Page {
+	@extend %external-vars;
+
+	width: 100vw;
+	position: relative;
+	background: var(--background);
+}
+</style>

package/components/picker/picker-popup.vue

@@ -0,0 +1,295 @@
+<template>
+	<popup-cpn ref="popup" :value="value" :class="componentClassNames" @input="$emit('input', $event)">
+		<template #content>
+			<popup-content-cpn
+				:loading="isLoading"
+				:title="title"
+				:center-title="false"
+				:cancel="false"
+				:confirm="multiple ? '确认' : false"
+				@confirm="onConfirm()"
+			>
+				<template #header>
+					<view :class="$style['PickerPopup--header']">
+						<view :class="$style['PickerPopup--title']">
+							<slot name="title">
+								<text>{{ title }}</text>
+								<text v-if="multiple">({{ tempCheckedCount }})</text>
+								<text :class="$style['PickerPopup--sub-title']">{{ subTitle }}</text>
+							</slot>
+						</view>
+						<view v-if="searchable" :class="$style['PickerPopup--search-wrapper']">
+							<!-- 搜索框 -->
+							<search-cpn
+								:placeholder="searchPlaceholder"
+								:class="$style['PickerPopup--search']"
+								@input-search="onFilter"
+								@search="onFilter"
+								@clear="onFilter"
+							>
+							</search-cpn>
+						</view>
+					</view>
+				</template>
+
+				<view
+					v-for="item in filteredList"
+					:key="item.option[valueKey]"
+					:class="[$style['PickerPopup--option'], { [$style['PickerPopup--checked']]: item.checked }]"
+					@click="checkPickerItem(item.option)"
+				>
+					<icon-cpn
+						v-if="multiple"
+						:icon="item.checked ? 'checkbox-checked' : 'checkbox-unchecked'"
+						:class="$style['PickerPopup--option-multi']"
+					/>
+					<text :class="$style['PickerPopup--option-text']">{{ item.option[labelKey] }}</text>
+					<icon-cpn
+						v-if="!multiple && item.checked"
+						icon="radio-checked"
+						:class="$style['PickerPopup--option-single']"
+					/>
+				</view>
+				<view v-if="pager && pager.data.length > 0" :class="$style['PickerPopup--load-more-wrapper']">
+					<load-more-cpn
+						:loading="pager.loadMoreTime !== 0"
+						:end="!pager.hasMore"
+						end-title="到底了"
+						@load-more="loadMore()"
+					/>
+				</view>
+				<empty-cpn v-if="filteredList.length === 0" :class="$style['PickerPopup--empty']" />
+			</popup-content-cpn>
+		</template>
+	</popup-cpn>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import EmptyCpn from '../empty/empty.vue';
+import IconCpn from '../icon/icon.vue';
+import LoadMoreCpn from '../load-more/load-more.vue';
+import PopupCpn from '../popup/popup.vue';
+import PopupContentCpn from '../popup/popup-content.vue';
+import SearchCpn from '../search/search.vue';
+
+export default {
+	name: 'AppPickerPopup',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	components: { EmptyCpn, IconCpn, LoadMoreCpn, PopupCpn, PopupContentCpn, SearchCpn },
+	mixins: [componentName],
+	props: {
+		/** 是否可见 */
+		value: {
+			type: Boolean,
+			default: false,
+		},
+		/** 标题 */
+		title: {
+			type: String,
+			default: '',
+		},
+		/** 副标题 */
+		subTitle: {
+			type: String,
+			default: '',
+		},
+		/** 是否有筛选框 */
+		searchable: {
+			type: Boolean,
+			default: false,
+		},
+		/** 是否多选 */
+		multiple: {
+			type: Boolean,
+			default: false,
+		},
+		/** 搜索框占位文本 */
+		searchPlaceholder: {
+			type: String,
+			default: '请输入',
+		},
+		/** 选项 */
+		options: {
+			type: Array,
+			default: () => [],
+		},
+		/** 分页 */
+		pager: {
+			type: Object,
+			default: null,
+		},
+		/** 已选选项 */
+		checked: {
+			type: Array,
+			default: () => [],
+		},
+		/** 选项唯一标识 */
+		valueKey: {
+			type: String,
+			default: 'id',
+		},
+		/** 选项标签字段 */
+		labelKey: {
+			type: String,
+			default: 'label',
+		},
+	},
+	data() {
+		return {
+			/** 用于回到顶部 */
+			scrollTopValue: 0,
+			optionList: [],
+			tempCheckedMap: new Map(),
+			tempCheckedCount: 0,
+			filterText: '',
+		};
+	},
+	computed: {
+		filteredList() {
+			const text = this.filterText.trim();
+			return text ? this.optionList.filter((item) => item.option[this.labelKey].includes(text)) : this.optionList;
+		},
+	},
+	watch: {
+		options() {
+			this.setOptionList();
+		},
+	},
+	created() {
+		this.initPopup();
+		this.setOptionList();
+	},
+	methods: {
+		/** 初始化 */
+		initPopup() {
+			this.tempCheckedCount = this.checked.length;
+			this.checked.forEach((option) => {
+				this.tempCheckedMap.set(option[this.valueKey], option);
+			});
+		},
+		/** 格式化选项数据列表 */
+		setOptionList() {
+			this.optionList = this.options.map((option) => {
+				const checked = this.tempCheckedMap.has(option[this.valueKey]);
+				return { option, checked };
+			});
+		},
+		/** 勾选选项 */
+		checkPickerItem(option) {
+			const index = this.optionList.findIndex((item) => item.option[this.valueKey] === option[this.valueKey]);
+			if (index < 0) return;
+
+			if (!this.multiple) {
+				this.tempCheckedMap.clear();
+				this.tempCheckedMap.set(option[this.valueKey], option);
+				this.setOptionList();
+				this.$emit('confirm', option);
+				this.$refs.popup.close();
+				return;
+			}
+
+			this.optionList[index].checked = !this.optionList[index].checked;
+			if (this.optionList[index].checked) {
+				this.tempCheckedMap.set(option[this.valueKey], option);
+			} else {
+				this.tempCheckedMap.delete(option[this.valueKey]);
+			}
+			this.tempCheckedCount = this.tempCheckedMap.size;
+		},
+		/** 回到顶部 */
+		scrollTop() {
+			this.scrollTopValue = typeof this.scrollTopValue === 'number' ? '0px' : 0;
+		},
+		/** 过滤或搜索 */
+		onFilter(text) {
+			this.scrollTop();
+			if (this.pager) {
+				this.$emit('search', text);
+				return;
+			}
+			this.filterText = text;
+		},
+		/** 加载更多 */
+		loadMore() {
+			if (!this.pager) return;
+
+			this.$emit('load-more');
+		},
+		/** 点击确认按钮 */
+		onConfirm() {
+			this.$emit('confirm', this.tempCheckedMap.values().toArray());
+			this.$refs.popup.close();
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+:host {
+	display: block;
+}
+
+.PickerPopup--header {
+	position: relative;
+	box-sizing: border-box;
+	height: UTILS__LOCAL_VAR(header-height);
+	padding: 20rpx 30rpx 0rpx;
+	display: flex;
+	align-items: center;
+}
+.PickerPopup--title {
+	flex: 1;
+	font-size: UTILS__GLOBAL_VAR(font-size, large);
+	font-weight: 600;
+}
+.PickerPopup--sub-title {
+	margin-left: 10rpx;
+	color: UTILS__GLOBAL_VAR(theme, placeholder);
+	font-size: UTILS__GLOBAL_VAR(font-size, normal);
+	font-weight: 400;
+}
+.PickerPopup--search-wrapper {
+	flex: none;
+	height: 88rpx;
+	display: flex;
+	align-items: center;
+	#{UTILS__VAR_NAME(height, search)}: 72rpx;
+}
+.PickerPopup--search {
+	flex: 1;
+}
+
+.PickerPopup--option {
+	display: flex;
+	justify-content: start;
+	align-items: center;
+	padding: 20rpx 0;
+	&.PickerPopup--checked {
+		color: UTILS__GLOBAL_VAR(theme, primary);
+	}
+}
+.PickerPopup--option-multi {
+	flex: none;
+	margin-right: 12rpx;
+}
+.PickerPopup--option-single {
+	flex: none;
+	margin-left: 12rpx;
+}
+.PickerPopup--option-text {
+	@include UTILS__ELLIPSIS();
+}
+.PickerPopup--empty {
+	margin: auto auto;
+}
+.PickerPopup--load-more-wrapper {
+	position: sticky;
+	top: 100%;
+}
+</style>