pay-video-applet-uniapp-24-8-22/pages_mine/mine/incomeRecord.vue

<template>
  <view class="incomeRecord">
    <!--顶部导航栏-->
    <navbar leftClick @leftClick="$utils.navigateBack" title="收益记录"/>


    <!--内容区域-->
    <view class="content">
      <view class="title">收益记录</view>

      <view class="list">
        <view class="item" v-for="(item,index) in list" :key="index">
          <view class="left">
            <image src="../static/incomeRecord/1.png" style="width: 70%;height: 70%;"></image>
          </view>
          <view class="center">
            <view>{{ item.userId }}</view>
            <view>{{ item.createTime }}</view>
          </view>
          <view class="right">
            <view>收益金额</view>
            <view>￥{{item.price}}</view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      queryParams: {
        pageNo: 1,
        pageSize: 10,
      },
    };
  },
  mounted() {
    this.getData()
  },

  methods: {
    getData() {
      this.$api('infoGetIncomePage', {
        pageNo: this.queryParams.pageNo,
        pageSize: this.queryParams.pageSize,

      }, res => {
        if (res.code == 200) {
          this.list = res.result.records
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.incomeRecord {
  .content {
    padding: 0 40rpx;
    height: calc(100vh - 240rpx);

    .title {
      font-weight: bold;
      margin-top: 5%;
    }

    .list {
      padding-top: 50rpx;

      .item {
        display: flex;
        gap: 20rpx;
        //height: 80rpx;
        margin-bottom: 40rpx;


        .left {
          display: flex;
          justify-content: center;
          align-items: flex-start;
          width: 15%;

        }

        .center {
          width: 60%;
        }

        .right {
          width: 30%;
          text-align: center;
        }
      }
    }
  }
}
</style>