[搜索和筛选]行的实现

enum/common.js

@@ -4,7 +4,9 @@ export const CommonEnum = {
 	RIGHT_CHEVRON:"https://api.ccttiot.com/image-1753773619878.png", //右箭头
     BACK_BUTTON:"https://api.ccttiot.com/image-1753868358514.png", //导航栏返回按钮
     BASE_COLOR:"#FAF8F3", //基调颜色
-    SEARCH: "https://api.ccttiot.com/image-1753769500465.png" //通用搜索图标
+    SEARCH: "https://api.ccttiot.com/image-1753769500465.png", //通用搜索图标
+    TILE: "https://api.ccttiot.com/image-1753750309203.png", //瓦片图片
+    FILTER: "https://api.ccttiot.com/image-1753954149098.png" //筛选图标
 
 };
 export default CommonEnum;

pages/basePage/basePage.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="page">
     <custom-navbar title="基础页面" />
-    <tile-grid :tile-image="tilesImageEnum.TILE" />
+    <tile-grid :tile-image="CommonEnum.TILE" />
     <view class="header" :style="{ backgroundColor: CommonEnum.BASE_COLOR }">
       <!-- 状态展示 -->
       <status-display
@@ -16,7 +16,6 @@
 </template>
 
 <script>
-import { tilesImageEnum } from '@/enum/institutionalStructure.js';
 import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
 import TileGrid from "../../components/tile-grid/tile-grid.vue";
 import CommonEnum from "../../enum/common";
@@ -31,7 +30,6 @@ export default {
   data() {
     return {
       CommonEnum,
-      tilesImageEnum,
       loading: false
     }
   },

pages/institutionalStructure/donationRecord.vue

@@ -1,30 +1,33 @@
 <template>
   <view class="page">
     <custom-navbar title="捐款记录" />
-    <tile-grid :tile-image="tilesImageEnum.TILE" />
+    <tile-grid :tile-image="CommonEnum.TILE" />
     <view class="header" :style="{ backgroundColor: CommonEnum.BASE_COLOR }">
-      <!-- 状态展示 -->
+      <view class="search-filter-row">
-      <status-display
+        <search-box
-          v-if="loading"
-          type="loading"
-          loading-text="加载中..."
-      />
-      <!-- 捐款记录内容将在这里添加 -->
-      <search-box
           v-model="searchKeyword"
           :width="'100%'"
           :search-icon="CommonEnum.SEARCH"
           placeholder="请输入搜索关键词"
           btn-text="搜索"
           @search="onSearch"
+        />
+        <view class="filter-btn" @click="onFilter">
+          <image class="filter-icon" :src="CommonEnum.FILTER" mode="aspectFit" />
+          <text class="filter-text">筛选</text>
+        </view>
+      </view>
+      <status-display
+        v-if="loading"
+        type="loading"
+        loading-text="加载中..."
       />
+      <!-- 捐款记录内容将在这里添加 -->
     </view>
-
   </view>
 </template>
 
 <script>
-import { tilesImageEnum } from '@/enum/institutionalStructure.js';
 import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
 import TileGrid from "../../components/tile-grid/tile-grid.vue";
 import CommonEnum from "../../enum/common";
@@ -41,7 +44,6 @@ export default {
   data() {
     return {
       CommonEnum,
-      tilesImageEnum,
       loading: false,
       searchKeyword: ''
     }
@@ -52,9 +54,12 @@ export default {
   },
   methods: {
     onSearch(val) {
-      // 这里写你的搜索逻辑，比如重新请求数据
+      // 搜索逻辑
       console.log('搜索内容：', val)
-      // this.loadDonationRecords(val)  // 你可以根据 val 过滤数据
+    },
+    onFilter() {
+      // 筛选逻辑
+      uni.showToast({ title: '筛选功能开发中', icon: 'none' })
     },
     // 加载捐款记录
     async loadDonationRecords() {
@@ -88,4 +93,32 @@ page {
   padding: 0 15rpx;
   padding-bottom: 40rpx;
 }
+.search-filter-row {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin: 0 0 32rpx 0;
+}
+.search-filter-row search-box {
+  flex: 1;
+}
+.filter-btn {
+  display: flex;
+  align-items: center;
+  margin-left: 24rpx;
+  padding: 0 12rpx;
+  height: 70rpx;
+  border-radius: 10rpx;
+  cursor: pointer;
+}
+.filter-icon {
+  width: 32rpx;
+  height: 32rpx;
+  margin-right: 8rpx;
+}
+.filter-text {
+  color: #6B4A1B;
+  font-size: 28rpx;
+}
 </style>

pages/institutionalStructure/institutionalStructure.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="page">
     <custom-navbar title="建制" />
-    <tile-grid :tile-image="tilesImageEnum.TILE" />
+    <tile-grid :tile-image="CommonEnum.TILE" />
     <view class="header">
       <!-- 状态展示 -->
       <status-display