su_nan-mobile_h5/src/pages/talentService/recruiting.vue

<template>
	<div class="peripheral">
		<van-tabs
		 v-model="active"
		 @click="tabOnClick"
		 title-active-color="#6600FF"
		 color="#6600FF"
		 title-inactive-color="#666666"
		 line-width="120px"
		>
			<van-tab title="最新招募">
				<div class="tabs-box">
					<div class="white-box part-1">
						<div class="search-box">
							<div class="search-input-box">
								<input type="text" v-model="requestData.positionName" placeholder="意向职位模糊" />
							</div>
							<div class="search-icon-box">
								<i class="iconfont icon-sousuo" @click="zpSeach"></i>
							</div>
						</div>
					</div>

					<div class="part-2">
						<van-pull-refresh v-model="zpRefreshing" @refresh="onZpRefresh" style="min-height: 60vh;">
							<van-list
							 v-model="zpLoading"
							 :finished="zpFinished"
							 finished-text="没有更多了"
							 :immediate-check="false"
							 @load="onZpLoad"
							>
								<div
								 class="card-item white-card"
								 v-for="item in dataList"
								 :key="item.id"
								 @click="goNavigator('talentService-recruitDetial', item)"
								>
									<div class="card-left">
										<p class="tit">{{ item.position }}</p>
										<p class="txt">{{ item.enterpriseId }}</p>
										<p class="date">发布日期：{{ item.createdAt }}</p>
									</div>
									<div class="card-right">
										<span class="normal-tip yd z-bg" v-if="compareDate(item.validityDate)">有效</span>
										<span class="normal-tip yd y-bg" v-else>到期</span>
									</div>
								</div>
							</van-list>
						</van-pull-refresh>
					</div>
				</div>
			</van-tab>
			<van-tab title="专业人才库">
				<div class="tabs-box">
					<div class="white-box part-3">
						<div class="search-box">
							<div class="search-input-box">
								<input type="text" v-model="paramRequest.followPosition" placeholder="意向职位模糊" />
							</div>
							<div class="search-icon-box">
								<i class="iconfont icon-sousuo" @click="rcSeach"></i>
							</div>
						</div>

						<div class="tips-list-box">
              <span
							 @click="getTips(item)"
							 :class="tip == item.value && 'active'"
							 v-for="item in dc_data.specialty"
							 :key="item.label"
							>{{ item.label }}</span
							>
						</div>
					</div>

					<div class="white-box part-4">
						<van-pull-refresh v-model="rcRefreshing" @refresh="onRcRefresh" style="min-height: 60vh;">
							<van-list
							 v-model="rcLoading"
							 :finished="rcFinished"
							 finished-text="没有更多了"
							 :immediate-check="false"
							 @load="onRcLoad"
							>
								<div class="figure-card" v-for="item in personnelList" :key="item.id">
									<div class="card-left">
										<img :src="'[]'==item.photo?'':JSON.parse(item.photo)[0].url" v-if="item.photo" alt="" />
									</div>
									<div class="card-right">
										<div class="top">
											<span class="name">{{ item.realName.slice(0, 1) }}{{ item.gender=='女'?'女士':'先生' }}</span>
											<span class="tips-detail" @click="resumeDetial(item.id)">履历详情</span>
										</div>
										<div class="bottom">
											<p class="text">意向职位：{{ item.followPosition }}</p>
											<p class="text">特长：{{ item.labelSpecialty }}</p>
											<p class="text">工作年限：{{ item.workYears }}</p>
										</div>
									</div>
								</div>
							</van-list>
						</van-pull-refresh>
					</div>
				</div>
			</van-tab>
		</van-tabs>
	</div>
</template>

<script>
import Base from '@/pages/base/base'
import PositionNav from "@/components/position-nav";
import { getRecruitListOder } from "@/service/api_recruit";
import { getPersonnelList } from "@/service/api_personnel";
export default {
	mixins: [Base],
	components: {
		PositionNav,
	},
	data() {
		return {
			active: 0,
			dc_key: ['specialty'],

			zpLoading: false,
			zpFinished: false,
			zpRefreshing: false,
			requestData: {
				positionName: "",
				pageNum: 1,
				pageSize: 10
			},
			dataList: [],
			zpTotal: 0,

			rcLoading: false,
			rcFinished: false,
			rcRefreshing: false,
			paramRequest: {
				followPosition: "",
				pageNum: 1,
				pageSize: 5
			},
			personnelList: [],
			rcTotal: 0,

			list1: [],
			tipsList: [],
			tip: "",
			list2: [],
		};
	},

	mounted() {
		this.getList();
		this.initDict(this.dc_key).then((res) => {});
	},

	methods: {
		zpSeach(){
			this.requestData.pageNum = 1;
			this.getList();
		},

		onZpRefresh() {
			this.requestData.pageNum = 1;
			this.getList();
		},

		onZpLoad(){
			if (this.zpRefreshing) {
				this.dataList = [];
				this.zpRefreshing = false;
			}
			if (this.dataList.length >= this.zpTotal) {
				this.zpFinished = true;
			}else{
				this.requestData.pageNum++;
				list(this.requestData).then((res) => {
					res.rows.forEach(element => {
						this.dataList.push(element);
					});
					this.zpTotal = res.total;
					this.zpLoading = false;
				})
			}

		},

		//获取招聘列表
		getList(){
			getRecruitListOder(this.requestData).then((res) => {
				this.dataList = res.rows;
				this.zpTotal = res.total;
				this.zpRefreshing = false;

				console.log("接口数据——：", this.zpTotal);
				console.log("接口数据——：", this.dataList);

				this.zpFinished = false;
			})
		},

		rcSeach(){
			this.paramRequest.pageNum = 1;
			this.getPersonnelList();
		},

		onRcRefresh() {
			this.paramRequest.pageNum = 1;
			this.getPersonnelList();
		},

		onRcLoad(){
			if (this.rcRefreshing) {
				this.dataList = [];
				this.rcRefreshing = false;
			}
			if (this.personnelList.length >= this.rcTotal) {
				this.rcFinished = true;
			}else{
				this.paramRequest.pageNum++;
				this.paramRequest.specialty = this.tip;
				list(this.paramRequest).then((res) => {
					res.rows.forEach(element => {
						this.personnelList.push(element);
					});
					this.rcTotal = res.total;
				})
			}
			this.rcLoading = false;
		},

		//获取人才列表
		getPersonnelList(){
			this.paramRequest.specialty = this.tip;
			getPersonnelList(this.paramRequest).then((res) => {
				this.personnelList = res.rows;
				this.rcTotal = res.total;
				this.rcRefreshing = false;
			})
		},

		tabOnClick(){
			if(0 == this.active){
				this.getList();
			}else{
				this.getPersonnelList();
			}
		},

		getTips(item) {
			this.tip = item.value;
			// this.getPersonnelList();
			this.rcSeach();
		},

		resumeDetial(id){
			this.goNavigator("talentService-iAmATalentShow", {id: id});
		},

		compareDate(dd){
			return new Date(dd).getTime() > new Date().getTime();
		}

	},
};
</script>

<style lang="scss" type="text/scss" scoped>
.peripheral {
	/deep/.van-tabs__wrap {
		height: 100px;
		background: #ffffff;
		box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05);
		margin-bottom: 10px;
	}

	.tabs-box {
		margin: 20px 0;
		.part-1 {
			padding: 30px;
			box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05);
		}
		.part-2 {
			overflow-y: auto;
			height: calc(100vh - 320px);
			box-sizing: border-box;
			.card-item {
				@include flex;
				margin: 0 30px 30px;
				.card-left {
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					height: 140px;
					.tit {
						width: 500px;
						font-size: 32px;
						color: #333;
						@include line-over;
					}
					.txt {
						width: 500px;
						font-size: 28px;
						color: #999;
						@include line-over;
					}
					.date {
						font-size: 28px;
						color: #999;
					}
				}
				.card-right {
					align-self: flex-start;
				}
			}
		}

		.part-3 {
			padding: 30px 30px 10px;
			box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05);
			margin-bottom: 20px;
		}
		.part-4 {
			padding: 0;
			overflow-y: auto;
			height: calc(100vh - 450px);
		}
	}
}
.search-box {
	@include flex;
	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
	border-radius: 35px;
	height: 70px;
	padding: 0 40px;
	.search-input-box {
		input {
			height: 70px;
			line-height: 70px;
			font-size: 30px;
			color: #b7b7b7;
			&::placeholder {
				line-height: 70px;
				font-size: 30px;
				color: #b7b7b7;
			}
		}
	}
	.search-icon-box {
		width: 100px;
		text-align: center;
		i {
			line-height: 70px;
			font-size: 36px;
			color: $text5;
		}
	}
}

.tips-list-box {
	margin-top: 20px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	span {
		width: 160px;
		height: 70px;
		line-height: 70px;
		border-radius: 10px;
		font-size: 28px;
		color: #333;
		text-align: center;
		margin-right: 16px;
		margin-bottom: 20px;
		background: $color5;
		&:nth-child(4n) {
			margin-right: 0;
		}
		&.active {
			background: #f7f3ff;
			color: #874cfe;
		}
	}
}

.figure-card {
	padding: 30px;
	display: flex;
	border-bottom: 1px solid #e3e3e3;
	.card-left {
		width: 160px;
		height: 200px;
		overflow: hidden;
		margin-right: 30px;
		img {
			width: 100%;
		}
	}
	.card-right {
		flex: 1;
		.top {
			@include flex;
			margin-bottom: 20px;
			.name {
				font-size: 32px;
				color: #333;
				font-weight: bold;
			}
			.tips-detail {
				width: 160px;
				height: 70px;
				line-height: 70px;
				background: #f2ebff;
				border: 1px solid #6600ff;
				border-radius: 10px;
				font-size: 28px;
				font-weight: 400;
				color: #6600ff;
				text-align: center;
			}
		}

		.bottom {
			.text {
				font-size: 28px;
				font-weight: 400;
				color: #999999;
				line-height: 40px;
			}
		}
	}
}
</style>