teambuy-front/pages_order/mine/wallet.vue

<template>
    <view class="wallet-page">
        <!-- 导航栏 -->
        <navbar title="钱包" leftClick @leftClick="$utils.navigateBack" bgColor="#019245" color="#fff" />

        <!-- 总余额展示区 -->
        <view class="balance-card" :style="{ backgroundImage: 'url(/static/image/红烧肉.png)' }">
            <view class="balance-info">
                <view class="balance-title">总余额（元）</view>
                <view class="balance-amount">{{ walletData.balance.toFixed(2) }}</view>
                <view class="balance-actions">
                    <view class="action-btn recharge-btn" @click="navigateToRecharge">
                        <text>去充值</text>
                    </view>
                    <view class="action-btn detail-btn" @click="navigateToDetail">
                        <text>资产明细</text>
                        <text class="arrow">></text>
                    </view>
                </view>
            </view>
        </view>

        <!-- 提现表单 -->
        <view class="withdraw-section">
            <view class="section-title">我要提现</view>

            <!-- 提现金额输入框 -->
            <view class="input-item">
                <text class="currency-symbol">¥</text>
                <input class="amount-input" type="digit" v-model="withdrawAmount" placeholder="请输入提现金额"
                    @blur="validateAmount" />
            </view>

            <!-- 真实姓名输入框 -->
            <view class="input-item">
                <input class="name-input" type="nickname" v-model="realName" placeholder="请输入真实姓名"
                    @blur="validateName" />
            </view>

            <!-- 提现说明 -->
            <view class="withdraw-notes">
                <view class="notes-title">提现说明</view>
                <view class="notes-list">
                    <view class="note-item" v-for="(rule, index) in walletData.withdrawRules" :key="index">
                        <text>{{ index + 1 }}、{{ rule }}</text>
                    </view>
                </view>
            </view>
        </view>

        <!-- 提现按钮 -->
        <view class="submit-btn-wrapper">
            <button class="submit-btn" @click="submitWithdraw" :disabled="!isFormValid">
                立即提现
            </button>
        </view>
    </view>
</template>

<script>
import navbar from '@/components/base/navbar.vue'
import { walletData } from '@/static/js/mockWallet.js'

export default {
    components: {
        navbar
    },
    data() {
        return {
            walletData: null,
            withdrawAmount: '',
            realName: '',
            amountError: '',
            nameError: ''
        }
    },
    computed: {
        isFormValid() {
            return this.withdrawAmount && this.realName && !this.amountError && !this.nameError
        }
    },
    onLoad() {
        this.walletData = walletData
    },
    methods: {
        // 导航到充值页面
        navigateToRecharge() {
            uni.showToast({
                title: '充值功能暂未开放',
                icon: 'none'
            })
        },

        // 导航到资产明细页面
        navigateToDetail() {
            uni.showToast({
                title: '资产明细功能暂未开放',
                icon: 'none'
            })
        },

        // 验证提现金额
        validateAmount() {
            if (!this.withdrawAmount) {
                this.amountError = '请输入提现金额'
                return false
            }

            const amount = parseFloat(this.withdrawAmount)
            if (isNaN(amount) || amount <= 0) {
                this.amountError = '请输入有效的提现金额'
                return false
            }

            if (amount > this.walletData.balance) {
                this.amountError = '提现金额不能大于余额'
                return false
            }

            if (amount > 200) {
                this.amountError = '单笔提现不能超过200元'
                return false
            }

            this.amountError = ''
            return true
        },

        // 验证真实姓名
        validateName() {
            if (!this.realName) {
                this.nameError = '请输入真实姓名'
                return false
            }

            if (this.realName.length < 2) {
                this.nameError = '请输入有效的姓名'
                return false
            }

            this.nameError = ''
            return true
        },

        // 提交提现申请
        submitWithdraw() {
            // 再次验证表单
            if (!this.validateAmount() || !this.validateName()) {
                // 显示具体错误
                if (this.amountError) {
                    uni.showToast({
                        title: this.amountError,
                        icon: 'none'
                    })
                    return
                }

                if (this.nameError) {
                    uni.showToast({
                        title: this.nameError,
                        icon: 'none'
                    })
                    return
                }

                return
            }

            // 显示提交中状态
            uni.showLoading({
                title: '提交中...'
            })

            // 模拟提交过程
            setTimeout(() => {
                uni.hideLoading()
                uni.showToast({
                    title: '提现申请已提交',
                    icon: 'success'
                })

                // 清空表单
                this.withdrawAmount = ''
                this.realName = ''

                // 模拟余额变更
                this.walletData.balance -= parseFloat(this.withdrawAmount)
            }, 1500)
        }
    }
}
</script>

<style lang="scss" scoped>
.wallet-page {
}

.balance-card {
    width: 96%;
    height: 280rpx;
    background-size: cover;
    background-position: center;
    padding: 30rpx;
    box-sizing: border-box;
    position: relative;
    margin: 20rpx auto;
    border-radius: 20rpx;

    .balance-info {
        position: relative;
        z-index: 2;
        color: #fff;
    }

    .balance-title {
        font-size: 28rpx;
        margin-bottom: 10rpx;
    }

    .balance-amount {
        font-size: 56rpx;
        font-weight: bold;
        margin-bottom: 20rpx;
    }

    .balance-actions {
        display: flex;
        justify-content: space-between;
        // justify-content: center;
        align-items: center;
        .action-btn {
            padding: 10rpx 24rpx;
            font-size: 24rpx;
            border-radius: 30rpx;
            display: flex;
            align-items: center;
        }

        .recharge-btn {
            background-color: #fff;
            color: $uni-color;
            border: none;
            min-width: 120rpx;
            height: 60rpx;
            justify-content: center;
            font-size: 24rpx;
            font-weight: normal;
            // line-height: 1;
            padding: 0 20rpx;
        }

        .detail-btn {
            // border: 1px solid rgba(255, 255, 255, 0.6);

            .arrow {
                margin-left: 10rpx;
            }
        }
    }
}

.withdraw-section {
    padding: 30rpx;
    // background-color: #fff;

    .section-title {
        font-size: 32rpx;
        color: #333;
        margin-bottom: 30rpx;
        font-weight: bold;
    }

    .input-item {
        display: flex;
        align-items: center;
        padding: 24rpx 20rpx;
        margin-bottom: 20rpx;
        // background-color: red;
        border-radius: 20rpx;
        .currency-symbol {
            color: #FF0000;
            margin-right: 20rpx;
        }

        .amount-input,
        .name-input {
            flex: 1;
            font-size: 28rpx;
            height: 60rpx;
        }
        .name-input {
            padding-left: 40rpx;
        }
    }

    .withdraw-notes {
        margin-top: 40rpx;

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

        .notes-list {
            .note-item {
                font-size: 26rpx;
                color: #666;
                line-height: 1.6;
                margin-bottom: 10rpx;
            }
        }
    }
}

.submit-btn-wrapper {
    padding: 40rpx 30rpx;

    .submit-btn {
        width: 100%;
        height: 88rpx;
        background-color: $uni-color;
        color: #fff;
        font-size: 32rpx;
        border-radius: 44rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;

        &:disabled {
            background-color: #ccc;
            color: rgba(255, 255, 255, 0.6);
        }
    }
}
</style>