zhangsiye/mini/pages/share/withdrawDetail.vue

<template>
  <view class="withdraw-detail">
    <u-sticky bg-color="#151728">
      <u-tabs
        :list="tabs"
        line-color="#6EEBE8"
        :active-style="{color: '#6EEBE8'}"
        :inactive-style="{color: '#ffffff'}"
        :item-style="{width: 'calc(750rpx / 5)', height: '44px'}"
        :current="activeIndex"
        @click="handleTabClick"
      />
    </u-sticky>
    <template v-for="(tab, index) in tabs">
      <view
        v-if="activeIndex === index"
        :key="index"
        class="detail-box"
      >
        <view
          v-for="(data, dataIndex) in tab.data"
          :key="dataIndex"
          class="detail-item"
        >
          <view class="date">
            {{ data.created_at }}
          </view>
          <view class="info">
            <view class="type main-left cross-center">
              {{ data.type_name }}
              <view class="status">{{ data.status_name }}</view>
            </view>
            <view class="withdraw-box main-between cross-center">
              <view class="item">
                <view>提现账户：{{ data.account }}</view>
                <view>提现时间： {{ data.created_at }}</view>
              </view>
              <view class="item price-box">
                <view class="price">{{ data.price }}</view>
                <view class="discount">手续费: {{ data.discount }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </template>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { name: '全部', status: -1, data: [], limit: 10, page: 1, isMore: true },
        { name: '待审核', status: 0, data: [], limit: 10, page: 1, isMore: true },
        { name: '待打款', status: 1, data: [], limit: 10, page: 1, isMore: true },
        { name: '已打款', status: 2, data: [], limit: 10, page: 1, isMore: true },
        { name: '无效', status: 3, data: [], limit: 10, page: 1, isMore: true }
      ],
      activeIndex: 0
    }
  },
  computed: {},
  methods: {
    handleTabClick(item) {
      this.activeIndex = item.index
      const tab = this.tabs[this.activeIndex]
      if (tab.data.length === 0 && tab.isMore) {
        this.getData()
      }
    },
    getData() {
      this.$loading()
      const item = this.tabs[this.activeIndex]
      const params = { limit: item.limit, page: item.page, status: item.status }
      this.$api.share.withdraw.lists(params).then(res => {
        this.$hideLoading()
        if (res.data.length) {
          item.data = item.data.concat(res.data)
        } else {
          item.isMore = false
        }
      })
    }
  },
  onLoad(options) {
    this.activeIndex = typeof options.active !== 'undefined' ? parseInt(options.active) : 0
    this.getData()
  },
  onReachBottom(e) {
    const item = this.tabs[this.activeIndex]
    if (!item.isMore) return
    item.page += 1
    this.getData()
  }
}
</script>

<style lang="scss" scoped>
.withdraw-detail {
  font-size: 28rpx;
  padding: 30rpx 0 80rpx;
  .detail-box{
    padding: 0 30rpx;
    margin-top: 30rpx;
    .detail-item{
      background: $bg-op-color;
      color: #ffffff;
      border-radius: 10rpx;
      padding: 30rpx 0;
      margin-bottom: 20rpx;
      .date{
        border-bottom: 1rpx $border-op-color solid;
        padding: 0 30rpx 30rpx;
      }
      .info{
        padding: 30rpx 30rpx 0;
        .type{
          font-size: 32rpx;
          .status{
            font-size: 20rpx;
            color: #ff74b9;
            border: 1rpx solid #FF74B9;
            border-radius: 30rpx;
            padding: 2rpx 20rpx;
            margin-left: 20rpx;
          }
        }
        .withdraw-box{
          margin-top: 20rpx;
          .item{
            >view:first-child{
              margin-bottom: 10rpx;
            }
            &.price-box{
              color: #6eebe8;
              font-size: 36rpx;
              font-weight: bold;
              .discount{
                font-size: 24rpx;
                font-weight: normal;
              }
            }
          }
        }
      }
    }
  }
}
</style>