luoshan_web/library/components/VabNotice/index.vue

<script lang="ts" setup>
  import { useSettingsStore } from '@/store/modules/settings'
  import { translate } from '@/i18n'
  import { getList, getAllRead, getRead } from '@/api/notice'
  const VabNoticeDetail = defineAsyncComponent(
    () => import('./VabNoticeDetail.vue')
  )
  const $baseMessage: any = inject('$baseMessage')

  const settingsStore = useSettingsStore()
  const { theme } = storeToRefs(settingsStore)

  const activeName = ref('no-read')
  const notices: any = ref([])
  const badge = ref(undefined)
  const isRead = ref(0)

  const infoDetail: any = ref(null)
  const fetchData = async () => {
    const {
      data: { data, meta },
    } = await getList({
      guard: 'admins',
      is_read: isRead.value,
    })
    notices.value = data
    if (isRead.value === 0)
      badge.value =
        meta.pagination.total === 0 ? undefined : meta.pagination.total
  }

  const allRead = async () => {
    await getAllRead({
      guard: 'admins',
    })
    $baseMessage('清空消息成功', 'success', 'vab-hey-message-success')
    await fetchData()
  }

  const handleRead = async (id: any) => {
    await getRead({
      guard: 'admins',
      id: id,
    })
    $baseMessage('标记成功', 'success', 'vab-hey-message-success')
    await fetchData()
  }

  nextTick(() => {
    if (theme.value.showNotice) fetchData()
  })

  const handleClick = () => {
    if (activeName.value == 'no-read') {
      isRead.value = 0
    } else {
      isRead.value = 1
    }
    badge.value = undefined
    notices.value = []
    fetchData()
  }

  const handleClearNotice = () => {
    badge.value = undefined
    notices.value = []
    allRead()
  }

  const handleDetail = (row: any) => {
    infoDetail.value.showEdit(row)
  }
</script>

<template>
  <el-badge v-if="theme.showNotice" type="danger" :value="badge">
    <el-popover placement="bottom" trigger="hover" :width="300">
      <template #reference>
        <vab-icon icon="notification-line" />
      </template>
      <el-tabs v-model="activeName" @tab-change="handleClick">
        <el-tab-pane label="未读" name="no-read" />
        <el-tab-pane label="已读" name="is_read" />
        <div class="notice-list">
          <el-scrollbar>
            <ul>
              <li v-for="(item, index) in notices" :key="index">
                <span class="detail-tip">【{{ item.name }}】</span>
                <span>{{ item.body }}</span>
                <span class="detail-tip" @click="handleDetail(item)">
                  &nbsp;&nbsp; 详情>>
                </span>
                <div class="time">
                  <div class="time-item">{{ item.created_at }}</div>
                  <div
                    v-if="isRead == 0"
                    class="biaoji"
                    @click.stop="handleRead(item.id)"
                  >
                    标记已读
                  </div>
                </div>
              </li>
            </ul>
            <el-empty
              v-if="notices.length == 0"
              description="暂无消息"
              :image-size="60"
            />
          </el-scrollbar>
        </div>
      </el-tabs>
      <div
        v-if="isRead == 0 && badge"
        class="notice-clear"
        @click="handleClearNotice"
      >
        <el-button text type="primary">
          <span>{{ translate('全部已读') }}</span>
        </el-button>
      </div>
    </el-popover>
  </el-badge>
  <VabNoticeDetail ref="infoDetail" />
</template>

<style lang="scss" scoped>
  :deep() {
    .el-tabs__active-bar {
      min-width: 28px;
    }
  }

  .notice-list {
    height: 35vh;

    ul {
      padding: 0 15px 0 0;
      margin: 0;

      li {
        /*     display: flex;
        align-items: center; */
        padding: 10px 0 10px 0;
        cursor: pointer;
        border-bottom: dashed 1px #bbbbbb;

        :deep() {
          .el-avatar {
            flex-shrink: 0;
            width: 50px;
            height: 50px;
            border-radius: 50%;
          }
        }

        .detail-tip {
          font-size: 14px;
          color: #ff4d4f;
        }
        .time {
          display: flex;
          margin-top: 6px;
          font-size: 12px;
          color: #919191;
          .time-item {
            flex: 1;
          }

          .biaoji {
            flex: 1;
            text-align: right;
            color: #409eff;
            cursor: pointer;
          }
        }
        &:last-child {
          border-bottom: none;
        }
      }
    }
  }

  .notice-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0 0 0;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    border-top: 1px solid #e8eaec;

    i {
      margin-right: 3px;
    }
  }
</style>