zhishifufei_uniapp/pages/spread/spread_detail.vue

<template>
  
  <BaseContainer class="withdraw-record">
    <NavBar title="提现记录" />
    <view>
      <view v-for="item in records" class="item">
        <view>{{ item.time }}</view>
        <view class="list">
          <view v-for="cell in item.list" class="cell" :key="cell.id">
            <view>
              <view>{{ cell.title }}</view>
              <view>{{ cell.add_time }}</view>
            </view>
            <view v-if="cell.pm == 0">-{{ cell.number }}</view>
            <view v-else>+{{ cell.number }}</view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="!records.length && finished" class="empty">
      <image mode="aspectFit" :src="getImgPath('/wap/first/zsff/images/empty.png')" />
      <view>暂无数据</view>
    </view>
  </BaseContainer>
</template>

<script>
import { getWithdrawalList } from "@/api/spread";
export default {
  data() {
    return {
      page: 1,
      limit: 16,
      records: [],
      finished: false,
    };
  },
  onLoad() {
    this.getRecords();
  },
  onReactBottom() {
    this.getRecords();
  },
  methods: {
    // 记录数据
    async getRecords() {
      if (this.finished) return;
      uni.showLoading({ mask: true });

      try {
        const { data } = await getWithdrawalList({
          page: this.page,
          limit: this.limit,
        });
        uni.hideLoading();
        let list = data.data;
        this.records = this.records.concat(list);
        this.finished = this.limit > list.length;
        this.page = data.page;
      } catch (err) {
        uni.hideLoading();
        this.$util.showMsg(err.msg);
      }
    },
  },
};
</script>
<style>
page {
  background: #f5f5f5;
}
</style>

<style scoped lang="scss">
/* 提现记录 */
.withdraw-record .item > view {
  padding: 30rpx 30rpx 20rpx;
  font-size: 26rpx;
  line-height: 37rpx;
  color: #666666;
}

.withdraw-record .item .list {
  background: #ffffff;
}

.withdraw-record .cell {
  position: relative;

  display: flex;

  justify-content: space-between;

  align-items: center;
  height: 120rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
  color: #282828;
}

.withdraw-record .cell::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 30rpx;
  z-index: 2;
  height: 1px;
  background: #eeeeee;
}

.withdraw-record .cell:first-child::before {
  display: none;
}

.withdraw-record .cell > view > view:last-child {
  margin-top: 8rpx;
  font-size: 24rpx;
  color: #999999;
}

.withdraw-record .cell > view:last-child {
  font-size: 34rpx;
  color: #2c8eff;
}

.withdraw-record .empty {
  margin-top: 400rpx;
  font-size: 28rpx;
  text-align: center;
  color: #cdcdcd;
}

.withdraw-record .empty image {
  display: block;
  width: 414rpx;
  margin: 0 auto;
}
</style>