change dy withdraw apply modal to page

src/pages.json

@@ -728,6 +728,12 @@
 					}
 				},
 				{
+					"path": "pages/douyin_withdraw/apply",
+					"style" : {
+						"navigationBarTitleText": "申请提现"
+					}
+				},
+				{
 					"path": "pages/douyin_withdraw/record",
 					"style" : {
 						"navigationBarTitleText": "提现记录"

src/pages/index/index.vue

@@ -225,7 +225,7 @@
 						brandInfo: indexData&&indexData.brand ? indexData.brand : null,
 					});
 				}
-				if(tabInfo.id === 10)return util.routeTo(tabInfo.path + `?brand_id=${indexData.brand.id}`,'nT');
+				if(tabInfo.id === 10 || tabInfo.id === 11)return util.routeTo(tabInfo.path + `?brand_id=${indexData.brand.id}`,'nT');
 
 				util.routeTo(tabInfo.path,'nT');
 			},

src/subpackage/wallet/components/dy_withdraw_apply.vue

@@ -1,243 +0,0 @@
-<template>
-    <wallet-modal title="申请提现" :show="show" @click:close="hide">
-        <view class="dy-withdraw-apply">
-            <view class="dwa-balance">
-                <text class="dwab-txt">可提现资金：</text>
-                {{ balance }}元
-            </view>
-            <scroll-view class="dwa-scroll" scroll-y>
-                <view class="dwa-opt-line" :key="i">
-                    <view class="dol-name">*提现金额</view>
-                    <input type="digit" class="dol-ipt" placeholder="请输入提现金额" v-model="info.amount">
-                </view>
-                <view class="dwa-opt-line" :key="i">
-                    <view class="dol-name">*账户名称</view>
-                    <input type="text" class="dol-ipt" placeholder="请输入账户名称" v-model="info.account_name_of_bank">
-                </view>
-                <view class="dwa-opt-line" :key="i">
-                    <view class="dol-name">*银行卡号</view>
-                    <input type="number" class="dol-ipt" placeholder="请输入银行卡号" v-model="info.account">
-                </view>
-                <view class="dwa-opt-line">
-                    <view class="dol-name">*银行名称</view>
-                    <picker class="dol-picker" :range="banks" @change="bankNameChange">
-                        <view class="dp-frame">
-                            <input type="text" disabled class="df-ipt" placeholder="请选择" v-model="info.bank_name">
-                            <image class="df-icon" mode="aspect" src="/subpackage/wallet/static/images/arrow_c33.png"></image>
-                        </view>
-                    </picker>
-                </view>
-                <view class="dwa-opt-line" :key="i">
-                    <view class="dol-name">*支行名称</view>
-                    <input type="text" class="dol-ipt" placeholder="请输入支行名称" v-model="info.bank_address">
-                </view>
-                <view class="dwa-opt-line" :key="i">
-                    <view class="dol-name">联系电话</view>
-                    <input type="number" class="dol-ipt" placeholder="请输入联系电话" v-model="info.mobile">
-                </view>
-                
-            </scroll-view>
-            
-            <view class="dwa-tip">
-                <view class="dt-tit">温馨提示</view>
-                <view class="dt-desc">1、账户请预留一定的余额，避免余额不足导致退款失败！</view>
-                <view class="dt-desc">2、提现申请成功提交后，预计在3~7个工作日内进行处理。</view>
-            </view>
-            <view class="dwa-btn">
-                <wm-button green @click="confirmExtract">确认提现</wm-button>
-            </view>
-        </view>
-    </wallet-modal>
-</template>
-
-<script>
-import walletModal from './wallet_modal.vue';
-import wmButton from './wm_button.vue';
-import banks from '../js/bank';
-import { showModal, showNone } from '@/utils/util';
-export default {
-    components: {
-        'wallet-modal': walletModal,
-        'wm-button': wmButton
-    },
-    props: {
-        balance: {
-            type: Number,
-            default: 0
-        }
-    },
-    data(){
-        return {
-            banks,
-            show: false,
-            info: {
-                amount: '',
-                account_name_of_bank: '',
-                account: '',
-                bank_name: '',
-                bank_address: '',
-                mobile: ''
-            }
-        }
-    },
-    
-    methods: {
-        bankNameChange(e){
-            let { value } = e.detail;
-            this.info.bank_name = this.banks[value];
-        },
-        alert(){
-            // this.getStorageAndSet();
-            this.show = true;
-            if(this.isEmptyInfo())this.getStorageAndSet();
-        },
-        hide(){
-            this.show = false
-        },
-        getStorageAndSet(){
-            uni.getStorage({
-                key: 'dyRecentWithdrawApplyInfo',
-                success: res=>{
-                    showModal({
-                        content: '是否自动填充上次提现信息？',
-                        showCancel: true,
-                        success: mRes=>{
-                            if(mRes.confirm){
-                                this.info = res.data;
-                            }
-                        }
-                    })
-                }
-            })
-        },
-        setInfoToStorage(){
-            uni.setStorage({
-                key: 'dyRecentWithdrawApplyInfo',
-                data: this.info
-            });
-        },
-        confirmExtract(){
-            if(!this.infoCheck())return;
-            this.setInfoToStorage();
-            
-            showModal({
-                content: '是否确认提现？',
-                showCancel: true,
-                success: res=>{
-                    if(res.confirm){
-                        this.hide();
-                        this.$emit(
-                            'click:confirm', 
-                            Object.assign(this.info, { amount: +this.info.amount })
-                        );
-                    }
-                }
-            })
-            
-        },
-        isEmptyInfo(){
-            let _infoValues = Object.values(this.info);
-            return _infoValues.every(item=>item === '');
-        },
-        infoCheck(){
-            let { amount, account_name_of_bank, account, bank_name, bank_address, mobile } = this.info;
-            let _amount = +(amount ?? 0);
-            if(_amount <= 0){
-                showNone('提现金额不正确');
-                return false
-            }
-            if(_amount > this.balance){
-                showNone('提现金额不能大于可提现金额');
-                return false
-            }
-            if(account_name_of_bank === ''){
-                showNone('账户名称不能为空');
-                return false
-            }
-            if(account === ''){
-                showNone('银行卡号不能为空');
-                return false
-            }
-            if(bank_name === ''){
-                showNone('银行名称不能为空');
-                return false
-            }
-            if(bank_address === ''){
-                showNone('支行名称不能为空');
-                return false
-            }
-            return true
-        }
-    }
-}
-</script>
-
-<style lang="scss">
-    .dy-withdraw-apply{
-        padding: 36upx 50upx 0upx;
-        .dwa-balance{
-            @include flcw(28upx, 48upx, $mColor);
-            @include tHide;
-            .dwab-txt{
-                color: #1A1A1A;
-            }
-        }
-        .dwa-scroll{
-            margin-top: 20upx;
-            height: 440upx;
-        }
-        .dwa-opt-line{
-            @include ctf(space-between);
-            &+.dwa-opt-line{
-                margin-top: 20upx;
-            }
-            .dol-name{
-                @include flcw(24upx, 34upx, #1A1A1A);
-            }
-            .dol-ipt{
-                box-sizing: border-box;
-                flex-grow: 0;
-                width: 392upx;
-                height: 108upx;
-                padding: 0 20upx;
-                border-radius: 10upx;
-                background: #F2F2F7;
-                @include flcw(24upx, 34upx, #1A1A1A);
-            }
-            .dol-picker{
-                flex-shrink: 0;
-                .dp-frame{
-                    width: 392upx;
-                    height: 108upx;
-                    padding: 0 20upx;
-                    border-radius: 10upx;
-                    background: #F2F2F7;
-                    @include ctf(space-between);
-                    .df-ipt{
-                        flex-grow: 1;
-                        height: 100%;
-                        @include flcw(24upx, 34upx, #1A1A1A);
-                    }
-                    .df-icon{
-                        flex-shrink: 0;
-                        width: 20upx;
-                        height: 20upx;
-                    }
-                }
-            }
-        }
-        .dwa-tip{
-            margin-top: 18upx;
-            .dt-tit{
-                @include flcw(24upx, 44upx, #9A9A9D);
-            }
-            .dt-desc{
-                @include flcw(24upx, 44upx, #1A1A1A);
-            }
-        }
-        .dwa-btn{
-            margin-top: 62upx;
-            @include ctf(center);
-        }
-    }
-</style>

src/subpackage/wallet/components/wallet_modal.vue

@@ -36,6 +36,7 @@ export default {
         bottom: 0;
         right: 0;
         background: rgba($color: #000000, $alpha: .5);
+        z-index: 10;
         .wm-content{
             position: absolute;
             left: 50%;

src/subpackage/wallet/pages/douyin_withdraw/apply.vue

@@ -0,0 +1,333 @@
+<template>
+    <view class="dy-withdraw-apply">
+        <view class="dwa-balance">
+            <text class="dwab-txt">可提现资金：</text>
+            {{ balance }}元
+        </view>
+        <view class="dwa-scroll">
+            <view class="dwa-opt-line" :key="i">
+                <view class="dol-name">*提现金额</view>
+                <input type="digit" class="dol-ipt" placeholder="请输入提现金额" v-model="info.amount">
+            </view>
+            <view class="dwa-opt-line" :key="i">
+                <view class="dol-name">*账户名称</view>
+                <input type="text" class="dol-ipt" placeholder="请输入账户名称" v-model="info.account_name_of_bank">
+            </view>
+            <view class="dwa-opt-line" :key="i">
+                <view class="dol-name">*银行卡号</view>
+                <input type="number" class="dol-ipt" placeholder="请输入银行卡号" v-model="info.account">
+            </view>
+            <view class="dwa-opt-line">
+                <view class="dol-name">*银行名称</view>
+                <picker class="dol-picker" :range="banks" @change="bankNameChange">
+                    <view class="dp-frame">
+                        <input type="text" disabled class="df-ipt" placeholder="请选择" v-model="info.bank_name">
+                        <image class="df-icon" mode="aspect" src="/subpackage/wallet/static/images/arrow_c33.png"></image>
+                    </view>
+                </picker>
+            </view>
+            <view class="dwa-opt-line" :key="i">
+                <view class="dol-name">*支行名称</view>
+                <input type="text" class="dol-ipt" placeholder="请输入支行名称" v-model="info.bank_address">
+            </view>
+            <view class="dwa-opt-line" :key="i">
+                <view class="dol-name">联系电话</view>
+                <input maxlength="11" type="number" class="dol-ipt" placeholder="请输入联系电话" v-model="info.mobile">
+            </view>
+            
+        </view>
+        
+        <view class="dwa-tip">
+            <view class="dt-tit">温馨提示</view>
+            <view class="dt-desc">1、账户请预留一定的余额，避免余额不足导致退款失败！</view>
+            <view class="dt-desc">2、提现申请成功提交后，预计在3~7个工作日内进行处理。</view>
+        </view>
+        <view class="dwa-btn">
+            <wm-button green @click="confirmExtract">确认提现</wm-button>
+        </view>
+
+        <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 walletModal from '../../components/wallet_modal.vue';
+import wmButton from '../../components/wm_button.vue';
+import wallet_modal_success from '../../components/wallet_modal_success.vue';
+import banks from '../../js/bank';
+import { WALLET_API } from '../../js/api';
+import servers from '../../js/server';
+import { routeTo, showModal, showNone, showLoad, hideLoad } from '@/utils/util';
+export default {
+    components: {
+        'wallet-modal': walletModal,
+        'wm-button': wmButton,
+        'wallet-modal-success': wallet_modal_success
+    },
+    data(){
+        return {
+            balance: 0,
+            banks,
+            brand_id: '',
+            // show: false,
+            info: {
+                amount: '',
+                account_name_of_bank: '',
+                account: '',
+                bank_name: '',
+                bank_address: '',
+                mobile: ''
+            }
+        }
+    },
+    async onLoad(options){
+        let _bid =  options.brand_id || '';
+        this.brand_id = _bid;
+        await this.getDouyinWalletBalance(_bid);
+        if(this.isEmptyInfo())this.getStorageAndSet();
+    },
+    methods: {
+        toDetailBtn(){
+            routeTo(`/subpackage/wallet/pages/douyin_withdraw/record?brand_id=${this.brand_id}`, 'nT');
+        },
+        bankNameChange(e){
+            let { value } = e.detail;
+            this.info.bank_name = this.banks[value];
+        },
+        // alert(){
+        //     // this.getStorageAndSet();
+        //     this.show = true;
+        //     if(this.isEmptyInfo())this.getStorageAndSet();
+        // },
+        // hide(){
+        //     this.show = false
+        // },
+        getStorageAndSet(){
+            uni.getStorage({
+                key: 'dyRecentWithdrawApplyInfo',
+                success: res=>{
+                    showModal({
+                        content: '是否自动填充上次提现信息？',
+                        showCancel: true,
+                        success: mRes=>{
+                            if(mRes.confirm){
+                                this.info = res.data;
+                            }
+                        }
+                    })
+                }
+            })
+        },
+        setInfoToStorage(){
+            uni.setStorage({
+                key: 'dyRecentWithdrawApplyInfo',
+                data: this.info
+            });
+        },
+        confirmExtract(){
+            if(!this.infoCheck())return;
+            this.setInfoToStorage();
+            
+            showModal({
+                content: '是否确认提现？',
+                showCancel: true,
+                success: res=>{
+                    if(res.confirm){
+                        let _amount = this.info.amount || 0;
+                        this.dyConfirmExtract({
+                            ...this.info,
+                            amount: (+_amount) * 100
+                        })
+                        
+                    }
+                }
+            })
+            
+        },
+        // 提现申请确认
+        dyConfirmExtract(e){
+            this.douyinWalletExtract({
+                brand_id: this.brand_id,
+                ...e,
+            })
+        },
+        isEmptyInfo(){
+            let _infoValues = Object.values(this.info);
+            return _infoValues.every(item=>item === '');
+        },
+        infoCheck(){
+            let { amount, account_name_of_bank, account, bank_name, bank_address, mobile } = this.info;
+            let _amount = +(amount ?? 0);
+            if(_amount <= 0){
+                showNone('提现金额不正确');
+                return false
+            }
+            if(_amount > this.balance){
+                showNone('提现金额不能大于可提现金额');
+                return false
+            }
+            if(account_name_of_bank === ''){
+                showNone('账户名称不能为空');
+                return false
+            }
+            if(account === ''){
+                showNone('银行卡号不能为空');
+                return false
+            }
+            if(bank_name === ''){
+                showNone('银行名称不能为空');
+                return false
+            }
+            if(bank_address === ''){
+                showNone('支行名称不能为空');
+                return false
+            }
+            return true
+        },
+        /**
+         * http://api.ouxuan.net:61080/project/11/interface/api/2195
+         * @param {String} brand_id 品牌id
+         * */ 
+        getDouyinWalletBalance(brand_id){
+            showLoad();
+            return servers.get({
+                url: WALLET_API.withdrawalOfDouyinOrg_totalAmount,
+                data: {
+                    brand_id: brand_id
+                },
+                failMsg: '获取钱包余额失败'
+            })
+            .then(res=>{
+                hideLoad();
+                let _balance = +res.total_amount ?? 0;
+                return this.balance = _balance * 0.01;
+            })
+            .catch(hideLoad)
+        },
+        /**
+         * 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">
+    page{
+        background: #fff;
+    }
+    .dy-withdraw-apply{
+        padding: 36upx 50upx 20upx;
+        .dwa-balance{
+            @include flcw(28upx, 48upx, $mColor);
+            @include tHide;
+            .dwab-txt{
+                color: #1A1A1A;
+            }
+        }
+        .dwa-scroll{
+            margin-top: 20upx;
+        }
+        .dwa-opt-line{
+            @include ctf(space-between);
+            &+.dwa-opt-line{
+                margin-top: 20upx;
+            }
+            .dol-name{
+                @include flcw(24upx, 34upx, #1A1A1A);
+            }
+            .dol-ipt{
+                box-sizing: border-box;
+                flex-grow: 0;
+                width: 492upx;
+                height: 108upx;
+                padding: 0 20upx;
+                border-radius: 10upx;
+                background: #F2F2F7;
+                @include flcw(24upx, 34upx, #1A1A1A);
+            }
+            .dol-picker{
+                flex-shrink: 0;
+                .dp-frame{
+                    width: 492upx;
+                    height: 108upx;
+                    padding: 0 20upx;
+                    border-radius: 10upx;
+                    background: #F2F2F7;
+                    @include ctf(space-between);
+                    .df-ipt{
+                        flex-grow: 1;
+                        height: 100%;
+                        @include flcw(24upx, 34upx, #1A1A1A);
+                    }
+                    .df-icon{
+                        flex-shrink: 0;
+                        width: 20upx;
+                        height: 20upx;
+                    }
+                }
+            }
+        }
+        .dwa-tip{
+            margin-top: 18upx;
+            .dt-tit{
+                @include flcw(24upx, 44upx, #9A9A9D);
+            }
+            .dt-desc{
+                @include flcw(24upx, 44upx, #1A1A1A);
+            }
+        }
+        .dwa-btn{
+            margin-top: 62upx;
+            @include ctf(center);
+        }
+    }
+</style>

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

@@ -10,35 +10,14 @@
             <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';
+import { routeTo, showLoad, hideLoad } from '@/utils/util';
 export default {
-    components: {
-        'dy-withdraw-apply': dyWithdrawApply,
-        'wallet-modal-success': wallet_modal_success
-    },
     data(){
         return {
             brand_id: '',
@@ -46,8 +25,10 @@ export default {
         }
     },
     onLoad(options){
-        this.brand_id = options.brand_id ?? '';
-        this.getDouyinWalletBalance(options.brand_id);
+        this.brand_id = options.brand_id || '';
+    },
+    onShow(){
+        this.getDouyinWalletBalance(this.brand_id);
     },
     methods: {
         // 
@@ -56,7 +37,7 @@ export default {
         },
         // 申请提现
         applyBtn(){
-            this.$refs.dwaModal.alert();
+            routeTo(`/subpackage/wallet/pages/douyin_withdraw/apply?brand_id=${this.brand_id}`, 'nT');
         },
         /**
          * http://api.ouxuan.net:61080/project/11/interface/api/2195
@@ -78,59 +59,6 @@ export default {
             })
             .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)
-        },
     }
 
 }