cfc/cfc-frontend/pages/promotion/withdraw.vue

<template>
  <view class="container">
    <!-- 可提现余额 -->
    <view class="balance-card">
      <text class="balance-label">可提现金额</text>
      <text class="balance-value" v-if="availableAmount">{{ formatPriceWithSymbol(availableAmount) }}</text>
      <text class="balance-value" v-else>{{ formatPriceWithSymbol(0) }}</text>
      <text class="balance-sub">累计佣金 {{ formatPriceWithSymbol(totalCommission) }}</text>
    </view>

    <!-- 提现规则 -->
    <view class="rules-card">
      <text class="rules-title">📋 提现规则</text>
      <view class="rules-list">
        <view class="rule-item">
          <text class="rule-label">可提现额度</text>
          <text class="rule-value">可提现金额 {{ formatPriceWithSymbol(availableAmount) }}，单笔最低提现 1 元</text>
        </view>
        <view class="rule-item">
          <text class="rule-label">提现次数</text>
          <text class="rule-value">每日最多提现 1 次</text>
        </view>
        <view class="rule-item">
          <text class="rule-label">提现时间</text>
          <text class="rule-value">全天 24 小时均可申请提现</text>
        </view>
        <view class="rule-item">
          <text class="rule-label">到账时间</text>
          <text class="rule-value">提交申请后 1-3 个工作日到账，节假日顺延</text>
        </view>
        <view class="rule-item">
          <text class="rule-label">提现账户</text>
          <text class="rule-value">提现至支付宝账号，请确保账号信息准确</text>
        </view>
      </view>
    </view>

    <!-- 快捷金额 -->
    <view class="quick-amounts">
      <view class="quick-item" :class="amount === '100' ? 'quick-active' : ''" @click="amount = '100'">
        <text>¥100</text>
      </view>
      <view class="quick-item" :class="amount === '200' ? 'quick-active' : ''" @click="amount = '200'">
        <text>¥200</text>
      </view>
      <view class="quick-item" :class="amount === '500' ? 'quick-active' : ''" @click="amount = '500'">
        <text>¥500</text>
      </view>
      <view class="quick-item quick-all" @click="setAllAmount">
        <text>全部提现</text>
      </view>
    </view>

    <!-- 提现表单 -->
    <view class="form-card">
      <view class="form-item">
        <text class="form-label">提现金额</text>
        <view class="input-row">
          <input v-model="amount" type="digit" placeholder="输入提现金额" class="form-input" />
          <text class="unit">元</text>
        </view>
      </view>
      <view class="form-item">
        <text class="form-label">支付宝账号</text>
        <input v-model="accountInfo" type="text" placeholder="请输入支付宝账号" class="form-input" />
      </view>
      <view class="form-tip">最低提现金额：1元</view>
      <button class="submit-btn" @click="submitWithdraw">提交申请</button>
    </view>

    <!-- 提现历史 -->
    <view class="history-section" v-if="history.length > 0">
      <text class="section-title">提现记录</text>
      <view class="history-item" v-for="item in history" :key="item.id">
        <view class="history-left">
          <text class="history-amount">{{ formatPriceWithSymbol(item.amount) }}</text>
          <text class="history-time">{{ formatTime(item.createdAt) }}</text>
        </view>
        <text :class="['history-status', statusClass(item.status)]">{{ statusText(item.status) }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getCommissionSummary, applyWithdrawal, getWithdrawalHistory } from '../../utils/api.js'

export default {
  data() {
    return {
      availableAmount: '0.00',
      totalCommission: '0.00',
      amount: '',
      accountInfo: '',
      history: [],
      historyPage: 1
    }
  },
  onLoad() {
    this.loadBalance()
    this.loadHistory()
  },
  methods: {
    async loadBalance() {
      try {
        const res = await getCommissionSummary()
        if (res.data) {
          this.availableAmount = res.data.availableAmount || '0.00'
          this.totalCommission = res.data.totalCommission || '0.00'
        }
      } catch (e) {
        console.error('获取佣金总览失败', e)
      }
    },
    async loadHistory() {
      try {
        const res = await getWithdrawalHistory(this.historyPage)
        if (res.data && res.data.records) {
          this.history = res.data.records
        }
      } catch (e) {
        console.error('获取提现记录失败', e)
      }
    },
    setAllAmount() {
      this.amount = String(parseFloat(this.availableAmount))
    },
    submitWithdraw() {
      var amountNum = parseFloat(this.amount)
      if (!this.amount || isNaN(amountNum) || amountNum < 1) {
        uni.showToast({ title: '提现金额不能少于1元', icon: 'none' })
        return
      }
      if (amountNum > parseFloat(this.availableAmount)) {
        uni.showToast({ title: '提现金额超过可提现余额', icon: 'none' })
        return
      }
      if (!this.accountInfo) {
        uni.showToast({ title: '请输入支付宝账号', icon: 'none' })
        return
      }
      uni.showModal({
        title: '确认提现',
        content: '确认提现 ¥' + amountNum.toFixed(2) + ' 元到 ' + this.accountInfo + ' ?',
        success: function(res) {
          if (res.confirm) {
            this.doWithdraw(amountNum)
          }
        }.bind(this)
      })
    },
    async doWithdraw(amountNum) {
      try {
        await applyWithdrawal(amountNum, this.accountInfo)
        uni.showToast({ title: '提现申请已提交', icon: 'success' })
        this.amount = ''
        this.accountInfo = ''
        this.loadBalance()
        this.loadHistory()
      } catch (e) {
        uni.showToast({ title: e.message || '提现失败', icon: 'none' })
      }
    },
    statusText(status) {
      var map = { pending: '待审核', approved: '已通过', rejected: '已拒绝' }
      return map[status] || status
    },
    statusClass(status) {
      if (status === 'approved') return 'text-success'
      if (status === 'rejected') return 'text-danger'
      return 'text-warning'
    },
    formatTime(time) {
      if (!time) return ''
      var t = new Date(time)
      return t.getFullYear() + '-' + String(t.getMonth() + 1).padStart(2, '0') + '-' + String(t.getDate()).padStart(2, '0')
    }
  }
}
</script>

<style scoped>
.container {
  padding: 30rpx;
  min-height: 100vh;
  background: #FFF7ED;
}
.balance-card {
  background: linear-gradient(135deg, #F97316, #EA580C);
  border-radius: 20rpx;
  padding: 40rpx;
  text-align: center;
  color: #fff;
  margin-bottom: 24rpx;
}
.balance-label {
  font-size: 26rpx;
  opacity: 0.9;
}
.balance-value {
  font-size: 60rpx;
  font-weight: bold;
  margin-top: 12rpx;
}
.balance-sub {
  font-size: 22rpx;
  opacity: 0.7;
  margin-top: 8rpx;
  display: block;
}

/* ===== 提现规则 ===== */
.rules-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(249,115,22,0.08);
}
.rules-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #1E293B;
  display: block;
  margin-bottom: 20rpx;
}
.rules-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}
.rule-item {
  display: flex;
  align-items: flex-start;
}
.rule-label {
  width: 140rpx;
  font-size: 24rpx;
  color: #94A3B8;
  flex-shrink: 0;
}
.rule-value {
  flex: 1;
  font-size: 24rpx;
  color: #1E293B;
  line-height: 1.5;
}

/* ===== 快捷金额 ===== */
.quick-amounts {
  display: flex;
  gap: 16rpx;
  margin-bottom: 24rpx;
}
.quick-item {
  flex: 1;
  height: 72rpx;
  line-height: 72rpx;
  text-align: center;
  background: #fff;
  border: 1rpx solid #FED7AA;
  border-radius: 12rpx;
  font-size: 26rpx;
  color: #F97316;
  font-weight: 500;
}
.quick-item:active {
  opacity: 0.8;
}
.quick-active {
  background: #F97316;
  border-color: #F97316;
  color: #fff;
}
.quick-all {
  color: #64748B;
  border-color: #CBD5E1;
  font-size: 22rpx;
}

.form-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(249,115,22,0.08);
}
.form-item {
  margin-bottom: 30rpx;
}
.form-label {
  font-size: 28rpx;
  color: #1E293B;
  display: block;
  margin-bottom: 16rpx;
  font-weight: 500;
}
.input-row {
  display: flex;
  align-items: center;
  border: 1rpx solid #CBD5E1;
  border-radius: 12rpx;
  padding: 20rpx;
}
.form-input {
  flex: 1;
  font-size: 28rpx;
}
.unit {
  font-size: 28rpx;
  color: #94A3B8;
  margin: 0 16rpx;
}
.form-tip {
  font-size: 22rpx;
  color: #94A3B8;
  margin-bottom: 24rpx;
}
.submit-btn {
  background: linear-gradient(135deg, #F97316, #EA580C);
  color: #fff;
  font-size: 30rpx;
  border-radius: 40rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-weight: 600;
  border: none;
}
.submit-btn::after { border: none; }
.submit-btn:active { opacity: 0.9; }
.history-section {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(249,115,22,0.08);
}
.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #1E293B;
  display: block;
  margin-bottom: 20rpx;
}
.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #FED7AA;
}
.history-item:last-child { border-bottom: none; }
.history-left {
  flex: 1;
}
.history-amount {
  font-size: 28rpx;
  font-weight: bold;
  display: block;
  color: #1E293B;
}
.history-time {
  font-size: 22rpx;
  color: #94A3B8;
  margin-top: 4rpx;
}
.history-status {
  font-size: 24rpx;
}
.text-success { color: #10B981; }
.text-warning { color: #D97706; }
.text-danger { color: #EF4444; }
</style>