jsh_erp_app/pages/index/notice-page.vue

<template>
  <view class="notice-page">
    <u-navbar
      height="40px"
      title="消息通知"
      bgColor="#fff"
      autoBack
      placeholder
    >
    </u-navbar>
    <view class="container_main">
      <view v-for="(item, i) in list" :key="i" class="item-wrap">
        <view class="time-box">{{ item.date }}</view>
        <notice-item
          v-for="child in item.msgList"
          :key="child.id"
          :item="child"
          @toDetail="toDetail"
        ></notice-item>
      </view>
      <!-- 加载更多 -->
      <u-loadmore
        v-if="list.length > 0"
        :status="loadStatus"
        @loadmore="onLoadMore"
      />
      <u-empty
        mode="data"
        text="暂无内容"
        marginTop="60"
        icon="https://xiangli-erp.oss-cn-hangzhou.aliyuncs.com/APP/no-notifcations.png"
        v-if="list.length == 0"
      ></u-empty>
    </view>
  </view>
</template>

<script>
import noticeItem from "./components/notice-item.vue";
import { getMsgList } from "@/common/request/apis/index.js";
export default {
  components: {
    noticeItem,
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      loadStatus: "loadmore", //加载前值为loadmore，加载中为loading，没有数据为nomore
      list: [],
    };
  },
  onLoad() {
    this.loadData();
  },
  onPullDownRefresh() {
    // 下拉刷新
    this.onRefresh();
  },
  onReachBottom() {
    // 触底加载更多
    this.onLoadMore();
  },
  methods: {
    async onRefresh() {
      try {
        await this.loadData(true);
      } finally {
        uni.stopPullDownRefresh();
      }
    },
    async onLoadMore() {
      if (this.loadStatus !== "loadmore") return;
      this.loadStatus = "loading";
      try {
        await this.loadData();
      } catch (e) {
        this.loadStatus = "loadmore";
      }
    },
    async loadData(isRefresh = false) {
      if (isRefresh) {
        this.currentPage = 1;
        this.list = [];
      }

      try {
        this.loadStatus = "loading";
        const currentPage = this.currentPage;
        const pageSize = this.pageSize;
        const params = {
          currentPage,
          pageSize,
        };
        console.log("params=====", params);
        const res = await getMsgList(params);
        const { rows, total } = res.data;
        console.log("res====", res);
        this.list = [...this.list, ...rows];
        if (currentPage * pageSize < Number(total)) {
          this.currentPage++;
          this.loadStatus = "loadmore";
        } else {
          this.loadStatus = "nomore";
        }
      } catch (error) {}
    },
    toDetail(val) {
      switch (val.type) {
        case "拣货任务":
          uni.navigateTo({
            url: `/pages/picking-task/detail?id=${val.title}`,
          });
          break;
        case "采购入库":
          uni.navigateTo({
            url: `/pages/purchase/detail?id=${val.title}`,
          });
          break;
        case "盘点任务":
          uni.navigateTo({
            url: `/pages/inventory-task/taskDetail?id=${val.title}`,
          });
          break;
        case "复核任务":
          if (val.content.includes("CGDD")) {
            uni.navigateTo({
              url: `/pages/purchase/detail?id=${val.title}`,
            });
          } else {
            uni.navigateTo({
              url: `/pages/picking-task/detail?id=${val.title}`,
            });
          }
          break;

        default:
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.notice-page {
  min-height: 100vh;
  background-color: #f0f6fb;
  .container_main {
    padding: 32rpx 24rpx;
    .item-wrap {
      margin-bottom: 24rpx;
    }
    .time-box {
      position: relative;
      color: #000;
      font-family: "PingFang SC";
      font-size: 28rpx;
      font-weight: 400;
      padding-left: 20rpx;
      margin-bottom: 24rpx;
      &::before {
        content: "";
        display: block;
        width: 6rpx;
        height: 30rpx;
        border-radius: 100rpx;
        background: #0256ff;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}
</style>