num/client/pages/withdraw/index.vue

<template>
  <view class="page-withdraw" :class="themeClass">
    <!-- Balance card -->
    <view class="balance-card">
      <text class="balance-label">可提现余额</text>
      <text class="balance-amount">¥{{ formatMoney(balance) }}</text>
    </view>

    <!-- Amount input -->
    <view class="input-section">
      <text class="input-label">提现金额</text>
      <view class="input-row">
        <text class="input-prefix">¥</text>
        <input
          class="amount-input"
          type="digit"
          v-model="amount"
          placeholder="输入提现金额"
          @input="validateAmount"
        />
      </view>
      <view class="amount-hints">
        <text class="hint">最低提现 ¥100</text>
        <text class="hint-link" @click="setAll">全部提现</text>
      </view>
      <text v-if="error" class="error-text">{{ error }}</text>
    </view>

    <!-- Rules -->
    <view class="rules-card">
      <text class="rules-title">提现规则</text>
      <text class="rule">• 最低提现金额 ¥100</text>
      <text class="rule">• 提现申请提交后由平台审核处理</text>
      <text class="rule">• 审核通过后佣金将自动扣除</text>
    </view>

    <!-- Submit -->
    <button class="submit-btn" @click="handleApply" :disabled="submitting || !amountValid">
      {{ submitting ? '提交中...' : '提交提现申请' }}
    </button>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { withdrawApi } from '@/utils/api'
import { useTheme } from '@/composables/useThemeStyle'

const { themeClass } = useTheme()

const balance = ref(0)
const amount = ref('')
const error = ref('')
const submitting = ref(false)

const amountNum = computed(() => parseInt(amount.value) || 0)
const amountValid = computed(() => amountNum.value >= 100 && amountNum.value <= balance.value)

onMounted(async () => {
  try {
    const res = await withdrawApi.balance()
    balance.value = res.balance || 0
  } catch (e) {
    // silent
  }
})

function validateAmount() {
  const num = parseInt(amount.value) || 0
  if (amount.value && num < 100) {
    error.value = '最低提现金额为 ¥100'
  } else if (num > balance.value) {
    error.value = `超出可提现余额 ¥${formatMoney(balance.value)}`
  } else {
    error.value = ''
  }
}

function setAll() {
  amount.value = String(Math.floor(balance.value / 100) * 100)
  validateAmount()
}

async function handleApply() {
  if (!amountValid.value) return
  submitting.value = true
  try {
    await withdrawApi.apply(amountNum.value)
    uni.showToast({ title: '提现申请已提交', icon: 'success' })
    setTimeout(() => uni.navigateBack(), 1500)
  } catch (e) {
    uni.showToast({ title: e.message || '提交失败', icon: 'none' })
  }
  submitting.value = false
}

function formatMoney(cents) {
  if (cents == null) return '0.00'
  return (cents / 100).toFixed(2)
}
</script>

<style scoped lang="scss">
.page-withdraw {
  min-height: 100vh;
  background: var(--color-bg);
  padding: 16px;
}

.balance-card {
  background: linear-gradient(135deg, var(--color-brand), #2D4A7A);
  border-radius: 14px;
  padding: 28px 20px;
  text-align: center;
  margin-bottom: 16px;
}
.balance-label {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  display: block;
}
.balance-amount {
  font-size: 40px;
  font-weight: 700;
  color: var(--color-gold);
  display: block;
  margin-top: 6px;
}

.input-section {
  background: var(--color-bg-card);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;
}
.input-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  display: block;
  margin-bottom: 12px;
}
.input-row {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0 14px;
  height: 48px;
}
.input-prefix {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-brand);
  margin-right: 6px;
}
.amount-input {
  flex: 1;
  height: 100%;
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.amount-hints {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}
.hint {
  font-size: 12px;
  color: var(--color-text-secondary);
}
.hint-link {
  font-size: 12px;
  color: var(--color-info);
  font-weight: 500;
}
.error-text {
  display: block;
  font-size: 12px;
  color: var(--color-danger);
  margin-top: 8px;
}

.rules-card {
  background: var(--color-bg-card);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 24px;
}
.rules-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  display: block;
  margin-bottom: 8px;
}
.rule {
  font-size: 12px;
  color: var(--color-text-secondary);
  display: block;
  padding: 3px 0;
  line-height: 1.5;
}

.submit-btn {
  width: 100%;
  height: 48px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border: none;
  border-radius: 14px;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: 1px;
}
.submit-btn[disabled] {
  opacity: 0.4;
}
</style>