discounts-minapp/invite/wallet/history.vue

<template>
  <view class="page">
    <view class="date-selecter">
      <view class="date" @click="show = true">{{ year }}年{{ month }}月</view>
      <u-icon class="icon" size="10" color="#333333" style="margin-left: 8rpx" name="arrow-down"></u-icon>
    </view>

    <view class="card">
      <view class="item" v-for="item in list">
        <view class="avatar">
          <u-avatar text="提现" size="80rpx"></u-avatar>
        </view>
        <view class="content">
          <view class="info">
            <view class="info-title">提现</view>
            <view class="amount">{{ currency(item.total, {
              symbol: '￥',
              fromCents: true
            }).format() }}</view>
          </view>
          <view class="type">
            <view class="desc">提现至微信</view>
            <view class="bill-type">{{ status[item.transferStatus] }}</view>
          </view>
          <view class="date">
            {{ $u.timeFormat(new Date(item.createTime), 'yyyy-mm-dd hh:MM') }}
          </view>
          <view style="color:red;font-size:20rpx;margin-top: 10rpx;" v-if="item.transferStatus == 'FAIL'">提现失败请一个小时后再次尝试</view>
        </view>
      </view>
    </view>

    <u-empty iconSize="90px" textSize="14px" v-if="list.length == 0"></u-empty>

    <u-datetime-picker :show="show" v-model="time" mode="year-month" @cancel="show = false" @close="show = false"
      @confirm="confirm"></u-datetime-picker>
  </view>
</template>

<script>
import { queryTransfer } from '@/api/wallet'
import currency from "@/utils/currency"
export default {
  data() {
    return {
      list: [],
      show: false,
      year: new Date().getFullYear(),
      month: new Date().getMonth() + 1,
      walletId: '',
      time: new Date(),
      currency,
      status: {
        'PROCESSING': '提现处理中',
        'SUCCESS': "提现成功",
        'FAIL': "提现失败",
        'CLOSE': "提现关闭"
      }
    };
  },
  methods: {
    queryTransfer() {
      queryTransfer({
        year: this.year,
        month: this.month,
        walletId: this.walletId
      }).then(({ content }) => {
        if (content) {
          this.list = content
        }
      })
    },
    confirm({ value }) {
      this.year = new Date(value).getFullYear()
      this.month = new Date(value).getMonth() + 1
      this.queryTransfer()
      this.show = false
    }
  },
  onShow() {
    const walletId = uni.getStorageSync('walletId')
    this.walletId = walletId
    queryTransfer(
      {
        year: this.year,
        month: this.month,
        walletId
      }
    ).then(({ content }) => {
      if (content) {
        this.list = content
      }
    })
  }
};
</script>

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

  .date-selecter {
    color: #333333;
    display: flex;
    align-items: center;
    padding: 20rpx;

    .date {
      font-size: 28rpx;
    }
  }

  .card {
    background: #ffffff;

    .item {
      display: flex;
      padding: 30rpx;
      border-bottom: 1px solid #f0f0f0;

      .avatar {
        width: 15%;
      }

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

        .info {
          display: flex;
          justify-content: space-between;
          margin-bottom: 15rpx;

          .info-title {
            font-size: 30rpx;
            color: #181818;
            font-weight: bold;
          }

          .amount {
            font-size: 32rpx;
            color: #181818;
            font-weight: bold;
          }
        }

        .type {
          display: flex;
          justify-content: space-between;
          margin-bottom: 15rpx;

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

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

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

    }
  }
}
</style>