修改信用额度

src/components/finance/CreditCard.vue

@@ -1,26 +1,29 @@
 <template>
-  <view class="credit-card">
+  <view class="credit-card" @click="handleClick">
     <view class="header">
-      <text class="title">{{ title }}</text>
-      <text class="date">更新于 {{ updateTime }}</text>
+      <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">¥{{ formatPrice(totalLimit) }}</text>
+          <text class="label">可用额度</text>
+          <text class="value" :class="{ 'exhausted': isExhausted }">¥{{ formatPrice(availableLimit) }}</text>
         </view>
         <view class="item">
-          <text class="label">可用额度</text>
-          <text class="value highlight">¥{{ formatPrice(availableLimit) }}</text>
+          <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 + '%' }"></view>
+          <view class="progress-bar" :style="{ width: percent + '%', background: progressColor }"></view>
         </view>
         <view class="progress-text">
           <text>已用 {{ percent }}%</text>
@@ -38,18 +41,45 @@ interface Props {
   usedLimit: number
   availableLimit: number
   updateTime: string
+  hideUpdateTime?: boolean
 }
 
-const props = defineProps<Props>()
+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>
@@ -59,6 +89,40 @@ function formatPrice(price: number) {
   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 {
@@ -67,29 +131,33 @@ function formatPrice(price: number) {
   align-items: center;
   margin-bottom: 30rpx;
   
+  .title-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 16rpx;
+  }
+  
   .title {
     font-size: 32rpx;
     font-weight: 600;
     color: #333;
-    position: relative;
-    padding-left: 20rpx;
-    
-    &::before {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 50%;
-      transform: translateY(-50%);
-      width: 8rpx;
-      height: 32rpx;
-      background: #ff4d4f;
-      border-radius: 4rpx;
-    }
   }
   
-  .date {
-    font-size: 24rpx;
-    color: #999;
+  .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;
+    }
   }
 }
 
@@ -114,8 +182,8 @@ function formatPrice(price: number) {
         font-weight: 600;
         color: #333;
         
-        &.highlight {
-          color: #52c41a;
+        &.exhausted {
+          color: #ff4d4f;
         }
       }
     }
@@ -123,18 +191,17 @@ function formatPrice(price: number) {
   
   .progress-wrapper {
     .progress-bg {
-      height: 12rpx;
+      height: 16rpx;
       background: #f5f5f5;
-      border-radius: 6rpx;
+      border-radius: 8rpx;
       overflow: hidden;
       margin-bottom: 12rpx;
     }
     
     .progress-bar {
       height: 100%;
-      background: linear-gradient(90deg, #ff9c6e 0%, #ff4d4f 100%);
-      border-radius: 6rpx;
-      transition: width 0.3s ease;
+      border-radius: 8rpx;
+      transition: width 0.5s ease, background 0.3s ease;
     }
     
     .progress-text {