haha/haha-admin-mp/src/pages/distribution/withdrawal.vue

<template>
  <view class="page">
    <NavBar title="申请提现" :showBack="true" />

    <view class="content">
      <!-- 当前余额 -->
      <view class="balance-card" v-if="myStats">
        <text class="balance-label">可提现余额</text>
        <view class="balance-amount">
          <text class="amount-symbol">¥</text>
          <text class="amount-value">{{ myStats.commissionBalance.toFixed(2) }}</text>
        </view>
        <view class="balance-detail">
          <text class="detail-item">冻结金额：¥{{ myStats.frozenAmount.toFixed(2) }}</text>
        </view>
      </view>

      <!-- 提现金额输入 -->
      <view class="input-section">
        <text class="input-label">提现金额</text>
        <view class="input-wrapper">
          <text class="input-prefix">¥</text>
          <input
            class="amount-input"
            type="digit"
            v-model="withdrawalAmount"
            placeholder="请输入提现金额"
            :maxlength="10"
          />
        </view>
        <view class="input-actions">
          <text class="action-link" @click="fillAll">全部提现</text>
        </view>
      </view>

      <!-- 提现说明 -->
      <view class="tips-section">
        <text class="tips-title">提现说明</text>
        <view class="tip-item">
          <text class="tip-dot"></text>
          <text class="tip-text">提现金额最低 10 元</text>
        </view>
        <view class="tip-item">
          <text class="tip-dot"></text>
          <text class="tip-text">提现申请提交后，将在1-3个工作日内审核</text>
        </view>
        <view class="tip-item">
          <text class="tip-dot"></text>
          <text class="tip-text">审核通过后，款项将打入您的绑定账户</text>
        </view>
      </view>

      <!-- 提交按钮 -->
      <button class="btn-submit" @click="handleSubmit" :disabled="isSubmitting">
        {{ isSubmitting ? '提交中...' : '确认提现' }}
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { logger } from '@/utils/logger';
import NavBar from '@/components/NavBar.vue';
import { getMyStats, applyWithdrawal } from '@/api/distribution';
import type { DistributionStats } from '@/api/distribution';

const myStats = ref<DistributionStats | null>(null);
const withdrawalAmount = ref('');
const isSubmitting = ref(false);

onMounted(() => {
  loadStats();
});

const loadStats = async () => {
  try {
    myStats.value = await getMyStats();
  } catch (error) {
    logger.warn('加载分销统计失败', error);
  }
};

const fillAll = () => {
  if (myStats.value) {
    withdrawalAmount.value = myStats.value.commissionBalance.toFixed(2);
  }
};

const handleSubmit = async () => {
  const amount = parseFloat(withdrawalAmount.value);

  if (!withdrawalAmount.value || isNaN(amount)) {
    uni.showToast({ title: '请输入提现金额', icon: 'none' });
    return;
  }

  if (amount < 10) {
    uni.showToast({ title: '提现金额最低10元', icon: 'none' });
    return;
  }

  if (myStats.value && amount > myStats.value.commissionBalance) {
    uni.showToast({ title: '提现金额不能超过可提现余额', icon: 'none' });
    return;
  }

  isSubmitting.value = true;

  try {
    const result = await applyWithdrawal(amount);

    if (result.success) {
      uni.showToast({ title: '提现申请已提交', icon: 'success' });

      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    } else {
      uni.showToast({ title: result.message || '提现申请失败', icon: 'none' });
    }
  } catch (error) {
    logger.warn('提现申请失败', error);
    uni.showToast({ title: '提现申请失败，请重试', icon: 'none' });
  } finally {
    isSubmitting.value = false;
  }
};
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: $bg-color-page;
}

.content {
  padding: 24rpx;
  padding-top: 0;
}

.balance-card {
  background: linear-gradient(135deg, $primary-color 0%, $primary-color-dark 100%);
  border-radius: 20rpx;
  padding: 36rpx;
  margin-bottom: 24rpx;
  color: $bg-color-card;
}

.balance-label {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.8);
  display: block;
  margin-bottom: 12rpx;
}

.balance-amount {
  display: flex;
  align-items: baseline;
  margin-bottom: 16rpx;
}

.amount-symbol {
  font-size: 32rpx;
  font-weight: 600;
  color: $bg-color-card;
  margin-right: 4rpx;
}

.amount-value {
  font-size: 64rpx;
  font-weight: 700;
  color: $bg-color-card;
}

.balance-detail {
  padding-top: 16rpx;
  border-top: 1rpx solid rgba(255, 255, 255, 0.2);
}

.detail-item {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.7);
}

.input-section {
  background: $bg-color-card;
  border-radius: 20rpx;
  padding: 28rpx;
  margin-bottom: 24rpx;
  border: 1rpx solid $border-color;
}

.input-label {
  font-size: 28rpx;
  font-weight: 600;
  color: $text-color-primary;
  display: block;
  margin-bottom: 20rpx;
}

.input-wrapper {
  display: flex;
  align-items: center;
  padding: 20rpx 24rpx;
  background: $bg-color-page;
  border-radius: 12rpx;
  border: 2rpx solid $border-color;
}

.input-prefix {
  font-size: 40rpx;
  font-weight: 700;
  color: $text-color-primary;
  margin-right: 12rpx;
}

.amount-input {
  flex: 1;
  font-size: 40rpx;
  font-weight: 600;
  color: $text-color-primary;
  height: 56rpx;
}

.input-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16rpx;
}

.action-link {
  font-size: 26rpx;
  color: $info-color;
  font-weight: 500;
}

.tips-section {
  background: $bg-color-card;
  border-radius: 20rpx;
  padding: 28rpx;
  margin-bottom: 40rpx;
  border: 1rpx solid $border-color;
}

.tips-title {
  font-size: 28rpx;
  font-weight: 600;
  color: $text-color-primary;
  display: block;
  margin-bottom: 16rpx;
}

.tip-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.tip-dot {
  width: 10rpx;
  height: 10rpx;
  background: $text-color-muted;
  border-radius: 50%;
  margin-right: 12rpx;
  margin-top: 12rpx;
  flex-shrink: 0;
}

.tip-text {
  font-size: 24rpx;
  color: $text-color-tertiary;
  line-height: 36rpx;
}

.btn-submit {
  width: 100%;
  height: 96rpx;
  line-height: 96rpx;
  padding: 0;
  background: linear-gradient(135deg, $primary-color 0%, $primary-color-dark 100%);
  border-radius: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: 600;
  color: $bg-color-card;
  border: none;

  &[disabled] {
    background: $text-color-placeholder;
    color: $text-color-muted;
  }

  &:active:not([disabled]) {
    opacity: 0.9;
  }
}
</style>