yihuo/pages/withdraw/index.vue

<template>
    <page title="提现" ref="pageRef">
        <view class="paddingX12 paddingT18">
            <view class="cu-form-group" @click="gotoCardInfo">
                <view class="">提现至</view>
                <view>
                    {{
                        bankInfo && bankInfo.bankName
                            ? bankInfo.bankName + '尾号(' + bankInfo.bankNum.slice(-4) + ')'
                            : '暂无银行卡信息'
                    }}
                </view>
                <text class="cuIcon-right"></text>
            </view>
        </view>
        <view class="paddingX12 paddingT14">
            <view class="cu-form-group">
                <view class="">可提现金额:{{ balance }}元</view>
                <view></view>
                <div style="color: #5b5b5b" @click.stop="show('wallet_withdraw_gz')">
                    <text class="cuIcon-questionfill"></text>
                    提现规则
                </div>
            </view>
            <view class="cu-form-group">
                <view class="font6 bold left">￥</view>
                <input
                    v-model.trim="money"
                    type="digit"
                    placeholder="请输入提现金额"
                    class="flex1 marginX10 font5"
                />
                <div style="color: #ff9600" @click="money = balance">全部提现</div>
            </view>
            <view class="paddingX12 paddingB14" style="background-color: #fff">
                <view class="" style="color: #333333; background-color: #f8f8f8">
                    <view class="cu-form-group" style="color: #333333; background-color: #f8f8f8">
                        <view class="">税率：</view>

                        <div>{{ rate * 100 }}%</div>
                    </view>
                    <view class="cu-form-group" style="color: #333333; background-color: #f8f8f8">
                        <view class="">实际到账金额：</view>

                        <div>{{ realMoney }}</div>
                    </view>
                </view>
            </view>
        </view>
        <view
            class="marginT18 text-center"
            style="font-size: 24rpx; color: #999999"
            @click="$router.push('withdraw_record')"
        >
            提现记录
        </view>
        <view class="agree" @click="agreeFlag = !agreeFlag">
            <radio :checked="agreeFlag" style="transform: scale(0.6)" color="#8b3dff" />
            <text>
                我已阅读并同意
                <text class="color-theme" @click.stop="show('wallet_withdraw_xy')">
                    《提现协议》
                </text>
            </text>
        </view>

        <view class="paddingX26 paddingT6 radius2" style="background-color: #f6f6f6">
            <cm-button :height="37" @click="apply">确认提现</cm-button>
        </view>
        <rule ref="ruleRef"></rule>
    </page>
</template>

<script>
import resource from '@/utils/resource'
import { throttle } from '@/utils'
import rule from './rule.vue'
    export default {
        components: {
            rule
        },
        data() {
            return {
                resource,
                pre: null,
                balance: null,
                desc: '',
                type: 'ALIPAY',
                money: '',
                idName: null,
                idNum: null,
                accountNo: '',
                bankInfo: null,
                rate: 0,
                agreeFlag: false
            }
        },
        computed: {
            realMoney() {
                let val = this.money - this.money * this.rate
                return val
            }
        },
        onLoad(option) {
            this.type = option.type || 'ALIPAY'
        },
        onShow() {
            this.getPre()
            this.getWithdraw()
            this.getRate()
        },
        methods: {
            async getPre() {
                const res = await this.$service.wallet.withdrawPre(this.type, 'MAGIC_PROMOTION')

                if (res) {
                    if (res.account && res.account.idName) {
                        this.idName = res.account.idName
                        this.idNum = res.account.idNum
                        this.accountNo = res.account.accountNo
                    }
                    this.balance = res.avaliableWithdraw.amount
                    this.desc = res.avaliableWithdraw.desc
                }
            },
            async getRate() {
                const res = await this.$service.user.getParamConfig('wallet_withdraw_rate')
                this.rate = res.data
            },
            async getWithdraw() {
                const res = await this.$service.wallet.getWithdraw()
                this.bankInfo = res
            },
            apply() {
                if (!this.agreeFlag) {
                    this.$message.warn('请您先阅读并同意提现协议')
                    return
                }
                if (!this.bankInfo.bankNum) {
                    this.$message.warn('请新增银行卡信息')
                    return
                }

                if (!this.money || this.money > this.balance) {
                    this.$message.warn('请输入正确的金额')
                    return
                }
                throttle.call(() => {
                    this.realApply()
                })
            },
            async realApply() {
                const res = await this.$service.wallet.withdraw({
                    money: this.money,
                    ...this.bankInfo,
                    walletType:'MAGIC_PROMOTION',
                    accountType:'3'
                })
                if (res) {
                    this.$router.push('withdraw_record')
                    this.money = ''
                }
            },
            gotoCardInfo() {
                this.$router.push('cardInfo')
            },
            show(type) {
                console.log(type)
                this.$refs.ruleRef.show(type)
            }
        }
    }
</script>
<style>
    page {
        background: #fff;
    }
</style>
<style lang="scss" scoped>
    .input-wrapper {
        width: 100%;
        height: 104rpx;
        border-radius: 16rpx;
        padding: 0 15rpx;
        .left {
            width: 160rpx;
        }
    }
    .un-check {
        width: 36rpx;
        height: 36rpx;
        border: 2rpx solid $color-theme;
        border-radius: 4rpx;
    }
    .check {
        width: 36rpx;
        height: 36rpx;
    }
    .cu-form-group {
        border-top: none;
    }
    .agree {
        text-align: center;
        font-size: 24rpx;
        margin-top: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>