xc-app/pages/mine/notice.vue

<template>
	<view class="notice-page">
		<NavCom title="我的公告"></NavCom>
		<image src="@/static/mine/lb.png" mode="" class="bg"></image>
		<view v-if="list.length === 0" style="padding-top: 200rpx;">
			<empty></empty>
		</view>
		<scroll-view @scrolltolower="lowerBottom" scroll-y="true" class="main"  v-if="list.length > 0">
		<!-- <view class="main" v-if="list.length > 0"> -->
			<view class="notice" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
				<view class="notice-info">
					<view class="info">{{item.title}}</view>
					<view class="notice-detail">发布时间：{{formatDateTime(item.createdAt)}}</view>
				</view>
				<view class="detail">{{item.summary}}</view>
				<view class="footer-detail">
					<view class="look">查看详情</view>
					<image src="@/static/mine/n-d.png" mode="" class="look-img"></image>
				</view>
			</view>
			<view class="no-data" v-if="total == list.length && list.length > 0">没有更多了～</view>
		</scroll-view>
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/mine/notice"></page-popup>
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	import { notice } from '@/API/user.js'
	import emptyCom from '@/pages/components/empyt.vue'
	import NavCom from '@/pages/components/nav.vue'
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight
	export default{
	mixins: [myMixins],
		data(){
			return {
				statusBarHeight,
				list:[],
				page:1,
				total:0
			}
		},
		components:{NavCom},
		mounted() {
			this.getNotice()
		},
		methods:{
			formatDateTime(value) {
			      if (!value) return '';
			      const date = new Date(value);
			      const year = date.getFullYear();
			      const month = String(date.getMonth() + 1).padStart(2, '0');
			      const day = String(date.getDate()).padStart(2, '0');
			      const hours = String(date.getHours()).padStart(2, '0');
			      const minutes = String(date.getMinutes()).padStart(2, '0');
			      const seconds = String(date.getSeconds()).padStart(2, '0');
			      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			getNotice(){
				uni.showLoading()
				notice({page:this.page,size:15,status:1}).then(res => {
					console.log(res)
					uni.hideLoading()
					if(res.code === 200){
						this.total = res.data.total
						if(this.page > 1){
							this.list = [...this.list,...res.data.content]
						}else{
							this.list = res.data.content
						}
					}else{
						this.$api.msg(res.message)
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			goDetail(item){
				uni.navigateTo({
					url:`/pages/mine/noticeDetail?id=${item.id}`
				})
			},
			lowerBottom(){
				if(this.total === this.list.length){
					return
				}
				this.page = this.page + 1
				this.getNotice()
			}
		}
	}
</script>

<style lang="scss">
	
	page{
		background-image: url('@/static/index/bg.png');
		background-size: 100%;
	}
	.notice-page{
		.bg{
			position: fixed;top: 0;
			right: 0;
			width: 174rpx;
			height: 167rpx;
			z-index: 1;
		}
		.empty-btn{
			margin-top: 60rpx;
			width: 324rpx;
			height: 100rpx;
			background: #70E3DE;
			border-radius: 50rpx;
			font-size: 32rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.main{
			padding-top: 130rpx;
			height: 100vh;
			z-index: 99;
			.notice{
				padding: 32rpx 22rpx 32rpx 35rpx;
				width: 706rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				margin-bottom: 23rpx;
				margin-left: 23rpx;
				.notice-info{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.info{
						width: 500rpx;
						font-weight: bold;
						font-size: 26rpx;
						color: #333333;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.notice-detail{
						font-size: 20rpx;
						color: #888888;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
				.detail{
					margin-top: 30rpx;
					font-size: 20rpx;
					color: #888888;
					width: 607rpx;
				}
				.notice-arr{
					width: 12rpx;
					height: 20rpx;
				}
				.footer-detail{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 28rpx;
					padding-top: 19rpx;
					border-top: 1px solid #DEDEDE;
					.look{
						font-size: 24rpx;
						color: #333333;
					}
					.look-img{
						width: 11rpx;
						height: 19rpx;
					}
				}
			}
		}
	}
</style>