tf-business/user_module/consumptionPrice/index.vue

<template>
  <view class="balance">
    <view class="balance-header">
      <view class="header-top">
        <view class="price-left">
          <text>{{ financeInfo.beeWithdrawal || 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.withdrawalIn }}</text>
        </view>
        <view class="text-box">
          <text>已提现</text>
          <text>{{ financeInfo.withdrawn }}</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>提现支出</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.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>
  </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: 2,
      },
      //  提现记录的请求参数
      withdeQuery:{
        page: 1,
        pageSize: 10,
        withdrawalType:4
      },
      //  提现记录列表
      withdrawalList: [],
      //  流水信息
      financeInfo: {},
      //  收支明细列表
      recordList: [],
    };
  },
  methods: {
    // 获取流水
    async getFinance() {
      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;
    },
    //  获取体现记录
    async getWithList() {
      let res = await getWithdrawal(this.withdeQuery);
      this.withdrawalList = res.data;
      console.log(res);
    },
    //  获取体现记录
    changeTab(idx) {
      this.idx = idx;
    },
  },
};
</script>

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