ch-xymy-h5/src/views/User/Wallet/Balance.vue

<template>
    <BasePage>
        <div class="balance_page">
            <div class="balance_page__top">
                <div class="balance_page__line">
                    <b class="balance_page__title">
                        当前余额 <van-icon name="question-o" @click.stop="showTerm = true"></van-icon>
                    </b>

                    <div v-if="!hide" class="balance_page__record_link" @click="$navigate('CashoutRecord')">
                        <img src="/img/icon-balance-co.png" alt="">
                        <span>提现记录</span>
                        <van-icon name="arrow"></van-icon>
                    </div>
                </div>

                <div class="balance_page__line">
                    <b class="balance_page__num">
                        {{ data.total.totalsum?.toFixed(2) }}
                    </b>

                    <button v-if="!hide" class="r" @click="toCashout">
                        提现
                    </button>
                </div>

                <div class="balance_page__line">
                    <div class="balance_page__total">
                        累计收入:
                        <p>{{ data.total?.positivesum?.toFixed(2) }}</p>
                    </div>
                    <div class="r balance_page__total">
                        累计支出:
                        <p>{{ Math.abs((data.total?.negativesum))?.toFixed(2) }}</p>
                    </div>
                </div>
            </div>

            <div class="balance_page__bottom">
                <div class="balance_page__date_box">
                    <div class="balance_page__date" @click="showDate = true">
                        {{ date[0] }}-
                        <p>{{ (parseInt(date[1]) < 10) ? `0${parseInt(date[1])}` : parseInt(date[1]) }}</p>
                                <img src="/img/icon-down.png" alt="">
                    </div>

                    <div class="balance_page__stat">
                        <div>
                            <span>收入</span>
                            <p> {{ data.total?.positivesumcurrent?.toFixed(2) }}</p>
                        </div>

                        <div>
                            <span>支出</span>
                            <p> {{ Math.abs((data.total?.negativesumcurrent))?.toFixed(2) }}</p>
                        </div>
                    </div>
                </div>

                <!-- <van-tabs v-model:active="active" type="card" class="tabs" color="#374c6d" @change="changeTabs">
                    <van-tab title="全部"></van-tab>
                    <van-tab title="礼包" name="31"></van-tab>
                    <van-tab title="商家" name="34"></van-tab>
                    <van-tab title="商城" name="33"></van-tab>
                    <van-tab title="分成" name="32"></van-tab>
                </van-tabs> -->

                <BaseList ref="baselist" url="/v1/client/DUsermoneysClient" class="balance_page__list"
                    :params="searchParams">
                    <template #default="{ item }">
                        <div class="balance_page__item" :key="item.TradeCode">
                            <table width="100%" cellpadding="0" cellspacing="0">
                                <tbody>
                                    <tr>
                                        <td>
                                            <div style="margin-bottom: 2vw;">{{ $route.meta.title }}：{{
                                                item.balance?.toFixed(2) }}</div>
                                        </td>
                                        <td style="text-align: right;">
                                            <van-tag
                                                :class="item.nums > 0 ? 'balance_page__tag--in' : 'balance_page__tag--out'"
                                                style="margin-bottom: 2vw;">
                                                {{ item.nums > 0 ? "增加：+" : "减少："
                                                }}{{ (item.nums).toFixed(2) }}
                                            </van-tag>
                                        </td>
                                    </tr>
                                    <tr v-if="item.remark">
                                        <td colspan="2">
                                            <div style="line-height: 5vw;word-break: break-all; color: #999">
                                                备注：{{ item.remark }}
                                            </div>
                                        </td>
                                    </tr>
                                    <tr v-if="item.ordernum">
                                        <td colspan="2">
                                            <div
                                                style="line-height: 5vw;word-break: break-all;color: #999;display: inline;">
                                                订单：{{ item.ordernum }}
                                            </div>
                                            <u style="color: #535353; margin-left: 1.667vw"
                                                @click="$copyText(item.ordernum); $showSuccessToast('复制成功')">复制</u>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            <div
                                                style="line-height: 5vw;word-break: break-all;color: #999;display: inline;">
                                                时间：{{ $formatGMT(item.addtime, 'yyyy-MM-dd HH:mm:ss') }}
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </template>
                </BaseList>
            </div>
        </div>

        <van-popup v-model:show="showDate" position="bottom">
            <van-date-picker v-model="currentDate" title="选择年月" :columns-type="['year', 'month']" @confirm="onconfirm"
                @cancel="showDate = false" />
        </van-popup>
        <van-action-sheet v-model:show="showTerm" safe-area-inset-bottom :title="`${this.$route.meta.title}说明`"
            closeable style="min-height: 50%; padding: 0px 10px 10px 10px">
            <div class="w100 html" v-html="$datadic.getContent('code_yesm')" />
        </van-action-sheet>

    </BasePage>
</template>
<script>
export default {
    name: 'Balance',
    mounted() {
        this.init();
    },
    data() {
        return {
            active: 0,
            data: {
                total: {
                    Balance: 8888.88,
                    TotalBalance: 20000.00,
                    MonthBalance: 5200.00,
                    MonthReduceBalance: 1311.12,
                },
                Term: '余额说明：余额可用于提现、购物等。',
            },
            date: [`${new Date().getFullYear()}`, `${new Date().getMonth() + 1}`],
            currentDate: [`${new Date().getFullYear()}`, `${new Date().getMonth() + 1}`],
            show: false,
            showDate: false,
            searchParams: {
                type: '',
                year: new Date().getFullYear(),
                month: new Date().getMonth() + 1,
            },
            loading: false,
            showTerm: false,
            list: [],
            isVIP: '',
            hide: false,
        }
    },
    methods: {
        init() {
            this.$get('/v1/client/DUsermoneysClient/statistics', this.searchParams).then(data => {
                this.data.total = data.data;
            }).catch(err => {
                this.$showFailToast(err.message || '加载失败');
            })
            this.$get('/v1/client/DUsersClient').then(data => {
                this.isVIP = data.data.userlevelname;

            })
            // this.$get('/v1/client/DUsermoneysClient/select').then(res => {
            //     // console.log(res.data);
            // })
        },
        toCashout() {
            // if (this.isVIP === '会员') {
            //     this.$showFailToast('您还未购买礼包产品成为VIP，暂不能提现！')
            //     setTimeout(() => {
            //         // this.$navigate('/My')
            //     }, 1500);
            //     return
            // }
            this.$navigate('Cashout');
        },
        onconfirm(value) {
            this.date = this.currentDate;
            this.showDate = false;
            this.searchParams.year = Number.parseInt(this.currentDate[0]);
            this.searchParams.month = Number.parseInt(this.currentDate[1]);
            this.init();
            this.$refs.baselist.refresh()
        },
        changeTabs(e) {
            this.searchParams.type = e || '';
            // this.$refs.baselist.refresh();
        },
        onShowTerm() {
            this.showTerm = true;
        }
    }
}
</script>