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

<template>
	<view class="pages">
		<!-- 主视觉：纯 CSS 渐变，不依赖外部图片，避免签名链接过期后整块空白 -->
		<view class="hero">
			<view class="hero-title">军歌嘹亮</view>
			<view class="hero-subtitle">军旅故事 · 老兵记忆</view>

			<view class="btn-area">
				<view class="red-btn-area">
					<button class="red-btn" @click="btn(0)">老兵直播</button>
					<button class="red-btn" @click="btn(1)">老兵故事</button>
					<button class="red-btn" @click="btn(2)">在线注册</button>
				</view>
				<view class="red-btn-plain-area">
					<view class="red-btn-plain" v-for="tag in quickTags" :key="tag._id"
						@click="goCategory(tag.value)">{{ tag.text }}</view>
				</view>
			</view>
		</view>

		<view class="list-wrapper">
			<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>

		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog type="info" cancelText="关闭" confirmText="继续" title="提示" content="该功能还在开发中!"
				@confirm="dialogConfirm" @close="dialogClose">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		store
	} from '@/pages3/uni_modules/uni-id-pages/common/store.js'

	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'

	export default {
		components: {
			notCover,
			rightSmallCover,
			threeCover,
		},
		computed: {
			userInfo() {
				return store.userInfo
			},
			// 连表查询，返回两个集合的查询结果
			colList() {
				return [
					db.collection(articleDBName).where({
						article_status: 1
					}).field('thumbnail,title,publish_date,user_id,excerpt').getTemp(), // 文章集合
					db.collection(userDBName).field('_id,nickname').getTemp() // 用户集合
				]
			}
		},
		data() {
			return {
				listData: [], // 列表数据
				quickTags: [], // 首屏快捷分类
				loadType: null
			}
		},
		async onReady() {
			await this.loadQuickTags();
		},
		methods: {
			// 快捷分类：取前若干条分类填充到首屏按钮
			async loadQuickTags() {
				try {
					const res = await uniCloud.importObject("uni-cms-categories").getTags();
					if (res && String(res.code) === '200') {
						this.quickTags = (res.tags || []).slice(0, 5);
					}
				} catch (e) {
					console.error('分类加载失败:', e);
				}
			},
			// 跳转到分类列表：tabBar 页面只能用 switchTab，分类 id 通过缓存传递
			goCategory(categoryId) {
				uni.setStorageSync('__cms_category_filter', categoryId);
				uni.switchTab({
					url: "/uni_modules/uni-cms-article/pages/list/slist"
				})
			},
			dialogConfirm() {
				console.log('点击确认')
			},
			dialogClose() {
				console.log('点击关闭')
			},
			inputDialogToggle() {
				this.$refs.inputDialog.open()
			},
			btn(item) {
				if (item === 0) {
					this.inputDialogToggle();
				} else if (item === 1) {
					uni.switchTab({
						url: "/uni_modules/uni-cms-article/pages/list/slist"
					})
				} else if (item === 2) {
					const token = uni.getStorageSync("uni_id_token");
					if (!token) {
						uni.navigateTo({
							url: "/pages3/uni_modules/uni-id-pages/pages/login/login-withoutpwd?type=weixin"
						})
					} else {
						uni.navigateTo({
							url: "/pages3/uni_modules/uni-id-pages/pages/userinfo/userinfo?showLoginManage=true"
						})
					}
				}
			},
			getNewItem(item) {
				if (!item.excerpt) {
					item.excerpt = "";
				} else if (item.excerpt.length > 50) {
					item.excerpt = item.excerpt.slice(0, 50) + " ... ...";
				}
				return item;
			},
			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
			},
			// 刷新
			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;
	}

	/* 主视觉：军旅红渐变 */
	.hero {
		background-image: linear-gradient(160deg, #c11c1f 0%, #8a1013 45%, #5c0201 100%);
		padding: 60rpx 40rpx 40rpx 40rpx;
	}

	.hero-title {
		color: #fff;
		font-size: 64rpx;
		font-weight: 700;
		letter-spacing: 8rpx;
		text-align: center;
		text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.35);
	}

	.hero-subtitle {
		color: rgba(255, 255, 255, 0.82);
		font-size: 26rpx;
		text-align: center;
		margin-top: 16rpx;
		letter-spacing: 4rpx;
	}

	.btn-area {
		margin-top: 48rpx;
	}

	.red-btn-area {
		display: flex;
		flex-direction: row;
		justify-content: center;
		padding: 10rpx 0;
		margin: 0 40rpx 20rpx 40rpx;

		.red-btn {
			color: #fff;
			font-weight: 700;
			font-size: 24rpx;
			height: 64rpx;
			line-height: 64rpx;
			padding: 0 24rpx;
			margin: 0;
			background-image: linear-gradient(to bottom, #e8433f, #8a1013);
			border-radius: 32rpx;

			&::after {
				border: none;
			}

			+ .red-btn {
				margin-left: 20rpx;
			}
		}
	}

	.red-btn-plain-area {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 16rpx 0;
		margin: 0 40rpx;
		border-top: 2rpx solid rgba(255, 255, 255, 0.35);

		.red-btn-plain {
			color: #fff;
			font-weight: 700;
			font-size: 24rpx;
			padding: 8rpx 18rpx;
			opacity: 0.92;
		}
	}

	.list-wrapper {
		background-color: #FFFFFF;
	}

	.uni-list {
		height: 100%;
	}
</style>