leromro-web/src/views/finance/wallet/index.vue

<template>
    <div>
        <div class="card-box">
            <el-row :gutter="20">
                <el-col :span="4" v-for="item in cardList" :key="item.key">
                    <el-card shadow="never">
                        <div class="card-title">{{ item.name }}: {{ data[item.key] }}</div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <ListPage :column="listPageData.tableColumn" :tableApi="listPageData.tableApi" :isSelect="listPageData.isSelect"
            :scopeBtns="listPageData.scopeBtns" :searchBtns="listPageData.searchBtns" ref="userTableRef" :isScope="false" >
        <template #footerLeft>
            <el-row :gutter="20">
                <el-col :span="4">
                    <div class="card-title">总金额: {{ totalMoney }}</div>
                </el-col>
                <el-col :span="4">
                    <div class="card-title">可提现金额: {{ balanceMoney }}</div>
                </el-col>
            </el-row>
        </template>
        </ListPage>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import ListPage from '@/views/components/ListPage/index.vue';
import { list, walletTotal } from "@/api/finance/wallet.js";
import { provide,inject } from 'vue'
const { proxy } = getCurrentInstance();
const userTableRef = ref();
const listPageData = reactive({
    tableColumn: [
        {
            label: '金额变动时间',
            queryLabel: '时间',
            prop: 'createTime',
            type: 'date',
            isSearch: true,
            keys: ['lastChangeTimeStart', 'lastChangeTimeEnd'],
        },
        {
            label: '区域公司',
            prop: 'areaName',
            type: 'input',
            isSearch: true,
        },
        {
            label: '服务中心',
            prop: 'serviceCentreName',
            type: 'input',
            isSearch: true,
        },
        {
            label: '志愿者姓名',
            prop: 'volunteerName',
            queryLabel: '姓名',
            type: 'input',
            isSearch: true,
        },
        {
            label: '手机号',
            prop: 'volunteerPhone',
            type: 'input',
            isSearch: true,
        },
        {
            label: '待入账',
            prop: 'orderFrozenBalance',
        },
        {
            label: '可提现',
            prop: 'balance',
        },
        {
            label: '提现中',
            prop: 'beBalance',
        },
        {
            label: '总金额',
            prop: 'totalAmount',
        },
        {
            label: '已提现',
            prop: 'withdrawnAmount',
        },
        // {
        //     label: '总余额',
        //     prop: 'totalBalance',
        // },

    ],
    searchBtns: [
        {
            label: '导出',
            func: (parmas) => {
				console.log("TCL: parmas", parmas)
                try {
                    proxy.download("core/volunteer/account/export/VolunteerAccountList", {
                        ...parmas
                    }, `钱包管理_${new Date().getTime()}.xlsx`);
                } catch (error) {
				console.log("TCL: error", error)
                }
            },
            key: 'export',
            type: 'primary'
        },
    ],
    tableApi: list,//接口地址
    isSelect: true,//是否勾选
    scopeBtns: [],

})

const selectList = ref([]);

//总金额
const totalMoney = computed(() => {
    let total = 0;
    selectList.value.forEach((item) => {
        total += Number(item.totalAmount);
    });
    return total;
});
//可提现金额
const balanceMoney = computed(() => {
    let total = 0;
    selectList.value.forEach((item) => {
        total += Number(item.balance);
    });
    return total;
});
const selectChange = (rows) => {
console.log("TCL: selectChange -> rows", rows)
selectList.value = rows;
}

provide('selectChange',selectChange)

const cardList = [
    {
        name: '总金额',
        key: 'totalAmount'
    },
    {
        name: '可提现',
        key: 'balance'
    },
    {
        name: '已提现',
        key: 'withdrawAmount'
    },
    {
        name: '提现中',
        key: 'beBalance'
    },
    {
        name: '待入账',
        key: 'orderFrozenBalance'
    }
]

const data = ref({
    totalAmount: 0.0,
    balance: 0.0,
    beBalance: 0.0,
    withdrawAmount: 0.0,
    waitAmount: 0.0,
    orderFrozenBalance: 0.0
})

const getWalletTotal = async () => {
    try {
        const res = await walletTotal()
        data.value = res.data
    } catch (error) {
        console.log("TCL: getWalletTotal -> error", error)

    }
}

getWalletTotal()

</script>

<style lang='scss' scoped>
.card-box {
    padding: 20px 20px 0;

    .card-title {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>