yxe-mp/pages/bonus/withdraw-record.vue

<template>
  <view class="withdraw-record-page">
    <view class="page-hero">
      <AppNavbar title="提现记录" show-back/>
      <view class="intro-card">
        <view class="card-title">
          <view class="title-bar"></view>
          <text>提现记录</text>
        </view>
        <text class="intro-text">查看历史提现申请与审核状态</text>
      </view>
    </view>

    <view class="card block">
      <view class="section-title">历史提现</view>
      <view v-if="loading" class="empty">加载中...</view>
      <view v-else-if="records.length === 0" class="empty">暂无记录</view>
      <view v-else class="record" v-for="(item, idx) in records" :key="idx">
        <view class="record-left">
          <view class="record-amount">¥ {{ item.money }}</view>
          <view class="record-meta">申请时间：{{ item.date }}</view>
          <view class="record-tags">
            <view :class="['record-tag', payTypeClass(item.payType)]">{{ payTypeLabel(item.payType) }}</view>
          </view>
          <view v-if="item.applyStatus === 2 && item.rejectReason" class="record-reject">
            拒绝原因：{{ item.rejectReason }}
          </view>
        </view>
        <view :class="['record-status', statusClass(item.applyStatus)]">{{ statusLabel(item.applyStatus) }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import AppNavbar from "@/components/AppNavbar.vue";
import {dealerWithdrawListReq} from "@/api/user";
import dayjs from 'dayjs'

export default {
  components: {AppNavbar},
  data() {
    return {
      loading: false,
      records: []
    }
  },
  onShow() {
    this.fetchRecords()
  },
  methods: {
    statusLabel(status) {
      if (status === 0) return '待审核'
      if (status === 1) return '审核通过'
      if (status === 2) return '已驳回'
      if (status === 3) return '已打款'
      return '未知状态'
    },
    statusClass(status) {
      if (status === 1) return 'success'
      if (status === 2) return 'danger'
      if (status === 3) return 'info'
      return 'pending'
    },
    payTypeLabel(payType) {
      if (payType === 10) return '微信'
      if (payType === 20) return '支付宝'
      if (payType === 30) return '银行卡'
      return '未知方式'
    },
    payTypeClass(payType) {
      if (payType === 10) return 'wechat'
      if (payType === 20) return 'alipay'
      if (payType === 30) return 'bank'
      return 'unknown'
    },
    normalizeRecord(item) {
      const money = Number(item.money || item.amount || item.cash || 0).toFixed(2)
      const applyStatus = Number(item.applyStatus)
      return {
        money,
        applyStatus: Number.isFinite(applyStatus) ? applyStatus : -1,
        payType: Number(item.payType),
        rejectReason: item.rejectReason || item.reject_reason || '',
        date: dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') || item.createdAt || item.create_time || '-'
      }
    },
    async fetchRecords() {
      this.loading = true
      try {
        const {data} = await dealerWithdrawListReq({})
        const list = Array.isArray(data) ? data : (data && data.list ? data.list : [])
        this.records = list.map(this.normalizeRecord)
      } catch (err) {
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.withdraw-record-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.page-hero {
  background: url('https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/462bfa04cf0eff8698884c38b9d17519.png') no-repeat
    top center / 100% auto;
}

.intro-card {
  margin: 18rpx 20rpx 0;
  padding: 20rpx 18rpx;
  border-radius: 20rpx;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.08);
}

.card-title {
  display: flex;
  align-items: center;
  gap: 12rpx;
  font-size: 28rpx;
  font-weight: 700;
  color: #1f2937;
}

.title-bar {
  width: 6rpx;
  height: 30rpx;
  border-radius: 999rpx;
  background: #2fc6a7;
}

.intro-text {
  margin-top: 12rpx;
  font-size: 26rpx;
  color: #6b7280;
  line-height: 1.6;
}

.block {
  margin: 18rpx 20rpx 0;
}

.record {
  display: flex;
  justify-content: space-between;
  gap: 16rpx;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #edf1f7;
}

.record:last-child {
  border-bottom: none;
}

.record-left {
  flex: 1;
}

.record-amount {
  font-size: 28rpx;
  font-weight: 700;
  color: #111827;
}

.record-meta {
  margin-top: 6rpx;
  font-size: 24rpx;
  color: #6b7280;
}

.record-reject {
  margin-top: 6rpx;
  font-size: 24rpx;
  color: #ef4444;
}

.record-tags {
  margin-top: 8rpx;
  display: flex;
  gap: 8rpx;
  flex-wrap: wrap;
}

.record-tag {
  padding: 4rpx 12rpx;
  border-radius: 999rpx;
  font-size: 22rpx;
  font-weight: 700;
}

.record-tag.wechat {
  color: #16a34a;
  background: #dbeafe;
}

.record-tag.alipay {
  color: #1d4ed8;
  background: #dbeafe;
}

.record-tag.bank {
  color: #0f766e;
  background: #ccfbf1;
}

.record-tag.unknown {
  color: #6b7280;
  background: #f3f4f6;
}

.record-status {
  font-size: 24rpx;
  font-weight: 700;
  padding: 6rpx 14rpx;
  border-radius: 999rpx;
  align-self: center;
}

.record-status.pending {
  color: #f59e0b;
  background: #fff7ed;
}

.record-status.success {
  color: #16a34a;
  background: #ecfdf5;
}

.record-status.danger {
  color: #ef4444;
  background: #fee2e2;
}

.record-status.info {
  color: #2563eb;
  background: #e0f2fe;
}

.empty {
  color: var(--text-sub);
  text-align: center;
  padding: 16rpx 0;
}
</style>