tf-business/user_module/voucherPrice/index.vue

<template>
  <view class="balance">
    <view class="header-box">
      <view class="balance-header">
        <view class="header-top">
          <view class="price-left">
            <text>{{ financeInfo.voucherWithdrawal || 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.voucherWithdrawalIn || 0 }}</text>
          </view>
          <view class="text-box">
            <text>已提现</text>
            <text>{{ financeInfo.voucherWithdrawn }}</text>
          </view>
        </view>
      </view>
      <view class="header-tool">
        <view class="tool-item" @click="goShow(1)">去充值</view>
        <view class="tool-item" @click="goShow(0)">去转赠</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>
    <tui-bottom-popup
      :zIndex="1000"
      backgroundColor="#FFFFFF"
      :show="showPopup"
      @close="clonePopup"
    >
      <template v-if="isShowComponent == 0">
        <transferPopup
          :voucherWithdrawalIn="financeInfo.voucherWithdrawalIn"
          @cancel="clonePopup"
        />
      </template>
      <template v-else>
        <rechargePopup @cancel="clonePopup" />
      </template>
    </tui-bottom-popup>
  </view>
</template>

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

import transferPopup from "./components/transferPopup/index.vue";
import rechargePopup from "./components/rechargePopup/index.vue";

export default {
  onLoad(option) {
    //  获取流水接口
    this.getFinance();
    //  获取提现记录
    this.getWithList();
  },
  components: {
    transferPopup,
    rechargePopup,
  },
  data() {
    return {
      idx: 0,
      tabList: ["收支明细", "提现记录"],
      //  提现记录的请求参数
      queryData: {
        page: 1,
        pageSize: 10,
        withdrawalType: 3,
      },
      //  提现记录的请求参数
      withdeQuery: {
        page: 1,
        pageSize: 10,
        withdrawalType: 3,
      },
      //  提现记录列表
      withdrawalList: [],
      //  流水信息
      financeInfo: {},
      //  收支明细列表
      recordList: [],
      //  控制 转赠 弹框
      showPopup: false,
      //  控制显示组件
      isShowComponent: 1,
    };
  },
  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);
    },
    //  获取体现记录
    changeTab(idx) {
      this.idx = idx;
    },
    //  关闭转赠弹框
    clonePopup() {
      this.showPopup = false;
    },
    goShow(val) {
      this.isShowComponent = val;
      this.showPopup = true;
    },
  },
};
</script>

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