jp-zeroWorkerStation/pages/tab/jobInformation/jobInformation.vue

<template>
	<view>
		<u-navbar back-text="用工信息" back-icon-size="0" :customBack="customBack" 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"
						:setIsFocus="false" @focus="gotoUrl('pages/packages/search/search?type=1')"
						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,i) in tabList[current].list" :key="i"
			 
			 @click="gotoUrl('pages/packages/jobInformation/jobDetails?id='+item.id)">

				<view class="content-1">
					<!-- 职位 -->
					<view class="position">
						{{item.positionName}}
					</view>
					<!-- 薪水 -->
					<view class="salary">
						{{item.salary}}元/天
					</view>
				</view>
				<view class="content-2">
					<!-- 标签 -->
					<view class="tag">
						<view class="tag-item">
							{{item.workArea}}
						</view>
						<view class="tag-item">
							{{item.settlementMethodN}}
						</view>
						<view class="tag-item">
							{{item.industryN}}
						</view>
						
					</view>
					<!-- 日期 -->
					<view class="date">
						{{getTime(item)}}
					</view>
				</view>
				<view class="content-3">
					<view class="issuer">
						{{item.contacts}}
					</view>
					<view class="address">
						{{item.address}}
					</view>
				</view>
			</view>
			
			<u-divider  style="background: #F0F0F2;"  bgNoneColor="#F0F0F2"
			 
			 v-if="tabList[current].recordsTotal==tabList[current].list.length"
					 :isnone="tabList[current].recordsTotal==0" nonetext="没有找到相关内容" 
					border-color="#CFD2D5">已经到底了</u-divider>
		</view>


		<!-- 筛选框 -->
		<u-popup v-model="popupShow"  @open="popupShowOpen" 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" v-if="false">
					<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" v-if="false">
					<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" @click="reset()">重置</button>
					<button class="confirm" @click="queryBtn()" >确认</button>
				</view>
			</view>
		</u-popup>
		<tabbar :current="1"></tabbar>

	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/tab.js'
	import tabbar from "@/components/Tabbar.vue"
	import * as API_weixin from '@/apis/weixin.js'
	
	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
				},
				tabList: [{
					name: '最新',
					pageIndex: 1,
					pageSize: 20,
					statusType:"",
					list:[],
					recordsTotal:0
				}, {
					name: '日结',
					unit:"日",
					statusType:"1",
					pageIndex: 1,
					pageSize: 20,
					list:[],
					recordsTotal:0
				}, {
					name: '周结',
					unit:"周",
					pageIndex: 1,
					pageSize: 20,
					statusType:"2",
					list:[],
					recordsTotal:0
				
				}, {
					name: '月结',
					unit:"月",
					pageIndex: 1,
					pageSize: 20,
					statusType:"3",
					list:[],
					recordsTotal:0
				}],

				industryList: [
				],
				wayList: [{
						name: '日结'
					},
					{
						name: '周结'
					},
					{
						name: '月结'
					},
					{
						name: '完工结算'
					}
				],
				salaryList: [{
						name: '计件'
					},
					{
						name: '计时'
					},
					{
						name: '定额'
					}
				],
				selectList: [{
						id: 0,
						name: '找工作'
					},
				],
				current: 0,
				queryForm:{
					status:0
				}

			}
		},
		onLoad(op) {
			
			this.findRecruitSearch();
		
		},
		onReachBottom() {
			var obj = this.tabList[this.current]
			if (obj.list.length < obj.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
			queryBtn(){
				this.popupShow=false;
				this.current = 0;
				 this.tabList[this.current].list=[]
				
				this.tabList[this.current].pageIndex = 1;
				if(this.isChecked!=-1){
					this.queryForm.industry=this.industryList[this.isChecked].value
				} 
				this.findRecruitSearch()
			},
			popupShowOpen(){
				if(this.industryList.length==0){
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
					API_weixin.findListByCatalogName({
						name:'意向行业',
						
					}).then((res) => {
						uni.hideLoading();
						
						this.industryList=res.data.dictionaryList
						
					}).catch(error => {
					
						uni.showToast({icon: 'none',
							title: error
						})
						//this.getPhone()
						
					})
				}
			},
			myLoadmore() {
				this.tabList[this.current].pageIndex += 1;
				this.findRecruitSearch();
			},
			findRecruitSearch(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var list = this.tabList[this.current].list
				var obj = this.tabList[this.current]
				var listForm = {
					...obj,
					...this.queryForm
					
				}
				delete listForm.list
							
				API.findRecruitSearch(listForm).then((res) => {
							
					if (listForm.pageIndex == 1) {
						list = res.data.data;
					} else {
						list = [
							...list,
							...res.data.data
						];
					}
							
					this.tabList[this.current].list = list
							
					this.tabList[this.current].recordsTotal = res.data.recordsTotal;
					uni.hideLoading();
				}).catch(error => {
					uni.showToast({icon: 'none',
						title: error,
						icon: "none"
					})
				})
			},
			customBack() {

			},
			// 执行搜索
			doSearch(searchQuery) {
				//.log('searchQuery', searchQuery);
				this.searchQuery=searchQuery;
				
			},
			change(index) {
				this.current = index;
				var list = this.tabList[this.current].list
				if (list.length == 0) {
					this.findRecruitSearch();
				}
			},

			changeChecked(index) {
				this.isChecked = index;

			},
			changeWayChecked(index) {
				this.wayChecked = index;
			},
			changeSaralyChecked(index) {
				this.saralyChecked = index;
			},
			reset() {
				this.isChecked = -1;
				this.queryForm.industry=""
				this.wayChecked = -1;
				this.saralyChecked = -1;
				this.queryBtn()
			}

		}
	}
</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: 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 {
						min-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;
						
						padding: 0 8rpx;
					}
				}

				// 日期
				.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;
			margin-bottom: 176rpx;
			.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:after{
					border:0
			}
			.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>