ajy/code/ajyApp/pages/find/index/index.nvue

<template>
	<view class="page">
		<view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
		<text class="page-title">推荐</text>
		<scroll-view class="scroll-content" scroll-y="true" @scrolltolower="onReachBottom">
			<view class="recommend-grid">
				<view class="recommend-card" v-for="(item, index) in recommends" :key="item.id || index" @click="onItemClick(item)">
					<image class="card-img" :src="item.coverImage" mode="aspectFill" v-if="item.coverImage"></image>
					<image class="card-img" src="/static/home/banner.png" mode="aspectFill" v-else></image>
					<text class="card-title">{{item.title}}</text>
					<view class="card-footer">
						<view class="badge-circle">
							<text class="badge-text">研</text>
						</view>
						<text class="footer-name">{{item.author || '研年健康贴士'}}</text>
						<view class="badge-official">
							<text class="official-text">官方</text>
						</view>
					</view>
				</view>
			</view>
			<text class="load-tip" v-if="loadMore">加载中...</text>
			<text class="load-tip" v-else-if="noMore && recommends.length > 0">已经到底了</text>
		</scroll-view>
		<ay-toast ref="ayToast" />
	</view>
</template>

<script>
import ayToast from '@/components/ay-toast/ay-toast.nvue'
import { getPublishedArticles } from '@/utils/api/article.js'
import config from '@/utils/http/config.js'

// 文章阅读页基础地址（去掉 /api 后缀）
const serverBase = config.baseUrl.replace(/\/api\/?$/, '')

export default {
	components: {
		ayToast
	},
	data() {
		return {
			statusBarHeight: 44,
			pageNum: 1,
			pageSize: 10,
			loadMore: false,
			noMore: false,
			recommends: []
		}
	},
	onShow() {
		const sysInfo = uni.getSystemInfoSync()
		this.statusBarHeight = sysInfo.statusBarHeight || 44
		// 首次加载数据
		if (this.recommends.length === 0) {
			this.loadArticles()
		}
	},
	onPullDownRefresh() {
		this.pageNum = 1
		this.noMore = false
		this.loadArticles(true)
	},
	methods: {
		/** 加载文章列表 */
		async loadArticles(isRefresh) {
			if (this.loadMore) return
			this.loadMore = true
			try {
				const res = await getPublishedArticles({
					pageNum: this.pageNum,
					pageSize: this.pageSize
				})
				const records = res.records || []
				if (isRefresh) {
					this.recommends = records
				} else {
					this.recommends = this.recommends.concat(records)
				}
				// 判断是否还有更多数据
				if (records.length < this.pageSize) {
					this.noMore = true
				}
			} catch (e) {
				console.error('加载文章列表失败', e)
			} finally {
				this.loadMore = false
				if (isRefresh) {
					uni.stopPullDownRefresh()
				}
			}
		},
		/** 触底加载更多 */
		onReachBottom() {
			if (this.loadMore || this.noMore) return
			this.pageNum++
			this.loadArticles(false)
		},
		/** 点击文章，跳转webview阅读页 */
		onItemClick(item) {
			const articleUrl = serverBase + '/article/view/' + item.id
			uni.navigateTo({
				url: '/pages/webview/webview?url=' + encodeURIComponent(articleUrl) + '&title=' + encodeURIComponent(item.title || '文章详情')
			})
		}
	}
}
</script>

<style>
.page {
	flex: 1;
	background-color: #F5F5F5;
}
.status-bar {
	background-color: #F5F5F5;
}
.page-title {
	font-weight: bold;
	font-size: 48rpx;
	color: #545F71;
	margin-left: 50rpx;
	margin-top: 40rpx;
	margin-bottom: 40rpx;
}
.scroll-content {
	flex: 1;
}
.recommend-grid {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-left: 40rpx;
	padding-right: 40rpx;
}
.recommend-card {
	width: 324rpx;
	background-color: #FFFFFF;
	border-radius: 20rpx;
	margin-bottom: 28rpx;
	overflow: hidden;
}
.card-img {
	width: 324rpx;
	height: 340rpx;
}
.card-title {
	padding-left: 16rpx;
	padding-right: 16rpx;
	padding-top: 20rpx;
	padding-bottom: 16rpx;
	font-size: 32rpx;
	color: #545F71;
	lines: 2;
	text-overflow: ellipsis;
}
.card-footer {
	flex-direction: row;
	align-items: center;
	padding-left: 16rpx;
	padding-bottom: 20rpx;
}
.badge-circle {
	width: 32rpx;
	height: 32rpx;
	background-color: #389588;
	border-radius: 32rpx;
	justify-content: center;
	align-items: center;
	margin-right: 4rpx;
}
.badge-text {
	font-size: 20rpx;
	color: #FFFFFF;
}
.footer-name {
	font-size: 24rpx;
	color: #BBBDBF;
}
.badge-official {
	width: 60rpx;
	height: 32rpx;
	background-color: #000000;
	border-radius: 4rpx;
	justify-content: center;
	align-items: center;
	margin-left: 10rpx;
}
.official-text {
	font-size: 24rpx;
	color: #EAC384;
}
.load-tip {
	text-align: center;
	font-size: 24rpx;
	color: #999999;
	padding-top: 20rpx;
	padding-bottom: 40rpx;
}
</style>