odd_job_applet/pages/broker/brokerNotice.vue

<template>
	<view>
		<view class="list">
			<view class="list-item" v-for="(item,index) in noticeList" :key="index" @click="goPage(item.id)">
				<view class="item-time">{{item.createtime}}</view>
				<view class="item-card">
					<view class="card-title">{{item.title}}</view>
					<view class="card-content">
						<u-parse :content="item.details"></u-parse>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="pstatus"></uni-load-more>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				noticeList: [],
				pstatus: 'more',
				ppage: 1,
				psize: 20,
			}
		},
		onLoad() {
			_this = this;
			_this.getNotice();
		},
		onReachBottom: function() {
			if (_this.pstatus !== 'more') {
				return;
			}
			_this.getNotice();
		},
		methods: {
			goPage(noticeid) {
				uni.navigateTo({
					url: '/pages/broker/noticeDetails?noticeid=' + noticeid
				});
			},
			
			getNotice() {
				_this = this;
				_this.$req.ajax({
					path: "notice/listBrokerNotice",
					data: {
						ppage: _this.ppage,
						psize: _this.psize,
					}
				}).then((data) => {
					console.log("公告",data)
					_this.pstatus = data.pstatus;
					_this.noticeList = _this.noticeList.concat(data.plist);
					_this.ppage += 1;
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},
		}
	}
</script>

<style lang="scss">
	.list {
		padding: 20rpx 20rpx;
	
		.list-item {
			margin-bottom: 30rpx;
			display: flex;
			flex-direction: column;
	
			.item-time {
				margin: 0 auto 20rpx;
				padding: 0 20rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 20rpx;
				font-size: 20rpx;
				color: #FFFFFF;
				background-color: #d7d7d7;
			}
	
			.item-card {
				padding: 20rpx 20rpx;
				background-color: #FFFFFF;
				border-radius: 12rpx;
				// box-shadow: 0rpx 0rpx 10rpx 1rpx rgba(73, 128, 209, 0.3);
				box-shadow: 5rpx 5rpx 10rpx 2rpx rgba(255, 0, 0, 0.3);
	
				.card-title {
					font-size: 35rpx;
					font-weight: 600;
				}
	
				.card-content {
					margin-top: 20rpx;
					line-height: 40rpx;
					font-size: 25rpx;
					color: #797979;
				}
			}
		}
	}
</style>