up

src/api/dash/index.js

@@ -43,5 +43,19 @@ export default {
    */
   updateAvatar(params) {
     return fetch('/blade-user/update', params, 'post', 'json')
+  },
+  /**
+   * 通知消息列表
+   * @returns {Promise | Promise<unknown>}
+   */
+  noticeList(params) {
+    return fetch('/wutong-base/notice/list', params, 'get')
+  },
+  /**
+   * 通知消息详情
+   * @returns {Promise | Promise<unknown>}
+   */
+  noticeDetail(params) {
+    return fetch('/wutong-base/notice/detail', params, 'get')
   }
 }

src/views/dash/compoents/notice.vue

@@ -1,15 +1,17 @@
 <template>
   <div class="flex flex-center flex-justify-start">
-    <el-icon class="mr-10">
+    <el-icon class="mr-10" color="#A3773D" size="18">
       <Bell />
     </el-icon>
     <div class="roll full-width">
       <ul :class="{ marquee_top: animate }">
-        <li v-for="(item, index) in msg" :key="index">
-          <span class="main-color">
-            <span>{{ item.name }}抢得商品{{ item.goods }}</span>
-            <span>已有123人申请</span>
-          </span>
+        <li
+          v-for="(item, index) in data"
+          :key="index"
+          class="pointer"
+          @click="checkNotice(item)"
+        >
+          <span class="main-color bold">{{ item.title }}</span>
         </li>
       </ul>
     </div>
@@ -17,24 +19,18 @@
 </template>
 
 <script>
+import preview from '@/views/resource/component/preview.vue'
+
 export default {
-  components: {},
+  components: { preview },
+  props: {
+    data: {
+      type: Array,
+      default: null
+    }
+  },
   data() {
     return {
-      msg: [
-        {
-          name: '张**',
-          goods: '牙膏'
-        },
-        {
-          name: '王**',
-          goods: '牙刷'
-        },
-        {
-          name: '钟**',
-          goods: '肥皂'
-        }
-      ],
       animate: false,
       setInTime: '' // 定时器
     }
@@ -50,10 +46,13 @@ export default {
     showMarquee() {
       this.animate = true
       setTimeout(() => {
-        this.msg.push(this.msg[0])
-        this.msg.shift()
+        this.data.push(this.data[0])
+        this.data.shift()
         this.animate = false
       }, 500)
+    },
+    checkNotice(item) {
+      console.log(item)
     }
   }
 }

src/views/dash/index.vue

@@ -2,7 +2,7 @@
   <div>
     <el-card :shadow="hover">
       <div class="full-width flex flex-center flex-justify-start">
-        <notice :data="[333, 44]" />
+        <notice :data="noticeList" />
       </div>
     </el-card>
     <div class="flex flex-center flex-justify-between">
@@ -52,7 +52,30 @@ import read from '@/views/dash/compoents/read.vue'
 import notice from '@/views/dash/compoents/notice.vue'
 
 export default {
-  components: { Profile, dataShow, agency, read, notice }
+  components: { Profile, dataShow, agency, read, notice },
+  data() {
+    return {
+      page: {
+        size: 10,
+        current: 1
+      },
+      noticeList: []
+    }
+  },
+  created() {
+    this.getNotice()
+  },
+  methods: {
+    getNotice() {
+      this.$api.dash.noticeList(this.page).then(res => {
+        if (res.code === 200) {
+          this.noticeList = res.data.records
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    }
+  }
 }
 </script>