student-client/src/features/SiteMessage/SiteMessageHome.vue

<template>
  <main-layout>
    <i-breadcrumb
      style="text-align: left; padding-left: 20px; height: 40px; line-height: 40px;
                         background-color: #fafafa;"
    >
      当前所在位置：
      <BreadcrumbItem>{{ locationTitle }}</BreadcrumbItem>
    </i-breadcrumb>

    <div class="home">
      <div style="font-size: 18px; font-weight: 500; color: #222C32;">
        公告通知
      </div>
      <i-button>
        <div class="mark-read-block" @click="markRead">
          <img src="./svgs/sms-read.svg" /> &nbsp;标记为已读
        </div>
      </i-button>
    </div>
    <div class="site-message-container">
      <div style="text-align: left; color: #999; margin-bottom: 5px;">
        *仅保留近1年的公告通知。
      </div>
      <Table
        ref="selection"
        border
        :columns="columns"
        :data="siteMessagesComputed"
      ></Table>
      <Page
        :total="siteMessages.length"
        :page-size="pageSize"
        :current.sync="page"
        style="text-align: right; margin-top: 10px;"
      />
    </div>
  </main-layout>
</template>

<script>
// import moment from "moment";
import { mapState, mapMutations } from "vuex";

export default {
  name: "SiteMessageHome",
  data() {
    return {
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "标题",
          key: "title",
          render: (h, params) => {
            return (
              <router-link
                to={"/site-message/" + params.row.id + "?fromPage=" + this.page}
                style="display: flex"
                ondragstart="return false;"
              >
                <img
                  class={
                    params.row.hasRead
                      ? "mhome-message-read"
                      : "mhome-message-unread"
                  }
                />
                <span class="mhome-message-title">{params.row.title}</span>
              </router-link>
            );
          },
        },
        {
          title: "发送时间",
          key: "publishTime",
          width: "150",
        },
      ],
      page: 1,
      pageSize: 10,
    };
  },
  computed: {
    ...mapState(["user", "siteMessages", "siteMessagesTimeStamp", "menus"]),
    locationTitle() {
      return (
        this.menus.find(
          v => v.link.toUpperCase() === this.$route.path.toUpperCase()
        ) || {}
      ).name;
    },
    siteMessagesComputed() {
      return this.siteMessages.slice(
        (this.page - 1) * this.pageSize,
        this.page * this.pageSize
      );
    },
  },
  async mounted() {
    window._hmt.push(["_trackEvent", "站内消息列表页面", "进入页面"]);
    this.logger({ page: "站内消息列表页面", action: "进入页面" });
    await this.getList();
    if (this.$route.query.fromPage) {
      this.page = +this.$route.query.fromPage;
    }
  },
  methods: {
    ...mapMutations(["updateSiteMessages", "updateSiteMessagesTimeStamp"]),
    async getList() {
      try {
        const noticeRes = (await this.$http.get(
          "/api/ecs_exam_work/notice/getUserNoticeList?" +
            this.user.id +
            this.siteMessagesTimeStamp
        )).data;
        this.updateSiteMessages(noticeRes);
      } catch (error) {
        console.log(error);
        this.$Message.error({
          content: "获取公告通知异常",
          duration: 15,
          closable: true,
        });
      }
    },
    async markRead() {
      // console.log(this.$refs.selection.getSelection());
      const selectIds = this.$refs.selection.getSelection().map(v => v.id);
      if (selectIds.length === 0) {
        this.$Message.warning({
          content: "请先选择消息",
          duration: 10,
          closable: true,
        });
        return;
      }

      await this.$http.post(
        "/api/ecs_exam_work/notice/updateNoticeReadStatus?noticeId=" +
          selectIds.join(",")
      );
      window._hmt.push(["_trackEvent", "站内消息详情页面", "发送已读成功"]);
      this.updateSiteMessagesTimeStamp(Date.now());
      await this.getList();
    },
  },
};
</script>

<style scoped>
.home {
  margin: 20px;
  display: flex;
  justify-content: space-between;
}

.mark-read-block {
  line-height: 16px;
  /* border-radius: 6px;
  border: 1px solid rgba(238, 238, 238, 1); */

  /* padding: 0 10px; */

  display: flex;
  align-items: center;
}

.site-message-container {
  display: flex;
  flex-direction: column;
  margin: 20px;
  padding: 20px;
  border: 1px solid #eeeeee;
  border-radius: 6px;
}
</style>

<style>
.mhome-message-read {
  width: 16px;
  height: 14px;
  background-image: url(./svgs/sms-read.svg);
}
.mhome-message-unread {
  width: 16px;
  height: 14px;
  background-image: url(./svgs/sms-unread.svg);
}
.mhome-message-title {
  line-height: 14px;
  margin-left: 8px;
}
</style>