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

<template>
    <view class="withdraw-page">
        <!-- 微信账户信息 -->
        <view class="wechat-account">
            <image class="avatar" src="../static/t11.png" mode="aspectFill"></image>
            <view class="account-info">
                <text class="nickname">{{ userInfo.nickname || '这里是微信昵称' }}</text>
                <text class="amount">可提现金额：</text>
                <text class="amount-number">¥{{ availableAmount }}</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="number" :border="false" placeholder="请输入提现金额"
                    @input="onAmountInput" placeholder-style="font-size:50rpx;color:#c1c1c1"
                    :custom-style="{ fontSize: '50rpx' }"></u-input>
                <text class="all-btn" @click="withdrawAll">全部提现</text>
            </view>

            <!-- 到账账户 -->
            <view class="flex-a common-gray mt-40">
                <view class="common-text-2">到账账户：</view>
                <view class="wechat-pay">
                    <image src="../static/wx.png" mode="aspectFit" class="wechat-icon"></image>
                    <text>微信零钱</text>
                </view>
            </view>

            <!-- 提现说明 -->
            <view class="mt-20 flex-d common-gray">
                <text class="tip-item">1.用户需微信实名才能申请提现；</text>
                <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="submitWithdraw">确认提现</u-button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            userInfo: {
                avatar: '',
                nickname: ''
            },
            availableAmount: '360.08',
            withdrawAmount: '',
            minAmount: 0.3,
            maxAmount: 200
        }
    },
    computed: {
        canWithdraw() {
            const amount = Number(this.withdrawAmount)
            return amount >= this.minAmount &&
                amount <= this.maxAmount &&
                amount <= Number(this.availableAmount)
        }
    },
    methods: {
        // 输入金额
        onAmountInput(value) {
            // 限制只能输入两位小数
            if (value.includes('.')) {
                const decimal = value.split('.')[1]
                if (decimal.length > 2) {
                    this.withdrawAmount = Number(value).toFixed(2)
                }
            }
        },

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

        // 提交提现
        async submitWithdraw() {
            if (!this.canWithdraw) return

            try {
                uni.showLoading({
                    title: '提交中...',
                    mask: true
                })

                // 这里调用提现接口
                await this.$u.api.withdrawAjax({
                    amount: this.withdrawAmount
                })

                uni.showToast({
                    title: '提现申请成功',
                    icon: 'success'
                })

                setTimeout(() => {
                    uni.navigateBack()
                }, 1500)

            } catch (error) {
                uni.showToast({
                    title: error.message || '提现失败',
                    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;
    }
}
</style>