JG-CLIENT-TEMP/src/views/message/index.vue

<template>
  <div class="mainContentBox">
    <div class="headers" style="font-size: 40px">
      <img
        src="/logo.png"
        object-fit="cover"
        width="80px"
        height="80px"
        style="margin-right: 20px"
      />消息中心
    </div>
    <div class="body">
      <div class="left">
        <div class="headers">未读消息（{{ newMsg.length }}条）</div>
        <el-scrollbar class="msgs">
          <div class="item" v-for="item in newMsg" :key="item">
            <div>
              <div class="text">{{ item.title }} {{ item.created }}</div>
              <div class="text">{{ item.content }}</div>
            </div>
            <div class="action">
              <el-button type="success" @click="submit(item.id)" class="btn"
                >确认收到</el-button
              >
            </div>
          </div>
        </el-scrollbar>
        <div class="bottomBtn">
          <!-- <el-button
            type="primary"
            :disabled="setNextStatus1"
            @click="setPage1(1)"
            class="btn"
            >下一页</el-button
          >
          <el-button
            class="btn"
            :disabled="page == 1"
            type="primary"
            @click="setPage1(-1)"
          >
            上一页
          </el-button> -->
        </div>
      </div>
      <div class="right">
        <div class="headers">已确认消息（{{ totalCount2 }}条）</div>
        <el-scrollbar class="msgs">
          <div
            class="item"
            style="overflow: hidden; background-color: rgba(0, 128, 0, 0.5)"
            v-for="item in msgData2"
            :key="item"
          >
            <div>
              <div class="text">{{ item.title }} {{ item.created }}</div>
              <div class="text">{{ item.content }}</div>
            </div>
          </div>
        </el-scrollbar>
        <div class="bottomBtn">
          <el-button
            type="primary"
            :disabled="setNextStatus2"
            @click="setPage2(1)"
            class="btn"
            >下一页</el-button
          >
          <el-button
            class="btn"
            :disabled="page2 == 1"
            type="primary"
            @click="setPage2(-1)"
          >
            上一页
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { confirmMessage, dataList } from "@/api/message";
defineOptions({ name: "MessageMain" });
const newMsg = ref([]);
//连接地址
const ws = new WebSocket(
  `${import.meta.env.VITE_WEBSOCKET_URL}/websocket/${localStorage.getItem("token")}`
);
const submit = async (id) => {
  const { code } = await confirmMessage([id]);
  if (code == "200") {
    ElMessage.success("操作成功");
    getPageInfo2();
    getPageInfo1();
  }
};
ws.onopen = () => {};
ws.onmessage = (event) => {
  newMsg.value = JSON.parse(event.data).content;
};
ws.onclose = () => {};
const page2 = ref(1);
const pageSize2 = ref(5);
const msgData2 = ref([]);
const totalCount2 = ref(0);
//获取已读消息
const getPageInfo2 = async () => {
  const { data, code } = await dataList({
    pageNo: page2.value,
    pageSize: pageSize2.value,
    readState: 1,
  });
  if (code == "200") {
    msgData2.value = data.records;
    totalCount2.value = data.totalCount;
  }
};
//获取未读消息（和websocket一样的）
const getPageInfo1 = async () => {
  const { data, code } = await dataList({
    pageNo: page2.value,
    pageSize: 999,
    readState: 0,
  });
  if (code == "200") {
    newMsg.value = data.records;
  }
};

const setNextStatus2 = computed(() => {
  return totalCount2.value - page2.value * pageSize2.value > 0 ? false : true;
});
const setPage2 = (num) => {
  page2.value = page2.value + num;
  getPageInfo2();
  getPageInfo1();
};
onMounted(() => {
  getPageInfo2();
});
</script>

<style lang="scss" scoped>
.bottomBtn {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 40px;
  padding: 0 10px;
  margin-top: 10px;

  .btn {
    font-size: $f20;
    font-weight: 500;
  }
}
.headers {
  height: 80px;
  width: 100%;
  line-height: 80px;
  text-align: center;
  font-weight: 600;
  font-size: 26px;
  display: flex;
  justify-content: center;
}
.mainContentBox {
  width: 100vw;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 100px);
  .body {
    height: calc(100vh - 184px);
    display: flex;

    .left {
      width: 50%;
      margin: 0 10px;
      display: flex;
      flex-direction: column;
    }
    .right {
      width: 50%;
      margin: 0 10px;
      display: flex;
      flex-direction: column;
    }
  }
}
.msgs {
  flex: 1;
  background-color: white;
  border-radius: 16px;
  padding: 10px;
  .item {
    min-height: 60px;
    margin-bottom: 8px;
    width: 100%;
    background-color: rgba(255, 165, 0, 0.4);
    border-radius: 16px;
    display: flex;
    padding: 10px 0;
    .text {
      flex: 1;
      padding: 3px 10px;
      font-size: 16px;
      font-weight: 500;
    }
    .action {
      width: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>