全部筛选弹窗

pages/institutionalStructure/donationRecord.vue

@@ -2,110 +2,187 @@
   <view class="page">
     <custom-navbar title="捐款记录" />
     <tile-grid />
-    <view class="header" :style="{ backgroundColor: CommonEnum.BASE_COLOR }">
+    <view :style="{ backgroundColor: CommonEnum.BASE_COLOR }" class="header">
       <view class="search-filter-row">
         <search-box
           v-model="searchKeyword"
           :width="'100%'"
-          placeholder="请输入搜索关键词"
           btn-text="搜索"
+          placeholder="请输入搜索关键词"
           @search="onSearch"
         />
-        <view class="filter-btn" @click="onFilter">
+        <view class="filter-btn" @click="show = true">
-          <image class="filter-icon" :src="CommonEnum.FILTER" mode="aspectFit" />
+          <image
+            :src="CommonEnum.FILTER"
+            class="filter-icon"
+            mode="aspectFit"
+          />
           <text class="filter-text">筛选</text>
         </view>
       </view>
 
       <!-- 项目信息组件 -->
-      <project-info :project-name="projectInfo.proName" :project-desc="projectInfo.proProfile" />
+      <project-info
+        :project-desc="projectInfo.proProfile"
+        :project-name="projectInfo.proName"
+      />
 
       <!-- 捐款统计组件 -->
-      <donation-summary :total-amount="totalAmount" :participant-count="participantCount" />
+      <donation-summary
+        :participant-count="participantCount"
+        :total-amount="totalAmount"
+      />
 
       <!-- 捐款记录列表组件 -->
       <donation-list :donation-list="dataList" />
 
-      <status-display v-if="loading" type="loading" loading-text="加载中..." />
+      <status-display v-if="loading" loading-text="加载中..." type="loading" />
     </view>
+
+    <u-popup
+      v-model="show"
+      border-radius="30"
+      height="880rpx"
+      mode="bottom"
+      width="750rpx"
+    >
+      <view class="filterBox">
+        <view class="filterAll">全部筛选</view>
+        <u-icon class="filterClose" name="close"></u-icon>
+        <view class="filterBody">
+          <view class="filterTag">金额排序</view>
+          <view class="filterTag">时间排序</view>
+          <view class="filterTag">捐款区间</view>
+        </view>
+      </view>
+    </u-popup>
   </view>
 </template>
 
 <script>
-  import CustomNavbar from '../../components/custom-navbar/custom-navbar.vue'
+import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
-  import TileGrid from '../../components/tile-grid/tile-grid.vue'
+import TileGrid from "../../components/tile-grid/tile-grid.vue";
-  import CommonEnum from '../../enum/common'
+import CommonEnum from "../../enum/common";
-  import StatusDisplay from '../../components/status-display/status-display.vue'
+import StatusDisplay from "../../components/status-display/status-display.vue";
-  import SearchBox from '../../components/search-box/search-box.vue'
+import SearchBox from "../../components/search-box/search-box.vue";
-  import ProjectInfo from './components/project-info.vue'
+import ProjectInfo from "./components/project-info.vue";
-  import DonationSummary from './components/donation-summary.vue'
+import DonationSummary from "./components/donation-summary.vue";
-  import DonationList from './components/donation-list.vue'
+import DonationList from "./components/donation-list.vue";
-  import { donationMixin } from './mixins/donation-mixin.js'
+import { donationMixin } from "./mixins/donation-mixin.js";
 
-  export default {
+export default {
-    mixins: [donationMixin],
+  mixins: [donationMixin],
-    components: {
+  components: {
-      CustomNavbar,
+    CustomNavbar,
-      TileGrid,
+    TileGrid,
-      StatusDisplay,
+    StatusDisplay,
-      SearchBox,
+    SearchBox,
-      ProjectInfo,
+    ProjectInfo,
-      DonationSummary,
+    DonationSummary,
-      DonationList,
+    DonationList,
-    },
+  },
-    data() {
+  data() {
-      return {
+    return {
-        CommonEnum,
+      show: true,
-      }
+      CommonEnum,
-    },
+    };
-    onLoad(options) {
+  },
-      // 获取页面参数
+  onLoad(options) {
-      if (options.formedId) {
+    // 获取页面参数
-        this.initData(options.formedId)
+    if (options.formedId) {
-      }
+      this.initData(options.formedId);
-    },
+    }
-  }
+  },
+};
 </script>
 
 <style lang="scss">
-  page {
+page {
-    background: #f5f0e7;
+  background: #f5f0e7;
-  }
+}
-  .header {
-    width: 100%;
-    min-height: 100vh;
-    display: flex;
 
-    flex-direction: column;
+.filterBox {
-    padding: 0 15rpx 0 15rpx;
+  position: relative;
+
+  .filterAll {
+    width: 750rpx;
+    height: 122rpx;
+    background: #fffbf5;
+    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
+    font-weight: 400;
+    font-size: 40rpx;
+    color: #695347;
+    line-height: 122rpx;
+    font-style: normal;
+    text-transform: none;
+    text-align: center;
   }
-  .search-filter-row {
+
-    width: 100%;
+  .filterClose {
-    display: flex;
+    position: absolute;
-    flex-direction: row;
+    right: 30rpx;
-    align-items: center;
+    top: 50rpx;
-    margin: 10rpx 0 10rpx 0;
-    padding: 0 20rpx;
   }
-  .search-filter-row search-box {
+
-    flex: 1;
+  .filterBody {
-  }
+    height: 618rpx;
-  .filter-btn {
+    background: #fff1dd;
-    display: flex;
+
-    align-items: center;
+    .filterTag {
-    margin-left: 20rpx;
+      width: 96rpx;
-    padding: 0 16rpx;
+      height: 32rpx;
-    height: 70rpx;
+      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
-    border-radius: 10rpx;
+      font-weight: 500;
-    cursor: pointer;
+      font-size: 24rpx;
-  }
+      color: #c7a26d;
-  .filter-icon {
+      line-height: 32rpx;
-    width: 32rpx;
+      text-align: center;
-    height: 32rpx;
+      font-style: normal;
-    margin-right: 8rpx;
+      text-transform: none;
-  }
+    }
-  .filter-text {
-    color: #6b4a1b;
-    font-size: 28rpx;
   }
+}
+
+.header {
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+
+  flex-direction: column;
+  padding: 0 15rpx 0 15rpx;
+}
+
+.search-filter-row {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin: 10rpx 0 10rpx 0;
+  padding: 0 20rpx;
+}
+
+.search-filter-row search-box {
+  flex: 1;
+}
+
+.filter-btn {
+  display: flex;
+  align-items: center;
+  margin-left: 20rpx;
+  padding: 0 16rpx;
+  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/mixins/donation-mixin.js

@@ -155,9 +155,6 @@ export const donationMixin = {
     /**
      * 筛选功能
      */
-    onFilter() {
-      uni.showToast({ title: "筛选功能开发中", icon: "none" });
-    },
 
     /**
      * 加载更多捐款记录