收支明细界面0.6

实现日期和类型picker

enum/commonEnum.js

@@ -28,5 +28,6 @@ export const commonEnum = {
   INVITE: 'https://api.ccttiot.com/image-1755330435656.png', //邀请有礼
   //收支明细
   ALL_TYPE: 'https://api.ccttiot.com/image-1755479846357.png', //全部类型
+  DOWN_ICON: 'https://api.ccttiot.com/image-1755484170012.png',
 }
 export default commonEnum

pages/cashFlow/cashFlow.vue

@@ -10,7 +10,7 @@
     <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"></image>
+        <image :src="commonEnum.ALL_TYPE" class="all-type-img" @click="openPopup"></image>
       </view>
       <view class="cash-flow">
         <view class="date">
@@ -27,6 +27,7 @@
               </picker>
             </view>
           </view>
+          <image :src="commonEnum.DOWN_ICON"></image>
         </view>
         <view class="cash-flow-detail"></view>
       </view>
@@ -35,24 +36,66 @@
     <!-- 主要内容区域 -->
     <view class="body">666</view>
   </view>
-</template>
 
-;
+  <!-- 底部弹窗 -->
+  <uni-popup ref="popup" :mask-click="true" type="bottom">
+    <view class="popup-content">
+      <!-- 弹窗标题栏 -->
+      <view class="popup-header">
+        <text class="close-icon" @click="closePopup">✕</text>
+        <text class="title">请选择类型</text>
+      </view>
+
+      <!-- “全部类型”按钮 -->
+      <button class="all-types-btn">全部类型</button>
+
+      <!-- 支出分类网格 -->
+      <view class="type-grid">
+        <view
+          v-for="(type, index) in expenseTypes"
+          :key="index"
+          class="type-item"
+          @click="selectType(type)"
+        >
+          {{ type }}
+        </view>
+      </view>
+    </view>
+  </uni-popup>
+</template>
 
 <script>
 import commonEnum from '../../enum/commonEnum'
 import { getNavBarHeight } from '../../utils/system'
+import uniPopup from '../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
 
 export default {
-  name: 'AgentsPage',
+  name: 'CashFlowPage',
-
+  components: { uniPopup },
   data() {
-    const currentDate = this.getDate({
+    const currentDate = this.getDate()
-      format: true,
-    })
     return {
       getNavBarHeight,
       date: currentDate,
+      startDate: this.getDate('start'),
+      endDate: this.getDate('end'),
+      expenseTypes: [
+        '餐饮',
+        '交通',
+        '服饰',
+        '购物',
+        '服务',
+        '教育',
+        '娱乐',
+        '运动',
+        '生活缴费',
+        '旅行',
+        '宠物',
+        '医疗',
+        '保险',
+        '公益',
+        '发红包',
+      ],
     }
   },
   computed: {
@@ -64,7 +107,7 @@ export default {
     // 页面加载时的逻辑
   },
   methods: {
-    // 保存分享海报
+    // 日期选择变化处理
     bindDateChange: function (e) {
       this.date = e.detail.value
     },
@@ -77,12 +120,24 @@ export default {
       if (type === 'start') {
         year = year - 10
       } else if (type === 'end') {
-        year = year + 10
       }
       month = month > 9 ? month : '0' + month
       day = day > 9 ? day : '0' + day
       return `${year}-${month}-${day}`
     },
+    // 打开弹窗
+    openPopup() {
+      this.$refs.popup.open()
+    },
+    // 关闭弹窗
+    closePopup() {
+      this.$refs.popup.close()
+    },
+    // 选择类型
+    selectType(type) {
+      console.log('选择的类型：', type)
+      this.closePopup()
+    },
   },
 }
 </script>
@@ -107,9 +162,19 @@ export default {
   }
 
   .cash-flow {
+    height: 100%;
     display: flex;
+    align-items: center;
 
     .date {
+      display: flex;
+      color: white;
+      align-items: center;
+
+      image {
+        width: 19px;
+        height: 11px;
+      }
     }
 
     .cash-flow-detail {
@@ -133,4 +198,67 @@ export default {
 view {
   // border: #16ff00 1px solid;
 }
+
+/* 弹窗内容样式 */
+.popup-content {
+  background-color: #fff;
+  border-radius: 16rpx 16rpx 0 0;
+  padding: 20rpx;
+}
+
+/* 弹窗标题栏 */
+.popup-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  padding: 20rpx 0;
+}
+
+.close-icon {
+  position: absolute;
+  left: 20rpx;
+  font-size: 32rpx;
+  color: #999;
+  width: 40rpx;
+  height: 40rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.title {
+  font-size: 32rpx;
+  font-weight: bold;
+}
+
+/* “全部类型”按钮 */
+.all-types-btn {
+  background-color: rgba(204, 67, 67, 0.95);
+  color: #fff;
+  //border-radius: 50rpx;
+  margin: 20rpx 0;
+  width: 33%;
+}
+
+/* 支出分类网格 */
+.type-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 20rpx 0;
+}
+
+.type-item {
+  width: 30%;
+  height: 100rpx;
+  background-color: #f5f5f5;
+  border-radius: 10rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20rpx;
+  font-size: 28rpx;
+}
 </style>