book-hi/pages-mine/pages/withdraw.vue

<template>
    <view class="withdraw-page">
        <!-- 微信账户信息 -->
        <view class="wechat-account">
            <image class="avatar" :src="userInfo.imgPath || 'https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/logo3.png'" mode="aspectFill"></image>
            <view class="account-info">
                <text class="nickname">{{ userInfo.nickName }}</text>
                <text class="amount">可提现金额：</text>
                <text class="amount-number">¥{{ userInfo.restMoney }}</text>
            </view>
        </view>

        <!-- 提现金额输入 -->
        <view class="amount-input">
            <view class="label">提现金额</view>
            <view class="input-box flex-a">
                <text class="currency">¥</text>
                <u-input class="flex-1" v-model="withdrawAmount" type="digit" :border="false" placeholder="请输入提现金额"
                    @input="onAmountInput" placeholder-style="font-size:50rpx;color:#c1c1c1;font-weight:400"
                    :custom-style="{ fontSize: '50rpx' }" :max="userInfo.restMoney"></u-input>
                <text class="all-btn" @click="withdrawAll">全部提现</text>
            </view>

            <!-- 到账账户 -->
            <view class="flex-a common-gray mt-40">
                <view class="common-text-2">到账账户：</view>
                <!-- #ifdef MP-WEIXIN -->
                <view class="wechat-pay">
                    <image src="../static/wx.png" mode="aspectFit" class="wechat-icon"></image>
                    <text>微信零钱</text>
                </view>
                <!-- #endif -->
                <!-- #ifdef MP-ALIPAY -->
                <view class="wechat-pay">
                    <image src="../static/alipay.png" mode="aspectFit" class="wechat-icon"></image>
                    <text>支付宝</text>
                </view>
                <!-- #endif -->
            </view>

            <!-- 提现说明 -->
            <view class="mt-20 flex-d common-gray">
                <!-- #ifdef MP-WEIXIN -->
                <text class="tip-item">1.用户需微信实名才能申请提现；</text>
                <!-- #endif -->
                <!-- #ifdef MP-ALIPAY -->
                <text class="tip-item">1.用户需支付宝实名才能申请提现；</text>
                <!-- #endif -->
                <text class="tip-item">2.用户单笔提现金额需小于200元；</text>
                <text class="tip-item">3.用户申请提现以后，余额会显示冻结，提现金额最晚会在72小时到账(周末、节假日顺延)</text>
            </view>
        </view>
        <!-- 提现按钮 -->
        <view class="submit-btn mt-60">
            <u-button type="primary" @click="showConfirmDialog">确认提现</u-button>
        </view>

        <!-- 提现确认弹窗 -->
        <common-dialog ref="withdrawDialog" title="温馨提示" cancelText="继续提现" confirmText="购买书籍" @confirm="goToHome" @cancel="submitWithdraw" :customStyle="{ paddingBottom: '20rpx' }">
            <view class="dialog-tip-content">
                <view>亲，余额不支持充值哦！余额购买商城所有商品可享<text class="highlight">8折优惠</text>。</view>
                <view class="mt-10">发起提现后，平台会逐一审核付款，提现金额最晚会在<text class="highlight">72小时到账</text>（周末/节假日顺延）</view>
            </view>
        </common-dialog>
    </view>
</template>

<script>
import CommonDialog from '@/components/common-dialog.vue';

export default {
    components: {
        CommonDialog
    },
    data() {
        return {
            userInfo: {
                avatar: '',
                nickname: '',
                restMoney: ''
            },
            withdrawAmount: '',
        }
    },
    onLoad() {
        this.getUserInfo()
    },
    methods: {
        // 输入金额
        onAmountInput(value) {
            // 限制只能输入两位小数
            if (value.includes('.')) {
                const decimal = value.split('.')[1]
                if (decimal.length > 2) {
                    this.withdrawAmount = Number(value).toFixed(2)
                }
            }
        },
        //获取用户信息
        getUserInfo() {
            uni.$u.http.get('/token/user/withdrawInfo').then(res => {
                if (res.code === 200) {
                    this.userInfo = res.data
                }
            })
        },

        // 全部提现
        withdrawAll() {
            this.withdrawAmount = this.userInfo.restMoney
        },

        // 显示确认提现弹窗
        showConfirmDialog() {
            if (this.withdrawAmount <= 0) {
                uni.showToast({ title: '请输入提现金额', icon: 'none' })
                return
            }
            if (this.withdrawAmount > this.userInfo.restMoney) {
                uni.showToast({ title: '提现金额不能大于可提现金额', icon: 'none' })
                return
            }
            if (this.withdrawAmount > 200) {
                uni.showToast({ title: '单笔提现金额不能大于200元', icon: 'none' })
                return
            }

            // 参数校验通过后显示弹窗
            this.$refs.withdrawDialog.openPopup()
        },

        // 跳转首页购买书籍
        goToHome() {
            uni.switchTab({
                url: '/pages/sell/index'
            })
        },

        // 提交提现
        async submitWithdraw() {
            uni.showLoading({
                title: '提交中...',
                mask: true
            })

            // 这里调用提现接口
            uni.$u.http.post('/token/user/withdrawApply', {
                money: this.withdrawAmount
            }).then(res => {
                if (res.code === 200) {
                    uni.showToast({ title: '提现申请成功', icon: 'success' })
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 1500)
                } else {
                    uni.showToast({ title: res.msg, icon: 'none' })
                }
            }).finally(() => {
                uni.hideLoading()
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.withdraw-page {
    min-height: 100vh;
    background: #F5F5F5;
    padding: 20rpx;

    .common-gray {
        background: #f9f9f9;
        border-radius: 12rpx;
        padding: 20rpx;
        min-height: 88rpx;
    }

    .wechat-account {
        background: #FFFFFF;
        border-radius: 12rpx;
        padding: 30rpx;
        display: flex;
        align-items: center;

        .avatar {
            width: 110rpx;
            height: 110rpx;
            border-radius: 50%;
            margin-right: 20rpx;
        }

        .account-info {
            .nickname {
                font-size: 36rpx;
                color: #333;
                font-weight: bold;
                display: block;
                margin-bottom: 10rpx;
            }

            .amount {
                font-size: 28rpx;
                color: #333;
                font-weight: 500;
            }

            .amount-number {
                font-family: Dosis;
                font-weight: bold;
                font-size: 34rpx;
                color: #333333;
            }
        }
    }

    .amount-input {
        background: #FFFFFF;
        border-radius: 12rpx;
        padding: 30rpx;
        margin-top: 20rpx;

        .label {
            font-size: 28rpx;
            color: #333;
            margin-bottom: 20rpx;
        }

        .input-box {
            display: flex;
            align-items: center;
            border-bottom: 1px solid #EEEEEE;
            padding: 20rpx 0;

            .currency {
                font-size: 40rpx;
                color: #333;
                margin-right: 20rpx;
            }

            :deep(.u-input) {
                flex: 1;

                input {
                    font-size: 28rpx;

                    &::placeholder {
                        color: #C8C9CC;
                        font-size: 28rpx;
                    }
                }
            }

            .all-btn {
                font-size: 28rpx;
                color: #38C148;
                padding-left: 20rpx;
            }
        }
    }

    .wechat-pay {
        display: flex;
        align-items: center;

        .wechat-icon {
            width: 40rpx;
            height: 40rpx;
            margin-right: 10rpx;
        }

        text {
            font-size: 28rpx;
            color: #333;
        }
    }

    .tip-item {
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #333333;
        line-height: 42rpx;
    }

    .dialog-tip-content {
        text-align: left;
        font-size: 28rpx;
        color: #666;
        line-height: 48rpx;
        padding: 10rpx 0;

        .highlight {
            color: #ee0a24;
            font-weight: bold;
            margin: 0 4rpx;
        }

        .mt-10 {
            margin-top: 20rpx;
        }
    }
}
</style>