jp-zeroWorkerStation/pages/tab/choreInformation/choreInformation.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')"
						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="popupShowtrue">
					<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/choreInformation/jobSearchDetails?id='+item.id)" >
				<!-- 照片 -->
				<view class="photo">
					<u-avatar :src="item.photo"  :gender="item.gender" ></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">
						{{getPersonName(item.personName,item)}}
					</view>
					<view class="bottom">
						<view class="tags">
							<view class="tag-item tag-item2" v-if="getLastTime(item.lastLoginTime)">
								活跃
							</view>
							<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-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>
		
		<jkpop ref="pop"  @reset="reset" @queryBtn="queryBtn" ></jkpop>
		<tabbar  :current="3"></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 jkpop from "@/pages/tab/as-components/jk-popup.vue"
	
	import nxsearch from "@/components/nx-search.vue"
	export default {
		components: {
			nxsearch,jkpop,
			tabbar
		},
		data() {
			return {
				keyword: '',
			
				
				searchQuery: {
					keyword: '',
					selectIndex: 0
				},
				

				workList: [

				],
				
				selectList: [{
						id: 1,
						name: '找零工'
					},
				],
				tabList: [{
					name: '最新',
					pageIndex: 1,
					pageSize: 20,
					statusType:"1",
					list:[],
					recordsTotal:0
				}, {
					name: '最热',
					pageIndex: 1,
					pageSize: 20,
					statusType:"2",
					list:[],
					recordsTotal:0
				}],

				current: 0,
				queryForm: {
					status: 1
				}

			}
		},
		onLoad(op) {
			
			this.findRecruitSearch();
		
		},
		onReachBottom() {
			var obj = this.tabList[this.current]
			if (obj.list.length < obj.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
			popupShowtrue(){
				this.$refs.pop.show();
			},
			queryBtn(queryForm){
				this.$refs.pop.hide();
				this.current = 0;
				 this.tabList[this.current].list=[]
				
				this.tabList[this.current].pageIndex = 1;
				queryForm.status=1
				this.queryForm=queryForm
				this.findRecruitSearch()
			},
			
			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);
			},
			change(index) {
				this.current = index;
				var list = this.tabList[this.current].list
				if (list.length == 0) {
					this.findRecruitSearch();
				}
			},
		
			close(){},
			reset(queryForm) {

				this.queryBtn(queryForm)
			}



		}
	}
</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: 24rpx 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: 8rpx;
				}

				// 标签和时间
				.bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 12rpx;

					.tags {
						display: flex;
						flex-wrap: wrap;
						.tag-item {
							padding: 0 10rpx;
							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;
						}
						.tag-item2 {
							background-color:rgb(70, 150, 246);
							color: #fff;
						}
					}

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

					}
				}
			}
		}


	}

	

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