parking_h5_all/pages/message/message.vue

<template>
  <view>
    <u-navbar
      title-color="#fff"
      :custom-back="customBack"
      :border-bottom="false"
      back-icon-color="#CCE8FF"
      :background="{ background: '#008CFF' }"
      title="消息中心"
    />
    <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
      <scroll-view scroll-y style="height: 100%; width: 100%" v-for="(messageItem, index) in messageList" :key="messageItem.id">
        <view class="time">{{ messageItem.createTime }}</view>
        <view class="page-box">
          <view class="message" @click="goDetails(messageItem)">
            <view class="message-top u-flex">
              <view class="message-top-left u-flex-1">
                <view class="car">{{ messageItem.title }}</view>
              </view>
              <view class="message-top-right u-flex-2">
                <u-badge :is-dot="true" type="error" v-if="messageItem.readFlag == '0'"></u-badge>
              </view>
            </view>
            <view class="message-center">
              <view class="message-center-item">{{ messageItem.content }}</view>
            </view>
            <view class="message-bottom">
              <u-cell-item title="查看详情" style="color: #008cff"></u-cell-item>
            </view>
          </view>
        </view>
      </scroll-view>
    </mescroll-body>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
export default {
  mixins: [MescrollMixin], // 使用mixin
  data() {
    return {
      messageList: []
    };
  },
  methods: {
    // 返回上一页
    customBack() {
      uni.getStorage({
        key: 'messageBack',
        success: (res) => {
          this.$u.route({
            type: 'switchTab',
            url: res.data
          });
        }
      });
    },
    /*下拉刷新的回调*/
    downCallback() {
      // 第2种: 下拉刷新和上拉加载调同样的接口, 则不用第1种, 直接mescroll.resetUpScroll()即可
      this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
    },
    /*上拉加载的回调*/
    upCallback(page) {
      let pageNum = page.num; // 页码, 默认从1开始
      let pageSize = page.size; // 页长, 默认每页10条
      this.$u.api
        .getMessageList({
          pageSize: pageSize,
          pageNum: pageNum
        })
        .then((res) => {
          if (res.code == 200) {
            // 接口返回的当前页数据列表 (数组)
            let curPageData = res.data?.rows ?? [];
            // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
            let curPageLen = curPageData.length;
            // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
            let totalPage = res.data.pages;
            // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
            let totalSize = res.data.total;
            // 接口返回的是否有下一页 (true/false)
            let hasNext = res.data.page < res.data.pages;

            //设置列表数据
            if (page.num == 1) this.messageList = []; // 如果是第一页需手动置空列表
            this.messageList = this.messageList.concat(curPageData); // 追加新数据
            // 后台接口有返回列表的总页数 totalPage
            this.mescroll.endByPage(curPageLen, totalPage);
            setTimeout(() => {
              this.mescroll.endSuccess(curPageLen);
            }, 20);
          } else {
            this.mescroll.endErr();
          }
        })
        .catch((err) => {
          this.$refs.uToast.show({
            title: err.msg,
            type: 'error'
          });
        });
    },
    // 跳转消息详情
    goDetails(item) {
      if (Number(item.readFlag) === 0) {
        this.$u.api
          .messageRead({
            newId: item.id
          })
          .then((res) => {
            if (res.code == 200) {
              this.$u.route({
                url: 'pages/message/messageInfo',
                params: {
                  details: JSON.stringify(item)
                }
              });
            } else {
              this.$refs.uToast.show({
                title: res.msg,
                type: 'error'
              });
            }
          })
          .catch((err) => {
            this.$refs.uToast.show({
              title: '操作失败',
              type: 'error'
            });
          });
      } else {
        this.$u.route({
          url: 'pages/message/messageInfo',
          params: {
            details: JSON.stringify(item)
          }
        });
      }
    }
  }
};
</script>

<style>
/* #ifndef H5 */
page {
  height: 100%;
  background-color: #f6f6ff;
}

/* #endif */
</style>

<style lang="scss" scoped>
@import './message.scss';
</style>