hire-wx-houxuanren/pagesA/index-search.vue

<template>
	<view class="index-search">
		<view class="search-header">
			<u-search placeholder="请输入" v-model="keyword1" :show-action="false" @search="tosearch(1)"></u-search>
			<view class="navbar-down">
				<view class="scroll-down u-flex u-row-between">
					<view class="u-flex down-left">
						<text class="text1" :class="{textactive:paixu == 1}" @click="changepaixu(1)">按职位</text>
						<text class="text1" :class="{textactive:paixu == 2}" @click="changepaixu(2)">搜公司</text>
					</view>
					<!-- <view class="u-flex down-right">
						<view @click="opencity = true" class="u-flex right-item u-row-center">
							<text class="text">{{city.name || '全国'}}</text>
							<u-icon name="arrow-down-fill" size="20"></u-icon>
						</view>
						<view @click="$refs.shaixuan.openshaixuan = true" class="u-flex right-item u-row-center">
							<text class="text">筛选</text>
							<u-icon name="arrow-down-fill" size="20"></u-icon>
						</view>
					</view> -->
					<view class="u-flex down-right">
						<view :style="{background:city.name!=''?'#EDF2F8':'#f3f3f3'}"
							class="right-item u-flex u-row-center" @click="opencity1">
							<text :style="{color:city.name!=''?'#0C66C2':'#666666'}"
								class="text">{{city.name || '北京'}}</text>
							<u-icon v-if="city.name !='' " color="#0C66C2" name="arrow-down-fill" size="8"></u-icon>
							<u-icon v-if="city.name ==''" name="arrow-down-fill" size="8"></u-icon>
						</view>
						<view :style="{background:Object.keys(search_data).length!=0?'#EDF2F8':'#f3f3f3'}"
							class="right-item u-flex u-row-center" @click="openshaixuan">
							<text :style="{color:Object.keys(search_data).length!=0?'#0C66C2':'#666666'}"
								class="text">筛选</text>
							<u-icon v-if="Object.keys(search_data).length!=0 " color="#0C66C2" name="arrow-down-fill"
								size="8"></u-icon>
							<u-icon v-if="Object.keys(search_data).length==0" name="arrow-down-fill" size="8"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="padding: 0 20rpx;">
			<view class="content" @click="todetails(item.id)" v-for="(item,index) in positionlist" :key="item.id">
				<view class="u-flex u-row-between">
					<view class="u-flex">
						<view class="font">{{item.job_name}}</view>
						<view class="back" v-if="item.is_urgent == 1">急聘</view>
					</view>
					<view class="money">{{item.salary_min}}-{{item.salary_max}}K
						<text v-if="item.salary_structure">·{{item.salary_structure}}</text>
					</view>
				</view>
				<view class="u-flex" style="margin: 16rpx 0 14rpx 0;">
					<text class="introduce">{{item.companys.name}}</text>
					<text class="introduce">{{item.companys.company_stage.name}}</text>
					<text class="introduce">{{item.companys.company_scale.name}}</text>
				</view>
				<view class="u-flex" style="margin-bottom: 24rpx;">
					<view class="tabs">
						{{item.education_name}}
					</view>
					<view class="tabs">
						{{item.experience_name}}
					</view>
				</view>
				<view class="u-flex u-row-between u-col-center">
					<view class=" u-flex u-col-center">
						<image :src="item.usermanager.avatar" mode=""
							style="width: 50rpx;height: 50rpx;border-radius: 50%;">
						</image>
						<view class="" style="margin-left: 16rpx;">
							<text>{{item.usermanager.name}}</text>·
							<text>{{item.usermanager.job_text}}</text>
						</view>
					</view>
					<view class="u-flex u-col-center ">
						<view class="address" style="margin	-right: 10rpx;">{{item.work_province.slice(0,-1)}}
						</view>
						<view class="address">{{item.work_city}}</view>
					</view>
				</view>
			</view>
			<view class="safe-area-inset-bottom"></view>
		</view>
		<view style="height: 70vh;display: flex;justify-content: center;align-items: center;"
			v-if="positionlist.length == 0">
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view>
		<u-popup border-radius="28" :show="opencity" mode="bottom">
			<view class="change-city-popup u-flex-col">
				<view class="change-city-header u-flex u-row-between">
					<u-icon name="close" size="22" color="#222" @click="opencity = false"></u-icon>
					<text class="text">选择城市</text>
					<u-icon name="close" size="22" color="#fff"></u-icon>
				</view>
				<view class="u-flex-1 u-flex change-city-scroll">
					<scroll-view scroll-y="true" class="change-scroll-left">
						<view class="scroll-left-sheng" v-for="(item,index) in citylist" :key="index"
							:class="{shengactive:cityleftindex == index}" @click="changeleftcity(index)">{{item.name}}
						</view>
					</scroll-view>
					<scroll-view scroll-y="true" class="change-scroll-right u-flex-1">
						<view class="scroll-left-shi" v-for="(item,index) in rightcity" :key="index"
							:class="{shiactive:cityrightindex == index}" @click="changerightcity(index,item)">
							{{item.name}}
						</view>
					</scroll-view>
				</view>
				<view class="change-city-down u-flex u-row-between">
					<text @click="chongzhi">重置</text>
					<text @click="changecity">确定</text>
				</view>
			</view>
		</u-popup>
		<zhao-shaixuan ref="shaixuan" @tosearch="shaixuan"></zhao-shaixuan>
	</view>
</template>

<script>
	import {
		getList,
		getareacity
	} from "@/units/inquire.js"
	export default {
		data() {
			return {
				paixu: '',
				keyword: "",
				keyword1: "",
				category_industry_id: "",
				category_industry_name: '',
				opencity: false,
				citylist: [],
				total: 0,
				height: "",
				list1: [{
						name: "相关"
					},
					{
						name: "推荐"
					},
					{
						name: "最新"
					},
				],
				list4: [{
						name: "职位"
					},
					{
						name: "校招"
					}
				],
				page: 1,
				tab1: 0,
				tab2: 0,
				positionlist: [], //职位列表
				is_auth: "", //是否认证
				rightcity: [],
				cityrightindex: "-1",
				cityleftindex: "0",
				city: {},
				search_data: {},
				job_intention: [],
				id: "",
				navheight: null,
			}
		},
		onLoad() {
			this.search_data = {}
			this.getlist()
			this.getcity()
			this.city = {
				name: '',
				id: ''
			}
		},
		onReachBottom() {
			if (this.total != this.positionlist.length) {
				this.page++
				this.getlist()
			}
		},
		methods: {
			changepaixu(type) {
				this.paixu = type
				this.tosearch()
			},
			opencity1() {
				this.opencity = true
				this.city = {
					name: '',
					id: ''
				}
			},
			shaixuan(e) {
				this.search_data = e
				this.tosearch()
			},
			chongzhi() {
				this.city = {
					name: '',
					id: ''
				}
				this.opencity = false
				this.tosearch()
			},
			changecity() {
				if (this.cityrightindex == -1) {
					this.$u.toast("请选择城市")
					return
				}
				this.city = {
					name: this.citylist[this.cityleftindex].childlist[this.cityrightindex].name,
					id: this.citylist[this.cityleftindex].childlist[this.cityrightindex].id
				}
				console.log(this.city);
				this.opencity = false
				this.tosearch()
			},
			changerightcity(index, item) {
				this.cityrightindex = index
			},
			changeleftcity(index) {
				this.cityleftindex = index
				this.cityrightindex = -1
				this.rightcity = this.citylist[this.cityleftindex].childlist
			},
			getcity() {
				getareacity().then(res => {
					console.log(res);
					this.citylist = res.data
					this.rightcity = res.data[0].childlist
				})
			},
			tosearch(type) {
				this.positionlist = []
				if (type == 1) {
					this.keyword = this.keyword1
				}
				this.page = 1
				this.total = 0
				this.getlist()
			},
			openshaixuan() {
				this.$refs.shaixuan.openshaixuan = true
			},
			getlist() {
				getList({
					page: this.page,
					type: this.tab2,
					search_field: this.paixu == 1 ? 'job_name' : 'name',
					search: this.keyword,
					search_data: {
						...this.search_data,
						city_id: this.city.id,
						category_industry_id: this.category_industry_id
					}
				}).then(res => {
					if (this.page == 1) {
						this.positionlist = res.data.data
					} else {
						this.positionlist = this.positionlist.concat(res.data.data)
					}
					this.total = res.data.total
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F3F3F3;
	}

	.content {
		padding: 24rpx 20rpx;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 16rpx;

		.font {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #222222;
			line-height: 44rpx;
			max-width: 326rpx;
			overflow: hidden; //超出隐藏
			white-space: nowrap; //不换行，同一行展示
			text-overflow: ellipsis; //设置超出部分以省略号展示
		}

		.back {
			width: 58rpx;
			height: 32rpx;
			background: #FF5335;
			border-radius: 6rpx;
			font-size: 22rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 32rpx;
			text-align: center;
			margin-left: 16rpx;
		}

		.money {
			font-size: 32rpx;
			font-family: JDZhengHT-Regular, JDZhengHT;
			font-weight: 400;
			color: #0C66C2;
		}

		.introduce {
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #555555;
			line-height: 40rpx;
			margin-right: 16rpx;
		}

		.tabs {
			background: #F3F3F3;
			border-radius: 4rpx;
			padding: 6rpx 14rpx;
			margin-right: 16rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #5F5F5F;
			height: 34rpx;
			line-height: 34rpx;
		}
	}

	.index-search {
		.change-city-popup {
			height: calc(100vh - 144rpx);

			.change-city-scroll {
				min-height: 1rpx;

				.change-scroll-right {
					height: 100%;

					.scroll-left-shi {
						line-height: 100rpx;
						text-align: center;
						font-size: 32rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						padding: 0 32rpx;
					}

					.shiactive {
						color: #0C66C2;
					}
				}

				.change-scroll-left {
					width: 304rpx;
					height: 100%;
					background-color: #F5F5F5;

					.scroll-left-sheng {
						text-align: center;
						font-size: 32rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						padding: 28rpx 32rpx;
					}

					.shengactive {
						background-color: #fff;
						color: #0C66C2;
					}
				}
			}

			.change-city-down {
				padding: 12rpx 32rpx;

				text:first-child {
					width: 208rpx;
					line-height: 84rpx;
					background: #F3F3F3;
					border-radius: 10rpx;
					text-align: center;
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #555555;
				}

				text:last-child {
					width: 454rpx;
					line-height: 84rpx;
					background: #0C66C2;
					border-radius: 10rpx;
					text-align: center;
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}

			.change-city-header {
				height: 120rpx;
				padding: 0 32rpx;


				.text {
					font-size: 36rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;
				}
			}
		}

		.index-item {
			width: 702rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 20rpx auto;
			padding: 0 20rpx 24rpx 20rpx;

			.item-down {
				text:first-child {
					font-size: 22rpx;
					font-family: SFPro-Regular, SFPro;
					font-weight: 400;
					color: #666666;
				}

				text:last-child {
					font-size: 22rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}

			.item-gongsi {
				margin-bottom: 16rpx;

				.text2 {
					font-size: 24rpx;
					font-family: SFPro-Regular, SFPro;
					font-weight: 400;
					color: #666666;
				}

				.logo {
					width: 42rpx;
					height: 42rpx;
					border-radius: 10rpx;
					margin-right: 16rpx;
				}

				.text1 {
					max-width: 192rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #444444;
					margin-right: 12rpx;
				}
			}

			.item-label {
				margin-bottom: 20rpx;

				text {
					margin-right: 16rpx;
					line-height: 46rpx;
					background: #F7F7F7;
					border-radius: 4rpx;
					padding: 0 14rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #5F5F5F;
				}
			}

			.item-top {
				height: 88rpx;

				.text1 {
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;
					margin-right: 16rpx;
				}

				.text2 {
					width: 50rpx;
					line-height: 32rpx;
					background: rgba(255, 83, 53, 0.1);
					border-radius: 4rpx;
					text-align: center;
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FF5335;
					margin-right: 12rpx;
				}

				.text3 {
					width: 90rpx;
					line-height: 32rpx;
					background: #FFF2E8;
					border-radius: 4rpx;
					text-align: center;
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FF8620;
					margin-right: 12rpx;
				}

				.text4 {
					line-height: 32rpx;
					background: #E6EFF8;
					border-radius: 4rpx;
					padding: 0 4rpx;
					text-align: center;
					font-size: 20rpx;
					font-family: SFPro-Regular, SFPro;
					font-weight: 400;
					color: #0C66C2;
				}

				.text5 {
					font-size: 32rpx;
					font-family: JDZhengHT-Regular, JDZhengHT;
					font-weight: 400;
					color: #0C66C2;
				}
			}
		}

		.search-header {
			position: sticky;
			top: 0;
			left: 0;
			z-index: 10;
			background-color: #fff;
			padding: 20rpx 24rpx;

			.navbar-down {
				padding-top: 20rpx;

				.scroll-down {
					.down-right {
						.right-item {
							// width: 100rpx;
							padding: 0 20rpx;
							height: 52rpx;
							background: #F3F3F3;
							border-radius: 4rpx;
							margin-left: 20rpx;

							.text {
								font-size: 26rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #666666;
								margin-right: 4rpx;
							}

							image {
								width: 16rpx;
								height: 16rpx;
							}
						}
					}

					.down-left {
						.text1 {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #777;
							margin-right: 32rpx;
						}

						.textactive {
							color: #222222;
						}
					}
				}
			}
		}
	}
</style>