ox_zhiNengZhuShou/src/subpackage/wallet/pages/douyin_withdraw/index.vue

<template>
    <view class="douyin-withdraw">
        <image class="dw-icon" mode="aspect" src="/subpackage/wallet/static/images/dy_logo.png"></image>
        <view class="dw-tip">可提现资金</view>
        <view class="dw-price">
            <text class="dp-unit">¥</text>{{ balance }}
        </view>
        <view class="dw-btn" @click="applyBtn">申请提现</view>
        <view class="dw-link">
            <text class="dl-txt" @click="toDetailBtn">提现明细</text>
            <image class="dl-icon" mode="aspect" src="/subpackage/wallet/static/images/arrow_b2.png"></image>
        </view>

        <dy-withdraw-apply
            ref="dwaModal"
            :balance="balance"
            @click:confirm="dyConfirmExtract"
        ></dy-withdraw-apply>

        <wallet-modal-success 
            title="申请成功"
            ref="walletModalSuccess"
            @click:button="toDetailBtn"
        >
            <template v-slot:tip>平台已收到您的提现请求，预计在3~7个工作日内进行处理，请耐心等待！</template>
            <template v-slot:btn>提现记录</template>
        </wallet-modal-success>
    </view>
</template>

<script>
import dyWithdrawApply from '../../components/dy_withdraw_apply.vue';
import wallet_modal_success from '../../components/wallet_modal_success.vue';
import { WALLET_API } from '../../js/api';
import servers from '../../js/server';
import { routeTo, showLoad, hideLoad, showNone } from '@/utils/util';
export default {
    components: {
        'dy-withdraw-apply': dyWithdrawApply,
        'wallet-modal-success': wallet_modal_success
    },
    data(){
        return {
            brand_id: '',
            balance: 0,
        }
    },
    onLoad(options){
        this.brand_id = options.brand_id ?? '';
        this.getDouyinWalletBalance(options.brand_id);
    },
    methods: {
        // 
        toDetailBtn(){
            routeTo(`/subpackage/wallet/pages/douyin_withdraw/record?brand_id=${this.brand_id}`, 'nT');
        },
        // 申请提现
        applyBtn(){
            this.$refs.dwaModal.alert();
        },
        /**
         * http://api.ouxuan.net:61080/project/11/interface/api/2195
         * @param {String} brand_id 品牌id
         * */ 
        getDouyinWalletBalance(brand_id){
            showLoad();
            servers.get({
                url: WALLET_API.withdrawalOfDouyinOrg_totalAmount,
                data: {
                    brand_id: brand_id
                },
                failMsg: '获取钱包余额失败'
            })
            .then(res=>{
                hideLoad();
                let _balance = +res.total_amount ?? 0;
                this.balance = _balance * 0.01;
            })
            .catch(hideLoad)
        },
        // 提现申请确认
        dyConfirmExtract(e){
            this.douyinWalletExtract({
                brand_id: this.brand_id,
                ...e,
                amount: e.amount * 100
            })
        },
        /**
         * http://api.ouxuan.net:61080/project/11/interface/api/2209
         * @param {String} brand_id 品牌id
         * @param {Number} amount 提现金额
         * @param {String} account 账户
         * @param {String} account_name_of_bank 账户名
         * @param {String} bank_name // 银行名
         * @param {String} bank_address // 银行地址
         * @param {String} mobile 手机号
         * @param {Number} status // 0未处理，1已处理
         * */ 
        douyinWalletExtract({
            brand_id,
            amount,
            account,
            account_name_of_bank,
            bank_name,
            bank_address,
            mobile,
            status = 0
        }){
            showLoad();
            servers.post({
                url: WALLET_API.withdrawalOfDouyinOrg_edit,
                data: {
                    brand_id, 
                    amount,
                    account,
                    account_name_of_bank,
                    bank_name,
                    bank_address,
                    mobile,
                    status,
                },
                failMsg: '申请提现失败'
            })
            .then(res=>{
                hideLoad();
                this.$refs.walletModalSuccess.alert();
                setTimeout(_=>{
                    this.getDouyinWalletBalance(brand_id);
                }, 1200);
            })
            .catch(hideLoad)
        },
    }

}
</script>

<style lang="scss">
    .douyin-withdraw{
        padding-top: 88upx;
        .dw-icon{
            margin: 0 auto;
            display: block;
            width: 96upx;
            height: 96upx;
            background: #000;
            border-radius: 24upx;
        }
        .dw-tip{
            margin-top: 62upx;
            text-align: center;
            @include flcw(28upx, 40upx, #000000);
        }
        .dw-price{
            padding: 0 20upx;
            margin-top: 20upx;
            text-align: center;
            @include flcw(84upx, 96upx, #000000, 700);
            @include tHide(1);
            .dp-unit{
                font-size: 64upx;
            }
        }
        .dw-btn{
            margin: 154upx auto 0;
            width: 300upx;
            border-radius: 10upx;
            text-align: center;
            background: #FF873D;
            @include flcw(32upx, 112upx, #fff);
        }
        .dw-link{
            margin-top: 88upx;
            @include flcw(28upx, 40upx, #9A9A9D);
            @include ctf(center);
            .dl-icon{
                flex-shrink: 0;
                margin-left: 6upx;
                width: 28upx;
                height: 28upx;
                
            }
        }
    }
</style>