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 v-for="(item, index) in cardData.items" :key="index" class="card-item">
      <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 v-if="item.status" class="right">{{ 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="item.amount >= 0 ? 'positive' : 'negative'" class="number">
        {{ 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%;

    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    background: #f7f7f7;

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

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

      .card-icon {
        width: 80rpx;
        height: 80rpx;

        margin-right: 20rpx;
        //border: 2rpx dashed #ccc;
        display: flex;
        align-items: center;
        justify-content: center;

        image {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
        }
      }

      .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: #f15a04;
          }
        }
      }
    }

    .number {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      text-align: right;
      padding-right: 20rpx;
      white-space: nowrap;

      &.positive {
        color: #ff803a;
      }

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