申请提现页面动态0.5

api/user/README.md

@@ -112,7 +112,57 @@ const response = await getAgentList({
 ]
 ```
 
-### 5. 更新用户信息
+### 5. 获取提现信息
+```javascript
+import { getWithdrawInfo } from '@/api/user/user.js'
+
+const response = await getWithdrawInfo()
+```
+
+**接口地址:** `GET /app/withdraw`
+
+**响应数据:**
+```javascript
+{
+  balance: 10000.00,              // 账户余额
+  waitVerify: 0,                  // 待验证金额
+  available: 10000.00,            // 可提现金额
+  unsettled: 0,                   // 未结算金额
+  fee: 1.00,                      // 提现手续费
+  minAmount: 100.00,              // 最小提现金额
+  maxAmount: 50000.00             // 最大提现金额
+}
+```
+
+### 6. 提交提现申请
+```javascript
+import { submitWithdraw } from '@/api/user/user.js'
+
+const response = await submitWithdraw({
+  amount: 1000.00,                // 提现金额
+  bankId: '1'                     // 银行ID
+})
+```
+
+**接口地址:** `POST /app/withdraw`
+
+**请求参数:**
+- `amount` (number, 必填): 提现金额
+- `bankId` (string, 必填): 银行ID
+
+**响应数据:**
+```javascript
+{
+  msg: "操作成功",
+  code: 200,
+  data: {
+    balance: 9000.00,             // 提现后余额
+    waitVerify: 1000.00           // 待验证金额
+  }
+}
+```
+
+### 7. 更新用户信息
 ```javascript
 import { updateUserInfo } from '@/api/user/user.js'
 
@@ -126,6 +176,39 @@ const response = await updateUserInfo({
 
 ## 使用示例
 
+### 在提现页面中
+```javascript
+// 在提现页面中
+async fetchWithdrawInfo() {
+  try {
+    const response = await getWithdrawInfo()
+    if (response.code === 200) {
+      this.withdrawInfo = response.data
+    }
+  } catch (error) {
+    console.error('获取提现信息失败:', error)
+  }
+}
+
+async submitWithdrawal() {
+  try {
+    const response = await submitWithdraw({
+      amount: 1000.00,
+      bankId: '1'
+    })
+    
+    if (response.code === 200) {
+      uni.showToast({
+        title: '提现申请已提交',
+        icon: 'success'
+      })
+    }
+  } catch (error) {
+    console.error('提现申请失败:', error)
+  }
+}
+```
+
 ### 在页面中获取用户数据
 ```javascript
 // 在 Profile 页面中
@@ -194,4 +277,6 @@ const response = await getUserInfo()
 - `mockUserInfo`: 用户基本信息
 - `mockFinancialData`: 财务数据
 - `mockAgentStats`: 代理统计数据
-- `mockAgentList`: 代理用户列表数据 
+- `mockAgentList`: 代理用户列表数据
+- `mockWithdrawInfo`: 提现信息数据
+- `mockBanks`: 银行列表数据 

api/user/mockData.js

@@ -68,6 +68,43 @@ export const mockAgentList = [
   }
 ]
 
+export const mockWithdrawInfo = {
+  balance: 10000.00,
+  waitVerify: 0,
+  available: 10000.00,
+  unsettled: 0,
+  fee: 1.00, // 提现手续费
+  minAmount: 100.00, // 最小提现金额
+  maxAmount: 50000.00, // 最大提现金额
+}
+
+export const mockBanks = [
+  {
+    id: '1',
+    name: '建设银行',
+    icon: 'https://api.ccttiot.com/image-1755503384639.png',
+    cardNumber: '**** **** **** 1234'
+  },
+  {
+    id: '2',
+    name: '工商银行',
+    icon: 'https://api.ccttiot.com/image-1755503384639.png',
+    cardNumber: '**** **** **** 5678'
+  },
+  {
+    id: '3',
+    name: '农业银行',
+    icon: 'https://api.ccttiot.com/image-1755503384639.png',
+    cardNumber: '**** **** **** 9012'
+  },
+  {
+    id: '4',
+    name: '中国银行',
+    icon: 'https://api.ccttiot.com/image-1755503384639.png',
+    cardNumber: '**** **** **** 3456'
+  }
+]
+
 // 模拟API响应格式
 export const createMockResponse = (data, code = 200, msg = '操作成功') => {
   return {

api/user/user.js

@@ -1,5 +1,5 @@
 import request from '@/utils/request'
-import { mockUserInfo, mockFinancialData, mockAgentStats, mockAgentList, createMockResponse } from './mockData.js'
+import { mockUserInfo, mockFinancialData, mockAgentStats, mockAgentList, mockWithdrawInfo, mockBanks, createMockResponse } from './mockData.js'
 
 /**
  * 获取用户信息
@@ -124,4 +124,38 @@ export function getUserAvatar(userId) {
     params: { userId },
     showLoading: false,
   })
+} 
+
+/**
+ * 获取提现信息
+ * @returns {Promise} 返回提现相关信息
+ */
+export function getWithdrawInfo() {
+  return request({
+    url: '/app/withdraw',
+    method: 'GET',
+    showLoading: false,
+  }).catch(error => {
+    console.warn('提现信息API调用失败，使用模拟数据:', error)
+    return createMockResponse(mockWithdrawInfo)
+  })
+}
+
+/**
+ * 提交提现申请
+ * @param {Object} data 提现数据
+ * @param {number} data.amount 提现金额
+ * @param {string} data.bankId 银行ID
+ * @returns {Promise} 返回提现申请结果
+ */
+export function submitWithdraw(data) {
+  return request({
+    url: '/app/withdraw',
+    method: 'POST',
+    data,
+    showLoading: true,
+  }).catch(error => {
+    console.warn('提现申请API调用失败:', error)
+    throw error
+  })
 } 

pages/requestWithdrawal/requestWithdrawal.vue

@@ -1,15 +1,23 @@
 <template>
   <view class="page">
+    <!-- 加载状态 -->
+    <view v-if="loading" class="loading-overlay">
+      <view class="loading-content">
+        <view class="loading-spinner"></view>
+        <text class="loading-text">加载中...</text>
+      </view>
+    </view>
+
     <!-- 提现容器 -->
     <!-- 账户余额卡片 -->
     <view class="balance-card">
       <view class="balance-item">
         <view class="balance-label">账户余额 (元)</view>
-        <view class="balance-value">{{ accountData.balance }}</view>
+        <view class="balance-value">{{ withdrawInfo.balance }}</view>
       </view>
       <view class="balance-item">
         <view class="balance-label">未结算金额 (元)</view>
-        <view class="balance-value">{{ accountData.unsettled }}</view>
+        <view class="balance-value">{{ withdrawInfo.unsettled }}</view>
       </view>
     </view>
 
@@ -23,7 +31,7 @@
             v-model="withdrawalData.amount"
             class="amount-field"
             placeholder="请输入金额"
-            type="number"
+            type="text"
             @input="onAmountInput"
           />
           <view class="withdraw-all-btn" @click="withdrawAll">全部提现</view>
@@ -36,7 +44,10 @@
         <view class="bank-selector" @click="selectBank">
           <view class="bank-info">
             <image :src="selectedBank.icon" class="bank-icon" mode="aspectFit"></image>
-            <text class="bank-name">{{ selectedBank.name }}</text>
+            <view class="bank-details">
+              <text class="bank-name">{{ selectedBank.name }}</text>
+              <text class="bank-card">{{ selectedBank.cardNumber }}</text>
+            </view>
           </view>
           <text class="arrow-icon">›</text>
         </view>
@@ -47,13 +58,21 @@
     </view>
 
     <!-- 可提现金额提示 -->
-    <view class="available-amount"> 可提现金额: {{ accountData.available }}元</view>
+    <view class="available-amount"> 可提现金额: {{ withdrawInfo.available }}元</view>
+    
+    <!-- 调试信息 -->
+    <view class="debug-info">
+      <text>调试信息:</text>
+      <text>输入框值: {{ withdrawalData.amount }}</text>
+      <text>数据类型: {{ typeof withdrawalData.amount }}</text>
+      <text>解析值: {{ parseFloat(withdrawalData.amount) || 0 }}</text>
+    </view>
 
     <!-- 提现说明 -->
     <view class="withdrawal-explanation">
       <view class="explanation-title">提现说明:</view>
       <view class="explanation-item">
-        <text>提现金额: {{ withdrawalData.amount || '0.00' }}元</text>
+        <text>提现金额: {{ withdrawalData.amount ? withdrawalData.amount + '元' : '0.00元' }}</text>
       </view>
       <view class="explanation-item">
         <text>实际到账: {{ actualAmount }}元</text>
@@ -61,20 +80,31 @@
       <view class="explanation-item">
         <text>提现手续费: {{ fee }}元</text>
       </view>
+      <view class="explanation-item">
+        <text>最小提现金额: {{ withdrawInfo.minAmount }}元</text>
+      </view>
+      <view class="explanation-item">
+        <text>最大提现金额: {{ withdrawInfo.maxAmount }}元</text>
+      </view>
     </view>
   </view>
 </template>
 
 <script>
 import { commonEnum } from '@/enum/commonEnum.js'
+import { getWithdrawInfo, submitWithdraw } from '@/api/user/user.js'
 
 export default {
   data() {
     return {
-      accountData: {
+      loading: false,
-        balance: '6566.23',
+      withdrawInfo: {
-        unsettled: '66.23',
+        balance: '10000.00',
-        available: '6500',
+        unsettled: '0.00',
+        available: '10000.00',
+        fee: 1.00,
+        minAmount: 100.00,
+        maxAmount: 50000.00,
       },
       withdrawalData: {
         amount: '',
@@ -84,22 +114,32 @@ export default {
         id: '1',
         name: '建设银行',
         icon: commonEnum.CHINA_CONSTRUCTION_BANK,
+        cardNumber: '**** **** **** 1234',
       },
       banks: [
         {
           id: '1',
           name: '建设银行',
           icon: commonEnum.CHINA_CONSTRUCTION_BANK,
+          cardNumber: '**** **** **** 1234',
         },
         {
           id: '2',
           name: '工商银行',
-          icon: commonEnum.CHINA_CONSTRUCTION_BANK, // 暂时使用建设银行图标
+          icon: commonEnum.CHINA_CONSTRUCTION_BANK,
+          cardNumber: '**** **** **** 5678',
         },
         {
           id: '3',
           name: '农业银行',
-          icon: commonEnum.CHINA_CONSTRUCTION_BANK, // 暂时使用建设银行图标
+          icon: commonEnum.CHINA_CONSTRUCTION_BANK,
+          cardNumber: '**** **** **** 9012',
+        },
+        {
+          id: '4',
+          name: '中国银行',
+          icon: commonEnum.CHINA_CONSTRUCTION_BANK,
+          cardNumber: '**** **** **** 3456',
         },
       ],
     }
@@ -107,31 +147,73 @@ export default {
   computed: {
     fee() {
       const amount = parseFloat(this.withdrawalData.amount) || 0
-      return 1 // 1块手续费
+      return this.withdrawInfo.fee || 1 // 使用API返回的手续费或默认1元
     },
     actualAmount() {
       const amount = parseFloat(this.withdrawalData.amount) || 0
       const fee = parseFloat(this.fee)
-      return (amount - fee).toFixed(2)
+      const result = amount - fee
+      return result > 0 ? result.toFixed(2) : '0.00'
     },
   },
+  onLoad() {
+    this.fetchWithdrawInfo()
+  },
   methods: {
+    // 获取提现信息
+    async fetchWithdrawInfo() {
+      this.loading = true
+      try {
+        const response = await getWithdrawInfo()
+        if (response.code === 200 && response.data) {
+          this.withdrawInfo = {
+            ...this.withdrawInfo,
+            ...response.data,
+          }
+          console.log('提现信息获取成功:', this.withdrawInfo)
+        }
+      } catch (error) {
+        console.error('获取提现信息失败:', error)
+        uni.showToast({
+          title: '获取提现信息失败',
+          icon: 'none',
+        })
+      } finally {
+        this.loading = false
+      }
+    },
+
     goBack() {
       uni.navigateBack()
     },
     onAmountInput(e) {
       const value = e.detail.value
-      // 限制最大提现金额
+      console.log('输入值:', value)
-      if (parseFloat(value) > parseFloat(this.accountData.available)) {
+      
-        this.withdrawalData.amount = this.accountData.available
+      // 只允许数字和小数点
+      const filteredValue = value.replace(/[^\d.]/g, '')
+      
+      // 确保只有一个小数点
+      const parts = filteredValue.split('.')
+      if (parts.length > 2) {
+        this.withdrawalData.amount = parts[0] + '.' + parts.slice(1).join('')
+      } else {
+        // 限制小数点后最多2位数字
+        if (parts.length === 2 && parts[1].length > 2) {
+          this.withdrawalData.amount = parts[0] + '.' + parts[1].substring(0, 2)
+        } else {
+          this.withdrawalData.amount = filteredValue
+        }
       }
     },
     withdrawAll() {
-      this.withdrawalData.amount = this.accountData.available
+      const available = parseFloat(this.withdrawInfo.available) || 0
+      this.withdrawalData.amount = available.toString()
+      console.log('全部提现，设置金额:', this.withdrawalData.amount)
     },
     selectBank() {
       uni.showActionSheet({
-        itemList: this.banks.map(bank => bank.name),
+        itemList: this.banks.map(bank => `${bank.name} ${bank.cardNumber}`),
         success: res => {
           const selectedBank = this.banks[res.tapIndex]
           this.selectedBank = selectedBank
@@ -139,7 +221,7 @@ export default {
         },
       })
     },
-    submitWithdrawal() {
+    async submitWithdrawal() {
       if (!this.withdrawalData.amount || parseFloat(this.withdrawalData.amount) <= 0) {
         uni.showToast({
           title: '请输入提现金额',
@@ -148,7 +230,12 @@ export default {
         return
       }
 
-      if (parseFloat(this.withdrawalData.amount) > parseFloat(this.accountData.available)) {
+      const amount = parseFloat(this.withdrawalData.amount)
+      const available = parseFloat(this.withdrawInfo.available)
+      const minAmount = parseFloat(this.withdrawInfo.minAmount)
+      const maxAmount = parseFloat(this.withdrawInfo.maxAmount)
+
+      if (amount > available) {
         uni.showToast({
           title: '提现金额超过可提现余额',
           icon: 'none',
@@ -156,28 +243,62 @@ export default {
         return
       }
 
+      if (amount < minAmount) {
+        uni.showToast({
+          title: `提现金额不能少于${minAmount}元`,
+          icon: 'none',
+        })
+        return
+      }
+
+      if (amount > maxAmount) {
+        uni.showToast({
+          title: `提现金额不能超过${maxAmount}元`,
+          icon: 'none',
+        })
+        return
+      }
+
       uni.showModal({
         title: '确认提现',
         content: `确认提现${this.withdrawalData.amount}元到${this.selectedBank.name}吗？`,
-        success: res => {
+        success: async res => {
           if (res.confirm) {
-            uni.showLoading({
+            this.loading = true
-              title: '提现申请中...',
+            try {
-            })
+              const response = await submitWithdraw({
-
+                amount: amount,
-            // 模拟提现请求
+                bankId: this.withdrawalData.bankId,
-            setTimeout(() => {
-              uni.hideLoading()
-              uni.showToast({
-                title: '提现申请已提交',
-                icon: 'success',
               })
 
-              // 返回上一页
+              if (response.code === 200) {
-              setTimeout(() => {
+                uni.showToast({
-                uni.navigateBack()
+                  title: '提现申请已提交',
-              }, 1500)
+                  icon: 'success',
-            }, 2000)
+                })
+
+                // 刷新提现信息
+                await this.fetchWithdrawInfo()
+
+                // 返回上一页
+                setTimeout(() => {
+                  uni.navigateBack()
+                }, 1500)
+              } else {
+                uni.showToast({
+                  title: response.msg || '提现申请失败',
+                  icon: 'none',
+                })
+              }
+            } catch (error) {
+              console.error('提现申请失败:', error)
+              uni.showToast({
+                title: '提现申请失败，请重试',
+                icon: 'none',
+              })
+            } finally {
+              this.loading = false
+            }
           }
         },
       })
@@ -194,6 +315,44 @@ export default {
   padding-bottom: 40rpx;
 }
 
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+
+  .loading-content {
+    background: #fff;
+    padding: 40rpx;
+    border-radius: 20rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    .loading-spinner {
+      width: 80rpx;
+      height: 80rpx;
+      border: 8rpx solid #f3f3f3;
+      border-top: 8rpx solid #ff803a;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+      margin-bottom: 20rpx;
+    }
+
+    .loading-text {
+      font-size: 32rpx;
+      color: #333;
+    }
+  }
+}
+
 .withdrawal-container {
   background: #fff;
   border-radius: 20rpx;
@@ -298,10 +457,20 @@ export default {
         height: 40rpx;
       }
 
-      .bank-name {
+      .bank-details {
-        font-size: 28rpx;
+        display: flex;
-        color: #333;
+        flex-direction: column;
-        margin-right: 10rpx;
+
+        .bank-name {
+          font-size: 28rpx;
+          color: #333;
+          margin-bottom: 5rpx;
+        }
+
+        .bank-card {
+          font-size: 24rpx;
+          color: #999;
+        }
       }
     }
 
@@ -355,4 +524,23 @@ export default {
 view {
   //border: red solid 1px;
 }
+
+.debug-info {
+  background: #fff;
+  margin: 20rpx;
+  padding: 20rpx;
+  border-radius: 10rpx;
+  
+  text {
+    display: block;
+    font-size: 24rpx;
+    color: #666;
+    margin-bottom: 10rpx;
+  }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
 </style>