GCLS_Page_Personal/src/components/Personalcenter/Mymessage.vue

<!--  -->
<template>
  <div class="Mymessage">
    <EditTitle :title="title" />
    <div class="cc-content">
      <h2 class="cc-title" v-if="total_count">{{ $t("Key69") }}</h2>
      <div
        class="cc-main-box"
        v-infinite-scroll="load"
        infinite-scroll-disabled="disabled"
      >
        <div
          class="cc-main"
          v-for="(item, key, index) in listObj"
          :key="'all' + index"
        >
          <p class="cc-date">{{ key }}</p>
          <div
            class="cc-main-item"
            v-for="(msgItem, dateIndex) in item"
            :key="'msglist' + dateIndex"
            @click="viewDetail(msgItem)"
          >
            <div
              class="cc-msg-pic"
              :class="key == currDate ? 'sys-active' : 'no-active'"
            >
              <img :src="msgItem.sender_type == 0 ? sysIcon : teachIcon" />
            </div>
            <div class="cc-msg">
              <div class="cc-msg-title">
                {{ msgItem.sender_name }} {{ msgItem.time }}
              </div>
              <div class="cc-msg-main">
                <div
                  class="cc-msg-content"
                  :class="[msgItem.is_read == 'true' ? 'active' : '']"
                  v-html="msgItem.content"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <p class="notice-text" v-if="loading">{{ $t("Key463") }}...</p>
      <p class="notice-text" v-if="noMore&&total_count">{{ $t("Key462") }}</p>
    </div>
  </div>
</template>

<script>
import EditTitle from "../common/EditTitle.vue";
import { getLearnWebContent } from "@/api/ajax";
import { createComprisonFunction } from "@/utils/index";
export default {
  name: "Mymessage",
  components: {
    EditTitle,
  },
  data() {
    return {
      pageSize: 20,
      pageNum: 0,
      total_page: 1,
      total_count: 0,
      loading: false,
      height: "20px",
      currDate: "",
      sysIcon: require("../../assets/Personalcenter/system-msg-icon.png"),
      teachIcon: require("../../assets/Personalcenter/teacher-msg-icon.png"),
      listObj: {},
      title: this.$t("Key68"),
    };
  },
  computed: {
    noMore() {
      return this.pageNum >= this.total_page;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  watch: {},
  //方法集合
  methods: {
    //可实现滚动到底部时自动执行加载方法
    load() {
      this.loading = true;
      this.pageNum++;
      let MethodName = "page_query-PageQueryMyMessageList";
      let data = {
        read_status: -1,
        message_type: -1,
        page_capacity: this.pageSize,
        cur_page: this.pageNum,
      };
      getLearnWebContent(MethodName, data).then((res) => {
        this.loading = false;
        let list = res.message_list;
        this.total_page = res.total_page;
        this.total_count = res.total_count
        if (list && list.length > 0) {
          list = list.map((item) => {
            item.isShow = false;
            return item;
          });
          this.listObj = this.handleSortByDate(list);
        }
      });
    },
    load1() {
      this.pageNum++;
      let list = this.message_list[this.pageNum];
      if (list && list.length > 0) {
        list = list.map((item) => {
          item.isShow = false;
          return item;
        });
        this.listObj = this.handleSortByDate(list);
      }
    },
    //按日期分类
    handleSortByDate(list) {
      let listObj = JSON.parse(JSON.stringify(this.listObj));
      list.forEach((item) => {
        let dateArr = item.send_time.split(" ");
        let date = dateArr[0];
        let time = dateArr[1];
        item.time = time;
        item.sec = this.timeTosec(time);
        if (listObj.hasOwnProperty(date)) {
          listObj[date].push(item);
        } else {
          listObj[date] = [];
          listObj[date].push(item);
        }
      });
      for (let key in listObj) {
        let value = listObj[key];
        listObj[key] = this.handleSortBySec(value);
      }
      return listObj;
    },
    //按时间排序
    handleSortBySec(list) {
      let resList = JSON.parse(JSON.stringify(list));
      resList.sort(createComprisonFunction("sec"));
      resList.reverse();
      return resList;
    },
    //时分秒转化给秒
    timeTosec(time) {
      var s = "";

      var hour = time.split(":")[0];
      var min = time.split(":")[1];
      var sec = time.split(":")[2];

      s = Number(hour * 3600) + Number(min * 60) + Number(sec);

      return s;
    },
    //查看消息详情
    viewDetail(msgItem) {
      msgItem.isShow = !msgItem.isShow;
      let date = msgItem.send_time.split(" ");
      if (msgItem.is_read == "false") {
        let MethodName = "message-message_manager-ReadMyMessage";
        let data = {
          id: msgItem.id,
        };
        getLearnWebContent(MethodName, data).then((res) => {
          msgItem.is_read = "true";
          this.getNotReadMessage();
          if (msgItem.message_type == 101) {
            window.location.href = `/GCLS-Learn/#/EnterSys?tab=TaskList&enter=main&dateStamp=${date[0]}`;
          }
        });
      } else {
        if (msgItem.message_type == 101) {
          window.location.href = `/GCLS-Learn/#/EnterSys?tab=TaskList&enter=main&dateStamp=${date[0]}`;
        }
      }
    },
    //是否存在我未阅读的消息
    getNotReadMessage() {
      let MethodName = "message-message_manager-IsExistMyMessage_NotRead";
      let data = {};
      getLearnWebContent(MethodName, data).then((res) => {
        this.$store.dispatch("message/updateIsExist", res.is_exist);
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    //今天的时间
    var day2 = new Date();

    let month = day2.getMonth() + 1;
    month = month < 10 ? "0" + month : month;
    let day = day2.getDate();
    day = day < 10 ? "0" + day : day;
    var s2 = day2.getFullYear() + "-" + month + "-" + day;
    this.currDate = s2;
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.Mymessage {
  .notice-text {
    width: 100%;
    text-align: center;
    font-size: 12px;
  }
  .cc-content {
    box-sizing: border-box;
    width: 100%;
    padding: 24px 0px;
    .cc-title {
      font-size: 16px;
      line-height: 150%;
      color: #000000;
      padding: 0 40px;
      margin-bottom: 16px;
    }
    .cc-main-box {
      height: 734px;
      padding: 0 40px;
      box-sizing: border-box;
      overflow-y: auto;
      overflow: -moz-scrollbars-none; /*Firefox*/
      scrollbar-width: none; /*Firefox*/
      -ms-overflow-style: none; /*IE10+*/
      &::-webkit-scrollbar {
        width: 0 !important;
      }
    }
    .cc-main {
      padding-bottom: 24px;
      .cc-date {
        font-size: 14px;
        line-height: 150%;
        color: #000000;
      }
      &-item {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 24px 0;
        box-sizing: border-box;
        border-bottom: 1px rgba(44, 44, 44, 0.15) solid;
        cursor: pointer;
        .cc-msg-pic {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 40px;
          height: 40px;
          border-radius: 100%;

          &.sys-active {
            background: #ff9900;
          }
          &.teach-active {
            background: #27c579;
          }
          &.no-active {
            background: #d5d5d5;
          }
          > img {
            width: 16px;
            height: 16px;
          }
        }
        .cc-msg {
          margin: 0 16px;
          &-main {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            .dian {
              font-size: 14px;
              line-height: 150%;
              color: #2c2c2c;
              font-weight: bold;
            }
          }
          &-title {
            font-size: 12px;
            line-height: 150%;
            color: #2c2c2c;
            opacity: 0.7;
            margin-bottom: 1px;
          }
          &-content {
            max-width: 712px;
            // height: 20px;
            font-size: 14px;
            line-height: 150%;
            color: #2c2c2c;
            font-weight: bold;
            &.overflow {
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            &.active {
              font-weight: normal;
            }
            &.showAll {
              height: auto;
            }
          }
        }
      }
    }
  }
}
</style>