Web_TracerMethodology/pages/messages/messages.vue

<template>
  <view class="messages-page">
    <view
      class="contBody"
      @touchend="touchend"
      :style="MessList.length <= 8 ? { height: 'calc(100% - 30rpx)' } : {}"
    >
      <view
        v-for="(item, index) in MessList"
        :key="index"
        class="messages-content"
        @click="toDetail(item)"
      >
        <view class="imgView">
          <image
            :src="
              item.businessType == 1
                ? item.readStatus
                  ? '/static/橙色已读.png'
                  : '/static/橙色未读.png'
                : item.readStatus
                ? '/static/绿色已读.png'
                : '/static/绿色未读.png'
            "
          ></image>
        </view>
        <view class="contView">
          <view class="contView-title">
            {{ item.title }}
          </view>
          <view class="contView-content">
            {{ item.content }}
          </view>
          <view class="contView-time">
            {{ item.effectTime }}
          </view>
        </view>
      </view>
      <view class="bottomPanDuan"></view>
    </view>

    <view class="bottomTishi">
      <view v-if="loading"> 向上滑动加载更多！ </view>
      <view v-else> 已经到底了～ </view>
    </view>
  </view>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      MessList: [],
      loading: false,
      currentPage: 0,
      totalPage: 0,
    };
  },
  mounted() {
    this.getMessList();
  },
  methods: {
    getMessList() {
      var currPage = this.currentPage + 1;
      this.$store.dispatch({
          type: "messages/commActions",
          payload: {
            key: "messagesList",
            data: {
              pageNum: currPage,
              pageSize: this.pageSize,
            },
          },
        })
        .then((res) => {
          this.totalPage = res.totalPage;
          res.list.map((item) => {
            item.effectTime = moment(item.effectTime).format("MM-DD hh:mm");
          });
          //获取当前页码
          this.currentPage = res.pageNum;
          //当前页码与总页码进行比对
          this.loading = this.currentPage < this.totalPage;
          //将获得的数据拼接当前渲染数据中
          this.MessList = this.MessList.concat(res.list);
        });
    },
    touchend() {
      if (this.currentPage < this.totalPage) {
        var box = document.getElementsByClassName("bottomPanDuan")[0];
        var pos = box.getBoundingClientRect();
        if (pos.bottom <= document.documentElement.clientHeight) {
          this.getMessList();
        }
      }
    },
    toDetail(data) {
      this.$store.dispatch({
          type: "messages/commActions",
          payload: {
            key: "toRead",
            data: {
              id: data.id,
            },
          },
        })
        .then((res) => {
          if (data.businessType == 1) {
            uni.navigateTo({
              url: `/pages/mission-details/mission-details?taskId=${data.businessId}`,
            });
          } else if (data.businessType == 2) {
            uni.navigateTo({
              url: `/pages/home/home`,
            });
          }
          this.MessList = [];
          for (let i = 1; i < this.currentPage + 1; i++) {
            this.$store.dispatch({
                type: "messages/commActions",
                payload: {
                  key: "messagesList",
                  data: {
                    pageNum: i,
                    pageSize: this.pageSize,
                  },
                },
              })
              .then((res) => {
                res.list.map((item) => {
                  item.effectTime = moment(item.effectTime).format(
                    "MM-DD hh:mm"
                  );
                });
                this.MessList = this.MessList.concat(res.list);
              });
          }
        });
    },
  },
  computed: {},
};
</script>

<style lang="less">
.messages-page {
  padding-top: 15rpx;
  height: 100%;
  overflow-y: auto;
  .messages-content {
    display: flex;
    background-color: #fff;
    .imgView {
      margin-top: 25rpx;
      margin-left: 25rpx;
      margin-right: 25rpx;
      margin-bottom: 63.75rpx;
      width: 56.25rpx;
      height: 56.25rpx;
      vertical-align: top;
      .image-circle {
        background-color: ;
      }
      image {
        width: 56.25rpx;
        height: 90px;
      }
    }
    .contView {
      flex: 1;
      border-bottom: 0.62rpx solid #dadee6;
      .contView-title {
        margin-top: 25rpx;
        font-size: 22.5rpx;
        font-weight: 500;
        color: #292c33;
      }
      .contView-content {
        margin: 15rpx 0 20rpx;
        font-size: 20rpx;
        color: #525866;
      }
      .contView-time {
        margin-bottom: 25rpx;
        font-size: 17.5rpx;
        color: #666e80;
      }
    }
  }
  .bottomTishi {
    padding: 6.25rpx 0px;
    width: 100%;
    // position: absolute;
    // bottom: 0rpx;
    text-align: center;
    font-size: 17.5rpx;
    color: #525866;
  }
}
</style>