uniAppXCX/pages/message/message.vue

<template>
  <view class="container">
    <view class="massage" v-for="(item, index) in list">
      <view class="time">
        {{ item.createTime }}
      </view>
      <uni-badge
        class="uni-badge-left-margin"
        :is-dot="true"
        :text="item.status == 0"
        absolute="rightTop"
        size="small"
        :offset="[5, 5]"
      >
        <view class="info" @click="clickMassage(item)">
          <view class="title">
            {{ item.title }}
          </view>
          <view class="text">
            {{ item.content }}
          </view>
        </view>
      </uni-badge>
    </view>
    <uni-load-more
      v-if="list.length > 0"
      :status="loadMore"
      @clickLoadMore="load"
      :contentText="contentText"
    ></uni-load-more>
    <noData v-else />
  </view>
</template>

<script>
import noData from '@/component/noData.vue'
import { messageListApi, messageReadApi } from '@/api/message.js'
export default {
  components: {
    noData,
  },
  data() {
    return {
      value: 1,
      // more/loading/noMore
      loadMore: 'more',
      contentText: {
        contentdown: '点击加载更多',
      },
      params: {
        limit: 10,
        page: 1,
      },
      list: [],
    }
  },
  onShow() {
    this.getList()
  },
  methods: {
    load() {
      if (this.loadMore == 'more') {
        this.params.page += 1
        this.getList()
      }
    },
    getList() {
      this.loadMore = 'loading'
      messageListApi(this.params).then(res => {
        this.list.push(...res.data.list)
        // 判断是否还有更多数据
        let listNum = this.params.limit * this.params.page
        let total = res.data.total
        if (total > listNum) {
          this.loadMore = 'more'
        } else {
          this.loadMore = 'noMore'
        }
      })
    },
    clickMassage(value) {
      // 设置成已读
      let params = [value.id]
      value.status = 1
      messageReadApi(params).then(res => {
        // this.list = []
        // this.getList()
      })
      // 判断点击消息类型进行后续业务
    },
  },
}
</script>

<style scoped lang="scss">
.container {
  height: 100vh;

  .massage {
    margin: 5px 10px;
    .time {
      font-size: 12px;
      padding: 6px 0;
      text-align: center;
    }
    .info {
      background: #fff;
      border-radius: 5px;
      padding: 10px;

      .title {
        font-size: 16px;
        font-weight: 600;
        padding: 5px 0;
      }
      .text {
        font-size: 12px;
        color: #9999;
      }
    }
  }
}
</style>