账单/租赁资产/水电缴费/待付页面样式修改完成

pages/bill/bill.vue

@@ -5,21 +5,53 @@
       title="我的账单"
     ></customNavbar>
 
-    <!-- Tab 按钮 -->
-    <view class="tab-bar">
-      <view
-        class="tab-item"
-        :class="{ active: currentTab === 'out' }"
-        @click="switchTab('out')"
-      >
-        支
+    <!-- 筛选栏 -->
+    <view class="filter-bar">
+      <!-- 年份筛选点击区域 -->
+      <view class="year-filter" @click="toggleYearPicker">
+        <text class="year-text">{{ currentYear }}年</text>
+        <u-icon name="arrow-down" size="24" color="#666"></u-icon>
       </view>
-      <view
-        class="tab-item"
-        :class="{ active: currentTab === 'in' }"
-        @click="switchTab('in')"
-      >
-        收
+      
+      <!-- 自定义年份选择器弹窗 -->
+      <u-popup v-model="showYearPicker" mode="bottom" border-radius="20rpx" :closeable="true">
+        <view class="year-picker-popup">
+          <!-- 弹窗标题 -->
+          <view class="popup-header">
+            <text class="popup-title">选择年份</text>
+          </view>
+          
+          <!-- 年份列表 -->
+          <view class="year-list">
+            <view 
+              class="year-item" 
+              v-for="year in years" 
+              :key="year"
+              :class="{ active: currentYear === year }"
+              @click="selectYear(year)"
+            >
+              {{ year }}年
+            </view>
+          </view>
+        </view>
+      </u-popup>
+      
+      <!-- 支出/收入切换 -->
+      <view class="tab-bar">
+        <view
+          class="tab-item"
+          :class="{ active: currentTab === 'out' }"
+          @click="switchTab('out')"
+        >
+          支出
+        </view>
+        <view
+          class="tab-item"
+          :class="{ active: currentTab === 'in' }"
+          @click="switchTab('in')"
+        >
+          收入
+        </view>
       </view>
     </view>
 
@@ -75,6 +107,10 @@ export default {
       bills: [],
       isRefreshing: false,
       loadStatus: 'more', // u-loadmore 状态
+      // 年份筛选相关
+      currentYear: 2025,
+      years: [2025, 2024, 2023, 2022, 2021],
+      showYearPicker: false
     };
   },
   onLoad(options) {
@@ -86,6 +122,19 @@ export default {
       this.currentTab = tab;
       this.loadBills();
     },
+    
+    // 切换年份选择器显示
+    toggleYearPicker() {
+      this.showYearPicker = !this.showYearPicker;
+    },
+    
+    // 选择年份
+    selectYear(year) {
+      this.currentYear = year;
+      this.showYearPicker = false;
+      // 重新加载账单数据
+      this.loadBills();
+    },
 
     loadBills() {
       // 模拟数据加载
@@ -160,24 +209,90 @@ export default {
   padding-top: 120rpx; /* 给导航栏留空间 */
 }
 
+.filter-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #fff;
+  padding: 24rpx 30rpx;
+  margin: 20rpx;
+  border-radius: 12rpx;
+  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
+}
+
+/* 年份筛选 */
+.year-filter {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  font-size: 32rpx;
+  color: #333;
+  cursor: pointer;
+}
+
+/* 支出/收入切换 */
 .tab-bar {
   display: flex;
-  background: #fff;
-  margin: 0 20rpx;
-  border-radius: 12rpx;
-  overflow: hidden;
-  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
+  gap: 20rpx;
+}
 
-  .tab-item {
-    flex: 1;
-    text-align: center;
-    padding: 20rpx 0;
-    font-size: 28rpx;
-    color: #666;
-    &.active {
-      color: #fff;
-      background: #007aff;
-    }
+.tab-item {
+  padding: 12rpx 32rpx;
+  font-size: 28rpx;
+  border-radius: 24rpx;
+  color: #333;
+  background-color: #f5f5f5;
+  transition: all 0.2s ease;
+  &.active {
+    color: #fff;
+    background: #ff3b30;
+  }
+}
+
+/* 自定义年份选择器样式 */
+.year-picker-popup {
+  background: #fff;
+  padding: 30rpx 0;
+}
+
+.popup-header {
+  text-align: center;
+  padding: 20rpx 0;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.popup-title {
+  font-size: 34rpx;
+  font-weight: 600;
+  color: #333;
+}
+
+.year-list {
+  padding: 20rpx;
+}
+
+.year-item {
+  font-size: 32rpx;
+  color: #666;
+  text-align: center;
+  padding: 24rpx;
+  border-radius: 12rpx;
+  margin-bottom: 16rpx;
+  background: #f5f5f5;
+  transition: all 0.2s ease;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+  
+  &.active {
+    background: #ff3b30;
+    color: #fff;
+  }
+  
+  &:hover {
+    background: #ff5252;
+    color: #fff;
   }
 }
 
@@ -201,7 +316,7 @@ export default {
   flex-direction: column;
 
   .bill-name {
-    font-size: 30rpx;
+    font-size: 28rpx;
     color: #2D2B2C;
     font-weight: 500;
   }
@@ -219,7 +334,7 @@ export default {
   align-items: center;
 
   .amount {
-    font-size: 30rpx;
+    font-size: 28rpx;
     color: #F34038;
     margin-right: 10rpx;
   }