金额和时间排序

pages/institutionalStructure/donationRecord.vue

@@ -51,7 +51,47 @@
         <u-icon class="filterClose" name="close"></u-icon>
         <view class="filterBody">
           <view class="filterTag">金额排序</view>
+          <view class="custom-radio-group">
+            <view
+              :class="[
+                'custom-radio-button',
+                filter.sortAmount === 'desc' ? 'checked' : '',
+              ]"
+              @click="changeSortAmount('desc')"
+            >
+              由高到低
+            </view>
+            <view
+              :class="[
+                'custom-radio-button',
+                filter.sortAmount === 'asc' ? 'checked' : '',
+              ]"
+              @click="changeSortAmount('asc')"
+            >
+              由低到高
+            </view>
+          </view>
           <view class="filterTag">时间排序</view>
+          <view class="custom-radio-group">
+            <view
+              :class="[
+                'custom-radio-button',
+                filter.sortTime === 'desc' ? 'checked' : '',
+              ]"
+              @click="changeSortTime('desc')"
+            >
+              由远及近
+            </view>
+            <view
+              :class="[
+                'custom-radio-button',
+                filter.sortTime === 'asc' ? 'checked' : '',
+              ]"
+              @click="changeSortTime('asc')"
+            >
+              由近及远
+            </view>
+          </view>
           <view class="filterTag">捐款区间</view>
         </view>
       </view>
@@ -84,6 +124,12 @@ export default {
   data() {
     return {
       show: true,
+
+      filter: {
+        sortAmount: "desc",
+        sortTime: "desc",
+      },
+
       CommonEnum,
     };
   },
@@ -93,6 +139,18 @@ export default {
       this.initData(options.formedId);
     }
   },
+  methods: {
+    changeSortAmount(order) {
+      this.filter.sortAmount = order;
+      console.log("当前选择的排序方式:", order);
+      // 触发排序操作
+    },
+    changeSortTime(order) {
+      this.filter.sortTime = order;
+      console.log("当前选择的排序方式:", order);
+      // 触发排序操作
+    },
+  },
 };
 </script>
 
@@ -127,6 +185,7 @@ page {
   .filterBody {
     height: 618rpx;
     background: #fff1dd;
+    padding: 20rpx;
 
     .filterTag {
       width: 96rpx;
@@ -140,6 +199,33 @@ page {
       font-style: normal;
       text-transform: none;
     }
+
+    .custom-radio-group {
+      display: flex;
+      flex-direction: row;
+      background-color: #f8f4e9;
+      padding: 10px;
+      border-radius: 8px;
+      justify-content: space-around;
+
+      .custom-radio-button {
+        margin: 0 20rpx;
+        flex: 1;
+        padding: 12px 24px;
+        background-color: #ffffff;
+        color: #333333;
+        text-align: center;
+        border: 1px solid #eee;
+        border-radius: 12rpx;
+      }
+
+      /* 选中状态 */
+      .custom-radio-button.checked {
+        background-color: #c0a580;
+        color: #ffffff;
+        border-color: #c0a580;
+      }
+    }
   }
 }
 

utils/request.js

@@ -5,7 +5,7 @@ import { getAppId, getTempToken, shouldUseTempToken } from "@/config/dev.js";
 const ENV_CONFIG = {
   release: {
     // 正式版
-    baseUrl: "http://192.168.2.100:4501",
+    baseUrl: "http://192.168.2.129:4501",
     appId: 1,
   },
 };