到家服务 完善筛选条件
This commit is contained in:
赵毅
parent
44013eb054
commit
60d6fe9e9e
@ -160,8 +160,8 @@
|
||||
|
||||
<script>
|
||||
import { request, NavgateTo } from "../../../utils/index";
|
||||
import SearchAll from "./searchAll.vue";
|
||||
import SearchShop from "./searchShop.vue";
|
||||
import SearchAll from "../searchAll/index.vue";
|
||||
import SearchShop from "../searchShop/index.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
||||
@ -36,16 +36,21 @@ page {
|
||||
height: 110rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||
font-size: 30rpx;
|
||||
color: #FF370B;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 200rpx;
|
||||
}
|
||||
|
||||
.activeFilter{
|
||||
color: #FF370B;
|
||||
}
|
||||
|
||||
.Filter_right image {
|
||||
width: 26rpx;
|
||||
height: 30rpx;
|
||||
width: 22rpx;
|
||||
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,7 +135,8 @@ page {
|
||||
padding-bottom: 30rpx;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
.MasterItem:last-child{
|
||||
|
||||
.MasterItem:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
@ -173,7 +198,78 @@ page {
|
||||
|
||||
.MasterItem_Info_right {
|
||||
flex: 1;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.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 {
|
||||
@ -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;
|
||||
@ -405,10 +498,11 @@ page {
|
||||
}
|
||||
|
||||
|
||||
.master_info_right_left{
|
||||
.master_info_right_left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.master_info_right_right {
|
||||
font-size: 28rpx;
|
||||
color: #FF370B;
|
||||
@ -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"
|
||||
></image>
|
||||
</div>
|
||||
|
||||
<div class="FilterItem" @click="showDialog(2)">
|
||||
综合
|
||||
<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"
|
||||
:src="
|
||||
selectedFilter === filter.id
|
||||
? 'http://localhost:8080/search_up.png'
|
||||
: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filterMore.png'
|
||||
"
|
||||
:class="{ iconStyle: selectedFilter === filter.id }"
|
||||
></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="filterMore3Item" v-for="(item, index) in 9" :key="index">
|
||||
家电维修
|
||||
<!-- 高级筛选面板 -->
|
||||
<div class="FilterMore" v-if="show6">
|
||||
<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>
|
||||
|
||||
<!-- 性别筛选 -->
|
||||
<div class="FilterMore3" v-if="show5">
|
||||
<div class="filterMore3Item">男</div>
|
||||
<div class="filterMore3Item">女</div>
|
||||
<div class="filter-section">
|
||||
<div class="filter-title">评论数量</div>
|
||||
<div class="filter-options">
|
||||
<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>
|
||||
@ -197,5 +197,5 @@ export default {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("./searchShop.css");
|
||||
@import url("./index.css");
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user