diff --git a/src/assets/images/main/clear.png b/src/assets/images/main/clear.png new file mode 100644 index 000000000..c78f41b37 Binary files /dev/null and b/src/assets/images/main/clear.png differ diff --git a/src/assets/images/main/close.png b/src/assets/images/main/close.png new file mode 100644 index 000000000..83ed71023 Binary files /dev/null and b/src/assets/images/main/close.png differ diff --git a/src/assets/scss/common.scss b/src/assets/scss/common.scss index 1f4962d6c..435cda15c 100644 --- a/src/assets/scss/common.scss +++ b/src/assets/scss/common.scss @@ -414,12 +414,12 @@ img { font-size: 16px; } .img-nav { + @include cs; position: relative; display: inline-block; width: 24px; height: 24px; vertical-align: middle; - overflow: hidden; @keyframes flicker { /* 旋转沿x轴旋转-10度,再绕y轴旋转 */ 0% { @@ -430,6 +430,9 @@ img { opacity: 1; } } + .img-wrap { + overflow: hidden; + } &.z-on { animation: flicker 0.9s linear infinite; @@ -441,6 +444,7 @@ img { width: 24px; height: 24px; filter: drop-shadow(100px 0px rgba(#000, 0.85)); + overflow: hidden; } &:hover { diff --git a/src/views/main-navbar.vue b/src/views/main-navbar.vue index 9ce10aa93..3a240f1af 100644 --- a/src/views/main-navbar.vue +++ b/src/views/main-navbar.vue @@ -86,16 +86,20 @@ >
- +
+ +
- +
{{ unreadMsgNum }} - +
+ +
@@ -136,6 +140,23 @@ > + +
+
新提醒
+
+ +
+
+ {{ noticeList[0].createdTime }} + NEW +
+
+ {{ noticeList[0].content }} +
+
@@ -157,6 +178,10 @@ export default { customerName: "", unreadMsgNum: 0, + + noticeList: [], + + displayedNoticeList: true, }; }, components: { @@ -182,7 +207,8 @@ export default { }, }, methods: { - toRemindPage() { + toNoticePage() { + this.displayedNoticeList = false; this.$router.replace("/main/home-notice"); }, @@ -284,15 +310,39 @@ export default { const { data, code, msg } = await requestGet(url, {}); if (code === 0) { console.log("列表请求成功！！！！！！！！！！！！！！"); + if (data.unreadNum > 0 && this.unreadMsgNum < data.unreadNum) { + this.getNoticeList(); + this.displayedNoticeList = true; + } this.unreadMsgNum = data.unreadNum; } else { } }, + + //加载组织数据 + async getNoticeList() { + const url = "/message/intelligentMessage/page"; + let params = { + page: this.pageNo, + limit: this.pageSize, + readFlag: 0, + }; + + const { data, code, msg } = await requestGet(url, params); + + if (code === 0) { + this.noticeList = data.list; + } else { + this.$message.error(msg); + } + }, }, }; diff --git a/src/views/modules/home/notice.vue b/src/views/modules/home/notice.vue index 0cc1a9f72..83288500b 100644 --- a/src/views/modules/home/notice.vue +++ b/src/views/modules/home/notice.vue @@ -2,14 +2,13 @@
-
- - - - - +
+
全部提醒
+
+ + 全部标记已读 +
-
- + 已读 + 未读
{{ item.content }}
+
+ + 标记已读 +
{{ item.createdTime }}
@@ -75,7 +80,7 @@ export default { }, computed: {}, watch: {}, - mounted() { + activated() { this.getList(); }, methods: { @@ -89,21 +94,21 @@ export default { this.read(item, index); }, - async read(item) { - if (item.readFlag == 1) return; + async read(item, index) { + if (item && item.readFlag == 1) return; const url = "/message/intelligentMessage/msg/clear"; - let params = { - id: item.id, - }; + let params = {}; + + if (item.id) { + params.id = item.id; + } const { data, code, msg } = await requestPost(url, params); if (code === 0) { - const { noticeData } = this; - noticeData[index].readFlag = 1; - this.noticeData = noticeData; console.log("消息已读"); + this.getList(); } else { this.$message.error(msg); } @@ -183,6 +188,7 @@ export default { } .item { + position: relative; display: flex; align-items: center; padding: 16px 0 12px; @@ -191,12 +197,31 @@ export default { border-bottom: none; } - .item-tag { + &:hover { + .item-title { + color: #0056d6; + } + .item-btn-clear { + display: block; + } + } + + .i-tag { display: block; margin-right: 15px; - width: 24px; - height: 24px; + width: 40px; + height: 22px; + border-radius: 4px; + border: 1px solid rgba(0, 0, 0, 0.15); + font-size: 12px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: rgba(0, 0, 0, 0.88); + line-height: 20px; + font-style: normal; + text-align: center; } + .item-title { // @include toe; width: 60%; @@ -207,7 +232,29 @@ export default { color: rgba(0, 0, 0, 0.85); line-height: 22px; } + + .item-btn-clear { + position: absolute; + display: none; + top: 50%; + left: 65%; + width: 80px; + font-size: 14px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #0042a3; + line-height: 16px; + cursor: pointer; + transform: translateY(-50%); + + img { + width: 16px; + margin-right: 3px; + } + } + .item-date { + margin-left: 100px; font-size: 12px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; @@ -216,21 +263,32 @@ export default { } } } - .btn-clear { - position: absolute; - top: 14px; - right: 15px; - width: 32px; - height: 12px; - width: 75px; - height: 25px; - background: linear-gradient(0deg, #db3b3b 1%, #ff8080 100%); - border-radius: 3px; - font-size: 14px; - font-weight: 500; - color: #ffffff; - line-height: 25px; - text-align: center; + .header { + display: flex; + justify-content: space-between; + padding: 12px 0; + margin-bottom: 10px; + border-bottom: 1px solid #f0f5fa; + .title { + height: 22px; + font-size: 16px; + font-family: PingFangSC-Medium, PingFang SC; + font-weight: 500; + color: rgba(0, 0, 0, 0.85); + line-height: 22px; + } + .btn-clear { + font-size: 14px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #0042a3; + line-height: 16px; + cursor: pointer; + img { + width: 16px; + margin-right: 3px; + } + } } }