tf-business/pages_module/financial/index.vue

<template>
  <view class="financial">
    <view class="financial-box">
      <view class="drawable-price">
        <text>可提现余额（元）</text>
        <text>{{ financialData.withdrawableMoney || "0" }}</text>
      </view>
      <view class="detailed" @click="navigateTo(`/pages_module/withdrawal/index`)">查看明细</view>
    </view>
    <view class="financial-price">
      <view class="price-title">基本数据</view>
      <view class="price-list">
        <view
          class="price-item"
          v-for="(item, index) in detailedList"
          :key="index"
        >
          <text>{{ item.title }}</text>
          <text>{{ financialData[item.name] || "0" }}</text>
        </view>
        <!--  占位盒子  -->
        <view class="price-item hide"></view>
      </view>
    </view>
    <view class="financial-price">
      <view class="price-title">消费金相关</view>
      <view class="price-list">
        <view
          class="price-item"
          v-for="(item, index) in voucherList"
          :key="index"
        >
          <text>{{ item.title }}</text>
          <text>{{ financialData[item.name] || "0" }}</text>
        </view>
        <!--  占位盒子  -->
        <view class="price-item hide"></view>
      </view>
    </view>
    <view class="water">
      <view class="water-title">流水</view>
      <view class="water-box">
        <view class="water-header">
          <view
            class="header-item"
            :class="idx == 1 ? 'active' : ''"
            @click="changeIdx(1)"
            >日流水</view
          >
          <view
            class="header-item"
            :class="idx == 2 ? 'active' : ''"
            @click="changeIdx(2)"
            >月流水</view
          >
        </view>
        <WaterContainer :type="idx" :financialData="financialData"></WaterContainer>
      </view>
    </view>
  </view>
</template>

<script>
import { getFinancial } from "@/config/index";
import { detailedList, voucherList } from "./data";
import WaterContainer from "../components/waterContainer/index"
export default {
  onShow(){
    this.getFinancialData();
  },
  components:{
    WaterContainer
  },
  data() {
    return {
      //  静态数据
      detailedList: detailedList,
      voucherList: voucherList,
      //    动态数据
      //  切换日数据 以及 月数据
      idx: 1,
      financialData: {},
      queryData: {
        condition: "1",
        time: "",
        paymentMode:""
      },
    };
  },
  methods: {
    //  获取 总 数据
    async getFinancialData() {
      try {
        this.$loading.show("统计中...");
        const res = await getFinancial(this.queryData);
        this.financialData = res.data;
        // console.log(this.financialData);
      } finally {
        this.$loading.hide();
      }
    },
    //  控制激活态
    changeIdx(val) {
      this.idx = val;
      this.queryData.condition = val
      //  重新获取总数据
      this.getFinancialData()
    },
  },
};
</script>

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