jp-zeroWorkerStation/pages/jobInformation/jobInformation.vue

<template>
	<view>
		<u-navbar back-text="用工信息" back-icon-size="28" back-icon-color="#ffffff"
			:background="{backgroundColor: '#2795FD',}" :back-text-style="{color: '#ffffff'}"></u-navbar>

		<!-- 搜索框 -->
		<view class="search">
			<view class="search-box">
				<view class="option">
					<nxsearch :selectList="selectList" button="inside" @search="doSearch" @confirm="doSearc"
						v-model="searchQuery.keyword" placeholder="输入关键字找工作" />


				</view>
			</view>
		</view>
		<!-- 搜索结果 -->
		<view class="result">
			<view class="tabs">
				<view class="left">
					<u-tabs bg-color="#F0F0F2" :list="tabList" :is-scroll="false" :current="current"
						@change="change"></u-tabs>
				</view>
				<view class="screen" @click="popupShow = true">
					<view class="icon">
						<img src="../../assets/img/riLine-filter-line@1x.png" alt="">
					</view>
					<view>筛选</view>
				</view>
			</view>
			<view class="result-item" v-for="item in 3">

				<view class="content-1">
					<!-- 职位 -->
					<view class="position">
						摄影助理
					</view>
					<!-- 薪水 -->
					<view class="salary">
						200元/天
					</view>
				</view>
				<view class="content-2">
					<!-- 标签 -->
					<view class="tag">
						<view class="tag-item">
							个人
						</view>
						<view class="tag-item">
							日结
						</view>
					</view>
					<!-- 日期 -->
					<view class="date">
						2023-06-01
					</view>
				</view>
				<view class="content-3">
					<view class="issuer">
						李先生
					</view>
					<view class="address">
						锦佳酒店
					</view>
				</view>
			</view>
		</view>


		<!-- 筛选框 -->
		<u-popup v-model="popupShow" @close="close" mode="bottom" border-radius="20" :closeable="true">
			<view class="popup-content" >
				<view class="headline">
					筛选
				</view>
				
						<!-- 行业 -->
						<view class="industry">
							<view class="title">
								行业
							</view>
							<!-- 选项 -->
							<view class="options">
								<view :class="{item,checked:isChecked==index}" v-for="(item,index) in industryList" :key="index"
									@click="changeChecked(index)" >
									<!-- 快递跑腿/配送/分拣 -->{{item.name}}
								</view>
							</view>
						</view>
				<!-- 结算方式 -->
				<view class="clearing-form">
					<view class="title">
						结算方式
					</view>
					<!-- 选项 -->
					<view class="options">
						<view :class="{item,checked:wayChecked==index}" v-for="(item,index) in wayList" :key="index"
							@click="changeWayChecked(index)" >
							{{item.name}}
						</view>
					</view>
				</view>
				<!-- 薪资形式 -->
				<view class="salary-form">
					<view class="title">
						薪资形式
					</view>
					<!-- 选项 -->
					<view class="options ">
						<view :class="{item,checked:saralyChecked==index}" v-for="(item,index) in salaryList" :key="index"
							@click="changeSaralyChecked(index)" >
							{{item.name}}
						</view>
					</view>
				</view>
				
       
		
		<view class="button">
			<button class="reset">重置</button>
			<button class="confirm">确认</button>
		</view>
			</view>
		</u-popup>

		<tabbar ref="mytabbar" :current="1"></tabbar>
	</view>
</template>

<script>
	import tabbar from "../../components/Tabbar.vue"
	import nxsearch from "../../components/nx-search.vue"
	export default {
		components: {
			nxsearch,
			tabbar

		},
		data() {
			return {
				keyword: '',
				popupShow:false,
				isChecked: -1,
				wayChecked:-1,
				saralyChecked:-1,
				
				searchQuery: {
					keyword: '',
					selectIndex: 0
				},
				
				industryList: [{
						
						name: '快递跑腿/配送/分拣1'
					},
					{
						
						name: '快递跑腿/配送/分拣2'
					},
				
					{
						
						name: '快递跑腿/配送/分拣3'
					},
				
					{
						
						name: '快递跑腿/配送/分拣4'
					},
				
					{
						
						name: '快递跑腿/配送/分拣5'
					}
				],
				wayList:[{
					name:'日结'
				},
				{
					name:'周结'
				},
				{
					name:'月结'
				},
				{
					name:'完工结算'
				}],
				salaryList:[{
					name:'计件'
				},
				{
					name:'计时'
				},
				{
					name:'定额'
				}],
	selectList: [{
						id: 1,
						name: '找零工'
					},
					{
						id: 2,
						name: '找公司'
					},
				],
				current: 0


			}
		},
		methods: {
			// 执行搜索
			doSearch(searchQuery) {
				console.log('searchQuery', searchQuery);
			},
			change(index) {
				this.current = index;
			},
			
			changeChecked(index) {
				this.isChecked = index;
				
			},
			changeWayChecked(index){
				this.wayChecked = index;
			},
			changeSaralyChecked(index){
				this.saralyChecked = index;
			},
			close(){
				this.isChecked = -1;
				this.wayChecked = -1;
				this.saralyChecked = -1;
			}

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F0F0F2;
		padding-bottom: 50px;
	}

	.search {
		background-color: #fff;
		padding: 16rpx 32rpx;

		.search-box {
			border-radius: 50px;

			height: 72rpx;
			line-height: 72rpx;
		}
	}

	// 搜索结果
	.result {
		background-color: #fff;

		.tabs {
			padding-right: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #f1f1f1;

			.left {
				width: 68%;

				/deep/.u-tabs {
					background-color: #fff !important;

				}
			}

			.screen {
				display: flex;
				align-items: center;
				color: rgba(39, 149, 253, 1);
				font-size: 16px;

				img {
					width: 16px;
					height: 16px;
					vertical-align: middle;
					margin-right: 4rpx;
				}
			}

		}

		.result-item {
			padding: 24rpx 0;
			margin: 0 32rpx;
			border-bottom: 1px solid #F0F0F2;

			.content-1 {
				display: flex;
				justify-content: space-between;
				align-items: center;

				// 职位
				.position {
					color: rgba(16, 16, 16, 1);
					font-size: 36rpx;
					font-family: 'PingFang Medium';
				}

				// 薪水
				.salary {
					color: rgba(255, 61, 0, 1);
					font-size: 32rpx;
					font-family: 'PingFang Medium';
				}
			}

			.content-2 {
				margin-top: 12rpx;
				display: flex;
				justify-content: space-between;

				// 标签
				.tag {
					display: flex;

					.tag-item {
						width: 64rpx;
						height: 36rpx;
						line-height: 36rpx;
						border-radius: 8rpx;
						background-color: rgba(241, 241, 247, 1);
						color: rgba(129, 127, 153, 1);
						font-size: 24rpx;
						text-align: center;
						margin-right: 12rpx;
					}
				}

				// 日期
				.date {
					color: rgba(153, 153, 153, 1);
					font-size: 24rpx;
				}
			}

			.content-3 {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.issuer {
					color: rgba(51, 51, 51, 1);
					font-size: 24rpx;
				}

				.address {
					color: rgba(51, 51, 51, 1);
					font-size: 24rpx;
				}
			}

		}




	}

	// 筛选框
	.popup-content {
		padding: 32rpx;

		.headline {
			color: #101010;
			font-size: 40rpx;
			text-align: center;
		}

		//行业
		.industry,.clearing-form,.salary-form{
			margin-top: 16rpx;
		  
			.title {
				font-size: 32rpx;
				color: #111111;
			}
		  
			// 选项
			.options {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				margin-top: 24rpx;
		  
				.item {
					height: 56rpx;
					line-height: 56rpx;
					padding: 0 32rpx;
					margin-bottom: 16rpx;
					color: #999999;
					background-color: #F3F3F4;
					border-radius: 4px;
				}
		  
				.checked {
					background-color: #2795FD;
					color: #fff;
				}
			}
		}
		.button{
			display: flex;
			
			margin-top:8rpx;
			.reset{
				color: #999999;
				background-color: #F3F3F4;
				width: 200rpx;
				height: 72rpx;
				line-height: 72rpx;
				border-radius: 8px;
			}
			.confirm{
				width: 440rpx;
				background-color: #2795FD;
				color: #fff;
				height: 72rpx;
				line-height: 72rpx;
				border-radius: 8px;
			}
		}
	}
	.salary-form,.clearing-form{
		.options{
			justify-content: start !important;
		}
		.item{
			margin-right: 24rpx;
		}
	}

	/deep/.u-close--top-right {
		top: 44rpx;
	}
</style>