288 lines
7.1 KiB
Vue
288 lines
7.1 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<custom-navbar title="服务列表" :leftImg="'/static/images/whiteBack.png'" :showUser="true"
|
|||
|
|
backgroundColor="linear-gradient( 134deg, #F52540 0%, #E8101E 100%)" titleColor="#fff"></custom-navbar>
|
|||
|
|
<serviecFirstTab :tabs="tabs" :activeId="activeId" activeColor="#E8101E" @tab-click="tabClick" bgColor="#fff">
|
|||
|
|
</serviecFirstTab>
|
|||
|
|
|
|||
|
|
<!-- <FilterPanel @filterConfirm="handleFilter"></FilterPanel> -->
|
|||
|
|
<CommonList ref="groupRef" :apiUrl="'/user/getSearchList'" :initialQuery="queryData"
|
|||
|
|
:listScrollHeight="`calc(100vh - ${statusBarHeight * 2 + 250}rpx)`">
|
|||
|
|
<template #headerScroll>
|
|||
|
|
<!-- 二级icon分类 -->
|
|||
|
|
<view class="icon-tabs">
|
|||
|
|
<view v-for="(item, idx) in iconTabs" :key="item.id" class="icon-tab"
|
|||
|
|
:class="{active: queryData.second_class == item.id}" @click="getSecondlist(item.id)">
|
|||
|
|
<image :src="item.photo" class="icon-img" mode="aspectFill"></image>
|
|||
|
|
<text class="icon-text">{{ item.title }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 添加过滤器组件 -->
|
|||
|
|
<filterVue :key="activeId" @filter-change="handleFilterChange"></filterVue>
|
|||
|
|
</template>
|
|||
|
|
<template #listData="{ list }">
|
|||
|
|
<serviceCardList :list="list" btnText="立即预约"></serviceCardList>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<!-- 空数据状态 -->
|
|||
|
|
<template #empty>
|
|||
|
|
<noData></noData>
|
|||
|
|
</template>
|
|||
|
|
</CommonList>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import serviceCardList from "@/pages/search/components/serviceCardList.vue";
|
|||
|
|
import request from "../../utils/request";
|
|||
|
|
import serviecFirstTab from "@/components/common/service-first-tab.vue";
|
|||
|
|
import searchBox from "./components/search-box.vue";
|
|||
|
|
import FilterPanel from "./components/intmentFilter.vue";
|
|||
|
|
import CommonList from "@/components/common/CommonList.vue";
|
|||
|
|
import filterVue from "./components/filter.vue";
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
searchBox,
|
|||
|
|
serviecFirstTab,
|
|||
|
|
FilterPanel,
|
|||
|
|
CommonList,
|
|||
|
|
serviceCardList,
|
|||
|
|
filterVue,
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
statusBarHeight: 0,
|
|||
|
|
title: "",
|
|||
|
|
queryData: {
|
|||
|
|
type: 3,
|
|||
|
|
distance: null, // 距离筛选
|
|||
|
|
min_price: null, // 最低价格
|
|||
|
|
max_price: null, // 最高价格
|
|||
|
|
sort: null, // 排序方式
|
|||
|
|
service_type: null // 服务类型
|
|||
|
|
},
|
|||
|
|
activeId: "",
|
|||
|
|
tabs: [],
|
|||
|
|
iconTabs: [],
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
onLoad(options) {
|
|||
|
|
this.getLocation();
|
|||
|
|
const systemInfo = uni.getSystemInfoSync();
|
|||
|
|
this.statusBarHeight = systemInfo.statusBarHeight;
|
|||
|
|
this.queryData.first_class = options.id;
|
|||
|
|
this.activeId = options.id;
|
|||
|
|
this.title = options.title;
|
|||
|
|
this.getFirstClass();
|
|||
|
|
this.getIconTabs()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getLocation() {
|
|||
|
|
let addressRes = {};
|
|||
|
|
let userAdrees = uni.getStorageSync("userAdrees");
|
|||
|
|
if (userAdrees) {
|
|||
|
|
addressRes = userAdrees.addressRes;
|
|||
|
|
} else {
|
|||
|
|
addressRes = getApp().globalData.addressRes;
|
|||
|
|
}
|
|||
|
|
this.queryData.userLat = addressRes.latitude;
|
|||
|
|
this.queryData.userLngz = addressRes.longitude;
|
|||
|
|
},
|
|||
|
|
getSecondlist(id) {
|
|||
|
|
this.queryData.second_class = id;
|
|||
|
|
this.search();
|
|||
|
|
},
|
|||
|
|
search() {
|
|||
|
|
this.$refs.groupRef.manualRefresh(this.queryData);
|
|||
|
|
},
|
|||
|
|
searchConfrim(e) {
|
|||
|
|
this.search();
|
|||
|
|
},
|
|||
|
|
tabClick(id) {
|
|||
|
|
this.activeId = id;
|
|||
|
|
this.queryData.first_class = id;
|
|||
|
|
this.queryData.second_class = "";
|
|||
|
|
// 重置筛选条件
|
|||
|
|
this.resetFilterConditions();
|
|||
|
|
this.getIconTabs();
|
|||
|
|
this.search();
|
|||
|
|
},
|
|||
|
|
getFirstClass() {
|
|||
|
|
// 加载一级类目
|
|||
|
|
request.post("/user/firstclass").then((res) => {
|
|||
|
|
this.tabs = res.data;
|
|||
|
|
this.search();
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
getIconTabs() {
|
|||
|
|
// 加载二级类目
|
|||
|
|
request.post('/user/secondclass', {
|
|||
|
|
id: this.queryData.first_class
|
|||
|
|
}).then((res) => {
|
|||
|
|
this.iconTabs = res.data;
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
handleFilter(data) {
|
|||
|
|
console.log("筛选结果：", data);
|
|||
|
|
this.queryData.distance = data.selectedDistance;
|
|||
|
|
},
|
|||
|
|
// 处理过滤器变化
|
|||
|
|
handleFilterChange(filterData) {
|
|||
|
|
console.log("收到筛选数据:", filterData);
|
|||
|
|
|
|||
|
|
// 更新查询参数
|
|||
|
|
if (filterData.distance !== undefined && filterData.distance !== null) {
|
|||
|
|
// 注意：接口需要的是km单位，组件里是米，需要转换
|
|||
|
|
this.queryData.distance = filterData.distance / 1000;
|
|||
|
|
} else {
|
|||
|
|
delete this.queryData.distance;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (filterData.minPrice !== undefined && filterData.minPrice !== null) {
|
|||
|
|
this.queryData.min_price = filterData.minPrice;
|
|||
|
|
} else {
|
|||
|
|
delete this.queryData.min_price;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (filterData.maxPrice !== undefined && filterData.maxPrice !== null) {
|
|||
|
|
this.queryData.max_price = filterData.maxPrice;
|
|||
|
|
} else {
|
|||
|
|
delete this.queryData.max_price;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (filterData.sortType !== undefined && filterData.sortType !== null) {
|
|||
|
|
// 根据接口文档映射排序类型
|
|||
|
|
const sortMap = {
|
|||
|
|
'distance': 1, // 离我最近
|
|||
|
|
'sales': 2, // 销量最高
|
|||
|
|
'price_asc': 3, // 价格最低
|
|||
|
|
'price_desc': 4 // 价格最高
|
|||
|
|
};
|
|||
|
|
this.queryData.sort_type = sortMap[filterData.sortType];
|
|||
|
|
} else {
|
|||
|
|
delete this.queryData.sort_type;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (filterData.serviceType !== undefined && filterData.serviceType !== null) {
|
|||
|
|
// 接口文档中服务方式是 server_kind，1=上门，2=到店
|
|||
|
|
this.queryData.server_kind = filterData.serviceType;
|
|||
|
|
} else {
|
|||
|
|
delete this.queryData.server_kind;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log("最终查询参数:", this.queryData);
|
|||
|
|
|
|||
|
|
// 重新搜索
|
|||
|
|
this.search();
|
|||
|
|
},
|
|||
|
|
// 重置筛选条件
|
|||
|
|
resetFilterConditions() {
|
|||
|
|
const resetFields = ['distance', 'server_kind', 'min_price', 'max_price', 'sort_type'];
|
|||
|
|
resetFields.forEach(field => {
|
|||
|
|
delete this.queryData[field];
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="less">
|
|||
|
|
::v-deep .navbar-content {
|
|||
|
|
border: none !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//firstTab样式
|
|||
|
|
.service-first-tab {
|
|||
|
|
border-bottom: none;
|
|||
|
|
padding-bottom: 27rpx;
|
|||
|
|
border-bottom: 2rpx solid #f1f1f1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
//list样式
|
|||
|
|
.common-list {
|
|||
|
|
// background-color: #fafafa!important; // 这个是莫名其妙多出来一小行的盒子元凶
|
|||
|
|
border-radius: 30rpx 30rpx 0rpx 0rpx;
|
|||
|
|
|
|||
|
|
::v-deep .list-container {
|
|||
|
|
padding: 0rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::v-deep .list-scroll {
|
|||
|
|
margin-top: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-tabs {
|
|||
|
|
display: flex;
|
|||
|
|
column-gap: 48rpx;
|
|||
|
|
row-gap: 30rpx;
|
|||
|
|
flex-flow: row wrap;
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
align-items: center;
|
|||
|
|
background: #fff;
|
|||
|
|
padding: 0rpx 0 0 30rpx;
|
|||
|
|
margin-bottom: 17rpx;
|
|||
|
|
// padding-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-tab {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-img {
|
|||
|
|
width: 100rpx;
|
|||
|
|
height: 100rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
border: 2rpx solid transparent;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-text {
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
line-height: 33rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-tab.active .icon-text {
|
|||
|
|
color: #E8101E;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-tab.active .icon-img {
|
|||
|
|
border: 2rpx solid #E8101E;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::v-deep .list-scroll {
|
|||
|
|
margin-top: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.service-first-tab {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.service-list {
|
|||
|
|
padding-top: 17rpx !important;
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::v-deep .service-list {
|
|||
|
|
padding: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::v-deep .service-item-wrapper {
|
|||
|
|
padding: 5rpx !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ::v-deep .common-list {
|
|||
|
|
// background-color: #f5f5f5;
|
|||
|
|
// }
|
|||
|
|
</style>
|