mrr.sj.front/pages/service/class.vue

<template>
	<view>
		<custom-navbar title="分类" :leftImg="'/static/images/whiteBack.png'" :showUser="true"
			backgroundColor="linear-gradient( 134deg, #F52540 0%, #FF4767 100%)" titleColor="#fff"></custom-navbar>
		<serviecFirstTab :tabs="tabs" :activeId="activeId" activeColor="#FF4767" @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: #FF4767;
	}

	.icon-tab.active .icon-img {
		border: 2rpx solid #FF4767;
	}
	
	::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 .common-list {
	// 	background-color: #f5f5f5;
	// }
</style>