web/src/views/workspace/components/MessageTips.vue

<template>
  <WorkspaceCard class="message-card" v-if="messageList.length">
    <div slot="header-title">
      <span>我的消息</span>
      <span class="sub-text">（<span class="highlight-text">{{ unReadCount }} </span> 条未读）</span>
    </div>
    <div slot="header-right" class="header-right-set" @click="toMessageCenter">更多<i class="icon el-icon-arrow-right"></i></div>
    <div class="message-content message-list" v-loading="loading">
      <div class="message-item" v-for="item in messageList" :key="item.id">
        <div class="l-msg">
          <i class="red-dot" :class="{ invisible: item.isRead !== 0 }"></i>
          <!-- <h3 class="msg-type">{{item.msg_type}}</h3> -->
          <span class="text ellipsis" @click="titleGoto(item)">{{item.title}}</span>
        </div>
        <p class="time">{{item.createTime}}</p>
      </div>
    </div>
  </WorkspaceCard>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { Icon } from 'element-ui'
import WorkspaceCard from '../ui/WorkspaceCard'

export default {
  name: 'MessageTips',
  components: {
    [Icon.name]: Icon,
    WorkspaceCard
  },
  computed: {
    emptyShow () {
      return this.messageList.length === 0 && this.loaded
    },
    ...mapState({
      loading: state => state.workspace.message.loading,
      loaded: state => state.workspace.message.loaded,
      unReadCount: state => state.workspace.message.unReadCount,
      messageList: state => state.workspace.message.messageList
    })
  },
  created () {
    this.getList()
  },
  methods: {
    ...mapActions('workspace/message', [
      'getList',
      'remarkRead'
    ]),
    async titleGoto (item) {
      try {
        await this.remarkRead(item)
        this.toMessageCenter()
      } catch (error) {
        this.toMessageCenter()
      }
    },
    toMessageCenter () {
      location.href = '/swordfish/frontPage/messageCenter/sess/index'
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep{
  .fn-dialog{
    .el-dialog__header,
    .el-dialog__body {
      padding: 0;
    }
  }
}

.sub-text {
  font-size: 14px;
  color: #999;
}

.header-right-set {
  display: flex;
  align-items: center;
  color: #2cb7ca;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  .icon {
    margin-left: 4px;
  }
}

.message-content {
  min-height: 100px;
}
.message-item {
  display: flex;
  flex-direction: initial;
  align-items: center;
  justify-content: space-between;
  &:not(:last-of-type) {
    margin-bottom: 8px;
  }

  .l-msg {
    display: flex;
    align-items: center;
    max-width: 65%;
    .msg-type {
      margin-left: 8px;
      font-size: 16px;
      font-weight: bold;
      color: #2CB7CA;
      line-height: 24px;
      white-space: nowrap;
    }
    .text {
      margin-left: 8px;
      font-size: 14px;
      color: #1D1D1D;
      line-height: 22px;
      flex: 1;
      &:hover {
        color: #2CB7CA;
        cursor: pointer;
      }
    }
  }
  .time {
    font-size: 12px;
    color: #999999;
    line-height: 18px;
    white-space: nowrap;
  }
}
</style>