Vue项目 消息页面 未读变已读 、传数组、处理时间的函数、页面刷新

 MessageItem.vue 子组件

<template>
  <div class="my-course-content">
    <div style="width: 980px" v-if="messList && messList.length > 0">
      <div class="course-main" style="width: 980px">
        <div
          class="course-item"
          v-for="(item, index) in messList"
          :key="item.id"
          :class="cur === index ? 'active' : ''"
          @mouseenter="showDelete(index)"
          @mouseleave="closeDelete"
          @click="goRead(item)"
        >
          <div class="item-dot" v-if="item.status === 1"></div>
          <div class="item-main">
            <p class="title">{{ item.title }}</p>
            <p class="time">
              {{ dateFormat(item.createTime, "yyyy-MM-dd hh:mm:ss") }}
            </p>
          </div>
          <div class="delete" v-show="cur === index">
            <img
              src="/image/about/remove.png"
              alt=""
              @click="goDelete(item.id)"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="course-empty" v-else>
      <el-empty
        image="/image/about/mess-empty.png"
        description="暂无消息"
      ></el-empty>
    </div>
  </div>
</template>

<script>
import messageApi from "../../../common/api/message";
import tokenApi from "../../../common/api/token";
import { Loading } from "element-ui";
export default {
  props: {
    messList: {
      type: Array,
      default: [],
      cur: -1,
    },
  },
  data() {
    return {
      cur: -1,
    };
  },
  onLoad() {
  },
  methods: {
    //处理时间的函数
    dateFormat(datetime, fmt) {
      datetime = new Date(datetime);
      var o = {
        "M+": datetime.getMonth() + 1, //月份
        "d+": datetime.getDate(), //日
        "h+": datetime.getHours(), //小时
        "m+": datetime.getMinutes(), //分
        "s+": datetime.getSeconds(), //秒
        "q+": Math.floor((datetime.getMonth() + 3) / 3), //季度
        S: datetime.getMilliseconds(), //毫秒
      };
      if (/(y+)/.test(fmt))
        fmt = fmt.replace(
          RegExp.$1,
          (datetime.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length == 1
              ? o[k]
              : ("00" + o[k]).substr(("" + o[k]).length)
          );
      return fmt;
    },
    //鼠标移入移出，添加的样式和显示隐藏‘垃圾桶’按钮
    showDelete(index) {
      this.cur = index;
    },
    closeDelete() {
      this.cur = -1;
    },
    //点击 将未读变为已读的功能 已读2 未读1
    goRead(item) {
      if (item.status === 2) {
        return;
      } else if (item.status === 1) {
        //未读状态
        const idArr = [];
        idArr.push(item.id);
        tokenApi.createToken().then((res) => {
          //标记为已读
          messageApi
            .makeRead({
              ids: idArr,
              token: res.data.token,
            })
            .then((res) => {
              //去红点 标记为已读
              if (res.meta.code === "200") {
                this.$message({
                  message: "已读消息成功",
                  type: "success",
                });
                this.$router.go(0);
              } else {
                this.$message({
                  message: "读取消息失败！",
                  type: "success",
                });
              }
            })
            .catch((err) => {
              console.log(err);
            });
        });
      }
    },
    //删除消息
    goDelete(id) {
      tokenApi.createToken().then((res) => {
        console.log(res);
      });
    },
  },
};
</script>

token.js

import request from './request'

export default {
  createToken() {
    return request({
      url: '/api/token/createToken',
      method: 'post'
    })
  },
}

message.js

import { Decrypt } from '../../utils/aes'
import request from './request'

export default {
  //查询消息 /message/getByMemberId
  getMessageById(params) {
    return request({
      url: '/api/message/getByMemberId',
      method: 'post',
      data: params,
      headers: {
        'Authorization': Decrypt(localStorage.getItem('token'))
      }
    })
  },
  //标记为已读
  makeRead({ ids, token }) {
    return request({
      url: '/api/message/makeRead',
      method: 'post',
      data: ids,
      headers: {
        'Authorization': Decrypt(localStorage.getItem('token')),
        'token': token
      }
    })
  },
}