我的消息模块开发

front/src/router/index.js

@@ -138,6 +138,16 @@ export const constantRoutes = [
       icon: 'error-warning-line',
     },
   },
+  {
+    path: '/mynoticeView',
+    name: 'mynoticeView',
+    hidden: true,
+    component: () => import('@/views/mynoticeView'),
+    meta: {
+      title: '我的消息',
+      icon: 'error-warning-line',
+    },
+  },
   {
     path: '/WorkDynDetails',
     name: 'WorkDynDetails',

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

@@ -59,20 +59,15 @@
       <a-list item-layout="horizontal" :data-source="mynoticeData">
         <template #renderItem="{ item }">
           <a-list-item>
-            <a-list-item-meta description="">
+            <a-list-item-meta :description="item.senderDate">
               <template #title>
-                <a-tooltip placement="left">
+                <a>{{ item.content }}</a>
-                  <template #title>{{ item.content }}</template>
-                  <a>{{ item.title }}</a>
-                </a-tooltip>
-                <a-button type="primary" ghost @click="read(item)">
-                  设为已读
-                </a-button>
               </template>
             </a-list-item-meta>
           </a-list-item>
         </template>
       </a-list>
+      <div class="bottom" @click="goToView()">查看更多</div>
     </div>
     <div class="info">
       <i class="img"></i>
@@ -113,7 +108,7 @@
   import { ref, onMounted, onBeforeUnmount, defineProps } from 'vue'
   import { recordRoute } from '@/config'
   import { useRoute, useRouter } from 'vue-router'
-  import { getUser, mynotice, mynoticeRead } from '@/api/home'
+  import { getUser, mynotice } from '@/api/home'
   import { useStore } from 'vuex'
   import { getSgcTotal } from '@/api/home'
   import mybus from '@/myplugins/mybus'
@@ -243,15 +238,20 @@
     mynotice({ page: 1, limit: 999, readStatus: 0 }).then((res) => {
       console.log('我的消息', res.data.data)
       mynoticeNum.value = res.data.data.total
-      mynoticeData.value = res.data.data.list
+      mynoticeData.value = res.data.data.list.splice(0, 3)
     })
   }
-  const read = (item) => {
+  const goToView = () => {
-    mynoticeRead(item.id).then((res) => {
+    router.push({
-      console.log('已读', res)
+      path: '/mynoticeView',
-      getMynotice()
     })
   }
+  // const read = (item) => {
+  //   mynoticeRead(item.id).then((res) => {
+  //     console.log('已读', res)
+  //     getMynotice()
+  //   })
+  // }
   onMounted(() => {
     getSgcTotal().then((res) => {
       console.log('初始化========================>', res.data.data.count)
@@ -397,7 +397,7 @@
     }
   }
   .mynotice {
-    width: 2.5rem;
+    width: 4rem;
     height: 3rem;
     background: #eee;
     border-radius: 0.05rem;
@@ -405,24 +405,33 @@
     top: 0.45rem;
     right: 3.1rem;
     overflow-y: scroll;
+    .bottom {
+      cursor: pointer;
+      width: 100%;
+      text-align: center;
+      color: #000;
+      font-size: 0.16rem;
+    }
   }
   .mynotice::-webkit-scrollbar {
     display: none;
   }
   :deep(.ant-list-item) {
     border-bottom: 0.01rem solid #ccc;
+    padding: 0.1rem;
   }
   :deep(.ant-list-item-meta-title) {
-    display: flex;
+    // display: flex;
-    justify-content: space-around;
+    // justify-content: space-around;
-    align-items: center;
+    // align-items: center;
-    padding: 0 0.05rem;
+    // padding: 0 0.05rem;
     a {
-      width: 1.5rem;
+      width: 3.8rem;
-      // 超出显示...
       overflow: hidden;
       text-overflow: ellipsis;
-      white-space: nowrap;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
     }
     button {
       width: 0.7rem;

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

@@ -0,0 +1,260 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-21 11:55:07
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-21 16:52:02
+ * @Description: 告诉大家这是什么
+-->
+<template>
+  <div class="notice-list">
+    <div class="top">
+      <div class="left">
+        <div
+          class="item"
+          :class="{ select: selectNav == nav.key }"
+          v-for="nav in navList"
+          :key="nav.key"
+        >
+          <i :class="nav.key" @click="changeNav(nav)"></i>
+          <div>{{ nav.title + '(' + nav.num + ')' }}</div>
+        </div>
+      </div>
+      <div class="right">
+        <div style="margin-right: 0.1rem">搜索</div>
+        <a-input
+          v-model:value="userName"
+          placeholder="请输入关键字"
+          style="margin-right: 0.1rem"
+        >
+          <template #suffix>
+            <search-outlined style="color: rgba(0, 0, 0, 0.45)" />
+          </template>
+        </a-input>
+        <a-button type="primary" style="margin-right: 0.1rem">搜索</a-button>
+        <div class="reset">重置</div>
+      </div>
+    </div>
+    <div class="btn">
+      <div class="left">
+        <a-select
+          ref="select"
+          v-model:value="value1"
+          style="width: 120px"
+          @focus="focus"
+          @change="handleChange"
+        >
+          <a-select-option value="全部消息">全部消息</a-select-option>
+          <a-select-option value="已读消息">已读消息</a-select-option>
+          <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>
+            条消息
+          </div>
+        </div>
+      </div>
+      <div class="right">标记为已读</div>
+    </div>
+    <div class="main">
+      <a-list item-layout="horizontal" :data-source="data">
+        <template #renderItem="{ item }">
+          <a-list-item>
+            <a-list-item-meta description="">
+              <template #title>
+                <div class="left">
+                  {{ item.title }}
+                </div>
+                <div class="right">{{ '发布时间：' + item.time }}</div>
+              </template>
+              <template #avatar>
+                <a-checkbox v-model:checked="checked"></a-checkbox>
+                <a-badge dot :offset="[-30, 5]">
+                  <a-avatar :src="item.src" />
+                </a-badge>
+                <!-- <a-avatar :src="item.src" /> -->
+              </template>
+            </a-list-item-meta>
+          </a-list-item>
+        </template>
+      </a-list>
+    </div>
+    <a-pagination v-model:current="current" :total="50" show-less-items />
+  </div>
+</template>
+<script setup>
+  import { SearchOutlined } from '@ant-design/icons-vue'
+  import { ref, reactive } from 'vue'
+  const navList = reactive([
+    {
+      title: '全部',
+      key: 'all',
+      num: 0,
+    },
+    {
+      title: '通知',
+      key: 'notice',
+      num: 0,
+    },
+    {
+      title: '评论',
+      key: 'comment',
+      num: 0,
+    },
+  ])
+  const selectNav = ref('all')
+  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
+  }
+</script>
+<style lang="less" scoped>
+  .notice-list {
+    padding: 0.64rem 3.1rem 0.2rem;
+    .top {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .left {
+        display: flex;
+        .item {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          margin-left: 1.28rem;
+          margin-bottom: 0.16rem;
+          border-bottom: 3px solid #fff;
+          i {
+            display: inline-block;
+            width: 0.48rem;
+            height: 0.48rem;
+            margin-bottom: 0.15rem;
+            cursor: pointer;
+          }
+          .all {
+            background: url('~@/assets/mynoticeView/all.png') no-repeat;
+            background-size: 100%;
+          }
+          .notice {
+            background: url('~@/assets/mynoticeView/notice.png') no-repeat;
+            background-size: 100%;
+          }
+          .comment {
+            background: url('~@/assets/mynoticeView/comment.png') no-repeat;
+            background-size: 100%;
+          }
+        }
+        .item:nth-of-type(1) {
+          margin-left: 0;
+        }
+        .select {
+          border-bottom: 3px solid #0058e1;
+          color: #0058e1;
+        }
+      }
+      .right {
+        display: flex;
+        align-items: center;
+        height: 0.32rem;
+        div {
+          width: 0.5rem;
+        }
+        .reset {
+          color: #0058e1;
+          cursor: pointer;
+        }
+      }
+    }
+    .btn {
+      display: flex;
+      justify-content: space-between;
+      .left {
+        display: flex;
+        align-items: center;
+        .ant-select {
+          margin-right: 0.24rem;
+        }
+        .check {
+          display: flex;
+          align-items: center;
+          div {
+            margin-left: 0.24rem;
+            span {
+              font-size: 18px;
+              color: #0058e1;
+            }
+          }
+          div:nth-of-type(1) {
+            margin-left: 0.12rem;
+          }
+        }
+      }
+      .right {
+        cursor: pointer;
+        color: #0058e1;
+        text-align: center;
+        align-self: center;
+        padding: 0.05rem 0.1rem;
+      }
+      .right:hover {
+        background: rgba(0, 88, 225, 0.1);
+      }
+    }
+    .main {
+      height: 5.67rem;
+      :deep(.ant-list-item-meta) {
+        display: flex;
+        align-items: center;
+        .ant-checkbox-wrapper {
+          margin-right: 0.3rem;
+        }
+        .ant-list-item-meta-title {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          .left {
+            cursor: pointer;
+            width: 9.2rem;
+            max-height: 0.43rem;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+          }
+          .left:hover {
+            color: #0058e1;
+          }
+        }
+      }
+    }
+  }
+</style>

front/src/views/mynoticeView/index.vue

@@ -0,0 +1,18 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-21 11:50:28
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-21 11:56:37
+ * @Description: 告诉大家这是什么
+-->
+<template>
+  <new-home-header></new-home-header>
+  <notice-list></notice-list>
+  <home-footer></home-footer>
+</template>
+<script setup>
+  import NewHomeHeader from '@/views/home/components/header'
+  import NoticeList from '@/views/mynoticeView/components/NoticeList'
+  import HomeFooter from '@/views/newHome/components/Footer'
+</script>
+<style lang="less" scoped></style>