luoshan_web/pages/tabbar/index/announcementAll.vue

<template>
	<view class="container">
		<view class="message_list" v-if="list.length">
			<view class="mim-view" v-for="(item) in list" :key="item.id">
				<view class="storm mim-flex-wrap-space-between">
					<view class="mim-flex-vertical" style="max-width: 60%;">
						<text class="mim-multi-line msg_p">{{item.title}}</text>
						<text class="msg_time">{{item.created_at}}</text>
					</view>
					<view class="mim-button details" @click="goDetails(item.id)">查看详情</view>
				</view>
			</view>
			<u-divider bg-color='#f7f7f7' fontSize='24' class="divider">{{divider}}</u-divider>
		</view>
		<view v-else style="margin-top: 350rpx;">
			<u-empty></u-empty>
		</view>
		<view class="mim-view-list"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				list: [],
				form: {
					type_id: '',
					page: 1,
					per_page: 10,
				},
				page: '',
				divider: '没有更多数据啦~'
			};
		},
		onLoad(option) {
			this.form.type_id = option.type
			switch (option.type) {
				case '2': //罗山新闻
					this.title = "罗山新闻"
					break;
				case '3': //罗山县情
					this.title = "罗山县情"

					break;
				case '4': //发展动态
					this.title = "发展动态"

					break;
				case '5': //营商环境
					this.title = "营商环境"

					break;
				case '6': //全域旅游
					this.title = "全域旅游"

					break;
				default: //公告版
					this.title = "公告板"

					break;
			}
			this.infoListFn()
		},
		onPullDownRefresh() {
			//下拉刷新
			this.form.page = 1
			this.infoListFn()
		},
		onReachBottom() {
			//触底加载
			console.log('触底加载')
			this.divider = '加载中。。。'
			let page = this.form.page
			if (this.page > page) {
				page++
				this.form.page = page
				this.infoListFn()
			} else {
				this.divider = '没有更多数据啦~'
				uni.showToast({
					title: '没有更多数据啦~',
					icon: 'none'
				})
			}
		},
		methods: {
			//初始化页面
			async infoListFn() {
				uni.showNavigationBarLoading()
				const res = await this.$u.api.infoList(this.form)
				console.log(res)
				if (res.status === "success") {
					const {
						data: {
							data,
							meta
						}
					} = res
					this.meta = meta
					this.page = this.meta.pagination.total_pages
					if (this.page > 1) {
						this.list = this.list.concat(data)
					} else {
						this.list = data
					}
					this.divider = '没有更多数据啦~'
				}
				uni.hideNavigationBarLoading()
				uni.stopPullDownRefresh();
			},
			//查看详情
			goDetails(e) {
				this.$u.route('/pages/detailPage/detailPage', {
					id: e,
					type: this.form.type_id
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;

		.container {
			.message_list {
				.storm {

					.msg_p {
						font-size: 30rpx;
						font-weight: normal;
						line-height: 36rpx;
						letter-spacing: 0em;
						color: #333333;
					}

					.msg_time {
						font-size: 24rpx;
						font-weight: normal;
						line-height: 24rpx;
						letter-spacing: 0em;
						color: #999999;
						margin-top: 32rpx;
					}
				}

				.details {
					width: 176rpx;
					height: 64rpx;
					margin-left: 30rpx;
				}
			}
		}
	}
</style>