WindowBird/HomeLease
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

申请提现页面动态0.5

Browse Source
This commit is contained in:
WindowBird 2025-08-19 14:22:25 +08:00
parent f82e8c1aa9
commit 7a49de81db
4 changed files with 388 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
api/user/README.md
View File

@ -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`: 银行列表数据

37
api/user/mockData.js
View File

@ -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 {

36
api/user/user.js
View File

@ -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
})
}

270
pages/requestWithdrawal/requestWithdrawal.vue
View File

@ -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: {
balance: '6566.23',
unsettled: '66.23',
available: '6500',
loading: false,
withdrawInfo: {
balance: '10000.00',
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
// 限制最大提现金额
if (parseFloat(value) > parseFloat(this.accountData.available)) {
this.withdrawalData.amount = this.accountData.available
console.log('输入值:', value)
// 只允许数字和小数点
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({
title: '提现申请中...',
})
// 模拟提现请求
setTimeout(() => {
uni.hideLoading()
uni.showToast({
title: '提现申请已提交',
icon: 'success',
this.loading = true
try {
const response = await submitWithdraw({
amount: amount,
bankId: this.withdrawalData.bankId,
})
// 返回上一页
setTimeout(() => {
uni.navigateBack()
}, 1500)
}, 2000)
if (response.code === 200) {
uni.showToast({
title: '提现申请已提交',
icon: 'success',
})
// 刷新提现信息
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 {
font-size: 28rpx;
color: #333;
margin-right: 10rpx;
.bank-details {
display: flex;
flex-direction: column;
.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>