lanan-repair/pages/my/message.vue

144 lines
3.7 KiB
Vue

<template>
<view class="container">
<VNavigationBar background-color="#fff" title-color="#333" title="消息中心"></VNavigationBar>
<view class="body">
<view class="messageList">
<scroll-view style="height: 100%;" scroll-y="true" class="itemContent" bindscrolltolower="onReachBottom"
refresher-enabled @refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered">
<view v-for="(item, index) in messageList" :key="index" class="messageItem">
<image class="messageIcon" src="../../static/icons/message-icon1.png" mode="aspectFit"></image>
<view class="messageContent">
<view class="messageTitle">系统通知</view>
<view class="messageContent_content">节日快乐!在这美好的时刻,送上我最真挚的祝福:愿你的每一天都充满阳光和欢笑,每一步都走向成功和辉煌。</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'
export default {
components: {
VNavigationBar,
},
data() {
return {
messageList: [{}, {}],
pageNo: 1,
pageSize: 10,
total: 0,
//下来刷新状态
isTriggered:false,
};
},
onLoad(){
this.getList()
},
/**
* 上滑加载数据
*/
onReachBottom() {
//判断 如果页码*页容量大于等于总条数,提示该页数据加载完毕
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: "/app-api/base/notice/pageList",
// method: "GET",
// params:{
// pageNo:this.pageNo,
// pageSize:this.pageSize,
// type:3,
// parentServer:"weixiu",
// server:"wx"
// },
// tenantIdFlag:false
// }).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: 0;
overflow: auto;
}
.messageList {
padding: 0 32rpx;
}
.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;
}
.messageContent_content {
font-weight: 500;
font-size: 28rpx;
color: #858BA0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
</style>