app/pages/mine/mydistribution/my/consumption.vue

<template>
  <div class="distribution-container">
    <div class="distribution-header">
      <view :style="{ textAlign: 'center' }">分销收益</view>
      <view class="hcolng" :style="{ textAlign: 'center' }">
        <view :style="{ fontSize: '30px' }">￥</view>
        <view :style="{ fontSize: '30px' }">{{ totle }}</view>
        <view :style="{ fontSize: '30px' }">积分</view>
      </view>
    </div>
    <div class="distribution-center">
      <div>
        <div>头像</div>
        <div>消费金额</div>
        <div>日期</div>
      </div>
      <div
        v-for="(item, index) in getlist"
        :key="item.id"
        :style="{ background: index % 2 == 0 ? '#fff' : '' }"
      >
        <div>
          <img :src="imgfun(item.image)" alt="" width="60"  height="60" style="border-radius: 50%" />
        </div>
        <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ item.goodsName }}</div>
        <div>{{ timefun(item.orderCreateTime) }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { bindUsers, getcompleted } from "@/api/point.js";
export default {
  name: "MyDistribution",
  data() {
    return {
      show: false,
      totle: 0,
      getlist: [],
      size:1,
      page:10,
    };
  },
  mounted() {
    this.getl();
  },
  methods: {
    timefun(e) {
      return e.split("T")[0];
    },
    touni(e) {
      uni.navigateTo({ url: e });
    },
    goToDepositPage() {
      uni.navigateTo({ url: "/pages/mine/deposit/operation" });
    },
    getl() {
      getcompleted({size:this.size,page:this.page}).then((res) => {
        this.getlist = res.data.result.records;
        this.totle = res.data.result.total;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.distribution-container {
  font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  width: 100%;
  color: #333;

  .distribution-header {
    background-color: #ff7d00;
    color: white;
    padding: 25px 20px;
    .hcolng {
      display: flex;
      justify-content: center;
      padding: 10px 20px;
      margin-top: 50px;
      & > view {
        font-weight: 700;
        display: flex;
        font-size: 14px;
        margin: 0 5px;
        align-items: end;
      }
    }
  }
  .distribution-center {
    display: flex;
    flex-direction: column;
    & > div {
      display: flex;
      justify-content: space-evenly;
      padding: 10px 0px 10px 0px;
      & > div {
        width: 30%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    // justify-content: space-evenly;
  }
}
</style>