mrr.sj.front/pages/search/search-result.vue

<template>
	<view class="search-page">
		<!-- 自定义导航栏 -->
		<custom-navbar title="搜索" :leftImg="'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e8f7c37f-b446-41da-b578-59098a56bc4d.png'" :showUser="true"
			backgroundColor="linear-gradient( 134deg, #F52540 0%, #FF4767 100%)" titleColor="#fff"
			borderBottom="none"></custom-navbar>
		
		<!-- 顶部搜索和标签区域 -->
		<view class="page-top">
			<search-box v-model="listQuery.title" placeholder="请输入手艺人/服务/店铺等" @search="search" @confirm="search" />
			<view class="tabList">
				<view @click="changeType(tab.value)" :key="tab.value" class="tabItem"
					:class="{ tabItem_active: tab.value == listQuery.type }" v-for="tab in tabList">
					{{ tab.label }}
				</view>
			</view>
			<!-- 筛选组件 - 只在服务类型(3)显示 -->
			<view v-if="listQuery.type === 3" class="filter-container">
				<filterVue @filter-change="handleFilterChange"
				@open="onFilterShowChange(true)"
				@close="onFilterShowChange(false)"
				/>
			</view>
		</view>
		
		<!-- 加载提示 -->
		<view v-if="isLoading" class="simple-loading">
			<view class="loading-spinner"></view>
			<text class="loading-text">搜索中...</text>
		</view>
		
		<!-- 列表容器 -->
		<view class="list-container" :class="{ 'loading-blur': isLoading }">
			<CommonList background="transparent" ref="groupRef" :apiUrl="'/user/getSearchList'"
				:listQuery="listQuery"
				:listScrollHeight="`calc(100vh - ${totalTopHeight}rpx)`"
				:key="listQuery.type + '_' + (listQuery._timestamp || '')">
				<template #listData="{ list }">
					<!-- 服务卡片 -->
					<view v-if="listQuery.type == 3 && list[0] && list[0].search_type == 3">
						<view v-for="(item, index) in list" :key="index" class="card-wrapper-service">
							<serviceCardList class="service-card" :list="[item]"></serviceCardList>
						</view>
					</view>

					<!-- 手艺人卡片 -->
					<view v-if="listQuery.type == 1 && list[0] && list[0].search_type == 1">
						<!-- <view v-for="(item, index) in list" :key="index" class="card-wrapper-syr">
							<view class="inner-content">
								<syrCardList :list="[item]"></syrCardList>
							</view>
						</view> -->
						<syrCardList :list="list"></syrCardList>
					</view>

					<!-- 商家卡片 -->
					<view v-if="listQuery.type == 2 && list[0] && list[0].search_type == 2" class="shop_box">
						<view v-for="(item, index) in list" :key="index" class="card-wrapper">
							<shopCard :shop="item"></shopCard>
						</view>
					</view>
				</template>

				<!-- 空数据状态 -->
				<template #empty>
					<noData></noData>
				</template>
			</CommonList>
		</view>
	</view>
</template>

<script>
	import CommonList from "@/components/common/CommonList.vue";
	import searchBox from "./components/search_box_result.vue";
	import syrCardList from "./components/syrCardList.vue";
	import serviceCardList from "./components/serviceCardList.vue";
	import shopCard from "./components/shopCard.vue";
	import filterVue from "./components/filter.vue";
	import http from "@/utils/request.js";

	export default {
		components: {
			searchBox,
			CommonList,
			syrCardList,
			serviceCardList,
			shopCard,
			filterVue,
		},
		data() {
			return {
				totalTopHeight: 300, // 顶部区域总高度估算值，会在onLoad中重新计算
				listQuery: {
					page: 1,
					limit: 10,
					type: 3,
					title: "",
					userLngz: "",
					userLat: "",
					// 筛选参数
					serviceType: null,
					distance: null,
					minPrice: null,
					maxPrice: null,
					sortType: null,
					// 用于强制刷新的时间戳
					_timestamp: 0,
				},
				tabList: [
						{
							label: "服务",
							value: 3
						},
						{
							label: "手艺人",
							value: 1
						},
						
						{
							label: "门店",
							value: 2
						},
					],
				isSearching: false, // 防止重复搜索
				searchTimer: null, // 防抖定时器
				hasInitialSearch: false, // 标记是否已执行初始智能搜索
				userChangedTab: false, // 标记用户是否手动切换过tab
				lastSearchText: "", // 记录上一次的搜索词
				forceNormalSearch: false, // 强制普通搜索标志
				isLoading: false, // 加载状态
				loadingTimer: null, // 加载计时器（防止加载时间过短闪烁）
				minLoadingTime: 100, // 最小加载显示时间（毫秒）
			};
		},
		onLoad(options) {
			// 接收可能的搜索词参数
			this.listQuery.title = options.searchText || '';
			this.lastSearchText = this.listQuery.title; // 记录初始搜索词
			
			// 获取用户地理位置
			let userAdrees = uni.getStorageSync("userAdrees");
			if (userAdrees) {
				this.listQuery.userLngz = userAdrees.longitude;
				this.listQuery.userLat = userAdrees.latitude;
			} else {
				// 默认位置（备用）
				this.listQuery.userLngz = "117.330043";
				this.listQuery.userLat = "38.372266";
			}
			
			this.$nextTick(() => {
				this.showLoading();
				// 只在第一次进入页面时执行智能搜索
				this.performInitialSearch();
				
				// 延迟计算高度，确保DOM渲染完成
				setTimeout(() => {
					this.calculateTopHeight();
				}, 100);
			});
		},
		methods: {
			// 计算顶部区域总高度（用于设置列表滚动区域高度）
			calculateTopHeight() {
				// 创建选择器查询
				const query = uni.createSelectorQuery().in(this);
				
				// 查询导航栏高度
				query.select('.custom-navbar').boundingClientRect();
				query.select('.page-top').boundingClientRect();
				
				query.exec((res) => {
					if (res[0] && res[1]) {
						const navHeight = res[0].height;
						const topHeight = res[1].height;
						const systemInfo = uni.getSystemInfoSync();
						const pxToRpx = 750 / systemInfo.windowWidth;
						
						// 转换为rpx并四舍五入
						const totalHeight = Math.ceil((navHeight + topHeight) * pxToRpx);
						this.totalTopHeight = totalHeight;

						console.log('导航栏高度(px):', navHeight);
						console.log('顶部区域高度(px):', topHeight);
						console.log('总高度(rpx):', totalHeight);
					}
				});
			},
			// 返回上一页
			goBack() {
				// #ifdef APP-PLUS
				uni.navigateBack();
				// #endif

				// #ifdef MP-WEIXIN
				uni.navigateBack({
					delta: 1,
				});
				// #endif
			},
			// 切换tab类型
			changeType(type) {
				// 标记用户手动切换tab
				this.userChangedTab = true;
				// 切换到指定tab后，后续搜索都使用普通搜索（不检查其他tab）
				this.forceNormalSearch = true;
				
				this.listQuery.type = type;
				// 切换类型时重置筛选参数（只有服务类型才有筛选）
				if (type !== 3) {
					this.resetFilterParams();
				}
				
				// 显示加载
				this.showLoading();
				// 用户手动切换tab时，只执行普通搜索
				this.performNormalSearch();
				
				// 重新计算高度（因为筛选组件可能显示/隐藏）
				this.$nextTick(() => {
					setTimeout(() => {
						this.calculateTopHeight();
					}, 50);
				});
			},
			// 搜索方法（点击搜索按钮或确认搜索时触发）
			search() {
				// 防抖处理，避免频繁请求
				if (this.searchTimer) {
					clearTimeout(this.searchTimer);
				}
				
				// 如果正在搜索中，等待
				if (this.isSearching) {
					console.log('正在搜索中，稍后重试');
					return;
				}
				
				this.searchTimer = setTimeout(() => {
					// 检查搜索词是否有变化
					const searchTextChanged = this.listQuery.title !== this.lastSearchText;
					const isEmptySearch = !this.listQuery.title || this.listQuery.title.trim() === '';
					
					// 如果搜索框为空，直接获取当前类型的全部数据
					if (isEmptySearch) {
						console.log('搜索框为空，直接获取全部数据');
						this.lastSearchText = '';
						this.showLoading();
						// 清空搜索词，确保后端能正确返回全部数据
						this.listQuery.title = '';
						// 重置页码，从第一页开始
						this.listQuery.page = 1;
						// 添加时间戳强制刷新列表
						this.listQuery._timestamp = Date.now();
						// 执行搜索
						this.performNormalSearch();
						return;
					}
					
					// 如果搜索词有变化，重置智能搜索状态
					if (searchTextChanged) {
						console.log('搜索词变化，重置智能搜索状态');
						this.lastSearchText = this.listQuery.title;
						this.hasInitialSearch = false;
						this.forceNormalSearch = false;
					}
					
					// 显示加载动画
					this.showLoading();
					
					// 根据当前状态决定使用哪种搜索方式
					if (this.forceNormalSearch) {
						console.log('强制使用普通搜索');
						this.performNormalSearch();
					} else if (this.userChangedTab) {
						// 用户已经切换过tab，但搜索词变化了，可以考虑重新智能搜索
						if (searchTextChanged && !this.hasInitialSearch) {
							console.log('用户切换过tab但搜索词变化，尝试智能搜索');
							this.performSmartSearch();
						} else {
							console.log('用户切换过tab且搜索词未变，使用普通搜索');
							this.performNormalSearch();
						}
					} else if (!this.hasInitialSearch) {
						console.log('首次或搜索词变化，使用智能搜索');
						this.performSmartSearch();
					} else {
						console.log('已经执行过智能搜索，使用普通搜索');
						// 否则执行普通搜索
						this.performNormalSearch();
					}
				}, 300);
			},
			// 显示加载动画
			showLoading() {
				if (this.loadingTimer) {
					clearTimeout(this.loadingTimer);
				}
				this.isLoading = true;
			},
			// 隐藏加载动画（带最小时间，避免闪烁）
			hideLoading() {
				if (this.loadingTimer) {
					clearTimeout(this.loadingTimer);
				}
				
				// 确保至少显示一定时间，避免闪烁
				this.loadingTimer = setTimeout(() => {
					this.isLoading = false;
					this.loadingTimer = null;
					console.log('加载动画已隐藏');
				}, this.minLoadingTime);
			},
			// 立即隐藏加载动画（用于错误情况）
			forceHideLoading() {
				if (this.loadingTimer) {
					clearTimeout(this.loadingTimer);
					this.loadingTimer = null;
				}
				this.isLoading = false;
				console.log('强制隐藏加载动画');
			},
			// 首次进入页面时的智能搜索 - 哪个列表先有数据就显示哪个
			async performInitialSearch() {
				if (this.isSearching) return;
				
				this.isSearching = true;
				
				try {
					// 如果没有搜索关键词，直接获取当前类型的全部数据
					if (!this.listQuery.title || this.listQuery.title.trim() === '') {
						console.log('搜索框为空，获取全部数据');
						// 清空title参数，让后端返回全部数据
						this.listQuery.title = '';
						// 重置页码
						this.listQuery.page = 1;
						// 添加时间戳强制刷新
						this.listQuery._timestamp = Date.now();
						// 刷新当前列表
						this.refreshCurrentList();
						this.hasInitialSearch = true;
						// 延迟隐藏加载
						setTimeout(() => this.hideLoading(), 100);
						return;
					}
					
					// 记录原始类型
					const originalType = this.listQuery.type;
					console.log('初始智能搜索开始，当前类型:', originalType, '搜索词:', this.listQuery.title);
					
					// 检查三个类型哪个先有数据
					const targetType = await this.findFirstAvailableType();
					console.log('初始智能搜索结束，找到的目标类型:', targetType, '当前类型:', this.listQuery.type);
					
					// 如果找到有数据的类型，切换到该类型
					if (targetType && targetType !== this.listQuery.type) {
						console.log(`初始切换到类型 ${targetType}`);
						this.listQuery.type = targetType;
						// 如果是服务类型，保留筛选参数，否则重置
						if (targetType !== 3) {
							this.resetFilterParams();
						}
						
						// 重置页码
						this.listQuery.page = 1;
						// 添加时间戳
						this.listQuery._timestamp = Date.now();
						
						// 更新UI后刷新列表
						this.$nextTick(() => {
							this.refreshCurrentList();
						});
					} else if (targetType === this.listQuery.type) {
						// 类型没变，直接刷新
						console.log(`初始类型未变 ${targetType}，直接刷新`);
						// 重置页码
						this.listQuery.page = 1;
						// 添加时间戳
						this.listQuery._timestamp = Date.now();
						this.refreshCurrentList();
					} else {
						// 没找到有数据的类型，显示空状态
						console.log(`初始未找到有数据的类型，保持当前类型 ${this.listQuery.type}`);
						// 重置页码
						this.listQuery.page = 1;
						// 添加时间戳
						this.listQuery._timestamp = Date.now();
						this.refreshCurrentList();
					}
				} catch (error) {
					console.error('初始智能搜索失败:', error);
					// 出错时直接刷新当前列表
					this.refreshCurrentList();
				} finally {
					this.isSearching = false;
					this.hasInitialSearch = true; // 标记初始搜索已完成
				}
			},
			// 普通搜索（用于用户手动操作后）
			performNormalSearch() {
				if (this.isSearching) return;
				
				this.isSearching = true;
				
				try {
					console.log('普通搜索，类型:', this.listQuery.type, '搜索词:', this.listQuery.title);
					// 确保空搜索时也能正确请求
					if (!this.listQuery.title || this.listQuery.title.trim() === '') {
						this.listQuery.title = '';
					}
					// 重置页码
					this.listQuery.page = 1;
					// 添加时间戳强制刷新
					this.listQuery._timestamp = Date.now();
					// 刷新列表
					this.refreshCurrentList();
				} catch (error) {
					console.error('普通搜索失败:', error);
					this.forceHideLoading();
				} finally {
					this.isSearching = false;
				}
			},
			// 智能搜索（只在第一次搜索时使用）
			async performSmartSearch() {
				if (this.isSearching) return;
				
				this.isSearching = true;
				
				try {
					// 如果没有搜索关键词，直接刷新当前列表（获取全部数据）
					if (!this.listQuery.title || this.listQuery.title.trim() === '') {
						this.listQuery.title = '';
						// 重置页码
						this.listQuery.page = 1;
						// 添加时间戳
						this.listQuery._timestamp = Date.now();
						this.refreshCurrentList();
						this.hasInitialSearch = true;
						setTimeout(() => this.hideLoading(), 100);
						return;
					}
					
					// 记录原始类型
					const originalType = this.listQuery.type;
					console.log('智能搜索开始，当前类型:', originalType, '搜索词:', this.listQuery.title);
					
					// 先检查当前tab是否有数据
					const currentTypeHasData = await this.checkTypeHasData(this.listQuery.type);
					
					if (currentTypeHasData) {
						// 当前tab有数据，直接使用当前tab
						console.log(`当前类型 ${this.listQuery.type} 有数据，直接刷新`);
						// 重置页码
						this.listQuery.page = 1;
						// 添加时间戳
						this.listQuery._timestamp = Date.now();
						this.refreshCurrentList();
					} else {
						// 当前tab没有数据，查找其他有数据的tab
						const targetType = await this.findFirstAvailableType();
						console.log('智能搜索结束，找到的目标类型:', targetType, '当前类型:', this.listQuery.type);
						
						if (targetType && targetType !== this.listQuery.type) {
							console.log(`切换到类型 ${targetType}`);
							this.listQuery.type = targetType;
							// 如果是服务类型，保留筛选参数，否则重置
							if (targetType !== 3) {
								this.resetFilterParams();
							}

							// 重置页码
							this.listQuery.page = 1;
							// 添加时间戳
							this.listQuery._timestamp = Date.now();

							// 更新UI后刷新列表
							this.$nextTick(() => {
								this.refreshCurrentList();
							});
						} else if (targetType === this.listQuery.type) {
							console.log(`类型未变 ${targetType}，直接刷新`);
							// 重置页码
							this.listQuery.page = 1;
							// 添加时间戳
							this.listQuery._timestamp = Date.now();
							this.refreshCurrentList();
						} else {
							// 没找到有数据的类型，显示空状态
							console.log(`未找到有数据的类型，保持当前类型 ${this.listQuery.type}`);
							// 重置页码
							this.listQuery.page = 1;
							// 添加时间戳
							this.listQuery._timestamp = Date.now();
							this.refreshCurrentList();
						}
					}
				} catch (error) {
					console.error('智能搜索失败:', error);
					this.refreshCurrentList();
				} finally {
					this.isSearching = false;
					this.hasInitialSearch = true;
				}
			},
			// 查找第一个有数据的类型
			async findFirstAvailableType() {
				const typesToCheck = [3, 1, 2]; // 服务 -> 手艺人 -> 店铺
				
				// 智能判断优先检查哪个类型
				let priorityTypes = typesToCheck;
				
				// 如果当前搜索词是之前搜索过的，并且用户已经选择了某个tab
				// 则优先检查用户选择的tab
				if (this.userChangedTab && this.listQuery.type) {
					console.log(`用户已选择类型 ${this.listQuery.type}，优先检查`);
					priorityTypes = [
						this.listQuery.type,
						...typesToCheck.filter(type => type !== this.listQuery.type)
					];
				}
				
				for (const type of priorityTypes) {
					try {
						console.log(`开始检查类型 ${type} 是否有数据`);
						const hasData = await this.checkTypeHasData(type);
						console.log(`类型 ${type} 检查结果: ${hasData ? '有数据' : '无数据'}`);
						
						if (hasData) {
							console.log(`类型 ${type} 有数据，将切换到该类型`);
							return type;
						}
					} catch (error) {
						console.error(`检查类型 ${type} 失败:`, error);
						continue;
					}
				}
				
				// 都没找到数据，返回null
				console.log('所有类型都没有数据');
				return null;
			},
			// 检查指定类型是否有数据
			async checkTypeHasData(type) {
				try {
					// 构建检查参数 注意这里title要传空字符串而不是不传
					const params = {
						page: 1,
						limit: 5, // 只检查前5条，减少请求数据量
						type: type,
						// 这里必须传title，即使是空字符串也要传
						title: this.listQuery.title || '',
						userLngz: this.listQuery.userLngz,
						userLat: this.listQuery.userLat,
					};
					
					// 如果是服务类型，添加筛选参数
					if (type === 3) {
						if (this.listQuery.serviceType !== null && this.listQuery.serviceType !== undefined) {
							params.server_kind = this.listQuery.serviceType;
						}
						if (this.listQuery.distance !== null && this.listQuery.distance !== undefined) {
							params.distance = this.listQuery.distance / 1000;
						}
						if (this.listQuery.minPrice !== null && this.listQuery.minPrice !== undefined) {
							params.min_price = this.listQuery.minPrice;
						}
						if (this.listQuery.maxPrice !== null && this.listQuery.maxPrice !== undefined) {
							params.max_price = this.listQuery.maxPrice;
						}
						if (this.listQuery.sortType !== null && this.listQuery.sortType !== undefined) {
							const sortMap = {
								'distance': 1,
								'sales': 2,
								'price_asc': 3,
								'price_desc': 4,
							};
							params.sort_type = sortMap[this.listQuery.sortType] || 1;
						}
					}
					
					// 清理空值参数，但保留title为空字符串的情况
					Object.keys(params).forEach(key => {
						if (params[key] === null || params[key] === undefined) {
							delete params[key];
						}
					});
					
					console.log(`检查类型 ${type} 的请求参数:`, JSON.stringify(params));
					
					// 使用项目的请求封装
					const res = await http.post('/user/getSearchList', params, {
						hideLoading: true
					});
					
					let hasData = false;
					
					// 尝试多种可能的数据结构
					// 可能性1: res 直接包含 list 数组
					if (res && res.list && Array.isArray(res.list) && res.list.length > 0) {
						console.log(`√类型 ${type}: 通过 res.list 找到数据, 长度: ${res.list.length}`);
						hasData = true;
					}
					// 可能性2: res.data 中包含 list 数组
					else if (res && res.data && res.data.list && Array.isArray(res.data.list) && res.data.list.length > 0) {
						console.log(`√ 类型 ${type}: 通过 res.data.list 找到数据, 长度: ${res.data.list.length}`);
						hasData = true;
					}
					// 可能性3: res 本身是数组
					else if (res && Array.isArray(res) && res.length > 0) {
						console.log(`√ 类型 ${type}: res 本身就是数组, 长度: ${res.length}`);
						hasData = true;
					}
					// 可能性4: 根据 CommonList 的日志，可能是其他数据结构
					else if (res && res.data && Array.isArray(res.data) && res.data.length > 0) {
						console.log(`√类型 ${type}: 通过 res.data 数组找到数据, 长度: ${res.data.length}`);
						hasData = true;
					}
					else {
						console.log(`× 类型 ${type}: 未找到数据, 响应结构不符合预期`);
						hasData = false;
					}
					
					return hasData;
				} catch (error) {
					console.error('检查数据失败:', error);
					// 请求失败，认为没有数据
					return false;
				}
			},
			// 判断是否为可能的手艺人名称
			isPossibleArtisanName(text) {
				if (!text) return false;

				// 手艺人名称通常是中文，且较短
				const chineseRegex = /^[\u4e00-\u9fa5]{2,4}$/;
				return chineseRegex.test(text);
			},
			// 刷新当前列表
			refreshCurrentList() {
				// 构建API请求参数
				const apiParams = this.buildApiParams();
				console.log('刷新列表，类型:', this.listQuery.type, '搜索词:', this.listQuery.title, 'API请求参数:', apiParams);
				
				// 强制更新listQuery
				this.listQuery = {
					...this.listQuery,
					...apiParams,
					// 确保时间戳更新
					_timestamp: Date.now()
				};
				
				console.log('更新后的listQuery:', JSON.parse(JSON.stringify(this.listQuery)));
				
				// 检查CommonList组件是否存在
				if (!this.$refs.groupRef) {
					console.error('CommonList组件引用不存在');
					this.forceHideLoading();
					return;
				}
				
				console.log('开始调用manualRefresh...');
				
				// 等待一个tick确保DOM更新
				this.$nextTick(() => {
					try {
						// 尝试调用CommonList的刷新方法
						if (this.$refs.groupRef.manualRefresh) {
							console.log('调用manualRefresh方法，参数:', apiParams);
							this.$refs.groupRef.manualRefresh(apiParams);
						} else {
							console.warn('CommonList没有找到manualRefresh方法');
							// 如果manualRefresh不存在，尝试其他方式
							this.$forceUpdate();
						}
					} catch (error) {
						console.error('调用manualRefresh失败:', error);
						this.forceHideLoading();
					}
				});
				
				// 监听列表刷新完成（使用一个简单的超时机制）
				// 因为CommonList可能没有提供完成事件，我们设置一个合理的超时
				setTimeout(() => {
					this.hideLoading();
					console.log('列表刷新超时检查，隐藏加载动画');
				}, 300);
			},
			// 构建符合后端接口的参数
			buildApiParams() {
				const params = {
					page: this.listQuery.page,
					limit: this.listQuery.limit,
					type: this.listQuery.type,
					// 关键：这里title必须传，即使为空字符串也要传
					// 因为后端可能依赖title参数来判断是搜索还是获取全部
					// 如果后端不需要title参数来表示全部，那么传空字符串应该也是可以的
					title: this.listQuery.title || '',
					userLngz: this.listQuery.userLngz,
					userLat: this.listQuery.userLat,
				};

				// 只有服务类型(type=3)时才添加筛选参数
				if (this.listQuery.type === 3) {
					// 服务类型映射: serviceType -> server_kind
					if (this.listQuery.serviceType !== null && this.listQuery.serviceType !== undefined) {
						params.server_kind = this.listQuery.serviceType;
					}

					// 距离筛选: 前端是米，后端是公里
					if (this.listQuery.distance !== null && this.listQuery.distance !== undefined) {
						params.distance = this.listQuery.distance / 1000; // 米转公里
					}

					// 价格筛选
					if (this.listQuery.minPrice !== null && this.listQuery.minPrice !== undefined) {
						params.min_price = this.listQuery.minPrice;
					}
					if (this.listQuery.maxPrice !== null && this.listQuery.maxPrice !== undefined) {
						params.max_price = this.listQuery.maxPrice;
					}

					// 排序类型映射
					if (this.listQuery.sortType !== null && this.listQuery.sortType !== undefined) {
						// 将前端的排序值映射为后端的数字
						const sortMap = {
							'distance': 1, // 离我最近
							'sales': 2, // 销量最高
							'price_asc': 3, // 价格最低
							'price_desc': 4, // 价格最高
						};
						params.sort_type = sortMap[this.listQuery.sortType] || 1;
					}
				}else{
					params.server_kind =null
					params.distance =null
					params.min_price =null
					params.max_price =null
					params.sortMap =null
				}
				
				// 清理空值参数，但保留title为空字符串的情况
				Object.keys(params).forEach(key => {
					if (params[key] === null || params[key] === undefined) {
						delete params[key];
					}
				});
				
				console.log('最终构建的参数:', JSON.stringify(params));
				return params;
			},
			// 重置筛选参数
			resetFilterParams() {
				this.$set(this.listQuery,"serviceType",null)
				this.$set(this.listQuery,"distance",null)
				this.$set(this.listQuery,"minPrice",null)
				this.$set(this.listQuery,"maxPrice",null)
				this.$set(this.listQuery,"sortType",null)
			},
			// 处理筛选变化
			handleFilterChange(filterData) {
				console.log('收到筛选数据:', filterData);
				// 更新筛选参数
				this.listQuery.serviceType = filterData.serviceType;
				this.listQuery.distance = filterData.distance;
				this.listQuery.minPrice = filterData.minPrice;
				this.listQuery.maxPrice = filterData.maxPrice;
				this.listQuery.sortType = filterData.sortType;
				
				// 重置页码
				this.listQuery.page = 1;
				// 添加时间戳
				this.listQuery._timestamp = Date.now();
				
				// 显示加载
				this.showLoading();
				// 重新搜索
				this.performNormalSearch();
			},
			// 筛选面板状态变化
			onFilterShowChange(show) {
				// 筛选面板显示/隐藏时重新计算高度
				this.$nextTick(() => {
					setTimeout(() => {
						this.calculateTopHeight();
					}, 300);
				});
			}
		},
		onUnload() {
			// 页面卸载时清理计时器
			if (this.searchTimer) {
				clearTimeout(this.searchTimer);
				this.searchTimer = null;
			}
			if (this.loadingTimer) {
				clearTimeout(this.loadingTimer);
				this.loadingTimer = null;
			}
		}
	};
</script>

<style lang="less">
	.search-page {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background: #ffffff;
		position: relative;
	}

	/* 自定义导航栏 */
	.custom-navbar {
		flex-shrink: 0;
		position: relative;
		z-index: 1000;
	}

	/* 顶部区域 */
	.page-top {
		// position: fixed;
		flex-shrink: 0;
		top: calc(88rpx + var(--status-bar-height));
		left: 0;
		right: 0;
		z-index: 999;
		background: #fff;
		padding-bottom: 0;
		width: 100%;
	}
	

	/* 筛选容器 */
	.filter-container {
		background: #fff;
	}

	.tabList {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 128rpx;
		color: #333333;
		padding-bottom: 24rpx;
		background: #fff;

		.tabItem {
			padding: 30rpx 25rpx 12rpx 25rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
			line-height: 42rpx;
			text-align: left;
			font-style: normal;
		}

		.tabItem_active {
			font-weight: 500;
			font-size: 30rpx;
			color: #FF4767;
			line-height: 42rpx;
			text-align: left;
			font-style: normal;
			position: relative;
		}

		.tabItem_active::after {
			content: "";
			position: absolute;
			bottom: 0rpx;
			left: 50%;
			-webkit-transform: translateX(-50%);
			transform: translateX(-50%);
			width: 34rpx;
			height: 6rpx;
			background: linear-gradient(306deg, #FF4767 0%, #fc563b 100%);
			border-radius: 2rpx;
		}
	}

	/* 简单加载提示 */
	.simple-loading {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 1001;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: rgba(255, 255, 255, 0.95);
		padding: 40rpx 60rpx;
		border-radius: 20rpx;
		box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.12);
		min-width: 200rpx;
	}

	.loading-spinner {
		width: 60rpx;
		height: 60rpx;
		border: 4rpx solid #f3f3f3;
		border-top: 4rpx solid #FF4767;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-bottom: 24rpx;
	}

	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

	.loading-text {
		font-size: 28rpx;
		color: #666;
		font-weight: 500;
	}

	/* 列表容器 */
	.list-container {
		flex: 1;
		position: relative;
		background: #f5f5f5;
		overflow: hidden;
		margin-top: 0;
		padding: 0 !important;
		transition: filter 0.3s ease;
	}

	.list-container.loading-blur {
		filter: blur(2px);
		pointer-events: none;
		user-select: none;
	}

	.list-container ::v-deep .common-list {
		height: 100% !important;
		background-color: #ffffff !important;
		padding: 0 !important;
		margin: -13rpx 0 !important;
		min-height: unset !important;
	}

	.list-container ::v-deep .list-scroll {
		height: 100% !important;
		
		.scroll-view {
			height: 100% !important;
		}
		
		.list-container {
			padding: 1rpx 0 0 0; // ???为什么
			min-height: 100%;
			background: #f5f5f5;
			border-radius: 30rpx 30rpx 0 0;
		}

		.list-item {
			display: block;
			padding: 0;
			background-color: transparent;
			margin-bottom: 20rpx;
		}
	}

	/* 卡片样式 */
	.card-wrapper {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 24rpx;
		margin: 20rpx 24rpx 0 24rpx;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
		overflow: hidden;
		box-sizing: border-box;
	}

	/* 卡片样式 */
	.card-wrapper {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 24rpx;
		margin: 20rpx 24rpx 0 24rpx;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
		overflow: hidden;
		box-sizing: border-box;
	}

	.card-wrapper-service {
		background: #ffffff;
		border-radius: 20rpx;
		margin: 20rpx 24rpx;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
		overflow: hidden;
		box-sizing: border-box;
	}

	.shop_box {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* 空数据状态 */
	.list-container ::v-deep .no-data {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #f5f5f5;
	}
		.scroll-locked {
		// overflow: hidden !important;
		// height: 100vh !important;
		position: fixed !important;
		width: 100% !important;
	}
</style>