party-h5/pages/mine/messageList.vue

<template>
	<view class="">
		<view class="navbar">
			<view class="back">
				<text class="iconfont icon-fanhui " @click="backLast()"></text>
			</view>
			<text>通知公告</text>
		</view>
	<view class="message-list">
		<view class="item" v-for="(item,index) in list" :key="index">
			<view class="message-time">
				{{item.created_at}}
			</view>
			<view class="list">
				<view class="title">
					{{item.title}}
				</view>
				<view class="content">
					{{item.body}}
				</view>
			</view>
		</view>
		<view class="kong" v-show="isShow">
			<image src="../../static/images/kong.png" mode=""></image>
			<view class="text">
				暂无通知公告~
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import navBar from '../../components/navBar/navbar.vue';
	var app = getApp()
	export default {
		components:{
			navBar
			},
		data() {
			return {
				list: [],
				page:1,
				isShow:false
			}
		},
		onReachBottom() {
			console.log('触底时间')
			uni.showLoading()
			this.page++;
			let params = {
				id: uni.getStorageSync('userInfo').id,
				page: this.page
			}
			app.request('/messages', params, 'get').then(res => {
				let data = res.data.data.data
				this.list = this.list.concat(data)
				uni.hideLoading()
				if (data.length == 0) {
					uni.showToast({
						title: '到底了~',
						icon: 'none'
					})
				}
			})
			
		},
		created() {
			let params = {
				id: uni.getStorageSync('userInfo').id,
			}
			app.request('/messages', params, 'get').then(res => {
				console.log(res)
				this.list = res.data.data.data
				if(this.list.length==0){
					this.isShow=true
				}
			})
		},
		methods:{
			backLast:function(){
				console.log(this.url)
				uni.reLaunch({
					url:'./index'
				})
			},
		}
	}
</script>

<style lang="scss">
	.navbar {
			font-size: 32upx;
			height: 100upx;
			line-height: 100upx;
			color: #888888;
			position: relative;
			position: fixed;
			top: 0;
			z-index: 9999999;
			width: 100%;
			 background-color: #FFFFFF;
			text-align: center;
			border-bottom: solid 2upx #EFF1F6;
		
			.back {
				height: 100upx;
				width: 100upx;
				text-align: center;
				// background-color: #007AFF;
				position: absolute;
				float: left;
				left: 0upx;
				font-size: 32upx;
			}
		}
	page {
		background-color: #f4f4f4;

		.message-list {
			width: 90%;
			margin: 0 auto;
			padding-top: 100upx;

			.item {
				margin-top: 70upx;
			}

			.message-time {
				font-size: 26upx;
				height: 50upx;
				width: 300upx;
				text-align: center;
				margin: 0 auto;
				border-radius: 30upx;
				margin-bottom: 30upx;
				line-height: 50upx;
				color: #FFFFFF;
				background-color: #c8c8c8;
			}

			.list {
				font-size: 28upx;
				background-color: #FFFFFF;
				padding: 30upx;
				border-radius: 10upx;
				margin-top: 20upx;
				margin-bottom: 50upx;

				.title {
					font-weight: bold;
					margin-bottom: 20upx;
				}

				.content {
					color: #afafaf;
				}
			}
		}
		.kong {
			margin-top: 30%;
			text-align: center;
		
			image {
				width: 300upx;
				height: 300upx;
			}
		
			.text {
				font-size: 34upx;
				margin-top: 30upx;
				color: #e61916;
			}
		}
		
	}
</style>