web-zk-h5/pages/mine/directPush/index.vue

<template>
  <view class="container">
    <view class="list">
      <view class="list-item" v-for="item in list" :key="item.memberCode">
        <view class="item-row">
          <text class="label">会员编号</text>
          <text class="value">{{ item.memberCode }}</text>
        </view>
        <view class="item-row">
          <text class="label">会员手机号</text>
          <text class="value">{{ item.phone }}</text>
        </view>
        <view class="item-row">
          <text class="label">结算等级</text>
          <text class="value">{{ item.settleGradeVal }}</text>
        </view>
        <view class="item-row">
          <text class="label">会员姓名</text>
          <text class="value">{{ item.memberName }}</text>
        </view>
        <view class="item-row">
          <text class="label">创建时间</text>
          <text class="value">{{ item.creationTime }}</text>
        </view>
      </view>
    </view>
    <view class="load-more">
      <text v-if="status === 'loading'">加载中...</text>
      <text v-if="status === 'nomore'">没有更多数据了</text>
    </view>
  </view>
</template>

<script>
import { getDirectPushList } from '@/config/mine'
export default {
  name: 'DirectPush',
  data() {
    return {
      list: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      status: 'loading', // loading, loadmore, nomore
    }
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: '服务列表',
    })
    this.getDirectPushList()
  },
  onReachBottom() {
    if (this.status === 'nomore' || this.status === 'loading') {
      return
    }
    this.pageNum++
    this.getDirectPushList()
  },
  methods: {
    getDirectPushList() {
      this.status = 'loading'
      getDirectPushList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      })
        .then(res => {
          this.list = this.list.concat(res.rows)
          this.total = res.total
          if (this.list.length >= this.total) {
            this.status = 'nomore'
          } else {
            this.status = 'loadmore'
          }
        })
        .catch(() => {
          if (this.pageNum > 1) {
            this.pageNum--
          }
          this.status = 'loadmore'
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #f0f2f5;
  min-height: 100vh;
  padding-top: 1rpx;
}
.list-item {
  background-color: #ffffff;
  margin: 16rpx 24rpx;
  padding: 16rpx 24rpx;
  border-radius: 8rpx;
}
.item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12rpx 0;
  font-size: 28rpx;
  .label {
    color: #8c8c8c;
  }
  .value {
    color: #303133;
  }
}
.load-more {
  text-align: center;
  color: #999;
  padding: 20rpx 0;
  font-size: 24rpx;
}
</style>