通知公告

src/apps/AppNotification/components/read.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="read">
+    <AiTopFixed>
+      <u-tabs :list="tabs" :is-scroll="false" height="96" bar-width="192" :current="current" @change="change"></u-tabs>
+    </AiTopFixed>
+    <div class="body">
+      <div class="item" v-for="(item,index) in (current==0 ? list.read : list.unRead)" :key="index">
+        <u-avatar :src="item.avatar" mode="square" size="76"></u-avatar>
+        <span class="name">{{item.name}}</span>
+      </div>
+    </div>
+    <AiBack/>
+  </div>
+</template>
+
+<script>
+  import AiBack from "../../../components/AiBack";
+  import AiTopFixed from "../../../components/AiTopFixed";
+
+  export default {
+    name: "read",
+    components: {AiBack, AiTopFixed},
+    data() {
+      return {
+        current: 0,
+        id: null,
+        list: [],
+      }
+    },
+    onLoad(opt) {
+      this.id = opt.id;
+      this.getList();
+    },
+    methods: {
+      getList() {
+        this.$http.post("/app/appannouncementreader/list-unread",null,{
+          params:{
+            id:this.id
+          }
+        }).then(res => {
+          if (res && res.data) {
+            this.list = res.data;
+          }
+        })
+      },
+      change(val) {
+        this.current = val;
+        this.getList();
+      }
+    },
+    computed: {
+      tabs() {
+        return [
+          {name: this.list?.read?.length + "人已读"},
+          {name: this.list?.unRead?.length + "人未读"},
+        ];
+      }
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .read {
+    min-height: 100%;
+    background-color: #F5F5F5;
+
+    ::v-deep .content{
+      padding: 0 !important;
+    }
+
+    .body {
+      padding: 16px 0;
+
+     .item {
+        height: 120px;
+        display: flex;
+       align-items: center;
+        box-sizing: border-box;
+        padding: 0 50px;
+        background-color: #ffffff;
+        border-bottom: 1px solid #eeeeee;
+
+        & > .name{
+          font-size: 36px;
+          font-weight: 600;
+          color: #333333;
+          line-height: 50px;
+          margin-left: 32px;
+        }
+      }
+    }
+  }
+</style>