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

<template>
    <BasePage title="余额提现">
        <van-cell-group>
            <van-cell is-link class="cashout_page__account" @click="showCard = true;">
                <template #title>
                    <div class="cashout_page__account_box">
                        <span class="cashout_page__title">提现账户</span>
                        <div class="cashout_page__account_info">
                            <div v-if="card" class="cashout_page__card">
                                <img :src="card.bankspname === '支付宝' ? '/img/icon-wallet-alipay.png' : '/img/icon-wallet-bankcard.png'"
                                    height="24" width="24" style="object-fit: cover;" />
                                <span class="cashout_page__card_code">{{ card.realname }}({{ card.bankcardnumber
                                    }})</span>
                            </div>
                            <span v-else class="cashout_page__card">请选择到账账户</span>
                        </div>
                    </div>
                </template>
            </van-cell>
        </van-cell-group>
        <div class="cashout_page__amount_section">
            <span class="cashout_page__title">提现金额</span>
            <div class="cashout_page__amount_field">
                <span class="cashout_page__prefix">￥</span>
                <van-field v-model="form.amount" type="number" />
                <a style="color: var(--van-danger-color);white-space: nowrap;font-size: 3.733vw;"
                    @click.stop="form.amount = wallet.Balance">全部提现</a>
            </div>
            <span class="cashout_page__desc">当前余额：{{ wallet.Balance }}</span>
        </div>
        <div class="cashout_page__remark">
            <p>注：</p>
            <p>1、提现手续费{{ (cashoutConfig.wdfeeratio * 100)?.toFixed(2) }}%</p>
            <p>2、最低提现金额{{ cashoutConfig.wdnumsmin?.toFixed(2) }}元</p>
            <p>3、提现后{{ cashoutConfig.reviewdays }}个工作日内审核发放</p>
        </div>
        <van-button type="danger" block round @click="cashout"
            style="margin: 0 6.667vw; width: calc(100% - 13.333vw);">提现</van-button>

        <van-action-sheet v-model:show="showCard" safe-area-inset-bottom style="min-height: 50%" title="选择提现账户">
            <van-cell-group>
                <BaseList class="b_l_w" ref="BaseList" url="/v1/client/DUserbankcardsClient"
                    :parseData="res => res.data">
                    <template v-slot="{ item }">
                        <van-cell class="cashout_page__card_cell" is-link @click="selectCard(item)">
                            <template #title>
                                <div class="cashout_page__card">
                                    <img :src="item.bankspname === '支付宝' ? '/img/icon-wallet-alipay.png' : '/img/icon-wallet-bankcard.png'"
                                        height="30" width="30" style="object-fit: cover;" />
                                    <span class="cashout_page__card_code">{{ item.realname }}({{ item.bankcardnumber
                                        }})</span>
                                </div>
                            </template>
                        </van-cell>
                    </template>
                </BaseList>
                <van-cell style="position: fixed; bottom: 3.333vw;" is-link title="新增提现账户" icon="peer-pay"
                    @click="$router.push('/CashoutAccount')" />
            </van-cell-group>
        </van-action-sheet>
    </BasePage>
</template>

<script>
export default {
    name: 'Cashout',
    mounted() {
        this.init();
    },
    data() {
        return {
            form: {
                amount: 0,
                bankcardid: ''
            },
            cashoutConfig: {
                CommissionRate: 0,
                BaseCash: 0,
                Cycle: 1
            },
            wallet: { Balance: 0 },
            showCard: false,
            card: null,
        }
    },
    methods: {
        init() {
            Promise.all([
                this.$get('/v1/client/DUsersClient').then(data => {
                    this.wallet.Balance = data.data.zijin;
                }).catch(err => {
                    this.$showFailToast(err.message);
                }),
                this.$get('/v1/client/DUserwithdrawsClient/param').then(res => {
                    this.cashoutConfig = res.data;
                })
            ])


        },
        selectCard(item) {
            this.card = item;
            this.form.bankcardid = item.id;
            this.showCard = false;
        },
        cashout() {
            if (!this.form.bankcardid) {
                this.$showFailToast('请选择到账账户');
                return;
            }
            if (!this.form.amount || this.form.amount < this.cashoutConfig.wdnumsmin) {
                this.$showFailToast(`提现金额必须大于${this.cashoutConfig.wdnumsmin}`);
                return;
            }
            const commission = (this.form.amount * this.cashoutConfig.wdfeeratio).toFixed(2);
            this.$showConfirmDialog({
                title: "提示",
                message: `您本次提现${this.form.amount}元，扣除${this.cashoutConfig.wdfeeratio * 100}%手续费，实际到账${(this.form.amount * (1 - this.cashoutConfig.wdfeeratio)).toFixed(2)}元，是否确认提现？`,
            }).then(() => {
                this.$post('/v1/client/DUserwithdrawsClient', {
                    bankcardid: this.form.bankcardid,
                    amount: this.form.amount,
                }).then(() => {
                    this.$showSuccessToast('提交成功');
                    this.$router.replace('/CashoutRecord');
                }).catch(err => {
                    this.$showFailToast(err.message);
                });
            }).catch(() => { });
        },
    }
}
</script>

<style lang="less">
.cashout_page__account {
    padding: 10.667vw 6.667vw;
    display: flex;
    align-items: center;
    background: #f8f8f8;

    .cashout_page__account_box {
        display: flex;
        align-items: center;

        .cashout_page__card {
            display: flex;
            align-items: center;

            .cashout_page__card_code {
                margin-left: 1.333vw;
                font-size: 3.333vw;
            }
        }

        .cashout_page__title {
            color: #333;
        }

        .cashout_page__account_info {
            margin-left: 6.667vw;
            display: flex;
            flex-direction: column;

            .cashout_page__card {
                color: #000;
            }

            .cashout_page__desc {
                color: #999;
                font-size: 3vw;
            }
        }
    }
}

.cashout_page__amount_section {
    padding: 6.667vw;

    .cashout_page__title {
        font-size: 3.733vw;
        color: #333;
    }

    .cashout_page__amount_field {
        margin: 3.333vw 0;
        display: flex;
        align-items: center;
        padding: 3vw 0;
        border-bottom: 1px solid #f8f8f8;

        .van-cell:after {
            content: none;
        }

        .cashout_page__prefix {
            font-size: 8vw;
            font-weight: bold;
        }

        .van-field {
            display: flex;
            align-items: flex-end;
            padding: unset;
            font-size: 8vw;
        }
    }
}

.cashout_page__card_cell {
    display: flex;
    align-items: center;

    .cashout_page__card {
        display: flex;
        align-items: center;

        .cashout_page__card_code {
            margin-left: 3.333vw;
            font-size: 3.333vw;
        }
    }
}

.cashout_page__remark {
    margin: 0 6.667vw 6.667vw 6.667vw;
}
</style>