收支明细界面0.8

实现日期和类型picker

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

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;
+      width: 100%;
-      height: 40px;
+      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);
+  background-color: #ff803a;
-  color: #fff;
+  color: #f5f5f5;
   //border-radius: 50rpx;
-  margin: 20rpx 0;
+  margin: 0 0;
-  width: 33%;
+  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>