<!
--
* @Description: 海淀智慧物业平台app
-通知公告
-->
<template>
<div class="notify_content" style="padding: 0;">
<!
-- <img class="icon_img" :src="require('@/assets/img/dashboard/icon_tongzhi.png')" alt="" />
-->
<div class="notice_head">
<div class="tzgg"> <img src="@/assets/img/dashboard/lingdang.png" width="20px" alt=""> 通知公告</div>
<p @click="showNoticeList">更多 <a
-icon type="right" /></p>
</div>
<van
-notice
-bar
v
-if="showUnreadModal"
color="#faad14"
background="#ff4d4f"
class="custom
-notice
-bar"
>
<div class="leftCenterRight">
<img src="@/assets/img/image 1300.png" class="left">
<span class="modal
-text">您有{{ unreadNoticeCount }}条新的通知，请查阅。</span>
<!
-- <van
-icon name="close" class="notice
-close
-icon" @click="handleModalOk" />
-->
<img src="@/assets/img/Group 1321322159.png" @click="handleModalOk" class="right">
<!
-- <van
-icon name="close" class="notice
-close
-icon" @click="handleModalOk" />
-->
</div>
</van
-notice
-bar>
<van
-pull
-refresh v
-model="refreshing" @refresh="onRefresh">
<van
-list v
-model="loading" :finished="finished" finished
-text="没有更多了" @load="onLoad">
<div v
-for="(item, i) of list" :key="i" class="notify_content_item" :class="{ unread: i < unreadNoticeCount }" @click="notifyGoPage(item)">
<div>
<p class="title">{{ item.noticeName }}</p>
<p class="content ellipsis" v
-html="item.noticeContent"></p>
<van
-divider v
-if="i < list.length
- 1" />
</div>
<img src="item.src" alt="" v
-if="false" />
</div>
</van
-list>
</van
-pull
-refresh>
</div>
</template>
<script>
import rolemixins from '@/utils/rolemixins';
import { loginTest, queryNoticePublishPageList, ygNoticeList, selectNoticeList, selectNoticeCount } from '@/api/home';
export default {
name: 'notifyContent',
mixins: [rolemixins],
data() {
return {
showUnreadModal: false,
unreadNotice: null,
unreadNoticeCount: 0, // 新增字段：未读通知数量
pathStr: this.$route.path,
pathName: this.$route.meta.title ? this.$route.meta.title : '',
query: {
pageNo: 1, // 分页
pageSize: 10 // 每页个数
},
loading: false,
finished: false,
refreshing: false,
list: []
};
},
created() {
this.selectNoticeList();
this.checkUnreadNotice();
},
activated() {
},
mounted() {
// this.onRefresh()
},
methods: {
// 更多按钮跳转至公告列表
showNoticeList() {
this.$router.push('/noticeListAll');
},
//查询公告列表页
// selectNoticeList() {
// this.query.userId = JSON.parse(localStorage.getItem('userInfo')).id;
// selectNoticeList(this.query).then((res) => {
// if (res.success && undefined != res.result) {
// this.list = res.result.records.slice(0, 3);
// } else {
// this.list = [{
// noticeName: '暂无公告',
// noticeContent: '暂无公告'
// }];
// }
// });
// },
// 查询通知列表
selectNoticeList() {
const userId = JSON.parse(localStorage.getItem('userInfo')).id;
this.query.userId = userId;
selectNoticeList(this.query).then(res => {
if (res.success && res.result?.records) {
this.list = res.result.records.slice(0, 3);
} else {
this.list = [{ noticeName: '暂无公告', noticeContent: '暂无公告' }];
}
});
},
// 检查是否有未读通知
checkUnreadNotice() {
const userId = JSON.parse(localStorage.getItem('userInfo')).id;
selectNoticeCount({ userId }).then(res => {
if (res.success && res.result > 0) {
this.unreadNoticeCount = res.result
this.showUnreadModal = true;
}
});
},
// 弹窗确认后跳转详情页
handleModalOk() {
this.showUnreadModal = false;
const userId = JSON.parse(localStorage.getItem('userInfo')).id;
selectNoticeList({ userId, isRead: false }).then(res => {
if (res.success && res.result.records.length > 0) {
const firstUnread = res.result.records[0];
this.$router.push({
path: '/issueNoticeDetail',
query: {
projectId: firstUnread.projectId,
id: firstUnread.id,
item: item
}
});
}
});
},
ygNoticeList() {
var param = {
pageNo: this.query.pageNo,
pageSize: this.query.pageSize
};
ygNoticeList(param).then((res) => {
if (res.success) {
this.list = res.result.records;
} else {
this.list = [];
}
});
},
onLoad() {
if (this.refreshing) {
this.list = [];
this.refreshing = false;
}
this.loading = true;
this.query.pageNo++;
this.getList();
},
onRefresh() {
this.query.pageNo = 0; //起始为第一页
this.list = [];
this.refreshing = true;
this.finished = false; //加载与不加载的状态
setTimeout(() => {
this.loading = true; //下拉刷新状态
this.onLoad(); //刷新成功调用列表方法
this.loading = false;
}, 1000);
},
getList() {
this.loading = false;
let data = Object.assign({}, this.query);
selectNoticeList(data).then(res => {
if (res.success) {
this.list = [...this.list, ...res.result.records];
this.loading = false;
if (this.list.length >= res.result.total) {
this.finished = true;
}
}
});
// queryCollectDataList(data).then(res => {
// if (res) {
// this.total = res.result.total;
// res.result.records.map(item => {
// this.list.push(item);
// });
// this.loading = false;
// if (this.list.length >= res.result.total) {
// this.finished = true;
// }
// }
// });
},
notifyGoPage(item) {
this.$router.push({
path: '/issueNoticeDetail',
query: {
projectId: item.projectId,
id: item.id,
item: item
}
});
},
goPage() {
}
}
};
</script>
<style scoped lang="less">
@import '@/assets/css/comm.less';
@bg
-color: #ff4d4f; // 红色背景
@text
-color: white;
@icon
-size: 40px; // 图标大小
@close
-icon
-size: 14.16px; // 关闭图标大小
@close
-margin
-right: 20px; // 右边距
.notify_content {
width: 350px;
min
-height: 198px;
margin: 10px auto;
background: #fff;
border
-radius: 7px 7px 25px 7px;
position: relative;
overflow
-y: auto;
// 自定义 van
-notice
-bar 样式
.custom
-notice
-bar {
border
-radius: 20px;
width: 350px;
height: 24px;
position: fixed;
top: 156px;
.leftCenterRight{
display: flex;
justify
-content: center;
align
-items: center;
text
-align: center;
.left{
margin
-left: 23px;
margin
-right: 21px;
}
.right{
margin
-left: 103px;
}
}
.modal
-text {
line-height: @icon
-size + 25px;
font
-size: 12px;
color: @text
-color;
white
-space: nowrap;
overflow: hidden;
text
-overflow: ellipsis;
}
.notice
-close
-icon {
background
-color: #FF920A !important;
width: @close
-icon
-size;
height: @close
-icon
-size;
font
-size: @close
-icon
-size;
margin
-left: 125px;
margin
-right: @close
-margin
-right;
color: @text
-color;
cursor: pointer;
line-height: @icon
-size + 25px;
}
img{
width: 14.16px;
height: 14.16px;
}
}
.custom
-modal{
background
-color: red;
}
.notice_head {
display: flex;
justify
-content: space
-between;
align
-items: center;
border
-bottom: #E3E3E3 1px solid;
padding: 12px;
.tzgg {
color: #000000;
font
-family: "PingFang SC";
font
-size: 15px;
font
-style: normal;
font
-weight: 700;
line-height: normal;
}
p {
color: #3b77b3;
font
-size: 14px;
font
-weight: 600;
}
}
.modal
-content {
font
-size: 16px;
color: #333;
text
-align: center;
}
.icon_img {
position: absolute;
top: 1px;
right: 10px;
width: 35px;
}
.notify_content_item {
display: flex;
padding
-left: 12px;
margin: 10px;
border
-radius: 12px;
border: 1px solid #def0fe;
background:
linear
-gradient(to right, #eaf6ff, #ffffff);
>div {
// width: calc(100%
- 100px);
width: calc(100%
- 20px);
padding
-right: 15px;
p {
margin: 10px 0;
}
.van
-divider {
border:none
}
p.title {
font
-family: PingFangSC, PingFang SC;
font
-weight: 600;
font
-size: 15px;
color: blue;
}
p.content {
font
-family: PingFangSC, PingFang SC;
font
-weight: 400;
font
-size: 0.4rem;
color: red;
// width: calc(100%
- 20px);
}
}
&.unread {
background:
linear
-gradient(260deg, #FFF 5.08%, #FCE4E9 90.46%);
border
-color: #ff4d4f;
.content {
color: #F88600;
}
}
img {
width: 100px;
height: 60px;
margin
-bottom: 10px;
}
}
}
</style>
为什么接口返回的数据<p class="content ellipsis" v
-html="item.noticeContent"></p>这段代码第一条数据字体比其他的大
本文详细介绍了CSS中line-height属性的应用原则，包括其在块级元素和内联元素中的使用限制，以及为什么不应该为替换内联元素设置行高。
扫一扫
857
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
