HomeLease/components/cashFlowCard/cashFlowCard.vue

<template>
  <view class="card">
    <view class="card-head">
      <view class="card-date">{{ cardData.date }}</view>
      <view class="card-flow">
        <view class="card-out">¥{{ cardData.outflow.toFixed(2) }}</view>
        <view class="card-in">¥{{ cardData.inflow.toFixed(2) }}</view>
      </view>
    </view>
    <view class="card-item" v-for="(item, index) in cardData.items" :key="index">
      <view class="card-item-cash-info">
        <view class="card-icon">
          <image :src="getIconByTitle(item.title)" mode="aspectFit" />
        </view>
        <view class="card-item-detail">
          <view class="card-item-title">
            <view class="left">{{ item.title }}</view>
            <view class="right" v-if="item.status">{{ item.status }}</view>
          </view>
          <view class="card-item-body">
            <view class="card-time">{{ item.time }}</view>
            <view class="divider"></view>
            <view class="order-number">{{ item.orderNumber }}</view>
          </view>
        </view>
      </view>
      <view class="number" :class="item.amount >= 0 ? 'positive' : 'negative'">
        {{ item.amount >= 0 ? '+' : '' }}¥{{ Math.abs(item.amount).toFixed(2) }}
      </view>
    </view>
  </view>
</template>

<script>
import commonEnum from '../../enum/commonEnum'

export default {
  name: 'CashFlowCard',
  props: {
    cardData: {
      type: Object,
      required: true
    }
  },
  methods: {
    getIconByTitle(title) {
      // 根据标题自动选择对应的图标
      const iconMap = {
        '提现': commonEnum.WITHDRAW,
        '订单': commonEnum.ORDER_NUMBER,
        // 可以根据需要添加更多映射
      }
      return iconMap[title] || ''
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  border-radius: 20rpx;
  margin: 12rpx 22rpx 12rpx 22rpx;
  padding: 40rpx;

  .card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #f0f0f0;

    .card-date {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
    }

    .card-flow {
      display: flex;
      gap: 30rpx;

      .card-out {
        font-size: 24rpx;
        color: #333;
        
        &::before {
          content: '出 ';
          color: #666;
        }
      }

      .card-in {
        font-size: 24rpx;
        color: #333;
        
        &::before {
          content: '入 ';
          color: #666;
        }
      }
    }
  }

  .card-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin-top: 20rpx;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .card-item-cash-info {
      display: flex;
      align-items: flex-start;
      flex: 1;

      .card-icon {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        margin-right: 20rpx;
        border: 2rpx dashed #ccc;
        display: flex;
        align-items: center;
        justify-content: center;

        image {
          width: 40rpx;
          height: 40rpx;
        }
      }

      .card-item-detail {
        flex: 1;

        .card-item-title {
          display: flex;
          align-items: center;
          margin-bottom: 10rpx;
          gap: 10rpx;

          .left {
            font-size: 28rpx;
            color: #333;
            font-weight: 500;
          }

          .right {
            font-size: 24rpx;
            color: #ff803a;
            background-color: rgba(255, 128, 58, 0.1);
            padding: 4rpx 8rpx;
            border-radius: 8rpx;
          }
        }

        .card-item-body {
          display: flex;
          align-items: center;
          gap: 10rpx;

          .card-time {
            font-size: 22rpx;
            color: #999;
          }

          .divider {
            width: 1rpx;
            height: 20rpx;
            background-color: #e0e0e0;
          }

          .order-number {
            font-size: 22rpx;
            color: #999;
          }
        }
      }
    }

    .number {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      text-align: right;

      &.positive {
        color: #ff803a;
      }

      &.negative {
        color: #333;
      }
    }
  }
}
</style>