<template> <view class="container"> <VNavigationBar style="position: relative;z-index: 99;" backgroundColor="#fff" title-color="#000" title="通知公告"></VNavigationBar> <view class="body"> <view class="messageList"> <scroll-view style="height: 100%;" scroll-y="true" class="itemContent" @scrolltolower="onReachBottomCus" refresher-enabled @refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered"> <view v-for="(item, index) in messageList" :key="index" class="messageItem" @click="readNotice(item)"> <image class="messageIcon" src="../../static/icons/message-icon1.png" mode="aspectFit"></image> <view class="messageContent"> <view class="messageTitle" >{{item.title}}</view> <!-- <view class="messageContent_content">{{item.templateContent}}</view>--> <view class="messageContent_content" style="text-align: right">{{formatTime(item.createTime)}}</view> </view> </view> <view style="text-align: center" v-if="messageList.length==0"> <image class="" src="@/static/images/nothing.png"></image> </view> </scroll-view> </view> </view> </view> </template> <script> import VNavigationBar from '@/components/VNavigationBar.vue' import request from "@/utils/request"; import {formatTimestamp} from "@/utils/utils"; import {setJSONData} from "@/utils/auth"; export default { components: { VNavigationBar, }, data() { return { type:"center", messageList: [], pageNo: 1, pageSize: 15, total: 0, //下来刷新状态 isTriggered:false, }; }, onLoad(){ }, onShow(){ this.getList() }, methods:{ /** * 看通知公告详情 */ readNotice(item){ setJSONData("notice",item) uni.navigateTo({ url: "/pages-home/notice/noticeContent", }) }, formatTime(value){ return formatTimestamp(value) }, /** * 上滑加载数据 */ onReachBottomCus() { //判断 如果页码*页容量大于等于总条数,提示该页数据加载完毕 if (this.pageNo * this.pageSize >= this.total) { uni.$u.toast('没有更多数据了') return } //页码+1,调用获取数据的方法获取第二页数据 this.pageNo++ //此处调用自己获取数据列表的方法 this.getList() }, /** * 下拉刷新数据 */ onRefresherrefresh(){ this.isTriggered = true this.pageNo = 1 this.total = 0 this.messageList = [] this.getList() }, /** * 分页查询 */ async getList(){ await request({ url: "/admin-api/base/notice/page", method: "GET", params:{ pageNo:this.pageNo, pageSize:this.pageSize, type:1, parentServer: "weixiu", server: "app" } }).then((res) => { //判断 如果获取的数据的页码不是第一页,就让之前赋值获取过的数组数据 concat连接 刚获取的第n页数据 if (this.pageNo != 1) { this.messageList = this.messageList.concat(res.data.records) } else { this.messageList = res.data.records } //将获取的总条数赋值 this.total = res.data.total this.isTriggered = false }) }, } } </script> <style lang="less" scoped> .container { height: 100%; display: flex; flex-direction: column; .body { flex: 1; height: calc(100vh - env(safe-area-inset-top)); overflow: auto; } .messageList { padding: 0 32rpx; height: 100%; } .messageItem { padding: 30rpx 0; display: flex; align-items: center; column-gap: 20rpx; border-bottom: 1rpx solid #EEEEEE; .messageIcon { width: 80rpx; height: 80rpx; } .messageContent { flex: 1; width: 0; } .messageTitle { font-weight: bold; font-size: 32rpx; color: #333333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .messageContent_content { font-weight: 500; font-size: 28rpx; color: #858BA0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } .popup-content { padding: 15px; height: auto; margin: auto; width: 80%; background-color: #fff; } .popup-content-text { display: flex; align-items: center; justify-content: center; } .text { color: #333; } .popup-info { margin-top: 30rpx; color: #fff; background-color: #f2f6fc; } .info-text { color: #909399; } } </style>