jp-zeroWorkerStation/pages/main/choreInformation/choreInformation.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="photo">
              <img src="@/assets/img/informationPhoto.png" alt="">
           	</view>
			<view class="content">
				<!--  职位薪水 -->
				<view class="top">
					<view class="position">
						司机/保安/普工/地推
					</view>
					<view class="salary">
						120元/天
					</view>
				</view>
				<view class="issuer">
					李先生
				</view>
				<view class="bottom">
					<view class="tags">
						<view class="tag-item">
							男
						</view>
						<view class="tag-item">
							21岁
						</view>
						<view class="tag-item">
							高中
						</view>
					</view>
					
					 <view class="date"> 
						 更新时间：2023-06-01
					 </view>
				</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="salary-package">
		<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="work-experience">
		<view class="title">
			工作经验
		</view>
		<!-- 选项 -->
		<view class="options">
			<view :class="{item,checked:workChecked==index}" v-for="(item,index) in workList" :key="index"
				@click="changeWorkChecked(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="3"></tabbar> -->
	</view>
</template>

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

		data() {
			return {
				keyword: '',
				popupShow: false,
				saralyChecked:-1,
				workChecked:-1,
				searchQuery: {
					keyword: '',
					selectIndex: 0
				},
			
				salaryList:[{
									name:'100元/天以下'
								},
								{
									name:'100-150元/天'
								},{
									name:'150-180元/天'
								},{
									name:'200-300元/天'
								},{
									name:'300-400元/天'
								},{
									name:'400-500元/天'
								},
								{
									name:'500元/天以上'
								}
								],
							
								workList:[{
									name:'应届生'
								},
								{
									name:'1年以上'
								},
								{
									name:'2年以上'
								},
								{
									name:'3年以上'
								},
								{
									name:'5年以上'
								}],
								tabList: [{
									name: '最新'
								}, {
									name: '日结'
								}, {
									name: '周结'
								}, {
									name: '月结'
								}],
				selectList: [{
						id: 1,
						name: '找工作'
					},
					{
						id: 2,
						name: '找公司'
					},
				],
				tabList: [{
					name: '最新'
				}, {
					name: '日结'
				}],

				current: 0


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

		}
	}
</script>
<style>
	page {
		background: #F0F0F2;
		padding-bottom: 50px;
	}
</style>

<style lang="scss" scoped>
	
	.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: 33%;
				/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: 32rpx 0;
		  margin:0 32rpx;
		  display: flex;
		  border-bottom:1px solid #f1f1f1;
		  // 照片
		  .photo{
			  width: 96rpx;
			  height:96rpx;
			  overflow: hidden;
			  border-radius: 50px;
			  border: 1px solid rgba(255, 255, 255, 1);
			  img{
				  width: 100%;
				  height: 100%;
			  }
		  }
		  .content{
			  margin-left: 24rpx;
			  flex:1;
			  // 职位薪水
			  .top{
				  display: flex;
				  justify-content: space-between;
				  align-items: center;
				  font-size: 36rpx;
				  .position{
					  color: rgba(16, 16, 16, 1);
					  
					  font-family: 'PingFangSC-medium';
				  }
				  .salary{
					  color: rgba(255, 61, 0, 1);
					  font-size: 32rpx;
				  }
			  }
			  // 发布人
			  .issuer{
				  margin-top:16rpx;
			  }
			  // 标签和时间
			  .bottom{
				  display: flex;
				  justify-content: space-between;
				  align-items: center;
				  margin-top:24rpx;
				  .tags{
					  display: flex;
					  .tag-item{
						  padding:0 16rpx ;
						  height: 36rpx;
						  line-height: 36rpx;
						  border-radius: 4px;
						  background-color: rgba(241, 241, 247, 1);
						  color: rgba(129, 127, 153, 1);
						  font-size: 24rpx;
						  text-align: center;
						  margin-right: 8rpx;
					  }
				  }
				  .date{
					  color: rgba(153, 153, 153, 1);
					  font-size: 24rpx;

				  }
			  }
		  }
	  }
	
	
	}

  // 筛选框
  .popup-content {
  	padding: 32rpx;
  
  	.headline {
  		color: #101010;
  		font-size: 40rpx;
  		text-align: center;
  	}
  
  	// 薪资待遇
	.salary-package,.work-experience{
		margin-top: 16rpx;
	
		.title {
			font-size: 32rpx;
			color: #111111;
		}
	
		// 选项
		.options {
			display: flex;
			flex-wrap: wrap;
			justify-content:flex-start;
			margin-top: 24rpx;
	
			.item {
				height: 56rpx;
				line-height: 56rpx;
				width: 210rpx;
				text-align: center;
				margin-bottom: 16rpx;
				margin-right: 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>