jhlapp/pagesT/notice/notice.vue

<template>
	<view style="background-color: rgb(242,245,252);">
		<view class="customer-view clearfix" v-for="(item,index) in list" :key='index'
			@click="goPage(`/pagesT/notice/noticeDetails?id=${item.id}`)">
			<view class="ico"></view>
			<view class="title">
				<!-- 支付率低至0.3%，招行支付重磅上线 -->
				{{item.title}}
			</view>
			<view class="foot">
				<!-- 2021-03-15 18:44:01 -->
				{{ $u.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}
			</view>
		</view>
		<!-- <view class="customer-view clearfix">
			<view class="ico"></view>
			<view class="title float_left">
				2021年易订货春节放假安排通知
			</view>
			<view class="foot">
				2021-02-09 10:53:31
			</view>
		</view> -->
		<u-loadmore :status="load_status" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				pageSize: 10,
				total: 0,
				load_status: 'nomore',
				list: []
			};
		},
		onLoad() {
			this.getAllAnnouncement()
		},
		onPullDownRefresh() {
			this.getAllAnnouncement()
		},
		// 上拉加载
		onReachBottom() {
			if (this.total / this.pageSize > this.page) {
				this.page += 1;
				this.getAllAnnouncement()
			}
		},
		methods: {
			getAllAnnouncement() {
				this.$u.api.getAllAnnouncement({
					type: 4,
					page: this.page,
					pageSize: this.pageSize
				}).then(res => {
					uni.stopPullDownRefresh();
					if (this.page === 1) {
						this.list = res.data;
					} else {
						this.list = this.list.concat(res.data);
					}
					this.total = res.pageTotal;
					this.load_status = this.$utils.loadStatus(this.page, this.pageSize, this.total);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.customer-view {
		width: 100%;
		padding: 30rpx;
		background-color: #ffffff;
		margin-top: 20rpx;

		.ico {
			float: left;
			width: 14rpx;
			height: 14rpx;
			background-color: #FA6400;
			border-radius: 50%;
			margin-top: 15rpx;
			margin-right: 10rpx;
		}

		.title {
			font-size: 32rpx;
			font-weight: bold;
		}

		.foot {
			margin-top: 10rpx;
			float: right;
			font-size: 24rpx;
			color: #999;
		}
	}
</style>