1.7.2 做完团长钱包

pages_order/mine/wallet.vue

@@ -9,10 +9,12 @@
                 <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">
+                    <view class="action-btn recharge-btn" v-if="!isRecharge"        @tap="navigateToRecharge">
                         <text>去充值</text>
+                        <text class="arrow">></text>
                     </view>
-                    <view class="action-btn detail-btn" @click="navigateToDetail">
+                    <view class="action-btn" v-else />
+                    <view class="action-btn detail-btn" @tap="navigateToDetail">
                         <text>资产明细</text>
                         <text class="arrow">></text>
                     </view>
@@ -22,23 +24,25 @@
 
         <!-- 提现表单 -->
         <view class="withdraw-section">
-            <view class="section-title">我要提现</view>
+            <view class="section-title">{{ isRecharge ? '我要充值' : '我要提现' }}</view>
 
             <!-- 提现金额输入框 -->
             <view class="input-item">
                 <text class="currency-symbol">¥</text>
-                <input class="amount-input" type="digit" v-model="withdrawAmount" placeholder="请输入提现金额"
+                <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">
+            <view class="input-item" v-if="!isRecharge">
                 <input class="name-input" type="nickname" v-model="realName" placeholder="请输入真实姓名"
                     @blur="validateName" />
             </view>
 
             <!-- 提现说明 -->
-            <view class="withdraw-notes">
+            <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">
@@ -50,8 +54,8 @@
 
         <!-- 提现按钮 -->
         <view class="submit-btn-wrapper">
-            <button class="submit-btn" @click="submitWithdraw" :disabled="!isFormValid">
-                立即提现
+            <button class="submit-btn" @tap="submitWithdraw" :disabled="!isFormValid">
+                {{ isRecharge ? '立即充值' : '立即提现' }}
             </button>
         </view>
     </view>
@@ -69,33 +73,29 @@ export default {
         return {
             walletData: null,
             withdrawAmount: '',
+            rechargeAmount: '',
             realName: '',
             amountError: '',
-            nameError: ''
-        }
-    },
-    computed: {
-        isFormValid() {
-            return this.withdrawAmount && this.realName && !this.amountError && !this.nameError
+            nameError: '',
+            isFormValid: true,
+            isRecharge: false
         }
     },
+    
     onLoad() {
         this.walletData = walletData
     },
     methods: {
         // 导航到充值页面
         navigateToRecharge() {
-            uni.showToast({
-                title: '充值功能暂未开放',
-                icon: 'none'
-            })
+            this.isRecharge = true
         },
 
         // 导航到资产明细页面
         navigateToDetail() {
             uni.showToast({
                 title: '资产明细功能暂未开放',
-                icon: 'none'
+                icon: 'error'
             })
         },
 
@@ -144,13 +144,19 @@ export default {
 
         // 提交提现申请
         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: 'none'
+                        icon: 'error'
                     })
                     return
                 }
@@ -158,7 +164,7 @@ export default {
                 if (this.nameError) {
                     uni.showToast({
                         title: this.nameError,
-                        icon: 'none'
+                        icon: 'error'
                     })
                     return
                 }
@@ -166,6 +172,11 @@ export default {
                 return
             }
 
+            // 如果在isFormVaild为false的情况下进入函数 则为多次点击 直接返回
+            if (this.isFormValid) {
+                this.isFormValid = false
+            }else return 
+
             // 显示提交中状态
             uni.showLoading({
                 title: '提交中...'
@@ -185,7 +196,40 @@ export default {
 
                 // 模拟余额变更
                 this.walletData.balance -= parseFloat(this.withdrawAmount)
+                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.rechargeAmount = ''
+                            this.isRecharge = false
+                        }, 1500)
+                    }
+                },
+                fail: (err) => {
+                    console.log(err);
+                }
+            })
         }
     }
 }
@@ -245,12 +289,12 @@ export default {
             justify-content: center;
             font-size: 24rpx;
             font-weight: normal;
+            gap: 4rpx;
             // line-height: 1;
             padding: 0 20rpx;
         }
 
         .detail-btn {
-            // border: 1px solid rgba(255, 255, 255, 0.6);
 
             .arrow {
                 margin-left: 10rpx;
@@ -275,7 +319,7 @@ export default {
         align-items: center;
         padding: 24rpx 20rpx;
         margin-bottom: 20rpx;
-        // background-color: red;
+        background-color: #e7e7e7;
         border-radius: 20rpx;
         .currency-symbol {
             color: #FF0000;