exam_mp/pages/notice/list.vue

<template>
	<Container title="公告列表" :scrollStyle="{ padding: 0 }" :showBack="false">
		<view class="notice-page">
			<!-- 公告列表 -->
			<view class="notice-list" v-if="noticeList !='' && noticeList != null">
				<!-- 公告项1 -->
				<view class="notice-item" v-for="(item, index) in noticeList" :key="index" @click="handleItemClick(item)">
					<view class="notice-icon">
						<image
							class="notice-icon-image"
							src="https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/05/8DvVCq6w7CN97Mxdp68vje9WCi8RjKXDC5KwHOOY.png"
							mode="aspectFill"
						></image>
					</view>
					<view class="notice-content" :id="'content-' + index">
						<view class="notice-title">{{ item.title }}</view>
						<view class="notice-time">{{ formatTimestamp(item.insert_time)}}</view>
					</view>
					<navigator class="navigator_item" open-type="navigate" :url="'/pages/notice/detail?id=' + item.id">
						<view class="notice-link">
							<image
								class="notice-link-image"
								src="https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/05/jYNQJdKYavtqeVoq7bxwYFuF258jFm3sNWVSX1SS.png"
								mode="aspectFill"
							></image>
						</view>
					</navigator>
				</view>
			</view>
		</view>
	</Container>
</template>

<script>
import Container from '../../components/Container/Container.vue';
import CustomerService from '@/components/CustomerService/CustomerService.vue';
export default {
	data() {
		return {
			page: '1',
			limit: '10',
			noticeLink_top: [],
			noticeList: []
		};
	},
	mounted() {},
	onLoad() {
		this.topicnotice_system_list();
	},
	methods: {
		formatTimestamp(timestamp) {
			if (timestamp) {
				timestamp = timestamp * 1000;
			}
			const date = new Date(timestamp);
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，要 +1
			const day = String(date.getDate()).padStart(2, '0');
			const hours = String(date.getHours()).padStart(2, '0');
			const minutes = String(date.getMinutes()).padStart(2, '0');
			const seconds = String(date.getSeconds()).padStart(2, '0');
			return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
		},
		async topicnotice_system_list() {
			this.$http.request('api/question_bank/question_reception/notice/list', { page: this.page, limit: this.limit }).then((callback) => {
				if (callback.code == 'success') {
					let page = this.page;
					if (page == 1) {
						this.noticeList = callback.data.data;
					} else {
						this.noticeList.push(...callback.data.data);
					}
					if (callback.data.data == '') {
						this.noMore = true;
					} else {
						this.noMore = false;
					}
				} else {
					uni.showToast({
						title: callback.msg,
						icon: 'none'
					});
				}
			});
		},
		handleItemClick(item) {
			// 处理点击事件
			console.log('点击公告:');
		}
	}
};
</script>

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

	.notice-list {
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

		.notice-item {
			display: flex;
			align-items: center;
			padding: 24rpx 30rpx;
			border-bottom: 1rpx solid #eee;
			position: relative;
			height: 128rpx;
			.notice-icon {
				position: absolute;
				top: 22rpx;
				width: 60rpx;
				height: 60rpx;
				margin-right: 20rpx;
			}

			.notice-link {
				position: absolute;
				right: 0rpx;
				width: 50rpx;
				height: 50rpx;
				margin-right: 20rpx;
				top:67rpx;
			}

			.notice-link-image,
			.notice-icon-image {
				width: 50rpx;
				height: 50rpx;
			}

			.notice-content {
				flex: 1;
				margin-left: 60rpx;
				margin-right: 60rpx;

				.notice-title {
					font-size: 30rpx;
					color: #333;
					margin-bottom: 10rpx;
					line-height: 1.4;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.notice-time {
					font-size: 24rpx;
					color: #999;
				}
			}
		}
	}
}
</style>