roamfuding-xcx/pages/gonggao-list.vue

<template>
	<view class="page">
		<u-navbar title="公告列表" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='46' id="navbar" :custom-back="btnfh">
		</u-navbar>
		<scroll-view class="list-container" scroll-y @scrolltolower="loadMore" :refresher-enabled="true" 
			@refresherrefresh="onRefresh" :refresher-triggered="isRefreshing">
			<view class="list-item" v-for="(item, index) in list" :key="index" @click="goToDetail(item.id)">
				<view class="item-content">
					<view class="item-title">  {{ item.title || '欢迎来到福鼎！' }}</view>
					<view class="item-time" v-if="item.createTime"> <u-icon name="clock" color="#999" size="30" style="margin-right: 6rpx;"></u-icon> {{ item.createTime }}</view>
				</view>
				<image class="item-arrow" src="https://api.ccttiot.com/smartmeter/img/static/uxhocoNzXasArlGLa2j5" mode=""></image>
			</view>
			<view class="load-more" v-if="hasMore && loading">
				<text>加载中...</text>
			</view>
			<view class="no-more" v-if="!hasMore && list.length > 0">
				<text>没有更多了...</text>
			</view>
			<view class="empty" v-if="list.length === 0 && !loading">
				<text>暂无公告</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#fff",
				},
				list: [],
				pageNum: 1,
				pageSize: 10,
				total: 0,
				hasMore: true,
				loading: false,
				isRefreshing: false,
				fanhui:''
			}
		},
		onLoad(option) {
			this.getList()
			if(option && option.fanhui){
				this.fanhui = option.fanhui
			}
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '玩转福鼎',
				path: '/pages/gonggao-list?fanhui=1'
			}
		},
		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '玩转福鼎',
				query: '',
				path: '/pages/gonggao-list?fanhui=1'
			}
		},
		methods: {
			btnfh(){
				if(this.fanhui == 1){
					uni.reLaunch({
						url:'/pages/index/index'
					})
				}else{
					uni.navigateBack()
				}
			},
			// 获取公告列表
			getList() {
				if (this.loading) return
				this.loading = true
				this.$u.get(`/app/article/list?pageNum=${this.pageNum}&pageSize=${this.pageSize}&type=6`).then(res => {
					this.loading = false
					this.isRefreshing = false
					if (res.code == 200) {
						if (this.pageNum == 1) {
							this.list = res.rows || []
						} else {
							this.list = this.list.concat(res.rows || [])
						}
						this.total = res.total || 0
						this.hasMore = this.list.length < this.total
					}
				}).catch(err => {
					this.loading = false
					this.isRefreshing = false
					console.error('获取公告列表失败:', err)
				})
			},
			// 下拉刷新
			onRefresh() {
				setTimeout(()=>{
					this.isRefreshing = true
					this.pageNum = 1
					this.hasMore = true
					this.getList()

				},1000)
			},
			// 加载更多
			loadMore() {
				if (this.hasMore && !this.loading) {
					this.pageNum++
					this.getList()
				}
			},
			// 跳转到详情
			goToDetail(id) {
				uni.navigateTo({
					url: '/pages/gonggao?id=' + id
				})
			},
		}
	}
</script>

<style lang="scss">
	::v-deep .u-icon__icon,
	::v-deep .u-title {
		padding-bottom: 22rpx !important;
	}
	page {
		background: #fff;
	}
	.list-container {
		width: 100%;
		height: 89vh;
		padding: 20rpx;
		box-sizing: border-box;
	}
	.list-item {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		padding-bottom: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.05);
		.item-content {
			flex: 1;
			display: flex;
			flex-direction: column;
			.item-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #3D3D3D;
				margin-bottom: 12rpx;
				line-height: 1.5;
			}
			.item-time {
				font-size: 24rpx;
				color: #999999;
			}
		}
		.item-arrow {
			width: 32rpx;
			height: 32rpx;
			margin-left: 20rpx;
			flex-shrink: 0;
			filter: hue-rotate(-42deg);

		}
	}
	.load-more,
	.no-more {
		text-align: center;
		padding: 40rpx 0;
		font-size: 28rpx;
		color: #999999;
	}
	.empty {
		text-align: center;
		padding: 200rpx 0;
		font-size: 32rpx;
		color: #999999;
	}
</style>