JinShan_uniapp/pages/serviceNoticeList/index.vue

<template>
	<view class="container">
		<!-- 内容区域 -->
		<view class="content">
			<view class="content-wrapper">
				<!-- 公告列表 -->
				<view class="notice-list">
					<view class="notice-item" 
					      v-for="(item,index) in noticesList"
						  :key="index"
					      @click="goNoticeDetail(item.id)">
						<image :src="item.cover" 
                               class="notice-image"
                               mode="aspectFill"></image>
						<view class="notice-content">
							<view class="notice-title line-clamp-1">{{item.title}}</view>
							<view class="notice-description line-clamp-2" v-html="item.desc"></view>
							<view class="notice-footer">
								<text class="notice-date">{{formatTime(item.createdAt,'YYYY-MM-DD')}}</text>
								<text class="notice-more">查看详情 →</text>
							</view>
						</view>
					</view>
					
					<!-- 空状态 -->
					<view class="empty-state" v-if="noticesList.length === 0">
						<image src="/static/images/empty-notice.png" class="empty-image"></image>
						<text class="empty-text">暂无公告</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部导航 -->
		<Footer></Footer>
	</view>
</template>

<script>
	import { get } from '@/utils/request';
	import { IMAGE_BASE_URL } from '@/utils/config';
	import { formatTime } from '@/utils/timeFormat';
	import Footer from '@/components/footer_common.vue';
	
	export default {
		components: { Footer },
		data() {
			return {
				formatTime,
				IMAGE_BASE_URL,
				noticesList: [],
				isLoading: false,
				currentPage: 1,
				totalPages: 1
			};
		},
		mounted() {
			this.getNotices();
		},
		methods: {
			async getNotices() {
				if (this.isLoading) return;
				this.isLoading = true;
				
				try {
					const res = await get('/api/v1/apps/home/notices', {
						current: this.currentPage,
						pageSize: 10,
					});
					
					if (res?.success) {
						const processedData = res.data.map(item => ({
							...item,
							cover: item.cover.startsWith('http') ? item.cover : IMAGE_BASE_URL + item.cover
						}));
						
						this.noticesList = [...this.noticesList, ...processedData];
						this.totalPages = Math.ceil(res.total / 10);
					}
				} catch (err) {
					console.error('获取公告失败:', err);
					uni.showToast({
						title: '加载公告失败',
						icon: 'none'
					});
				} finally {
					this.isLoading = false;
				}
			},
			
			goNoticeDetail(id) {
				uni.navigateTo({
					url: `/pages/serviceNoticeDetail/index?Id=${id}`,
					animationType: 'slide-in-right'
				});
			},
			
			loadMore() {
				if (this.currentPage < this.totalPages) {
					this.currentPage++;
					this.getNotices();
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	/* 基础变量 */
	:root {
		--primary-color: #3b8cff;
		--secondary-color: #4a90e2;
		--text-color: #333;
		--text-light: #7d7d7d;
		--bg-color: #f8f9fa;
		--card-bg: #fff;
		--border-color: rgba(59, 140, 255, 0.2);
		--shadow: 0 4rpx 12rpx rgba(59, 140, 255, 0.1);
		--radius: 16rpx;
	}
	
	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background: linear-gradient(180deg, rgba(255, 241, 235, 0.8) 0%, rgba(192, 219, 250, 0.8) 100%);
		position: relative;
	}
	
	.content {
		flex: 1;
		margin-top: 30rpx;
		border-radius: 30rpx 30rpx 0 0;
		background-color: rgba(255, 255, 255, 0.85);
		padding-bottom: env(safe-area-inset-bottom);
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
		
		.content-wrapper {
			padding: 30rpx 0;
			
			.notice-list {
				display: flex;
				flex-direction: column;
				gap: 24rpx;
				padding: 0 30rpx;
				
				.notice-item {
					display: flex;
					background: var(--card-bg);
					border-radius: var(--radius);
					overflow: hidden;
					transition: all 0.3s ease;
					box-shadow: var(--shadow);
					border: 1rpx solid var(--border-color);
					
					&:active {
						transform: scale(0.98);
						opacity: 0.9;
					}
					
					.notice-image {
						width: 220rpx;
						height: 220rpx;
						flex-shrink: 0;
						background-color: #f5f5f5;
					}
					
					.notice-content {
						flex: 1;
						padding: 24rpx;
						display: flex;
						flex-direction: column;
						
						.notice-title {
							font-size: 32rpx;
							font-weight: 600;
							color: var(--secondary-color);
							margin-bottom: 12rpx;
						}
						
						.notice-description {
							font-size: 26rpx;
							color: var(--text-light);
							line-height: 1.5;
							margin-bottom: 16rpx;
							flex: 1;
						}
						
						.notice-footer {
							display: flex;
							justify-content: space-between;
							align-items: center;
							
							.notice-date {
								font-size: 24rpx;
								color: var(--text-light);
							}
							
							.notice-more {
								font-size: 24rpx;
								color: var(--primary-color);
							}
						}
					}
				}
				
				.empty-state {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 80rpx 0;
					
					.empty-image {
						width: 200rpx;
						height: 200rpx;
						margin-bottom: 30rpx;
						opacity: 0.6;
					}
					
					.empty-text {
						font-size: 28rpx;
						color: var(--text-light);
					}
				}
			}
		}
	}
	
	/* 通用工具类 */
	.line-clamp-1 {
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	
	.line-clamp-2 {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
</style>