jp-zeroWorkerStation/pages/packages/search/search.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"
					:defaultSelectIndex="defaultSelectIndex"
					 button="inside" @search="doSearch" @confirm="doSearch"
					 @selectItem="selectItem"
						v-model="searchQuery.keyword" :placeholder="'输入关键字'+selectList[searchQuery.selectIndex].name" />


				</view>
			</view>
		</view>
		
		<!-- 搜索历史 -->
		<view class="search-history"  v-show="step" >
			<view class="top">
				<view class="title">
					搜索历史
				</view>
				<view class="clear" @click="clear()">
					清空历史
				</view>
			</view>
			<view class="history">
				<view class="tag" v-for="(mod,index) in searchHistory" :key="index" v-text="mod"
					@click="searchQuery.keyword=mod,submit()">
					打杂
				</view>

			</view>

		</view>
		<!-- 搜索结果 -->
		<view class="result"  v-if="!step&&searchQuery.selectIndex==0" >
			<view class="tabs">
				<view class="left"  style="  width: 33%;">
					<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 result-item1"   v-for="(item,i) in tabList[current].list" :key="i"
			  @click="gotoUrl('pages/packages/choreInformation/jobSearchDetails?id='+item.id)" >
				<!-- 照片 -->
				<view class="photo">
					<u-avatar :src="item.photo"></u-avatar>
					
				</view>
				<view class="content">
					<!--  职位薪水 -->
					<view class="top">
						<view class="position">
							{{item.intendedIndustriesN}}
						</view>
						<view class="salary">
							{{item.hopeSalary}}{{getUnit(item)}}
						</view>
					</view>
					<view class="issuer">
						{{item.personName}}
					</view>
					<view class="bottom">
						<view class="tags">
							<view class="tag-item">
								{{item.gender==1?'男':'女'}}
							</view>
							<view class="tag-item">
								{{item.age}}岁
							</view>
							<view class="tag-item" v-if="item.educationN" >
								{{item.educationN}}
							</view>
							
						</view>
						
						<view class="date">
							{{getTime(item)}}
						</view>
					</view>
				</view>
				
			</view>
			<!-- 筛选框 -->
			<u-popup v-model="popupShow" @close="close"  @open="popupShowOpen2" 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" @click="reset()">重置</button>
						<button class="confirm" @click="queryBtn()" >确认</button>
					</view>
				</view>
			</u-popup>
			<u-divider   bgNoneColor="#ffffff" style="background: #F0F0F2;" v-if="tabList[current].recordsTotal==tabList[current].list.length"
					 :isnone="tabList[current].recordsTotal==0" nonetext="没有找到相关内容" 
					border-color="#CFD2D5">已经到底了</u-divider>
		</view>
		
		<!-- 搜索结果 -->
		<view class="result" v-if="!step&&searchQuery.selectIndex==1" >
			<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}}{{getUnit(item)}}
					</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-popup v-model="popupShow"  @open="popupShowOpen1" 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>
			<u-divider   bgNoneColor="#ffffff"  v-if="tabList[current].recordsTotal==tabList[current].list.length"
					 :isnone="tabList[current].recordsTotal==0" nonetext="没有找到相关内容" 
					border-color="#CFD2D5">已经到底了</u-divider>
		</view>
		
		
		
		
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/packages.js'
	import nxsearch from "@/components/nx-search.vue"
	import * as API_weixin from '@/apis/weixin.js'

	export default {
		components: {
			nxsearch
		},

		data() {
			return {
				step: true, //步骤 ，true第一步查询，false第二步显示结果


				searchQuery: {
					keyword: '',
					selectIndex: 0
				},
				selectList: [{
						id: 1,
						name: '找零工'
					},
					{
						id: 0,
						name: '找工作'
					}
				],
				recordsTotal: 0,
				listForm: {
					typeId: "",
					title: "",
					pageIndex: 1,
					pageSize: 4,
					totalPage: 1,
				},
				current: 0,
				list: [],
				searchHistory: [],
				tabList:[],
				tabList2: [{
					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: [
				],
				
				salaryList: [{
						name: '100元/天以下',
						//min:0,
						max:100
					},
					{
						name: '100-150元/天',
						min:100,
						max:150
					}, {
						name: '150-200元/天',
						min:150,
						max:200
					}, {
						name: '200-300元/天',
						
						min:200,
						max:300
					}, {
						name: '300-400元/天',
						
						min:300,
						max:400
					}, {
						name: '400-500元/天',
						min:400,
						max:500
					},
					{
						name: '500元/天以上',
						min:500,
					
					}
				],
				tabList1: [{
					name: '最新',
					pageIndex: 1,
					pageSize: 20,
					statusType:"1",
					list:[],
					recordsTotal:0
				}, {
					name: '最热',
					pageIndex: 1,
					pageSize: 20,
					statusType:"2",
					list:[],
					recordsTotal:0
				}],
				workList: [
				
				],
				saralyChecked: -1,
				workChecked: -1,
				isChecked: -1,
				wayChecked: -1,
				popupShow:false,
				defaultSelectIndex:0,
				queryForm:{
					
				}
			}
		},
		onLoad(op) {
			if (op.type) {
				this.searchQuery.selectIndex = op.type
				this.defaultSelectIndex=op.type
				//this.$refs.nxsearch.selectItem(op.type)
			}
			console.log(this.searchQuery,op)
			

			var sz = this.carhelp.get("setSearchHistory");
			if (sz) {
				this.searchHistory = sz
			} else {
				this.searchHistory = []
			}
		},
		onReady() {
			
		},
		onReachBottom() {
			if (this.list.length < this.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
			selectItem(i){
				this.searchQuery.selectIndex=i;
			},
			changeSaralyChecked(index) {
				this.saralyChecked = index;
			},
			changeWorkChecked(index) {
				this.workChecked = index;
			},
			changeChecked(index) {
				this.isChecked = index;
			
			},
			popupShowOpen2(){
				
				if(this.workList.length==0){
				
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
					API_weixin.findListByCatalogName({
						name:'工作经验',
						
					}).then((res) => {
						uni.hideLoading();
						
						this.workList=res.data.dictionaryList
						
					}).catch(error => {
					
						uni.showToast({icon: 'none',
							title: error
						})
						//this.getPhone()
						
					})
					
				}
			},
			popupShowOpen1(){
				
				
				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()
						
					})
					
				}
			},
			ckInfo(id) {
				var url = "/pages/news/articleDetails?id=" + id;
				uni.navigateTo({
					url: url
				})
			},
			clear() {
				this.setSearchHistory([]);
				mui.toast("搜索内容已清空");
			},
			setHistory() {
				//搜索记录保存
				var key = this.searchQuery.keyword;
				var sz = this.searchHistory;
				if (!sz) {
					sz = [];
				}
				var temp = [];
				//去重 ，后插入的，排队到最前面
				if (sz.length) {
					for (var i in sz) {
						if (i == 0) {
							temp.push(key);
						}
						if (sz[i] == key) {
							continue;
						}
						temp.push(sz[i]);

						if (temp.length == 10) {
							break
						}

					}
				} else {
					temp.push(key);
				}

				this.setSearchHistory(temp);
			},
			setSearchHistory(obj) {
				this.searchHistory = obj
				this.carhelp.set("setSearchHistory", obj)
			},
			blur() {

			},
			focus() {
				this.step = true;
			},
			submit() {
				if (!this.searchQuery.keyword) {
					uni.showToast({
						title:"请输入内容",
						icon:"none"
					})
					return
				}
				this.setHistory()
				
				this.listForm.pageIndex = 1
				// var ref =this.$refs.searchinput.getRef()
				// ref.blur()
				this.query();
			},
			myLoadmore() {
				this.listForm.pageIndex += 1;
				this.query();
			},
			query() {
				
				if(this.searchQuery.selectIndex==0){
					this.tabList=[
						...this.tabList1
					]
				}
				if(this.searchQuery.selectIndex==1){
					this.tabList=[
						...this.tabList2
					]
				}
				this.step = false;
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				var list = this.tabList[this.current].list
				var obj = this.tabList[this.current]
				var listForm = {
					...obj,
					...this.queryForm
					
				}
				listForm.status= this.selectList[this.searchQuery.selectIndex].id,
				listForm.content= this.searchQuery.keyword
				delete listForm.list
				
				API.findRecruitSearch(listForm).then((res) => {
					uni.hideLoading();
					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;
				}).catch(error => {

					uni.showToast({icon: 'none',
						title: error
					})
					//this.getPhone()

				})
			},
			// 执行搜索
			doSearch(searchQuery) {
				//.log('searchQuery', searchQuery);
				this.searchQuery=searchQuery;
				this.submit()
			},
			change(index) {
				this.current = index;
				var list = this.tabList[this.current].list
				if (list.length == 0) {
					this.query();
				}
			},
			close(){},
			queryBtn(){
				this.popupShow=false;
				this.current = 0;
				 this.tabList[this.current].list=[]
				
				this.tabList[this.current].pageIndex = 1;
				
				// this.saralyChecked = -1;
				// this.workChecked = -1;
				
				// this.queryForm.salaryStart=""
				// this.queryForm.salaryEnd=""
				// this.queryForm.workExp=""
				
				if(this.isChecked!=-1){
					this.queryForm.industry=this.industryList[this.isChecked].value
				} 
				
				if(this.saralyChecked!=-1){
					this.queryForm.salaryStart=this.salaryList[this.saralyChecked].min
					this.queryForm.salaryEnd=this.salaryList[this.saralyChecked].max
					
				} 
				if(this.workChecked!=-1){
					this.queryForm.workExp=this.workList[this.workChecked].value
				} 
				
				this.query();
			},
			reset() {
			
				this.saralyChecked = -1;
				this.workChecked = -1;
				
				this.isChecked = -1;
				this.queryForm.industry=""
				
				this.queryForm.salaryStart=""
				this.queryForm.salaryEnd=""
				this.queryForm.workExp=""
				this.queryBtn()
			}

		}
	}
</script>

<style lang="scss" scoped>
	// 搜索框
	.search {
		padding: 16rpx 32rpx;

		.search-box {
			border-radius: 50px;
			// background-color: rgba(243, 246, 249, 1);
			height: 72rpx;
			line-height: 72rpx;
		}
	}

	// 搜索历史
	.search-history {
		padding: 0 32rpx;
		margin-top: 40rpx;

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

			.title {
				color: #101010;
			}

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

		.history {
			display: flex;
			margin-top: 16rpx;

			.tag {
				width: 144rpx;
				height: 56rpx;
				line-height: 56rpx;
				border-radius: 4px;
				background-color: rgba(241, 244, 247, 1);
				color: rgba(88, 88, 88, 1);
				font-size: 12px;
				text-align: center;
				font-family: Arial;
				margin-right: 16rpx;
			}
		}
	}
	
	// 搜索结果
	.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-item1{
			display: flex;
		}
		.result-item {
			padding: 24rpx 0;
			margin: 0 32rpx;
			border-bottom: 1px solid #F0F0F2;
			
			
			// 照片
			.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 8rpx;
							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;
			
					}
				}
			}
			.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,.salary-package,.work-experience,
		.clearing-form,
		.salary-form {
			margin-top: 16rpx;
			margin-bottom: 76rpx;
			.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,.salary-package,.work-experience,
	.clearing-form {
		.options {
			justify-content: start !important;
		}
	
		.item {
			margin-right: 24rpx;
		}
	}
	
	/deep/.u-close--top-right {
		top: 44rpx;
	}
</style>