消息中心

front/src/views/home/components/header.vue

@@ -230,17 +230,13 @@
     window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
     router.push('/personalCenter')
   }
-  onBeforeUnmount(() => {
-    console.log('卸载getSgcNum========================>')
-    mybus.off('getSgcNum')
-  })
   const mynoticeNum = ref(0)
   // 我的消息
   const getMynotice = () => {
-    mynotice({ page: 1, limit: 999, readStatus: 0 }).then((res) => {
+    mynotice({ page: 1, limit: 3, readStatus: 0 }).then((res) => {
       console.log('我的消息', res.data.data)
       mynoticeNum.value = res.data.data.total
-      mynoticeData.value = res.data.data.list.splice(0, 3)
+      mynoticeData.value = res.data.data.list
     })
   }
   const goToView = () => {
@@ -288,6 +284,13 @@
         console.log('申购车总数========================>', res.data.data.count)
       })
     })
+    mybus.on('getMynotice', () => {
+      getMynotice()
+    })
+  })
+  onBeforeUnmount(() => {
+    mybus.off('getSgcNum')
+    mybus.off('getMynotice')
   })
 </script>
 <style lang="less" scoped>

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

@@ -2,11 +2,17 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-21 11:55:07
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-21 16:52:02
+ * @LastEditTime: 2022-06-22 12:20:59
  * @Description: 告诉大家这是什么
 -->
 <template>
   <div class="notice-list">
+    <a-breadcrumb>
+      <a-breadcrumb-item>
+        <a @click="goBack('/home')">共享门户</a>
+      </a-breadcrumb-item>
+      <a-breadcrumb-item>消息中心</a-breadcrumb-item>
+    </a-breadcrumb>
     <div class="top">
       <div class="left">
         <div
@@ -19,7 +25,7 @@
           <div>{{ nav.title + '(' + nav.num + ')' }}</div>
         </div>
       </div>
-      <div class="right">
+      <!-- <div class="right">
         <div style="margin-right: 0.1rem">搜索</div>
         <a-input
           v-model:value="userName"
@@ -32,13 +38,13 @@
         </a-input>
         <a-button type="primary" style="margin-right: 0.1rem">搜索</a-button>
         <div class="reset">重置</div>
-      </div>
+      </div> -->
     </div>
     <div class="btn">
       <div class="left">
         <a-select
           ref="select"
-          v-model:value="value1"
+          v-model:value="value"
           style="width: 120px"
           @focus="focus"
           @change="handleChange"
@@ -48,19 +54,24 @@
           <a-select-option value="未读消息">未读消息</a-select-option>
         </a-select>
         <div class="check">
-          <a-checkbox
-            v-model:checked="checked"
-            stlye="margin-right:0.3rem;"
-          ></a-checkbox>
-          <div>全选</div>
           <div>
             共
-            <span>2</span>
+            <span>{{ total }}</span>
             条消息
           </div>
         </div>
       </div>
-      <div class="right">标记为已读</div>
+      <div class="right">
+        <a-checkbox
+          :checked="
+            selectData.length !== 0 && selectData.length === data.length
+          "
+          stlye="margin-right:0.3rem;"
+          @change="changeCheckAll()"
+        ></a-checkbox>
+        <div>全选当前页</div>
+        <span @click="read()">标记为已读</span>
+      </div>
     </div>
     <div class="main">
       <a-list item-layout="horizontal" :data-source="data">
@@ -69,15 +80,19 @@
             <a-list-item-meta description="">
               <template #title>
                 <div class="left">
-                  {{ item.title }}
+                  {{ item.content }}
                 </div>
-                <div class="right">{{ '发布时间：' + item.time }}</div>
+                <div class="right">{{ '发布时间：' + item.senderDate }}</div>
               </template>
               <template #avatar>
-                <a-checkbox v-model:checked="checked"></a-checkbox>
+                <a-checkbox
-                <a-badge dot :offset="[-30, 5]">
+                  :checked="item.checked"
+                  @change="changeCheckBox(item)"
+                ></a-checkbox>
+                <a-badge dot :offset="[-30, 5]" v-show="item.readStatus == 0">
                   <a-avatar :src="item.src" />
                 </a-badge>
+                <a-avatar :src="item.src" v-show="item.readStatus == 1" />
                 <!-- <a-avatar :src="item.src" /> -->
               </template>
             </a-list-item-meta>
@@ -85,12 +100,28 @@
         </template>
       </a-list>
     </div>
-    <a-pagination v-model:current="current" :total="50" show-less-items />
+    <a-pagination
+      v-model:current="pageNum"
+      v-model:pageSize="pageSize"
+      :total="total"
+      show-less-items
+      @change="changePageNum"
+    />
   </div>
 </template>
 <script setup>
-  import { SearchOutlined } from '@ant-design/icons-vue'
+  // import { SearchOutlined } from '@ant-design/icons-vue'
   import { ref, reactive } from 'vue'
+  import mybus from '@/myplugins/mybus'
+  import { message } from 'ant-design-vue'
+  import { mynotice, mynoticeRead } from '@/api/home'
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+  const total = ref(0)
+  const pageSize = ref(8)
+  const pageNum = ref(1)
+  const value = ref('全部消息')
+  const obj = reactive({ page: pageNum.value, limit: pageSize.value })
   const navList = reactive([
     {
       title: '全部',
@@ -107,38 +138,146 @@
       key: 'comment',
       num: 0,
     },
+    {
+      title: '其它',
+      key: 'other',
+      num: 0,
+    },
   ])
   const selectNav = ref('all')
-  const data = ref([
+  const selectData = ref([])
-    {
+  const data = ref([])
-      title: 'Ant Design Title 1',
-      src: require('@/assets/mynoticeView/notice.png'),
-      time: '2020-06-21',
-    },
-    {
-      title: 'Ant Design Title 2',
-      src: require('@/assets/mynoticeView/notice.png'),
-      time: '2020-06-21',
-    },
-    {
-      title: 'Ant Design Title 3',
-      src: require('@/assets/mynoticeView/notice.png'),
-      time: '2020-06-21',
-    },
-    {
-      title: 'Ant Design Title 4',
-      src: require('@/assets/mynoticeView/notice.png'),
-      time: '2020-06-21',
-    },
-  ])
   const changeNav = (nav) => {
     selectNav.value = nav.key
+    if (nav.key === 'all') {
+      delete obj.from
+    } else {
+      obj.from = nav.title
+    }
+    value.value = '全部消息'
+    delete obj.readStatus
+    init()
   }
+  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 = () => {
+    if (selectData.value.length == data.value.length) {
+      selectData.value = []
+      data.value.forEach((val) => {
+        val.checked = false
+      })
+    } else {
+      selectData.value = []
+      data.value.forEach((val) => {
+        val.checked = true
+        selectData.value.push(val.id)
+      })
+    }
+  }
+  const changePageNum = (page) => {
+    pageNum.value = page
+    obj.page = pageNum.value
+    init()
+  }
+  const handleChange = () => {
+    pageNum.value = 1
+    obj.page = pageNum.value
+    switch (value.value) {
+      case '全部消息':
+        delete obj.readStatus
+        break
+      case '已读消息':
+        obj.readStatus = 1
+        break
+      case '未读消息':
+        obj.readStatus = 0
+        break
+      default:
+        delete obj.readStatus
+        break
+    }
+    init()
+  }
+  const goBack = (url) => {
+    router.push({
+      path: url,
+    })
+  }
+  const read = () => {
+    if (selectData.value.length === 0) {
+      message.error('未选择消息！')
+      return
+    }
+    console.log(selectData.value)
+    let str = ''
+    selectData.value.forEach((val, index) => {
+      str += val
+      if (index < selectData.value.length - 1) {
+        str += ';'
+      }
+    })
+    mynoticeRead(str).then((res) => {
+      if (res.data.code == 0) {
+        message.success('操作成功！')
+        mybus.emit('getMynotice')
+        init()
+      } else {
+        message.error('操作失败！')
+      }
+    })
+  }
+  const init = () => {
+    // from 通知 评论 readStatus 0 未读  1 已读
+    mynotice(obj).then((res) => {
+      console.log('消息=============>', res.data.data)
+      res.data.data.list.forEach((val) => {
+        if (val.from === '通知') {
+          val.src = require('@/assets/mynoticeView/notice.png')
+        } else if (val.from === '评论') {
+          val.src = require('@/assets/mynoticeView/comment.png')
+        } else if (val.from === '其它') {
+          val.src = require('@/assets/mynoticeView/other.png')
+        }
+        val.checked = false
+      })
+      data.value = res.data.data.list
+      total.value = res.data.data.total
+      selectData.value = []
+    })
+  }
+  navList.forEach((val) => {
+    if (val.title === '全部') {
+      mynotice({ page: pageNum.value, limit: pageSize.value }).then((res) => {
+        val.num = res.data.data.total
+      })
+    } else {
+      mynotice({
+        page: pageNum.value,
+        limit: pageSize.value,
+        from: val.title,
+      }).then((res) => {
+        val.num = res.data.data.total
+      })
+    }
+  })
+  init()
 </script>
 <style lang="less" scoped>
   .notice-list {
-    padding: 0.64rem 3.1rem 0.2rem;
+    padding: 0.64rem 0 0;
+    background: #f4f5f8;
+    .ant-breadcrumb {
+      padding: 0.1rem 3.1rem;
+    }
     .top {
+      background: #fff;
+      padding: 0.18rem 3.1rem 0;
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -171,6 +310,10 @@
             background: url('~@/assets/mynoticeView/comment.png') no-repeat;
             background-size: 100%;
           }
+          .other {
+            background: url('~@/assets/mynoticeView/other.png') no-repeat;
+            background-size: 100%;
+          }
         }
         .item:nth-of-type(1) {
           margin-left: 0;
@@ -194,6 +337,9 @@
       }
     }
     .btn {
+      background: #fff;
+      margin-top: 0.16rem;
+      padding: 0.14rem 3.1rem 0;
       display: flex;
       justify-content: space-between;
       .left {
@@ -218,18 +364,30 @@
         }
       }
       .right {
-        cursor: pointer;
+        display: flex;
-        color: #0058e1;
+        justify-content: space-around;
-        text-align: center;
+        align-items: center;
-        align-self: center;
+        div {
-        padding: 0.05rem 0.1rem;
+          margin: 0 0.1rem;
-      }
+        }
-      .right:hover {
+        span {
-        background: rgba(0, 88, 225, 0.1);
+          cursor: pointer;
+          color: #0058e1;
+          text-align: center;
+          align-self: center;
+          padding: 0.05rem 0.1rem;
+        }
+
+        span:hover {
+          background: rgba(0, 88, 225, 0.1);
+        }
       }
     }
     .main {
-      height: 5.67rem;
+      background: #fff;
+      padding: 0 3.1rem;
+      height: 4.75rem;
+      overflow-y: scroll;
       :deep(.ant-list-item-meta) {
         display: flex;
         align-items: center;
@@ -256,5 +414,10 @@
         }
       }
     }
+    .ant-pagination {
+      background: #fff;
+      margin-top: 0;
+      padding: 0.2rem 0 0.2rem;
+    }
   }
 </style>