universal-wechat-uniapp-241007/pages/index/article.vue

<template>
	<view class="page">
		<navbar title="江华"/>
		
		<view class="content">
			<view class="article-list" v-if="!loading">
				<article-item 
					v-for="(item, index) in List" 
					:key="item.id || index" 
					:item="item"
					@click="handleItemClick"
				/>
			</view>
			
			<!-- 加载状态 -->
			<view class="loading-container" v-if="loading">
				<text class="loading-text">加载中...</text>
			</view>
			
			<!-- 空状态 -->
			<view class="empty-container" v-if="!loading && List.length === 0">
				<text class="empty-text">暂无文章</text>
			</view>
		</view>

		<tabber select="1" />
	</view>
</template>

<script>
	import tabber from '@/components/base/tabbar.vue'
	import articleItem from '@/components/list/articleItem.vue'
	import loadList from '@/mixins/loadList.js'
	
	export default {
		mixins: [loadList],
		components : {
			tabber,
			articleItem
		},
		data() {
			return {
				mixinsListApi: 'articleList'
			}
		},
		methods: {
			// 处理文章点击事件
			handleItemClick(item) {
				console.log('点击了文章:', item);
				// 跳转到文章详情页
				uni.navigateTo({
					url: `/pages_order/article/index?id=${item.id}`
				})
			}
		}
	}
</script>

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

.content {
	padding: 20rpx;
	padding-bottom: 120rpx; // 为底部tabbar留出空间
}

.article-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.loading-container {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 100rpx 0;
	
	.loading-text {
		font-size: 28rpx;
		color: #999;
	}
}

.empty-container {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 100rpx 0;
	
	.empty-text {
		font-size: 28rpx;
		color: #999;
	}
}
</style>