discounts-minapp/invite/wallet/hangingAmount.vue

<template>
  <view class="page">
    <view class="card">
      <view class="text">即将到账</view>
      <view class="amount">{{ currency(total, {
        symbol: '',
        fromCents: true
      }).format() }}</view>
      <view class="msg">推广奖励与返利需要等平台结算期后才会到账</view>
    </view>

    <view class="item" v-for="item in list">
      <view class="avatar">
        <u-avatar size="40" text="佣金"></u-avatar>
      </view>
      <view class="info">
        <view class="type_amount">
          <view class="type">推广用户奖励</view>
          <view class="amount">{{ currency(item.total, {
            symbol: '￥',
            fromCents: true
          }).format() }}</view>
        </view>
        <view class="date_time">
          <view class="date">{{ $u.timeFormat(item.createTime, "yyyy-mm-dd hh:MM") }}</view>
          <view class="time">预计{{ $u.timeFormat(item.estimatedTime, "yyyy-mm-dd") }}到账</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { listByWallet } from '@/api/wallet'
import currency from "@/utils/currency"
export default {
  data() {
    return {
      list: [],
      currency,
      total: 0
    };
  },
  methods: {

  },
  onShow() {
    listByWallet().then(({ content }) => {
      if (content) {
        this.list = content;
        for (const element of this.list) {
          this.total += element.total
        }
      }
    })
  }
};
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background-color: #F9F9F9;

  .card {
    background-color: #FFFFFF;
    padding: 30rpx;
    margin-bottom: 20rpx;

    .text {
      color: #333333;
      font-size: 40rpx;
      margin-bottom: 15rpx;
    }

    .amount {
      color: #222222;
      font-size: 80rpx;
      font-weight: bold;
    }

    .msg {
      color: #999999;
      font-size: 30rpx;
      margin: 35rpx 0 15rpx 0;
    }

  }

  .item {
    display: flex;
    border-top: 1px solid #F0F0F0;
    background-color: #ffffff;
    padding: 40rpx 20rpx;

    &:first-child {
      border-top: none;
    }

    .avatar {
      margin-right: 10rpx;
      width: 15%;
    }

    .info {
      display: flex;
      flex-direction: column;
      width: 85%;

      .type_amount {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10rpx;

        .type {
          color: #333333;
          font-size: 35rpx;
          font-weight: bold;
        }

        .amount {
          color: #333333;
          font-size: 30rpx;
          font-weight: bold;
        }
      }

      .date_time {
        display: flex;
        justify-content: space-between;

        .date {
          color: #999999;
          font-size: 24rpx;
        }

        .time {
          color: #999999;
          font-size: 24rpx;
        }
      }
    }
  }
}
</style>