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/红烧肉.webp)' }">
            <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" v-if="!isRecharge"        @tap="navigateToRecharge">
                        <text>去充值</text>
                        <text class="arrow">></text>
                    </view>
                    <view class="action-btn" v-else />
                    <view class="action-btn detail-btn" @tap="navigateToDetail">
                        <text>资产明细</text>
                        <text class="arrow">></text>
                    </view>
                </view>
            </view>
        </view>

        <!-- 提现表单 -->
        <view class="withdraw-section">
            <view class="section-title">{{ isRecharge ? '我要充值' : '我要提现' }}</view>

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

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

            <!-- 提现说明 -->
            <view class="withdraw-notes" v-if="!isRecharge">
                <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" @tap="submitWithdraw" :disabled="!isFormValid">
                {{ isRecharge ? '立即充值' : '立即提现' }}
            </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: '',
            rechargeAmount: '',
            realName: '',
            amountError: '',
            nameError: '',
            isFormValid: true,
            isRecharge: false
        }
    },
    
    onLoad() {
        this.walletData = walletData
    },
    methods: {
        // 导航到充值页面
        navigateToRecharge() {
            this.isRecharge = true
        },

        // 导航到资产明细页面
        navigateToDetail() {
            this.$utils.navigateTo('/pages_order/mine/assets')
        },

        // 验证提现金额
        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.isRecharge) {
                return this.recharge()
            }

            // 再次验证表单
            if (!this.validateAmount() || !this.validateName()) {
                console.log(2);
                // 显示具体错误
                if (this.amountError) {
                    console.log(3);
                    uni.showToast({
                        title: this.amountError,
                        icon: 'error'
                    })
                    return
                }

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

                return
            }

            // 如果在isFormVaild为false的情况下进入函数 则为多次点击 直接返回
            if (this.isFormValid) {
                this.isFormValid = false
            }else return 

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

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

                // 模拟余额变更
                this.walletData.balance -= parseFloat(this.withdrawAmount)
                // 清空表单
                this.withdrawAmount = ''
                this.realName = ''
                
                this.isFormValid = true
            }, 1500)
        },

        recharge() {
            uni.showModal({
                title: '确认充值',
                content: '充值金额为' + this.rechargeAmount + '元',
                confirmColor: '#019245',
                success: (res) => {
                    // 这里编写函数逻辑
                    if (res.confirm) {
                        uni.showLoading({
                            title: '充值中...'
                        })
                        // 执行重置逻辑

                        // 模拟重置时间
                        setTimeout(() => {
                            uni.hideLoading()
                            uni.showToast({
                                title: '充值成功',
                                icon: 'success'
                            })
                            // 模拟余额变更
                            this.walletData.balance += parseFloat(this.rechargeAmount)
                            // 重置表单
                            this.rechargeAmount = ''
                            this.isRecharge = false
                        }, 1500)
                    }
                },
                fail: (err) => {
                    console.log(err);
                }
            })
        }
    }
}
</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;
            gap: 4rpx;
            // line-height: 1;
            padding: 0 20rpx;
        }

        .detail-btn {

            .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: #e7e7e7;
        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>