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 class="tag" :class="{ active: activeTag === '长白班' }" @click="onTagClick('长白班')">长白班</view>
				<view class="tag" :class="{ active: activeTag === '高工资' }" @click="onTagClick('高工资')">高工资</view>
				<view class="tag" :class="{ active: activeTag === '包吃住' }" @click="onTagClick('包吃住')">包吃住</view>
				<view class="tag" :class="{ active: activeTag === '日结' }" @click="onTagClick('日结')">日结</view>
				<view class="tag" :class="{ active: activeTag === '大龄工' }" @click="onTagClick('大龄工')">大龄工</view>
			</view>
		</view>

		<view class="search-list" :refresher-enabled="true" :refresher-triggered="refreshing" @refresherrefresh="onRefresh" @scrolltolower="onLoadMore">
			<template v-for="item in list.records" :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>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getAppJobVO
	} from '../../api';
	import {
		ref
	} from 'vue';
	const list = ref([])
	const searchKeyword = ref('')
	const refreshing = ref(false)
	const loadingMore = ref(false)
	const noMoreData = ref(false)
	const currentPage = ref(1)
	const pageSize = ref(10)
	
	const hanleGetJobList = async (params = {}) => {
		const res = await getAppJobVO({
			pageNum: currentPage.value,
			pageSize: pageSize.value,
			...params
		})
		console.log(res)
		
		if (currentPage.value === 1) {
			// 刷新或首次加载
			list.value = res.data
		} else {
			// 加载更多
			list.value.records = [...list.value.records, ...res.data.records]
		}
		
		// 检查是否还有更多数据
		if (res.data.records.length < pageSize.value) {
			noMoreData.value = true
		} else {
			noMoreData.value = false
		}
	}
	
	onLoad(() => {
		currentPage.value = 1
		hanleGetJobList()
	})
	
	const onRefresh = async () => {
		refreshing.value = true
		currentPage.value = 1
		noMoreData.value = false
		try {
			await hanleGetJobList()
			uni.showToast({
				title: '刷新成功',
				icon: 'success'
			})
		} catch (error) {
			uni.showToast({
				title: '刷新失败',
				icon: 'none'
			})
		} finally {
			refreshing.value = false
		}
	}
	
	const onLoadMore = async () => {
		// 如果已经在加载或没有更多数据，则不执行
		if (loadingMore.value || noMoreData.value) return
		
		loadingMore.value = true
		currentPage.value++
		
		try {
			await hanleGetJobList()
		} catch (error) {
			uni.showToast({
				title: '加载失败',
				icon: 'none'
			})
			currentPage.value--
		} finally {
			loadingMore.value = false
		}
	}
	
	const onSearch = () => {
		console.log(searchKeyword.value)
		const params = {
			jobName: searchKeyword.value
		}
		// 搜索时重置到第一页
		currentPage.value = 1
		noMoreData.value = false
		hanleGetJobList(params)
	}
	/* // 导入recruitment组件
	import recruitment from '@/components/recruitment/recruitment.vue';
	export default {
		// 注册组件
		components: {
			recruitment
		},
		data() {
			return {
				searchKeyword: '',
				activeTag: ''
			}
		},
		methods: {
			// 搜索方法
			onSearch() {
				// 实现搜索逻辑
				console.log('搜索关键词:', this.searchKeyword);
			},
			// 标签点击方法
			onTagClick(tag) {
				this.activeTag = this.activeTag === tag ? '' : tag;
				console.log('点击标签:', tag);
			}
		}
	} */
</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;

			// 搜索框包装器
			.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 {
			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>