433 lines
14 KiB
Vue
433 lines
14 KiB
Vue
<template>
|
||
<view class="container2">
|
||
<div class="header">
|
||
<div class="Filter">
|
||
<div class="Filter_left">
|
||
<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="
|
||
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" @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>
|
||
</div>
|
||
</div>
|
||
<!-- 位置筛选 -->
|
||
<div class="FilterMore" v-if="show1">
|
||
<div class="local">距离 <span>上海公馆</span></div>
|
||
<div class="filterMore1">
|
||
<div class="filterMoreItem">附近</div>
|
||
<div class="filterMoreItem">500m</div>
|
||
<div class="filterMoreItem">1km</div>
|
||
<div class="filterMoreItem">3km</div>
|
||
<div class="filterMoreItem">5km</div>
|
||
<div class="filterMoreItem">10km</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 综合筛选 -->
|
||
<div class="FilterMore" v-if="show2">
|
||
<div class="filterMore2_item">
|
||
<div class="filterMore2_item_left">综合</div>
|
||
<div class="filterMore2_item_right">
|
||
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
|
||
</div>
|
||
</div>
|
||
<div class="filterMore2_item">
|
||
<div class="filterMore2_item_left active3">从高到低</div>
|
||
<div class="filterMore2_item_right">
|
||
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
|
||
</div>
|
||
</div>
|
||
<div class="filterMore2_item">
|
||
<div class="filterMore2_item_left">从低到高</div>
|
||
<div class="filterMore2_item_right">
|
||
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 排序筛选 -->
|
||
<div class="FilterMore" v-if="show3">
|
||
<div class="filterMore2_item">
|
||
<div class="filterMore2_item_left2">智能排序</div>
|
||
<div class="filterMore2_item_right">
|
||
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
|
||
</div>
|
||
</div>
|
||
<div class="filterMore2_item">
|
||
<div class="filterMore2_item_left2 active3">距离优先</div>
|
||
<div class="filterMore2_item_right">
|
||
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
|
||
</div>
|
||
</div>
|
||
<div class="filterMore2_item">
|
||
<div class="filterMore2_item_left2">好评优先</div>
|
||
<div class="filterMore2_item_right">
|
||
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
|
||
</div>
|
||
</div>
|
||
<div class="filterMore2_item">
|
||
<div class="filterMore2_item_left2">销量优先</div>
|
||
<div class="filterMore2_item_right">
|
||
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 高级筛选面板 -->
|
||
<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 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>
|
||
|
||
<div class="main">
|
||
<!-- 遮罩 -->
|
||
<div class="dialogBox" v-if="isShowDia"></div>
|
||
|
||
<div class="MasterList">
|
||
<div class="MasterItem" v-for="(item, index) in 5" :key="index">
|
||
<div class="MasterItem_right">
|
||
<div class="MasterItem_info">
|
||
<div class="MasterItem_Info_left">
|
||
<image
|
||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/home_icon12.png"
|
||
></image>
|
||
<div class="state state1">待服务</div>
|
||
<div class="state state2" v-if="false">休息中</div>
|
||
<div class="state state3" v-if="false">服务中</div>
|
||
</div>
|
||
<div class="MasterItem_Info_right">
|
||
<div class="MasterItem_Info_right_1">
|
||
<div class="master_info_right_left">
|
||
林师傅
|
||
<image
|
||
class="Medal"
|
||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_Champion.png"
|
||
>
|
||
</image>
|
||
<image
|
||
class="Medal"
|
||
v-if="false"
|
||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_RunnerUp.png"
|
||
>
|
||
</image>
|
||
<image
|
||
class="star"
|
||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start1.png"
|
||
></image>
|
||
<span>4.8</span>
|
||
</div>
|
||
|
||
<div class="master_info_right_right" @click="masterInfo">
|
||
查看资料
|
||
</div>
|
||
</div>
|
||
<div class="MasterItem_Info_right_2">
|
||
52岁 广东梅州人 5-10年
|
||
</div>
|
||
<div class="MasterItem_Info_right_3">
|
||
<span>500+</span>预定 <span>100+</span>评价
|
||
</div>
|
||
<div class="MasterItem_Info_right_4">
|
||
<div class="tagItem tag1">积极主动</div>
|
||
<div class="tagItem tag2">技术精湛</div>
|
||
<div class="tagItem tag3">技术精湛</div>
|
||
</div>
|
||
|
||
<div class="MasterItem_Info_right_5">
|
||
价格范围： <span>￥500-￥800</span>
|
||
</div>
|
||
|
||
<div class="MasterItem_Info_right_6">
|
||
<image
|
||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_MsgImg1.png"
|
||
></image>
|
||
<image
|
||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_MsgImg1.png"
|
||
></image>
|
||
<image
|
||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_MsgImg1.png"
|
||
></image>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.FilterItem.active {
|
||
color: red;
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
import {
|
||
request,
|
||
picUrl,
|
||
NavgateTo,
|
||
menuButtonInfo,
|
||
} from "../../../utils/index";
|
||
import { apiArr } from "../../../api/reservation";
|
||
|
||
export default {
|
||
data() {
|
||
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");
|
||
},
|
||
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}`];
|
||
},
|
||
logOtherButtons(excludeIndex) {
|
||
for (let i = 1; i <= 6; i++) {
|
||
if (i !== excludeIndex) {
|
||
this[`show${i}`] = false;
|
||
}
|
||
}
|
||
},
|
||
},
|
||
onReady() {},
|
||
|
||
onLoad(options) {
|
||
const meun = menuButtonInfo();
|
||
this.top = meun.top;
|
||
this.localHeight = meun.height;
|
||
},
|
||
onShow() {},
|
||
|
||
/**
|
||
* 页面上拉触底事件的处理函数
|
||
*/
|
||
onReachBottom() {},
|
||
};
|
||
</script>
|
||
<style>
|
||
@import url("./index.css");
|
||
</style> |