yifengyide/src/views/home/index.vue

<template>
  <lay-container :fluid="true" style="padding: 10px">
    <lay-row :space="10">
      <lay-col :md="24" :sm="24" :xs="24">
        <lay-card>
          <template #title>
            <div style="font-size: 16px; font-weight: bold;">通知公告</div>
          </template>
          <lay-table :page="page" size="lg" :columns="columns" :data-source="dataSource" @change="changePage">
            <template v-slot:content="{ data }">
              <div v-html="data.content"></div>
            </template>
            <template #operation="{ data }">
              <span style="color: #00A394;cursor: pointer" @click.stop="handleViewDetail(data)">查看详情</span>
            </template>
          </lay-table>
        </lay-card>
      </lay-col>
    </lay-row>

    <lay-row :space="10">
      <lay-col :md="24" :sm="24" :xs="24">
        <lay-card>
          <template #title>
            <div style="font-size: 16px; font-weight: bold;">站内信</div>
          </template>
          <lay-table :page="msgPage" size="lg" :columns="msgColumns" :data-source="dataMsgSource"
            @change="changeMsgPage">
            <template v-slot:content="{ data }">
              <div v-html="data.notification_content"></div>
            </template>
            <template #notify_status="{ data }">
              <lay-tag :type="data.notify_status == 1 ? 'warm' : 'primary'" size="sm">
                {{ data.notify_status == 1 ? '未读' : '已读' }}
              </lay-tag>
            </template>
            <template #operator="{ data }">
              <span style="color: #00A394;cursor: pointer" @click.stop="handleViewMessage(data)">查看详情</span>
            </template>
          </lay-table>
        </lay-card>
      </lay-col>
    </lay-row>

    <!-- 详情弹窗 -->
    <lay-layer title="站内信详情" v-model="showDetail" :type="4" :area="['700px', '100%']">
      <div class="notice-detail" v-if="currentMessage">
        <div class="notice-info">
          <span>发送时间：{{ currentMessage.createtime }}</span>
          <span>接收人：{{ currentMessage.nickname }}</span>
          <span>状态：{{ currentMessage.notify_status === 1 ? '未读' : '已读' }}</span>
        </div>
        <div class="notice-content" v-html="currentMessage.notification_content">
        </div>
      </div>
    </lay-layer>
  </lay-container>
</template>

<script setup lang="ts">
import { defineComponent, reactive, ref, onMounted } from "vue";
import { noticeList, getMailDataList, getMailUpdateMail } from '../../api/module/home';
import { layer } from '@layui/layer-vue';

interface Notice {
  id: number;
  title: string;
  author: string;
  content: string;
  createtime: string;
  status: number;
}

interface Message {
  id: number;
  notification_content: string;
  nickname: string;
  createtime: string;
  notify_status: number;
}

const page = reactive({
  current: 1,
  limit: 10,
  total: 1
});

const msgPage = reactive({
  current: 1,
  limit: 10,
  total: 1
});

const columns = [
  {
    title: "公告标题",
    width: "180px",
    key: "title"
  },
  {
    title: "作者",
    width: "120px",
    key: "author"
  },
  {
    title: "公告内容",
    width: "280px",
    key: "content",
    ellipsisTooltip: true
  },
  {
    title: "发布时间",
    width: "180px",
    key: "createtime"
  },
  {
    title: '操作',
    width: '120px',
    customSlot: 'operation',
    key: 'operation',
    align: 'center',
    fixed: 'right'
  }
];
// 表格列配置
const msgColumns = [
  {
    title: "内容",
    width: "200px",
    key: "notification_content",
    align: 'center'
  },
  {
    title: "接收人",
    width: "120px",
    key: "nickname",
    align: 'center'
  },
  {
    title: "发送时间",
    width: "180px",
    key: "createtime",
    align: 'center'
  },
  {
    title: "状态",
    width: "100px",
    customSlot: "notify_status",
    key: "notify_status",
    align: 'center'
  },
  {
    title: '操作',
    width: '120px',
    customSlot: 'operator',
    key: 'operator',
    align: 'center',
    fixed: 'right'
  }
]

const dataSource = ref<Notice[]>([]);
const dataMsgSource = ref<Message[]>([]);

// 控制详情弹窗显示
const showDetail = ref(false);
// 当前查看的通知
const currentNotice = ref<Notice | null>(null);
// 当前查看的站内信
const currentMessage = ref<Message | null>(null);

// 获取通知列表
const getNoticeList = () => {
  noticeList({ page: page.current, size: page.limit }).then((res) => {
    if (res.code == 1) {
      dataSource.value = res.data.data.filter((item: Notice) => item.status === 1);
      page.total = res.data.count;
    } else {
      layer.msg(res.msg, { icon: 2 })
    }
  })
}

// 分页变化
const changePage = (ppc) => {
  page.current = ppc.current;
  page.limit = ppc.limit;
  getNoticeList();
}

// 查看详情
const handleViewDetail = (row: Notice) => {
  currentNotice.value = row;
  showDetail.value = true;
};

// 获取站内信列表
const getMessageList = () => {
  getMailDataList({ page: msgPage.current, size: msgPage.limit }).then((res) => {
    if (res.code == 1) {
      dataMsgSource.value = res.data.data;
      msgPage.total = res.data.count;
    } else {
      layer.msg(res.msg, { icon: 2 })
    }
  })
}

// 站内信分页变化
const changeMsgPage = (ppc: { current: number; limit: number }) => {
  msgPage.current = ppc.current;
  msgPage.limit = ppc.limit;
  getMessageList();
}

// 查看站内信详情
const handleViewMessage = (row: Message) => {
  currentMessage.value = row;
  showDetail.value = true;
  // 更新消息状态为已读
  if (row.notify_status === 1) {
    getMailUpdateMail({ id: row.id }).then((res) => {
      if (res.code == 1) {
        getMessageList(); // 刷新列表
      }
    });
  }
};

onMounted(() => {
  getNoticeList();
  getMessageList();
});
</script>

<style lang="less" scoped>
#main {
  width: 100%;
  height: 410px;
}

.leaving-messages {
  li {
    position: relative;
    padding: 10px 0;
    border-bottom: 1px solid #eee;

    h3 {
      padding-bottom: 5px;
      font-weight: 700;
    }

    p {
      font-size: 14px;
      padding-bottom: 10px;
    }

    >span {
      color: #999;
    }
  }
}

.target {
  width: 100%;
  height: 440px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.target-title {
  margin: 20px;
}

.statistics {
  font-size: 24px !important;
}

.statistics-body {
  padding: 14px 0;
}

.notice-detail {
  padding: 20px;

  h2 {
    text-align: center;
    margin-bottom: 20px;
  }

  .notice-info {
    display: flex;
    justify-content: space-between;
    color: #666;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
  }

  .notice-content {
    line-height: 1.8;
    text-align: justify;
  }
}
</style>