547 lines
13 KiB
Vue
547 lines
13 KiB
Vue
<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">{{ withdrawInfo.balance }}</view>
|
||
</view>
|
||
<view class="balance-item">
|
||
<view class="balance-label">未结算金额 (元)</view>
|
||
<view class="balance-value">{{ withdrawInfo.unsettled }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="withdrawal-container">
|
||
<!-- 提现金额输入 -->
|
||
<view class="withdrawal-section">
|
||
<view class="section-title">提现金额</view>
|
||
<view class="amount-input">
|
||
<text class="currency-symbol">¥</text>
|
||
<input
|
||
v-model="withdrawalData.amount"
|
||
class="amount-field"
|
||
placeholder="请输入金额"
|
||
type="text"
|
||
@input="onAmountInput"
|
||
/>
|
||
<view class="withdraw-all-btn" @click="withdrawAll">全部提现</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 提现至银行 -->
|
||
<view class="bank-section">
|
||
<view class="section-title">提现至</view>
|
||
<view class="bank-selector" @click="selectBank">
|
||
<view class="bank-info">
|
||
<image :src="selectedBank.icon" class="bank-icon" mode="aspectFit"></image>
|
||
<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>
|
||
</view>
|
||
|
||
<!-- 提现按钮 -->
|
||
<view class="withdraw-btn" @click="submitWithdrawal">立即提现</view>
|
||
</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 ? withdrawalData.amount + '元' : '0.00元' }}</text>
|
||
</view>
|
||
<view class="explanation-item">
|
||
<text>实际到账: {{ actualAmount }}元</text>
|
||
</view>
|
||
<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 {
|
||
loading: false,
|
||
withdrawInfo: {
|
||
balance: '10000.00',
|
||
unsettled: '0.00',
|
||
available: '10000.00',
|
||
fee: 1.00,
|
||
minAmount: 100.00,
|
||
maxAmount: 50000.00,
|
||
},
|
||
withdrawalData: {
|
||
amount: '',
|
||
bankId: '1',
|
||
},
|
||
selectedBank: {
|
||
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,
|
||
cardNumber: '**** **** **** 5678',
|
||
},
|
||
{
|
||
id: '3',
|
||
name: '农业银行',
|
||
icon: commonEnum.CHINA_CONSTRUCTION_BANK,
|
||
cardNumber: '**** **** **** 9012',
|
||
},
|
||
{
|
||
id: '4',
|
||
name: '中国银行',
|
||
icon: commonEnum.CHINA_CONSTRUCTION_BANK,
|
||
cardNumber: '**** **** **** 3456',
|
||
},
|
||
],
|
||
}
|
||
},
|
||
computed: {
|
||
fee() {
|
||
const amount = parseFloat(this.withdrawalData.amount) || 0
|
||
return this.withdrawInfo.fee || 1 // 使用API返回的手续费或默认1元
|
||
},
|
||
actualAmount() {
|
||
const amount = parseFloat(this.withdrawalData.amount) || 0
|
||
const fee = parseFloat(this.fee)
|
||
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)
|
||
|
||
// 只允许数字和小数点
|
||
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() {
|
||
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} ${bank.cardNumber}`),
|
||
success: res => {
|
||
const selectedBank = this.banks[res.tapIndex]
|
||
this.selectedBank = selectedBank
|
||
this.withdrawalData.bankId = selectedBank.id
|
||
},
|
||
})
|
||
},
|
||
async submitWithdrawal() {
|
||
if (!this.withdrawalData.amount || parseFloat(this.withdrawalData.amount) <= 0) {
|
||
uni.showToast({
|
||
title: '请输入提现金额',
|
||
icon: 'none',
|
||
})
|
||
return
|
||
}
|
||
|
||
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',
|
||
})
|
||
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: async res => {
|
||
if (res.confirm) {
|
||
this.loading = true
|
||
try {
|
||
const response = await submitWithdraw({
|
||
amount: amount,
|
||
bankId: this.withdrawalData.bankId,
|
||
})
|
||
|
||
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
|
||
}
|
||
}
|
||
},
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page {
|
||
min-height: 90vh;
|
||
background: #f7f7f7;
|
||
padding-top: 20rpx;
|
||
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;
|
||
margin: 20rpx;
|
||
padding-bottom: 54rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.balance-card {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin: 20rpx;
|
||
padding: 40rpx;
|
||
background: linear-gradient(135deg, #ff803a, #ff6b35);
|
||
border-radius: 20rpx;
|
||
color: white;
|
||
|
||
.balance-item {
|
||
text-align: center;
|
||
|
||
.balance-label {
|
||
font-size: 24rpx;
|
||
margin-bottom: 10rpx;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.balance-value {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
|
||
.withdrawal-section {
|
||
padding: 30rpx;
|
||
//border-bottom: 1rpx solid #f0f0f0;
|
||
|
||
.section-title {
|
||
font-size: 28rpx;
|
||
color: #3d3d3d;
|
||
margin-bottom: 20rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.amount-input {
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
padding-bottom: 20rpx;
|
||
|
||
.currency-symbol {
|
||
font-size: 80rpx;
|
||
color: #333;
|
||
margin-right: 20rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.amount-field {
|
||
height: 90rpx;
|
||
//border: #4cd964 1px solid;
|
||
flex: 1;
|
||
font-size: 80rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.withdraw-all-btn {
|
||
padding: 10rpx 20rpx;
|
||
|
||
color: #ff803a;
|
||
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bank-section {
|
||
display: flex;
|
||
padding: 30rpx;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
//border-bottom: 1rpx solid #f0f0f0;
|
||
|
||
.section-title {
|
||
font-size: 28rpx;
|
||
color: #7c7c7c;
|
||
|
||
font-weight: 500;
|
||
}
|
||
|
||
.bank-selector {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.bank-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
|
||
.bank-icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.bank-details {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.bank-name {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
margin-bottom: 5rpx;
|
||
}
|
||
|
||
.bank-card {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.arrow-icon {
|
||
font-size: 32rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.withdraw-btn {
|
||
margin: 17rpx;
|
||
padding: 30rpx;
|
||
background: #ffeee4;
|
||
color: #ff803a;
|
||
text-align: center;
|
||
font-size: 36rpx;
|
||
font-weight: 500;
|
||
border-radius: 46rpx;
|
||
box-shadow: rgba(0, 0, 0, 0.1) 0 5px 10px 0;
|
||
}
|
||
|
||
.available-amount {
|
||
padding-left: 66rpx;
|
||
text-align: left;
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.withdrawal-explanation {
|
||
margin: 30rpx;
|
||
padding: 30rpx;
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
|
||
.explanation-title {
|
||
font-size: 34rpx;
|
||
color: #3d3d3d;
|
||
margin-bottom: 20rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.explanation-item {
|
||
padding: 10rpx 0;
|
||
font-size: 26rpx;
|
||
color: #3d3d3d;
|
||
}
|
||
}
|
||
|
||
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>
|