t/uni_modules/uni-cms-article/pages/list/slist.vue

<template>
	<view class="pages">
		<!-- 顶部搜索框：点击跳转到搜索页 -->
		<view class="nav-box">
			<view class="nav">
				<view class="uni-search-box">
					<uni-search-bar ref="searchBar" radius="100" cancelButton="none" disabled
						:placeholder="inputPlaceholder" />
					<view class="cover-search-bar" @click="searchClick"></view>
				</view>
			</view>
		</view>

		<!-- 分类标签：多选，全不选时展示全部 -->
		<view class="tag-bar" v-if="tags.length">
			<uni-data-checkbox mode="tag" multiple v-model="tags_v" :localdata="tags"></uni-data-checkbox>
		</view>

		<unicloud-db ref='udb' v-slot:default="{ pagination, hasMore, loading, error, options }" @error="onqueryerror"
			:collection="colList" :page-size="10" orderby="publish_date desc" @load="listLoad">
			<scroll-view scroll-y class="uni-list" refresher-enabled
				:refresher-triggered="loadType === 'refresh'" @refresherrefresh="refresh" @scrolltolower="loadMore">

				<!-- 列表渲染 -->
				<template v-for="item in listData" :key="item._id">
					<not-cover v-if="item.thumbnail && item.thumbnail.length === 0" :data="getNewItem(item)">
					</not-cover>
					<right-small-cover v-else-if="item.thumbnail && item.thumbnail.length === 1"
						:data="getNewItem(item)"></right-small-cover>
					<three-cover v-else-if="item.thumbnail && item.thumbnail.length === 3" :data="getNewItem(item)">
					</three-cover>
				</template>

				<!-- 加载状态：上拉加载更多，加载中，没有更多数据了，加载错误 -->
				<uni-load-state @networkResume="refresh"
					:state="{ data: listData, pagination, hasMore, loading, error }" @loadMore="loadMore">
				</uni-load-state>
			</scroll-view>
		</unicloud-db>
	</view>
</template>

<script>
	import notCover from "@/uni_modules/uni-cms-article/components/list-template/not-cover.vue";
	import rightSmallCover from "@/uni_modules/uni-cms-article/components/list-template/right-small-cover.vue";
	import threeCover from "@/uni_modules/uni-cms-article/components/list-template/three-cover.vue";
	import {
		parseImageUrl
	} from "@/uni_modules/uni-cms-article/common/parse-image-url";

	const db = uniCloud.database();
	const articleDBName = 'uni-cms-articles'
	const userDBName = 'uni-id-users'
	const categoryFilterKey = '__cms_category_filter';

	export default {
		components: {
			notCover,
			rightSmallCover,
			threeCover,
		},
		computed: {
			// 根据当前语言返回不同的搜索框占位符
			inputPlaceholder() {
				if (uni.getStorageSync('CURRENT_LANG') == "en") {
					return 'Please enter the search content'
				}
				return '请输入搜索内容'
			},
			// 连表查询，返回两个集合的查询结果
			colList() {
				const where = {
					article_status: 1
				};
				if (this.tags_v && this.tags_v.length) {
					where.category_id = db.command.in(this.tags_v);
				}
				return [
					db.collection(articleDBName).where(where).field(
						'thumbnail,title,publish_date,user_id,excerpt').getTemp(), // 文章集合
					db.collection(userDBName).field('_id,nickname').getTemp() // 用户集合
				]
			}
		},
		data() {
			return {
				tags_v: [],
				tags: [],
				listData: [], // 列表数据
				loadType: null
			}
		},
		async created() {
			await this.getTags();
		},
		onShow() {
			// tabBar 页面切回来时要重新应用首页传来的分类筛选
			this.applyPendingCategory();
		},
		methods: {
			// 首页「快捷分类」通过缓存传递筛选目标
			applyPendingCategory() {
				const pending = uni.getStorageSync(categoryFilterKey);
				if (!pending) return;
				uni.removeStorageSync(categoryFilterKey);
				if (this.tags_v.indexOf(pending) === -1) {
					this.tags_v = this.tags_v.concat([pending]);
				}
			},
			getNewItem(item) {
				if (!item.excerpt) {
					item.excerpt = "";
				} else if (item.excerpt.length > 50) {
					item.excerpt = item.excerpt.slice(0, 50) + " ... ...";
				}
				return item;
			},
			async getTags() {
				try {
					const res = await uniCloud.importObject("uni-cms-categories").getTags();
					if (res && String(res.code) === '200') {
						this.tags = res.tags || [];
						this.applyPendingCategory();
					}
				} catch (e) {
					console.error('分类加载失败:', e);
				}
			},
			async listLoad(data) {
				const listData = data.map(item => {
					if (typeof item.thumbnail === 'string') {
						item.thumbnail = [item.thumbnail]
					}
					return item
				})

				for (const article of listData) {
					const parsed = await parseImageUrl(article.thumbnail)
					article.thumbnail = parsed.map(image => image.src)
				}

				this.listData = this.loadType === 'loadMore' ? this.listData.concat(listData) : listData
				this.loadType = null
			},
			// 点击搜索框
			searchClick() {
				uni.hideKeyboard();
				uni.navigateTo({
					url: '/uni_modules/uni-cms-article/pages/search/search'
				});
			},
			// 刷新
			refresh() {
				this.loadType = 'refresh'
				this.$refs.udb.loadData({
					clear: true
				}, () => {
					uni.stopPullDownRefresh()
				})
			},
			// 加载更多
			loadMore() {
				this.loadType = 'loadMore'
				this.$refs.udb.loadMore()
			},
			onqueryerror(e) {
				console.error(e);
			}
		},
		// #ifdef H5
		onPullDownRefresh() {
			this.refresh()
		},
		// #endif
	}
</script>

<style lang="scss" scoped>
	.pages {
		background-color: #FFFFFF;
		min-height: 100vh;
	}

	.nav-box {
		background-color: #FFFFFF;
	}

	.nav {
		display: flex;
		align-items: center;
		flex-direction: row;
		height: 44px;
	}

	.uni-search-box {
		flex: 1;
		padding: 0 10px;
		position: relative;
	}

	::v-deep .uni-searchbar {
		padding: 0;
	}

	::v-deep .uni-searchbar__box {
		height: 32px;
		flex-direction: row;
	}

	/* 覆盖层：让禁用状态的搜索框整体可点 */
	.cover-search-bar {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		z-index: 9;
	}

	.tag-bar {
		padding: 10rpx 20rpx 20rpx 20rpx;
		background-color: #FFFFFF;
	}

	.uni-list {
		height: calc(100vh - 160rpx);
	}
</style>