From b3ce16a6cb1ebd25c0916c0c382d871732520807 Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Mon, 18 Aug 2025 14:11:32 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B6=E6=94=AF=E6=98=8E=E7=BB=86=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=EF=BC=8Ccard=E7=9A=84=E7=BB=84=E4=BB=B6=E6=8A=BD?=
 =?UTF-8?q?=E7=A6=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/cashFlowCard/cashFlowCard.vue | 209 +++++++++++++++++++++++
 pages/cashFlow/cashFlow.vue              | 104 +++++------
 2 files changed, 250 insertions(+), 63 deletions(-)
 create mode 100644 components/cashFlowCard/cashFlowCard.vue

diff --git a/components/cashFlowCard/cashFlowCard.vue b/components/cashFlowCard/cashFlowCard.vue
new file mode 100644
index 0000000..64c8e11
--- /dev/null
+++ b/components/cashFlowCard/cashFlowCard.vue
@@ -0,0 +1,209 @@
+<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> 
\ No newline at end of file
diff --git a/pages/cashFlow/cashFlow.vue b/pages/cashFlow/cashFlow.vue
index 5a68c9e..5cc0d37 100644
--- a/pages/cashFlow/cashFlow.vue
+++ b/pages/cashFlow/cashFlow.vue
@@ -15,8 +15,7 @@
         </image>
       </view>
       <view class="cash-flow">
-        <view class="date">
-          <view class="uni-list-cell">
+        <view class="uni-list-cell">
             <view class="uni-list-cell-db">
               <picker
                 :end="endDate"
@@ -36,32 +35,7 @@
     </view>
 
     <!-- 卡片区域 -->
-    <view v-for="(item, index) in billList" :key="index" class="card">
-      <view class="card-head">
-        <view class="card-date">428</view>
-        <view class="card-flow">
-          <view class="card-out">200</view>
-          <view class="card-in">201</view>
-        </view>
-      </view>
-      <view class="card-item">
-        <view class="card-item-cash-info">
-          <view class="card-icon"></view>
-          <view class="card-item-detail">
-            <view class="card-item-title">
-              <text class="left">1</text>
-              <text class="right">2</text>
-            </view>
-            <view class="card-item-body">
-              <text class="card-time">3</text>
-              <text class="order-number">4</text>
-            </view>
-          </view>
-        </view>
-        <view class="number">2222</view>
-      </view>
-      {{ item.date }}
-    </view>
+    <cash-flow-card v-for="(item, index) in cardList" :key="index" :cardData="item" />
   </view>
   <!-- 底部弹窗 -->
   <uni-popup ref="popup" :mask-click="true" type="bottom">
@@ -94,10 +68,11 @@
 import commonEnum from '../../enum/commonEnum'
 import { getNavBarHeight } from '../../utils/system'
 import uniPopup from '../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
+import CashFlowCard from '../../components/cashFlowCard/cashFlowCard.vue'
 
 export default {
   name: 'CashFlowPage',
-  components: { uniPopup },
+  components: { uniPopup, CashFlowCard },
   data() {
     const currentDate = this.getDate()
     return {
@@ -125,30 +100,46 @@ export default {
         '公益',
         '发红包',
       ],
-      billList: [
+      cardList: [
         {
-          date: '5月31日 星期六',
-          type: '支出',
-          category: '购物',
-          time: '22:08',
-          merchant: '京东商城平台商户',
-          amount: '-11.40',
+          date: '4月28日',
+          outflow: 200.0,
+          inflow: 200.0,
+          items: [
+            {
+              title: '提现',
+              status: '审核中',
+              time: '15:22',
+              orderNumber: '213646848744124758',
+              amount: -200.0,
+            },
+            {
+              title: '订单',
+              time: '15:22',
+              orderNumber: '213646848744124758',
+              amount: 200.0,
+            },
+          ],
         },
         {
-          date: '5月31日 星期六',
-          type: '支出',
-          category: '购物',
-          time: '22:08',
-          merchant: '京东商城平台商户',
-          amount: '-11.40',
-        },
-        {
-          date: '5月31日 星期六',
-          type: '支出',
-          category: '购物',
-          time: '22:08',
-          merchant: '京东商城平台商户',
-          amount: '-11.40',
+          date: '4月28日',
+          outflow: 200.0,
+          inflow: 200.0,
+          items: [
+            {
+              title: '提现',
+              status: '审核中',
+              time: '15:22',
+              orderNumber: '213646848744124758',
+              amount: -200.0,
+            },
+            {
+              title: '订单',
+              time: '15:22',
+              orderNumber: '213646848744124758',
+              amount: 200.0,
+            },
+          ],
         },
       ],
     }
@@ -260,19 +251,6 @@ export default {
   }
 }
 
-// 主要内容区域
-.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;
-}
-
 view {
   // border: #16ff00 1px solid;
 }