labor_map_miniapp/pages/searchPositions/searchPositions.vue

<template>
	<view class="search-positions-page">
		<!-- 搜索区域 -->
		<view class="search-header">
			<view class="search-input-wrapper">
				<input type="text" v-model="searchKeyword" placeholder="请输入关键词" class="search-input" />
				<button class="search-btn" @click="onSearch">搜索</button>
			</view>
			<!-- 搜索标签 -->
			<view class="search-tags">
				<view v-for="item in tagList" :key="item.tagId" class="tag" :class="{ active: activeTag.includes(item.tagId) }" @click="onTagClick(item.tagId)">{{ item.tagName || '标签' }}</view>
			</view>
		</view>

		<scroll-view class="search-list" scroll-y :refresher-enabled="true" :refresher-triggered="refreshing"
			@refresherrefresh="onRefresh" @scrolltolower="onLoadMore">
			<template v-for="item in list" :key="item.jobId">
				<recruitment :dataSource="item"></recruitment>
				<view class="driver"></view>
			</template>
			<view class="loading-more">
				<text v-if="loadingMore">加载中...</text>
				<text v-else-if="noMoreData">没有更多数据了</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getAppJobVO, tagGetListPage
	} from '../../api';
	import {
		ref
	} from 'vue';
	import {
		delay, getLatLng
	} from '../../utils';
	let currentPage = 1
	const list = ref([])
	const searchKeyword = ref('')
	const refreshing = ref(false)
	const loadingMore = ref(false)
	const noMoreData = ref(false)
	const pageSize = ref(10)
	const tagList = ref([])
	const activeTag = ref([])
	let userLatLng = {
		lat: null,
		lng: null
	}

	const hanleGetJobList = async (params = {}) => {
		if (!(userLatLng.lat && userLatLng.lng)) {
			userLatLng = await getLatLng()
		}
		const res = await getAppJobVO({
			pageNum: currentPage,
			pageSize: pageSize.value,
			...(userLatLng.lat && userLatLng.lng ? userLatLng : {}),
			...params
		})
		console.log(res)

		if (currentPage === 1) {
			// 刷新或首次加载
			list.value = res.data.records
		} else {
			// 加载更多

			if (res.data.records.length > 0) {
				list.value.records = [...list.value.records, ...res.data.records]
				currentPage++
			} else {
				noMoreData.value = true
			}

		}
	}
	
	const handleGetTag = async () => {
		const { data  } = await tagGetListPage()
		tagList.value = data
	}
	
	const onTagClick = (tagId) => {
		// 实现多选逻辑：如果已选中则移除，未选中则添加
		const index = activeTag.value.indexOf(tagId);
		if (index > -1) {
			activeTag.value.splice(index, 1);
		} else {
			activeTag.value.push(tagId);
		}
		onSearch()
	}
	onLoad(() => {
		currentPage = 1
		hanleGetJobList()
		handleGetTag()
	})



	const onRefresh = async () => {
		console.log("刷新")
		refreshing.value = true
		loadingMore.value = false
		noMoreData.value = false
		try {
			await delay(1000)
			currentPage = 1
			await hanleGetJobList()
		} catch (err) {
			console.log(err)
			uni.showToast({
				title: '刷新失败',
				icon: 'none'
			})
		} finally {
			refreshing.value = false
		}
	}

	const onLoadMore = async () => {
		// 如果已经在加载或没有更多数据，则不执行
		console.log("dao dibule")
		if (loadingMore.value || noMoreData.value) return

		loadingMore.value = true
		currentPage++

		try {
			await delay(1000)
			await hanleGetJobList()
		} catch (error) {
			uni.showToast({
				title: '加载失败',
				icon: 'none'
			})
			currentPage--
		} finally {
			loadingMore.value = false
		}
	}

	const onSearch = () => {
		console.log(searchKeyword.value)
		const params = {
			keyword: searchKeyword.value,
			tagIds: activeTag.value // 直接传递数组，get方法会自动处理
		}
		// 搜索时重置到第一页
		currentPage = 1
		noMoreData.value = false
		hanleGetJobList(params)
	}
</script>

<style lang="scss">
	.search-positions-page {
		// 页面容器设置
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #f8f8f8;

		// 搜索头部样式 - 固定在顶部
		.search-header {
			padding: 12px 16px;
			background-color: #fff;
			z-index: 10;
			box-sizing: border-box;
			height: 15vh;

			// 搜索框包装器
			.search-input-wrapper {
				display: flex;
				align-items: center;
				margin-bottom: 12px;

				// 搜索输入框
				.search-input {
					flex: 1;
					height: 32px;
					background-color: #f5f5f5;
					border-radius: 20px 0 0 20px;
					padding: 0 16px;
					border: none;
					font-size: 14px;
					color: #333;
					outline: none;

					&::placeholder {
						color: #999;
					}
				}

				// 搜索按钮
				.search-btn {
					height: 32px;
					width: 80px;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #ff4757;
					color: white;
					border: none;
					border-radius: 0 20px 20px 0;
					font-size: 14px;
					font-weight: 500;
				}
			}

			// 搜索标签区域
			.search-tags {
				display: flex;
				gap: 12px;
				flex-wrap: wrap;

				// 标签样式
				.tag {
					padding: 4px 8px;
					border: 1px solid #ddd;
					border-radius: 8px;
					font-size: 12px;
					color: #666;
					background-color: white;

					// 选中状态
					&.active {
						color: #ff4757;
						border-color: #ff4757;
					}
				}
			}
		}

		// 列表样式 - 可滚动区域
		.search-list {
			height: 85vh;
			box-sizing: border-box;
			padding: 4px;
			// flex: 1;
			// overflow-y: auto;

			// 隐藏滚动条但保留滚动功能
			::-webkit-scrollbar {
				display: none;
			}

			-ms-overflow-style: none;
			scrollbar-width: none;
		}

		.driver {
			width: 100%;
			height: 1px;
			background-color: #eee;
		}

		.loading-more {
			text-align: center;
			padding: 16px 0;
			font-size: 14px;
			color: #999;
		}
	}
</style>