祈福记录-实现筛选功能

pages/personalCenter/myPrayRecordList.vue

@@ -2,6 +2,27 @@
   <view class="page">
     <base-background />
     <custom-navbar ref="customNavbar" title="祈福记录" />
+    <view class="search-filter-row">
+      <search-box
+        v-model="filterOptions.name"
+        :width="'100%'"
+        btn-text="搜索"
+        placeholder="请输入搜索关键词"
+        @search="onSearch()"
+      />
+      <view class="filter-btn" @click="show = true">
+        <image :src="CommonEnum.FILTER" class="filter-icon" mode="aspectFit" />
+        <text class="filter-text">筛选</text>
+      </view>
+    </view>
+
+    <view
+      v-if="filterOptions.isOthers || filterOptions.type"
+      class="filter-tips"
+    >
+      {{ filterOptions.isOthers | prayerIsOthersFilter
+      }}{{ filterOptions.type | prayerTypeFilter }}
+    </view>
     <view class="header">
       <template>
         <view class="blessing-container">
@@ -57,6 +78,42 @@
         </view>
       </template>
     </view>
+    <template>
+      <u-select
+        v-model="show"
+        :list="list"
+        confirm-color="#BFA16B"
+        confirm-text="筛选"
+        mode="mutil-column"
+        @confirm="confirm"
+      ></u-select>
+    </template>
+    <!--    <u-popup-->
+    <!--      v-model="show"-->
+    <!--      border-radius="30"-->
+    <!--      height="880rpx"-->
+    <!--      mode="bottom"-->
+    <!--      width="750rpx"-->
+    <!--      z-index="9999"-->
+    <!--    >-->
+    <!--      <view style="flex-direction: column; display: flex">-->
+    <!--        <view-->
+    <!--          style="-->
+    <!--            display: flex;-->
+    <!--            justify-content: space-around;-->
+    <!--            align-items: center;-->
+    <!--          "-->
+    <!--        >-->
+    <!--          <text> 是否为他人祈福</text>-->
+    <!--          <u-switch-->
+    <!--            v-model="filterOptions.isOthers"-->
+    <!--            activeColor="#C7A26D"-->
+    <!--          ></u-switch>-->
+    <!--        </view>-->
+    <!--      </view>-->
+
+    <!--      &lt;!&ndash; methods &ndash;&gt;-->
+    <!--    </u-popup>-->
 
     <!-- 捐赠弹窗 -->
   </view>
@@ -66,15 +123,49 @@
 import { createPagination } from "../../composables/winB_Pagination";
 import { getUserPrayerList } from "../../api/pray/pray";
 import CommonEnum from "../../enum/common";
+import SearchBox from "../../components/search-box/search-box.vue";
 
 export default {
+  components: { SearchBox },
   computed: {
     CommonEnum() {
       return CommonEnum;
     },
   },
   data() {
-    return {};
+    return {
+      show: false,
+      show1: false,
+      filterOptions: {
+        isOthers: "",
+        type: "",
+        name: "",
+      },
+      list: [
+        [
+          {
+            value: "0",
+            label: "所有",
+          },
+          {
+            value: "1",
+            label: "为他人",
+          },
+          {
+            value: "2",
+            label: "为自己",
+          },
+        ],
+        [
+          { value: 0, label: "所有" },
+          { value: 1, label: "学业" },
+          { value: 2, label: "健康" },
+          { value: 3, label: "姻缘" },
+          { value: 4, label: "财运" },
+          { value: 5, label: "消灾" },
+        ],
+      ],
+    };
   },
   filters: {
     prayerTypeFilter(value) {
@@ -85,9 +176,17 @@ export default {
         4: "财运",
         5: "消灾",
       };
-      return types[value] || "其他";
+      return types[value] || "";
+    },
+    prayerIsOthersFilter(value) {
+      const types = {
+        1: "为他人",
+        2: "为自己",
+      };
+      return types[value] || "";
     },
   },
+
   mixins: [
     createPagination({
       fetchData: getUserPrayerList,
@@ -101,6 +200,25 @@ export default {
     this.winB_GetList();
   },
   methods: {
+    onSearch() {
+      this.winB_UpdateParams(this.filterOptions);
+    },
+    // 回调参数为包含多个元素的数组，每个元素分别反应每一列的选择情况
+    confirm(e) {
+      if (e[0].value === "0") {
+        this.filterOptions.isOthers = "";
+      } else {
+        this.filterOptions.isOthers = e[0].value;
+      }
+      if (e[1].value === 0) {
+        this.filterOptions.type = "";
+      } else {
+        this.filterOptions.type = e[1].value;
+      }
+
+      this.onSearch();
+    },
+
     // 加载页面数据
     async loadPageData() {
       this.loading = true;
@@ -130,6 +248,8 @@ page {
 }
 
 .page {
+  display: flex;
+  flex-direction: column;
   position: relative;
   width: 100%;
   min-height: 100vh;
@@ -144,6 +264,19 @@ page {
   padding: 0 15rpx;
 }
 
+.filter-tips {
+  justify-content: center;
+  display: flex;
+  width: 680rpx;
+  margin: 0 auto;
+  background-color: #8b4513; // 深棕色背景
+  color: #fff;
+  font-size: 28rpx;
+  font-weight: 500;
+  padding: 8rpx 20rpx;
+  border-radius: 6rpx;
+}
+
 .blessing-container {
   padding: 30rpx;
   //background-color: #faf8f5; // 浅米色背景
@@ -328,4 +461,38 @@ page {
     background-color: #555 !important;
   }
 }
+
+.search-filter-row {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin: 10rpx 0 10rpx 0;
+  padding: 0 35rpx;
+
+  .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>

utils/request.js

@@ -6,8 +6,9 @@ import debounce from "uview-ui/libs/function/debounce";
 const ENV_CONFIG = {
   release: {
     // 正式版
-    baseUrl: "http://192.168.2.158:4501",
+    // baseUrl: "http://192.168.2.158:4501",
     // baseUrl: "https://tech-ape.top/prod-api",
+    baseUrl: "https://tech-ape.top/prod-api",
     appId: 1,
   },
 };