到家服务 完善筛选条件

packages/homeServer/search/index.vue

@@ -160,8 +160,8 @@
 
 <script>
 import { request, NavgateTo } from "../../../utils/index";
-import SearchAll from "./searchAll.vue";
+import SearchAll from "../searchAll/index.vue";
-import SearchShop from "./searchShop.vue";
+import SearchShop from "../searchShop/index.vue";
 
 export default {
   components: {

packages/homeServer/searchAll/index.css

@@ -36,16 +36,21 @@ page {
     height: 110rpx;
     background: #FFFFFF;
     border-radius: 0rpx 0rpx 0rpx 0rpx;
-    font-size: 30rpx;
+    font-size: 26rpx;
-    color: #FF370B;
+    color: #333;
     display: flex;
     align-items: center;
     justify-content: center;
+    margin-left: 200rpx;
+}
+
+.activeFilter{
+    color: #FF370B;
 }
 
 .Filter_right image {
-    width: 26rpx;
+    width: 22rpx;
-    height: 30rpx;
+    height: 24rpx;
     margin-left: 7rpx;
 }
 
@@ -81,8 +86,27 @@ page {
     white-space: nowrap;
 }
 
+
+/* 选中状态图片样式 */
+.iconStyle {
+    width: 25rpx !important;
+    height: 45rpx !important;
+}
+
+/* 默认状态样式 */
+.FilterItem image:not(.iconStyle) {
+    width: 20rpx;
+    height: 20rpx;
+}
+
+.FilterItem:not(.active) {
+    /* 默认字体样式 */
+    font-size: 26rpx;
+    color: #333;
+}
+
 .FilterItem {
-    font-size: 28rpx;
+    font-size: 26rpx;
     color: #222222;
     display: flex;
     align-items: center;
@@ -111,6 +135,7 @@ page {
     padding-bottom: 30rpx;
     padding-top: 20rpx;
 }
+
 .MasterItem:last-child {
     border-bottom: none;
 }
@@ -176,6 +201,77 @@ page {
 
 }
 
+.filter-section {
+    padding: 20rpx 30rpx;
+    border-bottom: 1rpx solid #f5f5f5;
+}
+.filter-title {
+    font-size: 28rpx;
+    color: #333;
+    margin-bottom: 20rpx;
+    font-weight: bold;
+}
+.filter-options {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 15rpx;
+}
+.filter-option {
+    background: #f5f5f5;
+    border-radius: 50rpx;
+    padding: 12rpx 30rpx;
+    font-size: 24rpx;
+    color: #666;
+    white-space: nowrap;
+}
+.filter-option.active {
+    background: #ff370b;
+    color: white;
+}
+.price-range {
+    display: flex;
+    align-items: center;
+    gap: 20rpx;
+    margin-top: 10rpx;
+}
+.price-input {
+    flex: 1;
+    height: 60rpx;
+    background: #f5f5f5;
+    border-radius: 10rpx;
+    padding: 0 20rpx;
+    font-size: 24rpx;
+    border: none;
+}
+.price-separator {
+    font-size: 28rpx;
+    color: #999;
+}
+.filter-buttons {
+    display: flex;
+    justify-content: space-between;
+    padding: 20rpx 30rpx;
+    margin-top: 10rpx;
+}
+.reset-button {
+    width: 200rpx;
+    height: 70rpx;
+    border: 1rpx solid #7abbff;
+    border-radius: 50rpx;
+    background: #f0f7ff;
+    color: #409eff;
+    font-size: 28rpx;
+}
+.confirm-button {
+    width: 200rpx;
+    height: 70rpx;
+    background: #409eff;
+    border-radius: 50rpx;
+    color: white;
+    font-size: 28rpx;
+    border: none;
+}
+
 .MasterItem_Info_right_1 {
     display: flex;
     align-items: center;
@@ -339,7 +435,7 @@ page {
 
 .filterMore2_item_left {}
 
-.active2 {
+.active3 {
     color: #ff702c !important;
 }
 
@@ -347,9 +443,6 @@ page {
     color: #000;
 }
 
-
-
-
 .filterMore3Item {
     font-size: 26rpx;
     color: #555555;
@@ -409,6 +502,7 @@ page {
     display: flex;
     align-items: center;
 }
+
 .master_info_right_right {
     font-size: 28rpx;
     color: #FF370B;

packages/homeServer/searchAll/index.vue

@@ -3,44 +3,30 @@
     <div class="header">
       <div class="Filter">
         <div class="Filter_left">
-          <div class="FilterItem" @click="showDialog(1)">
+          <div
-            附近
+            v-for="filter in filters"
+            :key="filter.id"
+            class="FilterItem"
+            :class="{ active: selectedFilter === filter.id }"
+            @click="
+              showDialog(filter.id);
+              selectedFilter = filter.id;
+            "
+          >
+            {{ filter.label }}
             <image
-              src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filterMore.png"
+              :src="
-            ></image>
+                selectedFilter === filter.id
-          </div>
+                  ? 'http://localhost:8080/search_up.png'
-
+                  : 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filterMore.png'
-          <div class="FilterItem" @click="showDialog(2)">
+              "
-            综合
+              :class="{ iconStyle: selectedFilter === filter.id }"
-            <image
-              src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filterMore.png"
-            ></image>
-          </div>
-
-          <div class="FilterItem" @click="showDialog(3)">
-            排序
-            <image
-              src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filterMore.png"
-            ></image>
-          </div>
-
-          <div class="FilterItem" @click="showDialog(4)">
-            分类
-            <image
-              src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filterMore.png"
-            ></image>
-          </div>
-
-          <div class="FilterItem" @click="showDialog(5)">
-            性别
-            <image
-              src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filterMore.png"
             ></image>
           </div>
         </div>
 
-        <div class="Filter_right">
+        <div class="Filter_right" @click="showDialog(6)">
-          筛选
+          <text :class="{ activeFilter: show6 }">筛选</text>
           <image
             src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filter.png"
           ></image>
@@ -68,7 +54,7 @@
           </div>
         </div>
         <div class="filterMore2_item">
-          <div class="filterMore2_item_left active2">从高到低</div>
+          <div class="filterMore2_item_left active3">从高到低</div>
           <div class="filterMore2_item_right">
             <u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
           </div>
@@ -89,7 +75,7 @@
           </div>
         </div>
         <div class="filterMore2_item">
-          <div class="filterMore2_item_left2 active2">距离优先</div>
+          <div class="filterMore2_item_left2 active3">距离优先</div>
           <div class="filterMore2_item_right">
             <u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
           </div>
@@ -108,17 +94,128 @@
         </div>
       </div>
 
-      <!-- 分类筛选 -->
+      <!-- 高级筛选面板 -->
-      <div class="FilterMore3" v-if="show4">
+      <div class="FilterMore" v-if="show6">
-        <div class="filterMore3Item" v-for="(item, index) in 9" :key="index">
+        <div class="filter-section">
-          家电维修
+          <div class="filter-title">满意度</div>
+          <div class="filter-options">
+            <div
+              class="filter-option"
+              :class="{ active: selectedSatisfaction.includes('5+') }"
+              @click="toggleSatisfaction('5+')"
+            >
+              5分及以上
+            </div>
+            <div
+              class="filter-option"
+              :class="{ active: selectedSatisfaction.includes('4.9+') }"
+              @click="toggleSatisfaction('4.9+')"
+            >
+              4.9分及以上
+            </div>
+            <div
+              class="filter-option"
+              :class="{ active: selectedSatisfaction.includes('4.8+') }"
+              @click="toggleSatisfaction('4.8+')"
+            >
+              4.8分及以上
+            </div>
+            <div
+              class="filter-option"
+              :class="{ active: selectedSatisfaction.includes('4.7+') }"
+              @click="toggleSatisfaction('4.7+')"
+            >
+              4.7分及以上
+            </div>
+            <div
+              class="filter-option"
+              :class="{ active: selectedSatisfaction.includes('4.6+') }"
+              @click="toggleSatisfaction('4.6+')"
+            >
+              4.6分及以上
+            </div>
+            <div
+              class="filter-option"
+              :class="{ active: selectedSatisfaction.includes('4.5+') }"
+              @click="toggleSatisfaction('4.5+')"
+            >
+              4.5分及以上
+            </div>
           </div>
         </div>
 
-      <!-- 性别筛选 -->
+        <div class="filter-section">
-      <div class="FilterMore3" v-if="show5">
+          <div class="filter-title">评论数量</div>
-        <div class="filterMore3Item">男</div>
+          <div class="filter-options">
-        <div class="filterMore3Item">女</div>
+            <div
+              class="filter-option"
+              :class="{ active: selectedReviewCount === '1-100' }"
+              @click="selectedReviewCount = '1-100'"
+            >
+              1-100
+            </div>
+            <div
+              class="filter-option"
+              :class="{ active: selectedReviewCount === '100-500' }"
+              @click="selectedReviewCount = '100-500'"
+            >
+              100-500
+            </div>
+            <div
+              class="filter-option"
+              :class="{ active: selectedReviewCount === '500+' }"
+              @click="selectedReviewCount = '500+'"
+            >
+              500以上
+            </div>
+          </div>
+        </div>
+
+        <div class="filter-section">
+          <div class="filter-title">价格范围</div>
+          <div class="price-range">
+            <input
+              type="number"
+              v-model="minPrice"
+              placeholder="最低价"
+              class="price-input"
+              @input="validatePriceRange"
+            />
+            <span class="price-separator">—</span>
+            <input
+              type="number"
+              v-model="maxPrice"
+              placeholder="最高价"
+              class="price-input"
+              @input="validatePriceRange"
+            />
+          </div>
+        </div>
+
+        <div class="filter-section">
+          <div class="filter-title">类别</div>
+          <div class="filter-options">
+            <div
+              class="filter-option"
+              :class="{ active: selectedCategory === 'airConditioner' }"
+              @click="selectedCategory = 'airConditioner'"
+            >
+              空调维修
+            </div>
+            <div
+              class="filter-option"
+              :class="{ active: selectedCategory === 'refrigerator' }"
+              @click="selectedCategory = 'refrigerator'"
+            >
+              冰箱维修
+            </div>
+          </div>
+        </div>
+
+        <div class="filter-buttons">
+          <button class="reset-button" @click="resetFilters">重置</button>
+          <button class="confirm-button" @click="applyFilters">确定</button>
+        </div>
       </div>
     </div>
 
@@ -200,6 +297,12 @@
   </view>
 </template>
 
+<style scoped>
+.FilterItem.active {
+  color: red;
+}
+</style>
+
 <script>
 import {
   request,
@@ -214,14 +317,41 @@ export default {
     return {
       top: "",
       localHeight: "",
+      selectedFilter: null,
+      // 筛选条件数据
+      filters: [
+        { id: 1, label: "附近" },
+        { id: 2, label: "综合" },
+        { id: 3, label: "排序" },
+      ],
       show1: false,
       show2: false,
       show3: false,
       show4: false,
       show5: false,
+      show6: false,
       isShowDia: false,
+      selectedSatisfaction: [],
+      selectedReviewCount: null,
+      selectedCategory: null,
+      minPrice: 0,
+      maxPrice: "",
     };
   },
+  watch: {
+    show1(val) {
+      if (!val) this.selectedFilter = null;
+    },
+    show2(val) {
+      if (!val) this.selectedFilter = null;
+    },
+    show3(val) {
+      if (!val) this.selectedFilter = null;
+    },
+    show6(val) {
+      if (!val) this.selectedFilter = null;
+    },
+  },
   methods: {
     masterInfo() {
       NavgateTo("../masterInfo/index");
@@ -229,16 +359,56 @@ export default {
     back() {
       NavgateTo("1");
     },
-
+    toggleSatisfaction(value) {
+      const index = this.selectedSatisfaction.indexOf(value);
+      if (index === -1) {
+        this.selectedSatisfaction.push(value);
+      } else {
+        this.selectedSatisfaction.splice(index, 1);
+      }
+    },
+    validatePriceRange() {
+      // 确保最小值在0-99999之间
+      if (this.minPrice < 0) this.minPrice = 0;
+      if (this.minPrice > 99999) this.minPrice = 99999;
+      // 确保最大值在0-99999之间且不小于最小值
+      if (
+        this.maxPrice &&
+        (this.maxPrice < this.minPrice || this.maxPrice > 99999)
+      ) {
+        this.maxPrice = Math.min(Math.max(this.maxPrice, this.minPrice), 99999);
+      }
+    },
+    resetFilters() {
+      this.selectedSatisfaction = [];
+      this.selectedReviewCount = null;
+      this.selectedCategory = null;
+      this.minPrice = 0;
+      this.maxPrice = "";
+    },
+    applyFilters() {
+      const filterData = {
+        satisfaction: this.selectedSatisfaction,
+        reviewCount: this.selectedReviewCount,
+        category: this.selectedCategory,
+        priceRange: {
+          min: this.minPrice || 0,
+          max: this.maxPrice || 99999,
+        },
+      };
+      console.log("筛选条件:", filterData);
+      this.show6 = false;
+      this.isShowDia = false;
+    },
     showDialog(index) {
       this[`show${index}`] = !this[`show${index}`];
       this.logOtherButtons(index);
-      this.isShowDia = this[`show${index}`]
+      this.isShowDia = this[`show${index}`];
     },
     logOtherButtons(excludeIndex) {
-      for (let i = 1; i <= 5; i++) {
+      for (let i = 1; i <= 6; i++) {
         if (i !== excludeIndex) {
-          this[`show${i}`] = false
+          this[`show${i}`] = false;
         }
       }
     },
@@ -248,7 +418,6 @@ export default {
   onLoad(options) {
     const meun = menuButtonInfo();
     this.top = meun.top;
-    // this.top = meun.height + meun.top;
     this.localHeight = meun.height;
   },
   onShow() {},
@@ -259,7 +428,6 @@ export default {
   onReachBottom() {},
 };
 </script>
-
 <style>
-@import url("./searchAll.css");
+@import url("./index.css");
 </style>

packages/homeServer/searchShop/index.vue

@@ -197,5 +197,5 @@ export default {
 </script>
 
 <style>
-@import url("./searchShop.css");
+@import url("./index.css");
 </style>