HomeLease/pages/requestWithdrawal/requestWithdrawal.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>