shop-toy/src/components/finance/CreditCard.vue

<template>
  <view class="credit-card" @click="handleClick">
    <view class="header">
      <view class="title-wrapper">
        <text class="title">{{ title }}</text>
        <view v-if="isExhausted" class="status-tag exhausted">额度已用尽</view>
        <view v-else-if="isHighUsage" class="status-tag warning">额度紧张</view>
      </view>
    </view>
    
    <view class="content">
      <view class="row">
        <view class="item">
          <text class="label">可用额度</text>
          <text class="value" :class="{ 'exhausted': isExhausted }">¥{{ formatPrice(availableLimit) }}</text>
        </view>
        <view class="item">
          <text class="label">总额度</text>
          <text class="value">¥{{ formatPrice(totalLimit) }}</text>
        </view>
      </view>
      
      <!-- 进度条 -->
      <view class="progress-wrapper">
        <view class="progress-bg">
          <view class="progress-bar" :style="{ width: percent + '%', background: progressColor }"></view>
        </view>
        <view class="progress-text">
          <text>已用 {{ percent }}%</text>
          <text>¥{{ formatPrice(usedLimit) }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
interface Props {
  title: string
  totalLimit: number
  usedLimit: number
  availableLimit: number
  updateTime: string
  hideUpdateTime?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  hideUpdateTime: false
})

const emit = defineEmits(['click'])

// 计算使用百分比
const percent = computed(() => {
  if (props.totalLimit === 0) return 0
  return Math.min(100, Math.round((props.usedLimit / props.totalLimit) * 100))
})

// 判断是否额度已用尽
const isExhausted = computed(() => {
  return props.availableLimit <= 0 || percent.value >= 100
})

// 判断是否高使用率
const isHighUsage = computed(() => {
  return percent.value >= 80 && percent.value < 100
})

// 根据使用率返回进度条颜色
const progressColor = computed(() => {
  if (isExhausted.value) return '#ff4d4f' // 红色
  if (isHighUsage.value) return '#faad14' // 橙色
  return '#52c41a' // 绿色
})

function formatPrice(price: number) {
  return price.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
}

function handleClick() {
  emit('click')
}
</script>

<style lang="scss" scoped>
.credit-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 24rpx;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  
  &:active {
    transform: scale(0.98);
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  }
  
  // 添加左侧彩色边框
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6rpx;
    background: #1890ff;
    border-radius: 3rpx 0 0 3rpx;
  }
  
  // 额度已用尽的卡片
  &.exhausted {
    &::before {
      background: #ff4d4f;
    }
  }
  
  // 额度紧张的卡片
  &.warning {
    &::before {
      background: #faad14;
    }
  }
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  
  .title-wrapper {
    display: flex;
    align-items: center;
    gap: 16rpx;
  }
  
  .title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }
  
  .status-tag {
    padding: 6rpx 12rpx;
    border-radius: 20rpx;
    font-size: 20rpx;
    font-weight: 500;
    
    &.exhausted {
      background: rgba(255, 77, 79, 0.1);
      color: #ff4d4f;
    }
    
    &.warning {
      background: rgba(250, 173, 20, 0.1);
      color: #faad14;
    }
  }
}

.content {
  .row {
    display: flex;
    margin-bottom: 30rpx;
    
    .item {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 8rpx;
      
      .label {
        font-size: 26rpx;
        color: #666;
      }
      
      .value {
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
        
        &.exhausted {
          color: #ff4d4f;
        }
      }
    }
  }
  
  .progress-wrapper {
    .progress-bg {
      height: 16rpx;
      background: #f5f5f5;
      border-radius: 8rpx;
      overflow: hidden;
      margin-bottom: 12rpx;
    }
    
    .progress-bar {
      height: 100%;
      border-radius: 8rpx;
      transition: width 0.5s ease, background 0.3s ease;
    }
    
    .progress-text {
      display: flex;
      justify-content: space-between;
      font-size: 24rpx;
      color: #999;
    }
  }
}
</style>