HomeLease/pages/requestWithdrawal/requestWithdrawal.vue

<template>
  <view class="page">
    <!-- 提现容器 -->
    <!-- 账户余额卡片 -->
    <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.displayName || '请选择账号' }}</text>
              <text class="bank-card">{{ selectedBank.cardNumber || '暂无账号' }}</text>
              <text v-if="selectedBank.name" class="bank-owner"
                >收款人: {{ selectedBank.name }}
              </text>
            </view>
          </view>
          <text class="arrow-icon">›</text>
        </view>

        <!-- 账号管理按钮 -->
      </view>

      <view class="bank-management">
        <view class="bank-btn add-btn" @click="showAddModal = true">添加账号</view>
        <view class="bank-btn delete-btn" @click="showDeleteModal = true">删除账号</view>
      </view>

      <!-- 账号状态提示 -->
      <view v-if="userBankList.length === 0" class="bank-status-tip">
        <text class="tip-text">您还没有添加账号，请先添加账号</text>
      </view>

      <!-- 提现按钮 -->
      <view class="withdraw-btn" @click="submitWithdrawal">立即提现</view>
    </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>实际到账: {{ withdrawInfo.actualAmount }}元</text>
      </view>
      <view class="explanation-item">
        <text>提现手续费: {{ withdrawInfo.fee }}元</text>
      </view>
      <view class="explanation-item">
        <text>最小提现金额: {{ withdrawInfo.minAmount }}元</text>
      </view>
      <view class="explanation-item">
        <text>最大提现金额: {{ withdrawInfo.maxAmount }}元</text>
      </view>
    </view>

    <!-- 添加账号组件 -->
    <add-card :visible="showAddModal" @close="showAddModal = false" @success="onBankSuccess" />

    <!-- 删除账号组件 -->
    <delete-card
      :bank-list="userBankList"
      :visible="showDeleteModal"
      @close="showDeleteModal = false"
      @success="onBankSuccess"
    />
  </view>
</template>

<script>
import { commonEnum } from '@/enum/commonEnum.js'
import { getWithdrawInfo, submitWithdraw, computedServiceAmount } from '@/api/user/user.js'
import { getUserBankList } from '@/api/account.js'
import AddCard from './addCard.vue'
import DeleteCardd from './deleteCard.vue'
import debounce from '../../utils/debounce'

export default {
  components: {
    AddCard,
    DeleteCard: DeleteCardd,
  },
  data() {
    return {
      loading: false,
      withdrawInfo: {
        balance: '0',
        unsettled: '0.00',
        fee: 0,
        minAmount: 0,
        maxAmount: 0,
        actualAmount: 0,
      },
      withdrawalData: {
        amount: '',
        accountId: '',
        serviceType: '',
        serviceCharge: '',
        arrivalAmount: '',
      },
      selectedBank: {
        id: '',
        name: '',
        icon: commonEnum.CHINA_CONSTRUCTION_BANK,
        cardNumber: '',
        type: 'BANK',
      },
      // 用户账号列表
      userBankList: [],
      // 账号管理相关
      showAddModal: false,
      showDeleteModal: false,
    }
  },
  computed: {},
  onLoad() {
    this.fetchWithdrawInfo()
    this.fetchUserBankList()
  },
  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
      }
    },

    // 获取用户账号列表
    async fetchUserBankList() {
      try {
        console.log('开始获取用户账号列表...123')
        const response = await getUserBankList()

        if (response.code === 200 && response.rows) {
          this.userBankList = response.rows || []
          console.log('用户账号列表获取成功:')
          // 处理账号数据
          this.userBankList = this.userBankList.map(item => ({
            ...item,
            cardNumber: this.maskCardNumber(item.no),
            icon: this.getBankIcon(item.type),
            displayName: this.getDisplayName(item),
          }))

          console.log('用户账号列表获取成功:', this.userBankList)

          // 如果有账号，设置默认选中的账号
          if (this.userBankList.length > 0) {
            this.selectedBank = this.userBankList[0]
            this.withdrawalData.accountId = this.selectedBank.id
            console.log('设置默认账号:', this.selectedBank)
          } else {
            console.log('没有找到账号，显示空状态')
          }
        } else {
          console.log('API返回错误:', response)
          uni.showToast({
            title: response.msg || '获取账号列表失败',
            icon: 'none',
          })
        }
      } catch (error) {
        console.error('获取用户账号列表失败:', error)
        uni.showToast({
          title: '获取账号列表失败',
          icon: 'none',
        })
      }
    },

    serviceAmount: debounce(async function (amount) {
      try {
        console.log('发送参数', amount)
        if (!amount) {
          this.withdrawInfo.fee = 0
          this.withdrawInfo.actualAmount = 0
          this.withdrawalData.amount = 0
          return
        }
        const res = await computedServiceAmount(amount)
        if (res.code === 200 && res.data) {
          const info = res.data
          this.withdrawInfo.fee = info.serviceCharge
          this.withdrawInfo.actualAmount = info.amount
          this.withdrawalData.amount = info.withdrawAmount
        }
      } catch (error) {
        console.error('服务费获取失败:', error)
      }
    }, 600), // 600ms内重复触发无效

    // 掩码账号号
    maskCardNumber(cardNumber) {
      if (!cardNumber) return ''
      if (cardNumber.length <= 8) return cardNumber
      return '**** **** **** ' + cardNumber.slice(-4)
    },

    // 获取银行图标
    getBankIcon(type) {
      // 根据type字段判断类型，B和BAN都表示银行卡
      if (type === 'B' || type === 'BAN') {
        return commonEnum.CHINA_CONSTRUCTION_BANK
      } else if (type === 'QR') {
        return '/static/icons/qr-code.png' // 收款二维码图标
      }
      return commonEnum.CHINA_CONSTRUCTION_BANK
    },

    // 获取显示名称
    getDisplayName(item) {
      // 根据type字段判断类型
      if (item.type === 'B' || item.type === 'BAN') {
        return '银行卡'
      } else if (item.type === 'QR') {
        return '收款二维码'
      }
      return '银行卡'
    },

    // 账号操作成功回调
    onBankSuccess() {
      // 延迟刷新账号列表，避免与子组件的关闭逻辑冲突
      setTimeout(() => {
        this.fetchUserBankList()
      }, 2000)
    },

    goBack() {
      uni.navigateBack()
    },
    onAmountInput(e) {
      const value = e.detail.value
      console.log(value)
      this.serviceAmount(value)
    },
    withdrawAll() {
      this.serviceAmount(this.withdrawInfo.balance)
      console.log('全部提现，设置金额:', this.withdrawalData.amount)
    },
    selectBank() {
      if (this.userBankList.length === 0) {
        uni.showToast({
          title: '请先添加账号',
          icon: 'none',
        })
        return
      }

      uni.showActionSheet({
        itemList: this.userBankList.map(
          bank => `${bank.displayName} ${bank.cardNumber} (${bank.name})`
        ),
        success: res => {
          const selectedBank = this.userBankList[res.tapIndex]
          this.selectedBank = selectedBank
          this.withdrawalData.accountId = selectedBank.id
          console.log('选择账号:', selectedBank)
        },
      })
    },
    async submitWithdrawal() {
      if (!this.withdrawalData.amount || parseFloat(this.withdrawalData.amount) <= 0) {
        uni.showToast({
          title: '请输入提现金额',
          icon: 'none',
        })
        return
      }

      if (!this.withdrawalData.accountId) {
        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.displayName}吗？`,
        success: async res => {
          if (res.confirm) {
            this.loading = true
            try {
              const response = await submitWithdraw({
                amount: this.withdrawalData.amount,
                accountId: this.selectedBank.id,
                serviceType: '1',
                serviceCharge: this.withdrawInfo.fee,
                arrivalAmount: this.withdrawInfo.actualAmount,
              })

              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;
}

.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;
          margin-top: 8rpx;
        }

        .bank-owner {
          font-size: 22rpx;
          color: #666;
          margin-top: 4rpx;
        }
      }
    }

    .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;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 账号管理样式 */
.bank-management {
  margin-top: 20rpx;
  display: flex;
  gap: 20rpx;

  .bank-btn {
    flex: 1;
    padding: 20rpx;
    text-align: center;
    border-radius: 10rpx;
    font-size: 28rpx;
    font-weight: 500;

    &.add-btn {
      background: #ff803a;
      color: #fff;
    }

    &.delete-btn {
      background: #ff4757;
      color: #fff;
    }
  }
}

/* 账号状态提示 */
.bank-status-tip {
  margin: 20rpx 30rpx;
  padding: 20rpx;
  background: #fff5f0;
  border-radius: 10rpx;
  border-left: 4rpx solid #ff803a;

  .tip-text {
    font-size: 26rpx;
    color: #ff803a;
    text-align: center;
  }
}

/* 模态框样式 */
.modal-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: 10000;

  .modal-content {
    width: 90%;
    max-width: 600rpx;
    background: #fff;
    border-radius: 20rpx;
    overflow: hidden;

    .modal-header {
      padding: 30rpx;
      text-align: center;
      border-bottom: 1rpx solid #f0f0f0;

      .modal-title {
        font-size: 32rpx;
        color: #333;
        font-weight: 500;
      }
    }

    .modal-body {
      padding: 30rpx;

      .form-group {
        margin-bottom: 30rpx;

        .form-label {
          display: block;
          font-size: 28rpx;
          color: #333;
          margin-bottom: 15rpx;
          font-weight: 500;
        }

        .form-input {
          width: 100%;
          height: 80rpx;
          border: 1rpx solid #e0e0e0;
          border-radius: 10rpx;
          padding: 0 20rpx;
          font-size: 28rpx;
          color: #333;
          background: #fafafa;

          &:focus {
            border-color: #ff803a;
            background: #fff;
          }
        }

        .form-select {
          width: 100%;
          height: 80rpx;
          border: 1rpx solid #e0e0e0;
          border-radius: 10rpx;
          padding: 0 20rpx;
          font-size: 28rpx;
          color: #333;
          background: #fafafa;
        }

        .upload-area {
          border: 2rpx dashed #e0e0e0;
          border-radius: 10rpx;
          padding: 40rpx;
          text-align: center;
          background: #fafafa;

          &.has-image {
            border-color: #ff803a;
            background: #fff;
          }

          .upload-icon {
            font-size: 60rpx;
            color: #999;
            margin-bottom: 20rpx;
          }

          .upload-text {
            font-size: 26rpx;
            color: #666;
            margin-bottom: 20rpx;
          }

          .upload-btn {
            display: inline-block;
            padding: 15rpx 30rpx;
            background: #ff803a;
            color: #fff;
            border-radius: 8rpx;
            font-size: 24rpx;
          }

          .preview-image {
            width: 200rpx;
            height: 200rpx;
            border-radius: 10rpx;
            margin: 20rpx auto;
          }
        }
      }
    }

    .modal-footer {
      display: flex;
      border-top: 1rpx solid #f0f0f0;

      .modal-btn {
        flex: 1;
        padding: 30rpx;
        text-align: center;
        font-size: 30rpx;
        font-weight: 500;

        &.cancel-btn {
          color: #666;
          border-right: 1rpx solid #f0f0f0;
        }

        &.confirm-btn {
          color: #ff803a;
        }
      }
    }
  }
}

/* 账号列表样式 */
.bank-list-modal {
  .modal-content {
    .bank-list {
      max-height: 600rpx;
      overflow-y: auto;

      .bank-item {
        display: flex;
        align-items: center;
        padding: 30rpx;
        border-bottom: 1rpx solid #f0f0f0;

        &:last-child {
          border-bottom: none;
        }

        .bank-icon {
          width: 60rpx;
          height: 60rpx;
          margin-right: 20rpx;
          border-radius: 8rpx;
        }

        .bank-info {
          flex: 1;

          .bank-name {
            font-size: 30rpx;
            color: #333;
            margin-bottom: 8rpx;
            font-weight: 500;
          }

          .bank-number {
            font-size: 26rpx;
            color: #666;
          }

          .bank-type {
            font-size: 24rpx;
            color: #999;
            margin-top: 5rpx;
          }
        }

        .delete-icon {
          width: 40rpx;
          height: 40rpx;
          color: #ff4757;
        }
      }
    }
  }
}

/* 响应式设计 */
@media (max-width: 750rpx) {
  .modal-content {
    width: 95%;
    margin: 20rpx;
  }

  .bank-management {
    flex-direction: column;

    .bank-btn {
      margin-bottom: 15rpx;
    }
  }
}

/* 动画效果 */
.modal-overlay {
  animation: fadeIn 0.3s ease-out;
}

.modal-content {
  animation: slideUp 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100rpx);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 加载状态样式 */
.loading-btn {
  position: relative;
  color: transparent !important;

  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30rpx;
    height: 30rpx;
    margin: -15rpx 0 0 -15rpx;
    border: 3rpx solid transparent;
    border-top: 3rpx solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
}
</style>