From 7dad8a3b3a2d999a8bb4ffa389d710b6412e478d Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Mon, 18 Aug 2025 11:54:38 +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=A20.8=20=E5=AE=9E=E7=8E=B0=E6=97=A5=E6=9C=9F=E5=92=8C?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8Bpicker?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 enum/commonEnum.js          |  2 +-
 pages/cashFlow/cashFlow.vue | 58 ++++++++++++++++++++++++++++++-------
 2 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/enum/commonEnum.js b/enum/commonEnum.js
index e493cb0..1cef44b 100644
--- a/enum/commonEnum.js
+++ b/enum/commonEnum.js
@@ -27,7 +27,7 @@ export const commonEnum = {
   BACK: 'https://api.ccttiot.com/image-1755328282735.png', //返回
   INVITE: 'https://api.ccttiot.com/image-1755330435656.png', //邀请有礼
   //收支明细
-  ALL_TYPE: 'https://api.ccttiot.com/image-1755479846357.png', //全部类型
+  TYPE_SELECT: 'https://api.ccttiot.com/image-1755487673678.png', //类型
   DOWN_ICON: 'https://api.ccttiot.com/image-1755484170012.png',
 }
 export default commonEnum
diff --git a/pages/cashFlow/cashFlow.vue b/pages/cashFlow/cashFlow.vue
index 53b9aaf..88fdb89 100644
--- a/pages/cashFlow/cashFlow.vue
+++ b/pages/cashFlow/cashFlow.vue
@@ -10,7 +10,9 @@
     <view :style="{ height: getNavBarHeight() + 'px' }" class="fill"></view>
     <view :style="{ height: getNavBarHeight() + 'px' }" class="header">
       <view class="all-type">
-        <image :src="commonEnum.ALL_TYPE" class="all-type-img" @click="openPopup"></image>
+        <image :src="commonEnum.TYPE_SELECT" class="all-type-img" @click="openPopup">
+          <text>{{ expenseType }}</text>
+        </image>
       </view>
       <view class="cash-flow">
         <view class="date">
@@ -29,7 +31,7 @@
           </view>
           <image :src="commonEnum.DOWN_ICON"></image>
         </view>
-        <view class="cash-flow-detail"></view>
+        <view class="cash-flow-detail">支出￥{{ expenditures }} 入账￥{{ Recorded }}</view>
       </view>
     </view>
 
@@ -47,7 +49,7 @@
       </view>
 
       <!-- “全部类型”按钮 -->
-      <button class="all-types-btn">全部类型</button>
+      <button class="all-types-btn" @click="selectType('全部类型')">全部类型</button>
 
       <!-- 支出分类网格 -->
       <view class="type-grid">
@@ -76,6 +78,9 @@ export default {
     const currentDate = this.getDate()
     return {
       getNavBarHeight,
+      expenseType: '全部类型',
+      expenditures: '',
+      Recorded: '',
       date: currentDate,
       startDate: this.getDate('start'),
       endDate: this.getDate('end'),
@@ -136,6 +141,7 @@ export default {
     // 选择类型
     selectType(type) {
       console.log('选择的类型：', type)
+      this.expenseType = type
       this.closePopup()
     },
   },
@@ -155,14 +161,34 @@ export default {
   padding-left: 40rpx;
 
   .all-type {
+    position: relative;
+    display: flex;
+    width: 138px;
+    height: 40px;
+
     &-img {
-      width: 138px;
-      height: 40px;
+      width: 100%;
+      height: 100%;
+      display: flex;
+
+      text {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 40px;
+        color: #ffffff;
+        line-height: 40px;
+        //border: red 1px solid;
+        align-items: center;
+        justify-content: center;
+        padding-left: 40rpx;
+      }
     }
   }
 
   .cash-flow {
-    height: 100%;
+    height: 84rpx;
     display: flex;
     align-items: center;
 
@@ -178,6 +204,8 @@ export default {
     }
 
     .cash-flow-detail {
+      margin-left: 22rpx;
+      color: white;
     }
   }
 }
@@ -213,6 +241,8 @@ view {
   justify-content: center;
   position: relative;
   padding: 20rpx 0;
+  border-bottom: #b8bed1 solid 1px;
+  margin-bottom: 20rpx;
 }
 
 .close-icon {
@@ -235,11 +265,16 @@ view {
 
 /* “全部类型”按钮 */
 .all-types-btn {
-  background-color: rgba(204, 67, 67, 0.95);
-  color: #fff;
+  background-color: #ff803a;
+  color: #f5f5f5;
   //border-radius: 50rpx;
-  margin: 20rpx 0;
-  width: 33%;
+  margin: 0 0;
+  width: 30%;
+  height: 100rpx;
+  font-size: 28rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 /* 支出分类网格 */
@@ -253,12 +288,13 @@ view {
 .type-item {
   width: 30%;
   height: 100rpx;
-  background-color: #f5f5f5;
+  background-color: #fff;
   border-radius: 10rpx;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 20rpx;
   font-size: 28rpx;
+  box-shadow: #ff803a 0 2rpx 8rpx;
 }
 </style>