jp-employment-kfq/pages/job/query/query.vue

<template>
	<view :style="ing&&result.length==0?'':'background-color: #ffffff'">
		<u-navbar>
			<view class="jp-search">
				<u-search placeholder="" :focus="myfocus" @focus="ing=false"  v-model="key" @change="change()"   @search="submit"  :show-action="false"></u-search>
			</view>
			<view class="jp-search-btn" @click="noSearch">
				<span>取消</span>
			</view>
		</u-navbar>
		<view class="jp-search-title" v-show="!ing">
			<span>最近搜索</span>
			<u-icon name="stLine-trash-l" @click="clearBtn" custom-prefix="custom-icon" color="#999"></u-icon>
		</view>
		<view class="jp-search-tag" v-show="!ing">
			<template   v-for="(item,index) in record" >
				<u-tag :key="index" @click="key=item,nochange=true,submit(item)"  :text="item"  mode="dark" bg-color="#f1f1f1" color="#999"/>
			</template>
		</view>
		
		<view class="jp-work" v-show="ing&&result.length" >
			<u-select v-model="selectShow" 
			  @confirm="confirmSelect" value-name="id"
			   :default-value="selectIndexList[selectShowIndex]"
			 label-name="name"	 :list="getShowDataList"></u-select>
			
			<u-select v-model="selectShowTree"
			 mode="mutil-column-auto" value-name="id"	
			 @confirm="confirmSelectTree"
			 :default-value="selectIndexList[3]"
			  label-name="name"	 :list="popupList"></u-select>

			<view class="jp-work-screen">
				<view class="screen" @click="selectShowIndex=0,selectShow=true">
					<span v-text="whereData[0].label">月薪范围</span>
					<u-icon name="arrow-down" color="#999" size="24"></u-icon>
				</view>
				<view class="screen" @click="selectShowIndex=1,selectShow=true">
					<span v-text="whereData[1].label">工作经验</span>
					<u-icon name="arrow-down" color="#999" size="24"></u-icon>
				</view>
				<view class="screen" @click="selectShowIndex=2,selectShow=true">
					<span v-text="whereData[2].label">学历</span>
					<u-icon name="arrow-down" color="#999" size="24"></u-icon>
				</view>
				<view class="screen" @click="selectShowTree=true" >
					<span v-text="whereData[3].label">招聘岗位</span>
					<u-icon name="arrow-down" color="#999" size="24"></u-icon>
				</view>
			</view>
			<view class="jp-work-list">
				<RecruitmentItem v-for="(item ,index) in result" :key="item.id" :item="item" ></RecruitmentItem>
				
				<!-- <view v-show="ing&&result.length&&result.length==recordsTotal" style="text-align:center;    padding: 10px;">
					没有更多记录了
				</view>
				<template v-show="ing&&result.length&&result.length<recordsTotal" style="text-align:center;    padding: 10px;">
				</template> -->
				<u-loadmore @loadmore="myLoadmore" :status="result.length<recordsTotal?'loadmore':'nomore'" ></u-loadmore>
				
			</view>
		</view>
		
		<view  v-show="ing&&result.length==0" style="text-align:center;margin-top: 80px;" >
			<img src="/static/img/blankpage.png" style="width: 50%;" alt="" >
			<view>暂无数据信息</view>
		</view>
		
	</view>
</template>

<script>
	import api from './index.js'
	export default api;
</script>
<style>
	page{
		background-color: #f7f7f7;
	}
</style>
 
<style scoped lang="scss">
	 .jp-search{
	 	padding: 0 20rpx;
	 	width: 100%;
	 }
	 .jp-search-btn{
		padding-right: 20rpx;
		min-width: 80rpx;
	 }
	 .jp-search-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		span{
			font-size: 28rpx;
		 }
	 }
	 .jp-search-tag{
		padding: 20rpx;
		*{
			margin-right: 10rpx;
			margin-bottom: 10rpx;
		}
	 }
	.jp-work-screen{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-bottom: 1px solid #f7f7f7;
		.screen span{
			margin-right: 10rpx;
		}
	 }
	 .jp-work-item{
	 	padding:30rpx;
	 	background-color: #fff;
	 	border-bottom: 1px solid #f7f7f7;
	 	&:last-child{
	 		border-bottom:none;
	 	}
	 	.jp-work-name{
	 		display: flex;
	 		justify-content: space-between;
	 		align-items: center;
	 		h3{
	 			font-size: 36rpx;
	 		}
	 		span{
	 			font-size: 32rpx;
	 			color:#FF1700
	 		}
	 	}
	 	.jp-work-tag{
	 		display: flex;
	 		align-items: center;
	 		margin-top: 10rpx;
	 		*{
	 			margin-right: 10rpx;
	 		}
	 	}
	 	.jp-work-info{
	 		display: flex;
	 		justify-content: space-between;
	 		align-items: center;
	 		margin-top: 10rpx;
	 		p{
	 			color:#999;
	 			font-size: 24rpx;
	 			margin-left: 10rpx;
	 		}
	 	}
	 }
</style>