消息列表：已读消息更改

front/src/views/mynoticeView/components/NoticeList.vue

@@ -79,7 +79,11 @@
           <a-list-item>
             <a-list-item-meta description="">
               <template #title>
-                <div class="left" @click="read(item)">
+                <div
+                  class="left"
+                  @click="read(item)"
+                  :class="item.readStatus === 1 ? '' : 'pointer'"
+                >
                   {{ item.content }}
                 </div>
                 <div class="right">{{ '发布时间：' + item.senderDate }}</div>
@@ -111,19 +115,19 @@
   </div>
 </template>
 <script setup>
-  // import { SearchOutlined } from '@ant-design/icons-vue'
+// import { SearchOutlined } from '@ant-design/icons-vue'
-  import { ref, reactive, onBeforeUnmount } from 'vue'
+import { ref, reactive, onBeforeUnmount } from 'vue'
-  import mybus from '@/myplugins/mybus'
+import mybus from '@/myplugins/mybus'
-  import { message } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
-  import { mynotice, mynoticeRead } from '@/api/home'
+import { mynotice, mynoticeRead } from '@/api/home'
-  import { useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
-  const router = useRouter()
+const router = useRouter()
-  const total = ref(0)
+const total = ref(0)
-  const pageSize = ref(8)
+const pageSize = ref(8)
-  const pageNum = ref(1)
+const pageNum = ref(1)
-  const value = ref('全部消息')
+const value = ref('全部消息')
-  const obj = reactive({ page: pageNum.value, limit: pageSize.value })
+const obj = reactive({ page: pageNum.value, limit: pageSize.value })
-  const navList = reactive([
+const navList = reactive([
   {
     title: '全部',
     key: 'all',
@@ -144,11 +148,11 @@
     key: 'other',
     num: 0,
   },
-  ])
+])
-  const selectNav = ref('all')
+const selectNav = ref('all')
-  const selectData = ref([])
+const selectData = ref([])
-  const data = ref([])
+const data = ref([])
-  const changeNav = (nav) => {
+const changeNav = (nav) => {
   selectNav.value = nav.key
   if (nav.key === 'all') {
     delete obj.from
@@ -158,16 +162,16 @@
   value.value = '全部消息'
   delete obj.readStatus
   init()
-  }
+}
-  const changeCheckBox = (item) => {
+const changeCheckBox = (item) => {
   item.checked = !item.checked
   if (item.checked) {
     selectData.value.push(item.id)
   } else {
     selectData.value = selectData.value.filter((val) => val !== item.id)
   }
-  }
+}
-  const changeCheckAll = () => {
+const changeCheckAll = () => {
   if (selectData.value.length == data.value.length) {
     selectData.value = []
     data.value.forEach((val) => {
@@ -180,13 +184,13 @@
       selectData.value.push(val.id)
     })
   }
-  }
+}
-  const changePageNum = (page) => {
+const changePageNum = (page) => {
   pageNum.value = page
   obj.page = pageNum.value
   init()
-  }
+}
-  const handleChange = () => {
+const handleChange = () => {
   pageNum.value = 1
   obj.page = pageNum.value
   switch (value.value) {
@@ -204,27 +208,25 @@
       break
   }
   init()
-  }
+}
-  const goBack = (url) => {
+const goBack = (url) => {
   router.push({
     path: url,
   })
-  }
+}
-  const read = (item) => {
+const read = (item) => {
   // console.log(item)
   if (selectData.value.length === 0 && !item) {
     message.error('未选择消息！')
     return
   }
   console.log(selectData.value)
-    // let str = ''
+
-    // selectData.value.forEach((val, index) => {
-    //   str += val
-    //   if (index < selectData.value.length - 1) {
-    //     str += ';'
-    //   }
-    // })
   if (item) {
+    // 已读状态
+    if (item.readStatus === 1) {
+      return
+    }
     mynoticeRead(item.id).then((res) => {
       if (res.data.code == 0) {
         message.success('操作成功！')
@@ -248,8 +250,8 @@
       })
     })
   }
-  }
+}
-  const init = () => {
+const init = () => {
   // from 通知 评论 readStatus 0 未读  1 已读
   mynotice(obj).then((res) => {
     console.log('消息=============>', res.data.data)
@@ -267,8 +269,8 @@
     total.value = res.data.data.total
     selectData.value = []
   })
-  }
+}
-  navList.forEach((val) => {
+navList.forEach((val) => {
   if (val.title === '全部') {
     mynotice({ page: pageNum.value, limit: pageSize.value }).then((res) => {
       val.num = res.data.data.total
@@ -282,17 +284,17 @@
       val.num = res.data.data.total
     })
   }
-  })
+})
+init()
+mybus.on('noticeListInit', () => {
   init()
-  mybus.on('noticeListInit', () => {
+})
-    init()
+onBeforeUnmount(() => {
-  })
-  onBeforeUnmount(() => {
   mybus.off('noticeListInit')
-  })
+})
 </script>
 <style lang="less" scoped>
-  .notice-list {
+.notice-list {
   padding: 0.64rem 0 0;
   background: #f4f5f8;
   .ant-breadcrumb {
@@ -304,6 +306,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+
     .left {
       display: flex;
       .item {
@@ -365,6 +368,7 @@
     padding: 0.14rem 3.1rem 0;
     display: flex;
     justify-content: space-between;
+
     .left {
       display: flex;
       align-items: center;
@@ -421,8 +425,8 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
+
         .left {
-            cursor: pointer;
           width: 9.2rem;
           max-height: 0.43rem;
           overflow: hidden;
@@ -432,6 +436,9 @@
           -webkit-box-orient: vertical;
           word-break: break-all;
         }
+        .pointer {
+          cursor: pointer;
+        }
         .left:hover {
           color: #0058e1;
         }
@@ -443,5 +450,5 @@
     margin-top: 0;
     padding: 0.2rem 0 0.2rem;
   }
-  }
+}
 </style>