营地2.0-活动中心-筛选

src/config/server.js

@@ -13,7 +13,7 @@
 
 // 正式
 export const SERVER_URL = "https://apiy.thuers.com/"; // 正式环境
-export const DEVELOPMENT_SERVER_URL = "http://192.168.1.145:9212/"; //开发环境
+export const DEVELOPMENT_SERVER_URL = "http://192.168.1.193:8088/"; //开发环境
 export const SERVER_WS_URL = "wss://apiy.thuers.com"; // websocket
 
 // 测试

src/request/base/active.js

+/* eslint-disable */
+import {request} from './network';
+
+// 登录
+export function HotList(data) {
+  return request({
+    method: 'post',
+    url: '/modules-campsite/activityCenter/hotList',
+    data: data
+  })
+}

src/views/base/active/Active.vue

@@ -5,16 +5,23 @@
       <div class="active-search-content">
         <div class="content-item" v-for="(item, index) in labelList" :key="index">
           <div class="content-item-tit">{{item.categoryName}}</div>
-          <div class="content-item-txt is-active">全部</div>
-          <div class="content-item-txt"
-               v-for="(item2, index2) in item.labelLists"
-               :key="index2">
-            {{item2.lableName}}
-          </div>
+          <el-checkbox
+            v-model="checkAll[index]"
+            @change="handleCheckAllChange($event,1, item.labelLists, index)"
+          >全部
+          </el-checkbox>
+          <el-checkbox-group v-model="selectIds[index]"
+                             @change="handleCheckedItemChange($event,1, item.labelLists, index)">
+            <el-checkbox v-for="(item2, index2) in item.labelLists"
+                         :key="index2"
+                         :label="item2.lableId"
+                         border>{{item2.lableName}}
+            </el-checkbox>
+          </el-checkbox-group>
         </div>
         <div class="content-item">
           <div class="content-item-tit">活动天数</div>
-          <el-input v-model="queryForm.num1"
+          <el-input v-model="queryForm.minDay"
                     type="number"
                     :min="1"
                     placeholder="最小天数"
@@ -22,7 +29,7 @@
                     oninput="value=value.replace(/^0/g, '')"
           ></el-input>
           <div class="line">——</div>
-          <el-input v-model="queryForm.num2"
+          <el-input v-model="queryForm.maxDay"
                     type="number"
                     :min="1"
                     placeholder="最大天数"
@@ -33,9 +40,19 @@
         </div>
         <div class="content-item">
           <div class="content-item-tit">本站报名</div>
-          <div class="content-item-txt is-active">全部</div>
-          <div class="content-item-txt">支持</div>
-          <div class="content-item-txt">不支持</div>
+          <el-checkbox
+            v-model="checkAllSupp"
+            @change="handleCheckAllChange($event,2, supportList)"
+          >全部
+          </el-checkbox>
+          <el-checkbox-group v-model="isSupport"
+                             @change="handleCheckedItemChange($event,2, supportList)">
+            <el-checkbox v-for="(item, index) in supportList"
+                         :key="index"
+                         :label="item.lableId"
+                         border>{{item.lableName}}
+            </el-checkbox>
+          </el-checkbox-group>
         </div>
       </div>
     </div>
@@ -71,6 +88,7 @@
 
 <script>
   import img from "../../../assets/img/recruit.png";
+  import {HotList} from "r/base/active";
 
   export default {
     name: "Active",
@@ -78,8 +96,10 @@
       return {
         loading: false,
         queryForm: {
-          num1: null,
-          num2: null,
+          ids: {},
+          isSupport: null,
+          minDay: null,
+          maxDay: null,
         },
         labelList: [
           {
@@ -203,10 +223,37 @@
             days: '3',
             bmEndTime: '2023-08-31',
           }
-        ]
+        ],
+        supportList: [
+          {
+            lableId: 2,
+            lableName: '支持'
+          },
+          {
+            lableId: 1,
+            lableName: '不支持'
+          },
+        ],
+        selectIds: {
+          0: [],
+          1: [],
+          2: [],
+          3: [],
+          4: [],
+        },
+        checkAll: {
+          0: false,
+          1: false,
+          2: false,
+          3: false,
+          4: false,
+        },
+        isSupport: [],
+        checkAllSupp: false,
       }
     },
     created() {
+      this.getHotList();
       this.getList();
     },
     methods: {
@@ -216,10 +263,55 @@
       },
       // 重置按钮
       resetHandle() {
-        this.queryForm.num1 = null;
-        this.queryForm.num2 = null;
+        this.queryForm = {
+          ids: {},
+          isSupport: null,
+          minDay: null,
+          maxDay: null,
+        };
+        for (let key in this.selectIds) {
+          this.selectIds[key] = [];
+        }
+        for (let key in this.checkAll) {
+          this.checkAll[key] = false;
+        }
+        this.isSupport = [];
+        this.checkAllSupp = false;
+        console.log(this.checkAll)
         this.getList();
       },
+      // 全部-标签操作
+      handleCheckAllChange(val, type = 1, list = [], idx = 0) {
+        let lableIdArr = list.map(item => item.lableId);
+        let arr = val ? lableIdArr : [];
+        if (type == 1) {
+          this.selectIds[idx] = arr;
+          if (arr.length > 0) {
+            this.queryForm.ids[idx] = arr;
+          } else {
+            delete this.queryForm.ids[idx]
+          }
+        } else {
+          this.isSupport = arr;
+          this.queryForm.isSupport = arr.join(',');
+        }
+      },
+      // 单个-标签操作
+      handleCheckedItemChange(val, type = 1, list = [], idx = 0) {
+        let lableIdArr = list.map(item => item.lableId);
+        let checkedCount = val.length;
+        if (type == 1) {
+          this.checkAll[idx] = checkedCount === lableIdArr.length;
+          if (checkedCount > 0) {
+            this.queryForm.ids[idx] = val;
+          } else {
+            delete this.queryForm.ids[idx]
+          }
+        } else {
+          this.checkAllSupp = checkedCount === lableIdArr.length;
+          this.queryForm.isSupport = val.join(',');
+        }
+      },
       // 获取列表
       getList() {
         if (this.loading) {
@@ -231,6 +323,14 @@
           this.loading = false;
         }, 2000)
       },
+      // 获取筛选标签列表
+      getHotList() {
+        HotList().then(res => {
+          console.log(res)
+        }).catch(err => {
+          console.log(err)
+        })
+      }
     }
   }
 </script>
@@ -292,18 +392,37 @@
           .content-item-tit {
             width: 140px;
             text-align: center;
+            font-size: 16px;
             background-color: #f5f5f5;
             margin-right: 10px;
           }
 
-          .content-item-txt {
+          ::v-deep .el-checkbox-group {
+            height: 36px;
+            line-height: 36px;
+          }
+
+          ::v-deep .el-checkbox {
+            border: 0;
             padding: 0 10px;
-            margin-left: 15px;
-            cursor: pointer;
+            margin: 0 0 0 15px;
+            height: 36px;
+            line-height: 36px;
 
-            &:hover,
-            &.is-active {
-              color: var(--all_color);
+            .el-checkbox__input {
+              display: none;
+            }
+
+            .el-checkbox__label {
+              padding: 0;
+              font-size: 16px;
+            }
+
+            /*&:hover,*/
+            &.is-checked {
+              .el-checkbox__label {
+                color: var(--all_color) !important;
+              }
             }
           }