249 lines
6.5 KiB
Vue
249 lines
6.5 KiB
Vue
<template>
|
||
<view class="container">
|
||
<VNavigationBar background-color="#fff" title-color="#333" title="消息中心" :showClear="showClear" @clearNoRead="clearNoReadFun"></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" @click="readNotice(item)">
|
||
<image class="messageIcon" src="../../static/icons/message-icon1.png" mode="aspectFit"></image>
|
||
<view class="messageContent">
|
||
<view :class="{'messageTitle':item.readStatus,'noReadTitle':!item.readStatus}" >系统通知</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>
|
||
<!-- 普通弹窗 -->
|
||
<uni-popup ref="popup" background-color="#fff" >
|
||
<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
|
||
<text class="text popup-content-text">{{ nowReadItem.templateContent }}</text>
|
||
<button class="button popup-info" @click="dialogToggle"><text
|
||
class="button-text info-text">知道了</text></button>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import VNavigationBar from '@/components/VNavigationBar.vue'
|
||
import request from "@/utils/request";
|
||
import {formatTimestamp} from "@/utils/utils";
|
||
|
||
export default {
|
||
components: {
|
||
VNavigationBar,
|
||
},
|
||
data() {
|
||
return {
|
||
type:"center",
|
||
messageList: [],
|
||
pageNo: 1,
|
||
pageSize: 15,
|
||
total: 0,
|
||
//下来刷新状态
|
||
isTriggered:false,
|
||
//是否显示一键清空
|
||
showClear:true,
|
||
nowReadItem:{},
|
||
};
|
||
},
|
||
onLoad(){
|
||
|
||
},
|
||
onShow(){
|
||
this.getList()
|
||
},
|
||
methods:{
|
||
/**
|
||
* 点击阅读消息
|
||
*/
|
||
async readNotice(item) {
|
||
this.nowReadItem = item
|
||
// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
|
||
this.$refs.popup.open(this.type)
|
||
//直接请求后台已读
|
||
await request({
|
||
url: "/app-api/system/notify-message/update-read",
|
||
method: "PUT",
|
||
params:{ids:this.nowReadItem.id},
|
||
tenantIdFlag:false
|
||
}).then((res) => {
|
||
if(res.code==200){
|
||
this.onRefresherrefresh()
|
||
}
|
||
})
|
||
},
|
||
/**
|
||
* 消息设置为已读
|
||
*/
|
||
dialogToggle(){
|
||
this.$refs.popup.close()
|
||
},
|
||
/**
|
||
* 一键清空未读消息
|
||
*/
|
||
async clearNoReadFun(){
|
||
console.log("清空了")
|
||
await request({
|
||
url: "/app-api/system/notify-message/update-all-read",
|
||
method: "PUT",
|
||
tenantIdFlag:false
|
||
}).then((res) => {
|
||
if(res.code==200){
|
||
uni.showToast({
|
||
title: '操作成功',
|
||
icon: 'none'
|
||
})
|
||
setTimeout(()=>{
|
||
this.onRefresherrefresh()
|
||
},500)
|
||
}
|
||
})
|
||
},
|
||
formatTime(value){
|
||
return formatTimestamp(value)
|
||
},
|
||
/**
|
||
* 上滑加载数据
|
||
*/
|
||
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/system/notify-message/my-page",
|
||
method: "GET",
|
||
params:{
|
||
pageNo:this.pageNo,
|
||
pageSize:this.pageSize
|
||
},
|
||
tenantIdFlag:false
|
||
}).then((res) => {
|
||
//判断 如果获取的数据的页码不是第一页，就让之前赋值获取过的数组数据 concat连接 刚获取的第n页数据
|
||
if (this.pageNo != 1) {
|
||
this.messageList = this.messageList.concat(res.data.list)
|
||
} else {
|
||
this.messageList = res.data.list
|
||
}
|
||
//将获取的总条数赋值
|
||
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;
|
||
}
|
||
.noReadTitle {
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
.noReadTitle:after{
|
||
content: "*";
|
||
color: red;
|
||
display: block; /* 或者其他的块级显示类型，比如 inline-block, table 等 */
|
||
position: absolute; /* 或者 absolute 或者 fixed，取决于你的布局需求 */
|
||
z-index: 1; /* 确保它在元素的上方 */
|
||
right: 0;
|
||
}
|
||
|
||
.messageContent {
|
||
flex: 1;
|
||
width: 0;
|
||
}
|
||
.messageTitle {
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
.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>
|