freight-web/src/pagesLogin/message/index.vue

<template>
  <page-view
    @loadList="
      (v) => {
        getList(v);
      }
    "
    :noMoreData="pageList.noMoreData"
    :list="pageList.list"
    :height="0"
    :isLoading="pageList.isLoading"
  >
    <view class="msg-box">
      <view class="u-page">
        <u-list>
          <u-list-item v-for="(item, index) in pageList.list" :key="index">
            <u-cell @click="handleItem(item)">
              <view slot="title" class="u-slot-title">
                <view>
                  <view class="u-cell-text title"
                    >{{ item.title }}
                    <text class="title-badge" v-if="item.status === 0"> </text>
                  </view>
                  <view class="u-cell-text desc">{{ item.content }}</view>
                </view>
              </view>
              <template #value>
                <text class="u-slot-value time">{{ item.createTime }}</text>
              </template>
            </u-cell>
          </u-list-item>
        </u-list>
      </view>
    </view>
  </page-view>
</template>
<script setup lang="ts">
import PageView from "@/components/PageView/index.vue";
import { MessageApi } from "@/services";
const pageList: PageResult<any> = reactive({
  isLoading: false,
  noMoreData: false,
  total: 0,
  list: [],
  pageNum: 1,
  pageSize: 10,
});
const resetPageList = () => {
  pageList.noMoreData = false;
  pageList.total = 0;
  pageList.list = [];
  pageList.pageNum = 1;
  pageList.pageSize = 10;
};

const getList = (v?: boolean) => {
  if (v) {
    if (Math.ceil(pageList.total / pageList.pageSize) > pageList.pageNum) {
      pageList.pageNum++;
    } else {
      pageList.noMoreData = true;
      return;
    }
  }
  let params: any = {
    pageSize: pageList.pageSize,
    pageNum: pageList.pageNum,
  };

  pageList.isLoading = true;
  MessageApi.getUserNoticeInfoVoPage({
    ...params,
  }).then((res: any) => {
    if (res.code === 200) {
      pageList.isLoading = false;
      (pageList as any).list = (pageList as any).list = pageList.list.concat(
        res.data.list
      );
      pageList.total = (res.data as any).total;
    }
  });
};

const handleItem = (item:any) => {
  if (item.status === 0) {
    MessageApi.readNotice({ids: [item.id]}).then(res => {
      if (res.code === 200) {
        resetPageList();
        getList();
      }
    })
  }
}
onMounted(() => {
  getList();
});
</script>
<style lang="scss">
.msg-box {
  background: #f8f8f8;
  width: 100%;
  height: 100%;
  .title {
    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #000000;
    position: relative;
    width: fit-content;
    .title-badge {
      position: absolute;
      right: -6px;
      top: 0px;
      width: 17rpx;
      height: 17rpx;
      background: #ec0f3e;
      border-radius: 50%;
      display: inline-block;
    }
  }
  .desc {
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #999999;
    margin-top: 12.18rpx;
  }
  .time {
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #999999;
  }
}
</style>