LocalLivingServicesUniapp/pages/finance/accountRecord.vue

<template>
  <view class="account-record">
    <view class="fix">
      <view class="top"></view>
      <view class="head">
        <span class="cuIcon-back" @click="back"></span>
        <view class="case"> {{ navTitle }} </view>
      </view>

      <!-- 当type为all或settlement时展示Tab -->
      <view v-if="showTab" class="tab-container">
        <view
          class="tab-item"
          v-for="(tab, index) in settlementTabs"
          :key="index"
          :class="{ active: currentTab === index }"
          @click="switchTab(index)"
        >
          {{ tab }}
        </view>
      </view>
    </view>

    <!-- 列表区域 -->
    <mescroll-uni
      class="list-box"
      ref="mescrollRef"
      :fixed="false"
      @up="getList"
      @down="downCallback"
      @init="mescrollInit"
      :use="false"
    >
      <AccountList :list="accountData"></AccountList>
    </mescroll-uni>
  </view>
</template>

<script>
import api from '@/api/account';
import AccountList from './components/account-list.vue';

export default {
  name: 'AccountRecord',
  components: {
    AccountList,
  },
  computed: {
    navTitle() {
      switch (this.type) {
        case 'all':
          return '账户明细';
        case 'pending':
          return '待结算明细';
        case 'auditing':
          return '提现审核中';
        case 'completed':
          return '已提现明细';
        default:
          return '账户明细';
      }
    },
  },
  data() {
    return {
      settlementTabs: ['全部', '结算', '提现'],
      params: {},
      currentTab: 0,
      type: '',
      showTab: false,
      accountData: [],
    };
  },
  onLoad(options) {
    if (options.type) {
      this.type = options.type;

      if (this.type === 'all' || this.type === 'settlement') {
        this.showTab = true;
        this.currentTab = this.type === 'all' ? 0 : 1;
      } else {
        this.showTab = false;
      }
    }
    this.mescroll && this.mescroll.triggerUpScroll();
  },
  onShow() {
    if (this.accountData.length === 0) {
      this.mescroll && this.mescroll.triggerUpScroll();
    }
  },
  methods: {
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    // 下拉刷新
    downCallback() {
      this.mescroll.resetUpScroll();
      this.accountData = [];
    },
    // 切换Tab
    switchTab(index) {
      this.currentTab = index;
      this.params.mainType = index === 0 ? '' : index === 1 ? 'SETTLE' : 'WITHDRAW';
      this.getList({ num: 1, size: 10, ...this.params });
    },
    // 获取列表数据
    getList(page) {
      let params = this.buildParams(page);
      api
        .getAccountList(params)
        .then((res) => {
          if (res.data.code === 200) {
            const records = res.data.result.records;
            const total = res.data.result.total;

            if (page.num === 1) {
              this.accountData = records;
            } else {
              this.accountData = this.accountData.concat(records);
            }
            this.mescroll.endSuccess(records.length, total);
            if (this.accountData.length < 5) {
              this.$refs.mescrollRef.upLoadType = 'NO_DATA';
            }
          } else {
            this.accountData = [];
            this.mescroll.endErr();
          }
        })
        .catch(() => {
          this.mescroll.endErr();
        });
    },
    // 请求参数
    buildParams(page) {
      let params = {
        pageSize: page.size,
        pageNo: page.num,
      };

      if (this.type === 'all' || this.type === 'settlement') {
        switch (this.currentTab) {
          case 0: // 全部
            params.mainType = '';
            break;
          case 1: // 结算
            params.mainType = 'SETTLE';
            break;
          case 2: // 提现
            params.mainType = 'WITHDRAW';
            break;
        }
      } else if (this.type === 'pending') {
        params.mainType = 'SETTLE';
        params.subType = 'PENDING';
      } else if (this.type === 'auditing') {
        params.mainType = 'WITHDRAW';
        params.subType = 'PENDING';
      } else if (this.type === 'completed') {
        params.mainType = 'WITHDRAW';
        params.subType = 'DONE';
      }

      return params;
    },
    resetList() {
      // 重置页码
      if (this.mescroll) {
        this.mescroll.resetUpScroll();
      }
      this.accountData = [];
    },
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.account-record {
  width: 100vw;
  height: 100vh;
  position: fixed;
  background: #f7f8fc;

  .fix {
    width: 100%;
    height: auto;
    background: #ffffff;
    position: sticky;
    top: 0px;

    /*#ifdef APP-PLUS*/
    .top {
      width: 100%;
      height: var(--status-bar-height);
      background: #fff;
    }

    /*#endif*/

    .head {
      width: 100%;
      height: 112rpx;
      padding: 20rpx;
      display: flex;
      align-items: center;
      background: #fff;
      position: relative;
      border-bottom: 1rpx solid #eeeeee;

      .cuIcon-back {
        font-size: 40rpx;
        margin-right: 40rpx;
      }

      .case {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-weight: 500;
        font-size: 38rpx;
        color: #333333;
      }
    }
  }

  .tab-container {
    display: flex;
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    background: #fff;

    .tab-item {
      flex: 1;
      text-align: center;
      font-weight: 400;
      font-size: 29rpx;
      color: #333333;
      position: relative;

      &.active {
        font-weight: 500;
        font-size: 31rpx;
        color: #449aff;

        &::after {
          content: '';
          position: absolute;
          bottom: 5rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 50rpx;
          height: 6rpx;
          background: #449aff;
          border-radius: 7rpx;
        }
      }
    }
  }

  .list-box {
    height: 80vh;
    flex: 1;
    overflow-y: auto;
    padding: 10rpx 31rpx;
    font-size: 28rpx;
    color: #333;
    margin: 17rpx 31rpx;
    background: #fff;
    border-radius: 10rpx;
  }
}
</style>