uni-halo/pages/tabbar/gallery/gallery.vue

<template>
	<view class="app-page" :class="[uniHaloPluginPageClass]">
		<PluginUnavailable v-if="!uniHaloPluginAvailable" :pluginId="uniHaloPluginId"
			:error-text="uniHaloPluginAvailableError" />
		<template v-else>
			<!-- 顶部切换 -->
			<view class="e-fixed" v-if="category.list.length > 0">
				<tm-tabs color="light-blue" :shadow="0" v-model="category.activeIndex" range-key="displayName"
					:list="category.list" align="left" @change="fnOnCategoryChange($event, false)"></tm-tabs>
			</view>
			<!-- 占位区域 -->
			<view v-if="category.list.length > 0" style="width: 100vw;height: 90rpx;"></view>
			<!-- 加载区域 -->
			<view v-if="loading == 'loading'" class="loading-wrap">
				<tm-skeleton model="card"></tm-skeleton>
				<tm-skeleton model="card"></tm-skeleton>
				<tm-skeleton model="card"></tm-skeleton>
				<tm-skeleton model="card"></tm-skeleton>
			</view>
			<view v-else-if="loading == 'error'" class="flex flex-col flex-center" style="width:100%;height:60vh;">
				<tm-empty icon="icon-wind-cry" label="阿偶，获取数据失败了~">
					<tm-button theme="light-blue" size="m" :shadow="0" @click="fnGetData(true)">刷新试试</tm-button>
				</tm-empty>
			</view>
			<!-- 内容区域 -->
			<view v-else class="content">
				<k-touch-listen class="touch-listen-content" @touchLeft="touchLeft" @touchRight="touchRight">
					<view v-if="dataList.length === 0" class="content-empty">
						<!-- 空布局 -->
						<tm-empty icon="icon-shiliangzhinengduixiang-" label="博主还没有分享图片~"></tm-empty>
					</view>
					<block v-else>
						<block v-if="galleryConfig.useWaterfall">
							<!--瀑布流-->
							<tm-flowLayout-custom ref="wafll" style="width: 100%;"
								@click="fnOnFlowClick"></tm-flowLayout-custom>
						</block>
						<!--   列表   -->
						<block v-else>
							<tm-translate v-for="(item, index) in dataList" :key="index"
								style="box-sizing: border-box;padding: 6rpx;width: 50%;height: 250rpx;"
								animation-name="fadeUp" :wait="calcAniWait(index)">
								<view style="border-radius: 12rpx;overflow: hidden;width: 100%;height: 250rpx;">
									<image style="width: 100%;height: 100%;" mode="aspectFill" :src="item.spec.url"
										@click="fnPreview(item)" />
								</view>
							</tm-translate>
						</block>

						<view class="load-text">{{ loadMoreText }}</view>
					</block>
				</k-touch-listen>
			</view>

			<view v-if="!calcAuditModeEnabled" class="flot-buttons">
				<tm-button v-if="loading == 'error'" @click="fnGetCategory" size="m" :fab="true" theme="light-blue"
					icon="icon-sync-alt"></tm-button>
				<tm-button @click="fnToTopPage" size="m" :fab="true" theme="light-blue"
					icon="icon-angle-up"></tm-button>
			</view>
		</template>
	</view>
</template>

<script>
	import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
	import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
	import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
	import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
	import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
	import tmIcons from '@/tm-vuetify/components/tm-icons/tm-icons.vue';
	import tmImages from '@/tm-vuetify/components/tm-images/tm-images.vue';
	import tmFlowLayoutCustom from '@/tm-vuetify/components/tm-flowLayout-custom/tm-flowLayout-custom.vue';
	import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
	import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';

	import pluginAvailable from "@/common/mixins/pluginAvailable.js"
	import PluginUnavailable from '@/components/plugin-unavailable/plugin-unavailable.vue'
	export default {
		options: {
			multipleSlots: true
		},
		mixins: [pluginAvailable],
		components: {
			tmSkeleton,
			tmTranslate,
			tmFlotbutton,
			tmTags,
			tmEmpty,
			tmIcons,
			tmImages,
			tmFlowLayoutCustom,
			tmTabs,
			tmButton,
			PluginUnavailable
		},
		data() {
			return {
				isBlackTheme: false,
				loading: 'loading',
				category: {
					activeIndex: 0,
					activeValue: '',
					list: []
				},
				queryParams: {
					size: 10,
					page: 1,
					group: ""
				},
				isLoadMore: false,
				loadMoreText: '',
				hasNext: false,
				dataList: [],
				lock: false
			};
		},
		computed: {
			galleryConfig() {
				return this.$tm.vx.getters().getConfigs.pageConfig.galleryConfig;
			},
			haloConfigs() {
				return this.$tm.vx.getters().getConfigs;
			},
			mockJson() {
				return this.$tm.vx.getters().getMockJson;
			},
			calcAuditModeEnabled() {
				return this.haloConfigs.auditConfig.auditModeEnabled
			},
		},
		watch: {
			galleryConfig: {
				async handler(newValue, oldValue) {
					if (!newValue) return;
					this.fnSetPageTitle(newValue.pageTitle);
					this.fnGetCategory();
				},
				deep: true,
				immediate: true
			}
		},
		async onLoad() {
			// 检查插件
			this.setPluginId(this.NeedPluginIds.PluginPhotos)
			this.setPluginError("阿偶，检测到当前插件没有安装或者启用，无法使用图库功能哦，请联系管理员")
			await this.checkPluginAvailable()
		},
		onPullDownRefresh() {
			if (!this.uniHaloPluginAvailable) {
				uni.hideLoading();
				uni.stopPullDownRefresh();
				return
			}
			this.dataList = []
			this.isLoadMore = false;
			this.queryParams.page = 1;
			this.fnGetData(true);
		},
		onReachBottom(e) {
			if (!this.uniHaloPluginAvailable) return;
			if (this.calcAuditModeEnabled) {
				uni.showToast({
					icon: 'none',
					title: '没有更多数据了'
				});
				return;
			}

			if (this.hasNext) {
				this.queryParams.page += 1;
				this.isLoadMore = true;
				this.fnGetData(false);
			} else {
				uni.showToast({
					icon: 'none',
					title: '没有更多数据了'
				});
			}
		},
		methods: {
			fnGetDataByCategory(index) {
				this.fnResetSetAniWaitIndex();
				this.queryParams.group = this.category.list[index].name;
				this.queryParams.page = 1;
				this.fnToTopPage();
				this.dataList = [];
				this.fnGetData(true);
			},
			fnOnCategoryChange(index) {
				if (this.lock) {
					// uni.showToast({
					// 	title: "上一个请求进行中...",
					// 	icon: "none"
					// })
					return;
				}
				this.fnGetDataByCategory(index)
			},
			fnGetCategory() {
				if (this.calcAuditModeEnabled) {
					this.fnGetData(true);
					return
				}
				this.$httpApi.v2.getPhotoGroupList({
					page: 1,
					size: 0
				}).then(res => {
					this.category.list = res.map(item => {
						return {
							name: item.metadata.name,
							displayName: item.spec.displayName,
							priority: item.spec.priority
						}
					}).sort((a, b) => a.priority - b.priority)
					this.category.list.unshift({
						name: undefined,
						displayName: '全部',
						priority: 0
					});
					if (this.category.list.length !== 0) {
						this.queryParams.group = this.category.list[0].name;
						this.fnGetData(true);
					}
				}).catch(e => {
					this.loading = 'error'
					this.category.list = []
					this.category.activeIndex = 0
					this.category.activeValue = ""
				});
			},
			fnGetData(isClearWaterfall = false) {
				if (this.calcAuditModeEnabled) {
					this.dataList = this.mockJson.gallery.list.map(item => {
						return {
							metadata: {
								name: Date.now() * Math.random(),
							},
							spec: {
								url: this.$utils.checkImageUrl(item)
							}
						}
					})

					this.loading = 'success';

					if (this.galleryConfig.useWaterfall) {
						this.$nextTick(() => {
							if (isClearWaterfall) {
								this.$refs.wafll.clear()
							}
							setTimeout(() => {
								this.$refs.wafll.pushData(this.dataList)
							}, 50)
						})
					}
					this.loadMoreText = '呜呜，没有更多数据啦~';
					uni.hideLoading();
					uni.stopPullDownRefresh();
					this.lock = false;
					return;
				}

				// 设置状态为加载中
				if (!this.isLoadMore) {
					this.loading = 'loading';
				}
				this.loadMoreText = '';
				this.$httpApi.v2
					.getPhotoListByGroupName(this.queryParams)
					.then(res => {
						this.hasNext = res.hasNext;
						this.loading = 'success';
						if (res.items.length !== 0) {
							const _list = res.items.map((item, index) => {
								item.spec.url = this.$utils.checkImageUrl(item.spec.url || item.spec.cover);
								return item;
							});
							if (this.isLoadMore) {
								this.dataList = this.dataList.concat(_list);
							} else {
								this.dataList = _list;
							}
							if (this.galleryConfig.useWaterfall) {
								this.$nextTick(() => {
									if (isClearWaterfall) {
										this.$refs.wafll.clear()
									}
									this.$refs.wafll.pushData(_list)
								})
							}
						}
						this.loadMoreText = res.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
					})
					.catch(err => {
						console.error(err);
						this.loading = 'error';
						this.loadMoreText = '加载失败，请下拉刷新！';
					})
					.finally(() => {
						setTimeout(() => {
							uni.hideLoading();
							uni.stopPullDownRefresh();
							this.lock = false;
						}, 500);
					});
			},
			fnOnFlowClick({
				item
			}) {
				this.fnPreview(item)
			},
			// 预览
			fnPreview(data) {
				uni.previewImage({
					current: this.dataList.findIndex(x => x.metadata.name === data.metadata.name),
					urls: this.dataList.map(x => x.spec.url),
					indicator: 'number',
					loop: true
				});
			},
			touchLeft() {
				if (this.loading != "success") return;
				this.category.activeIndex += 1
				if (this.category.activeIndex >= this.category.list.length) {
					this.category.activeIndex = 0
				}
				this.lock = true
				this.fnGetDataByCategory(this.category.activeIndex)
			},
			touchRight() {
				if (this.loading != "success") return;
				this.category.activeIndex -= 1
				if (this.category.activeIndex < 0) {
					this.category.activeIndex = 0
				}
				this.lock = true
				this.fnGetDataByCategory(this.category.activeIndex)
			}
		}
	};
</script>

<style lang="scss" scoped>
	.app-page {
		width: 100vw;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		padding-bottom: 24rpx;
		background-color: #fafafa;
	}

	.content {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;

		.content-empty {
			width: 100%;
			height: 70vh;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.touch-listen-content {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 24rpx 24rpx 0;
		gap: 12rpx 0;
	}

	.loading-wrap {
		box-sizing: border-box;
		padding: 24rpx;
	}

	.load-text {
		width: 100%;
		text-align: center;
	}

	.flot-buttons {
		position: fixed;
		bottom: 100rpx;
		right: 32rpx;
		flex-direction: column;
		display: flex;
		gap: 6rpx;
		z-index: 999;
	}
</style>