tf-business/user_module/commission/index.vue

<template>
  <view class="balance">
    <view class="balance-header">
      <view class="header-top">
        <view class="price-left">
          <text>{{ financeInfo.withdrawableMoney || '0'}}</text>
          <text>可提现金额（元）</text>
        </view>
        <view class="price-right" @click="navigateTo(`/pages_module/withdrawal/index`)">提现</view>
      </view>
      <view class="header-bottom">
        <view class="text-box">
          <text>途中金额</text>
          <text>{{ financeInfo.frozenMoney || '0' }}</text>
        </view>
        <view class="text-box">
          <text>累计营业额(元)</text>
          <text>{{ financeInfo.turnover || '0' }}</text>
        </view>
      </view>
    </view>
    <view class="balance-container">
      <view class="text-tab">
        <view
          v-for="(item, index) in tabList"
          :key="item"
          :class="idx == index ? 'active' : ''"
          @click="changeTab(index)"
          >{{ item }}</view
        >
      </view>
      <view v-show="idx == 0">
        <template v-if="recordList.length > 0">
          <view class="record-list">
            <view class="record-item" v-for="item in recordList" :key="item">
              <view class="item-left">
                <text>{{ item.state == 0 ? "实体商品收入" : "提现支出" }}</text>
                <text>{{ item.time }}</text>
              </view>
              <template v-if="item.state == 0">
                <view class="item-right">+{{ item.income }}</view>
              </template>
              <template v-else>
                <view class="item-right">-{{ item.expenditure }}</view>
              </template>
            </view>
            <view class="no-more">没有更多啦</view>
          </view>
        </template>
        <template v-else>
          <view class="empty">
            <image class="" src="@/static/image/order/empty.png" />
            <text>暂无提现记录</text>
          </view>
        </template>
      </view>
      <view v-show="idx == 1">
        <template v-if="withdrawalList.length > 0">
          <view class="record-list">
            <view
              class="record-item"
              v-for="item in withdrawalList"
              :key="item"
            >
              <view class="item-left">
                <text>提现支出</text>
                <text>{{ item.applyTime }}</text>
              </view>
              <template v-if="item.state == 0">
                <view class="item-right">+{{ item.income }}</view>
              </template>
              <template v-else>
                <view class="item-right">-{{ item.withdrawalMoney || 0 }}</view>
              </template>
            </view>
            <view class="no-more">没有更多啦</view>
          </view>
        </template>
        <template v-else>
          <view class="empty">
            <image class="" src="@/static/image/order/empty.png" />
            <text>暂无提现记录</text>
          </view>
        </template>
      </view>
    </view>
  </view>
</template>

<script>
import { getFinanceCount, getWithdrawal } from "@/config/index.js";

export default {
  onLoad(option) {
    //  获取流水接口
    this.getFinance();
    //  获取提现记录
    this.getWithList();
  },
  data() {
    return {
      idx: 0,
      tabList: ["收支明细", "提现记录"],
      queryData: {
        condition: "1",
        time: "",
        paymentMode: 5,
      },
      //  提现记录的请求参数
      withdeQuery: {
        page: 1,
        pageSize: 10,
        withdrawalType: 5,
      },
      //  提现记录列表
      withdrawalList: [],
      //  流水信息
      financeInfo: {},
      //  收支明细列表
      recordList: [],
    };
  },
  methods: {
    // 获取流水
    async getFinance() {
      this.$loading.show("加载中");
      try {
        let res = await getFinanceCount(this.queryData);
        this.financeInfo = res.data;
        //  对于数据进行处理 如果有支出的话就加上这一个支出
        let list = res.data.finances.reduce((prev, item, index) => {
          prev.push({ ...item, state: 0 });
          if (item.expenditure > 0) {
            prev.push({ ...item });
          }
          return prev;
        }, []);
        this.recordList = list;
      } finally {
        this.$loading.hide();
      }
    },
    //  获取体现记录
    async getWithList() {
      let res = await getWithdrawal(this.withdeQuery);
      this.withdrawalList = res.data;
      console.log(res.data);
    },
    //  获取体现记录
    changeTab(idx) {
      this.idx = idx;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>