yizhizan-h5/components/btnPopous/btnPopous.vue

<template>
	<view>
		<view class="cover"></view>
		<view class="jobAll" :class="topY==true?'end':'start'" @touchstart="start" @touchend="end"
			@touchmove.stop="move">
			<view class="header">
				<view class="shut"><u-icon name="minus" top="10rpx"></u-icon></view>
				<view class="headerTitle">所有职位<text>{{total}}</text></view>
				<view class="jobAll-search">
					<view @click="searchResult" class="searchBox flex">
						<u-icon size="36rpx" color="#999" name="search" ></u-icon>
						<u-input @confirm="searchResult" v-model="projectName" placeholder="搜索职位" type="text" input-align="left" confirm-type="search" :custom-style="{marginLeft:'20rpx'}"/>
					</view>
					<view class="searchBox nobg flex">
						<u-tag @click="changeClassify('')" class="tag" text="全部" :type="projectName!=''?'info':'primary'"  mode="light" size="mini" />
						<u-tag @click="changeClassify(item)" class="tag" :text="item" :type="projectName!=item?'info':'primary'"  mode="light" size="mini" v-for="item in classify"/>
					</view>
				</view>
			</view>
			<!-- <view class="jobAll-search flex justify-center">
				<view class="jobAll-search-box">
					<u-dropdown :mask='false' active-color="#016BF6">
						<u-dropdown-item v-model="value1" title="岗位" @change="change1"
							:options="options1"></u-dropdown-item>
						<u-dropdown-item v-model="value2" title="经验" @change="change2"
							:options="options2"></u-dropdown-item>
						<u-dropdown-item v-model="value3" title="薪资" @change="change3"
							:options="options3"></u-dropdown-item>
						<u-dropdown-item v-model="value4" title="城市" @change="change4"
							:options="options4"></u-dropdown-item>
					</u-dropdown>
				</view>
			</view> -->
			<view class="jobAll-item flex justify-center">
				<view class="jobAll-item-box">
					<scroll-view scroll-y="true" v-if="list.length>0" style="width: 100%;height: 100%;"
						:refresher-enabled="true" :refresher-triggered="refresher" @refresherpulling="scrolltoupper"
						@refresherrefresh="refresherrefresh" @scrolltolower="scrolltolower">
						<view class="jobAll-item-box-item" v-for="(item,index) in list" :key="index"
							@tap.native="gotos(item.postPushId)">
							<!-- 标题-薪资 -->
							<view class="jobAll-item-box-item-title flex justify-between align-center">
								<view class="title-left flex align-center">
									<view class="job-title-text">
										<block v-if="isSameName(item.ruleClassifyName,item.stationName)">
											{{item.ruleClassifyName}}-
										</block>
										<block>
											{{item.stationName}}
										</block>
									</view>
									<!-- <view class="salary-text-box">
										<image src="../../static/images/index/jipinIcom.svg" class="jipin-icon" />
										<text class="jipin-text">急聘</text>
									</view> -->
								</view>
								<text class="salary-text">{{item.salaryRange}}</text>
							</view>
							<!-- 公司名称-公司人数 -->
							<view class="jobAll-item-box-item-name flex align-center">
								<text class="company-name" style="margin-right: 8rpx;">{{item.company?item.company.companyName:''}}</text>
								<text class="company-people" v-if="item.company">{{item.company?item.company.companyPeople:'0人'}}</text>
							</view>
							<!-- 职位标签 -->
							<view class="jobAll-item-box-item-label flex align-center flex-wrap">
								<text class="job-tag">{{item.education}}</text>
								<text class="job-tag">{{item.experience}}</text>
								<text class="job-tag">{{item.industry}}</text>
							</view>
							<!-- 公司简介-位置 -->
							<view class="jobAll-item-box-item-info flex justify-between align-center">
								<view class="jobAll-item-box-item-info-l flex align-center">
									<image :src="item.hr&&item.hr.hrImg?item.hr.hrImg:'../../static/logo.png'"
										style="width: 58rpx;height: 58rpx;border-radius: 50%;" mode="aspectFill"></image>
									<view class="company-info-text" v-if="item.company">
										{{item.user&&item.user.userName?item.user.userName:'未知'}}·{{item.hr&&item.hr.hrPosition||'人事总监'}}
									</view>
									<view class="reply-time">10分钟前回复</view>
								</view>
								<view class="location-text">
								  {{item.distance}} {{item.county}} {{item.address}}
								</view>
							</view>
							<view class="jobAll-item-box-item-line" v-if="(index + 1) != list.length">
							</view>
						</view>
					</scroll-view>
					<empty v-else />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import empty from '../empty.vue'
	export default {
		name: "btnPopous",
		components: {
			empty
		},
		props: {
			//公司id
			companyId: {
				type: String,
				default: ''
			},
			//城市数组
			cittArr: {
				type: Array,
				default: []
			},
			//薪资数组
			moneyArr: {
				type: Array,
				default: []
			},
			//经验数组
			jyArr: {
				type: Array,
				default: []
			},
			//岗位分类
			classify: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				refresher: false,
				list: [],
				clientX: '',
				clientY: '',
				topY: false,
				value1: 1,
				value2: 1,
				value3: 1,
				value4: 1,
				options1: [],
				options2: [],
				options3: [],
				options4: [],
				page: 1,
				pages: 1,
				limit: 10,
				projectName: '', //岗位名称
				address: '', //城市
				salaryRange: '', //薪资
				experience: '', //经验
				title:'',
				total:0
			};
		},
		watch: {
			//城市
			cittArr(newArr, oldArr) {
				//拿到最新传递的城市数据，处理成需要的格式
				let arr = [{
					label: '全部',
					value: '',
				}]
				this.cittArr.map(item => {
					let obj = {
						label: item,
						value: item,
					}
					arr.push(obj)
				})
				this.options4 = arr
			},
			//岗位分类列表
			classify(newArr, oldArr) {
				//拿到最新传递的岗位数据，处理成需要的格式
				let arr = [{
					label: '全部',
					value: '',
				}]
				this.classify.map(item => {
					let obj = {
						label: item,
						value: item,
					}
					arr.push(obj)
				})
				this.options1 = arr
			},
			//经验
			jyArr(newArr, oldArr) {
				//拿到最新传递的经验数据，处理成需要的格式
				let arr = [{
					label: '全部',
					value: '',
				}]
				this.jyArr.map(item => {
					let obj = {
						label: item.value,
						value: item.value,
					}
					arr.push(obj)
				})
				this.options2 = arr
			},
			//薪资
			moneyArr(newArr, oldArr) {
				//拿到最新传递的薪资数据，处理成需要的格式
				let arr = [{
					label: '全部',
					value: '',
				}]
				this.moneyArr.map(item => {
					let obj = {
						label: item.value,
						value: item.value,
					}
					arr.push(obj)
				})
				this.options3 = arr
			},
		},
		created() {
			this.userGetPostPushList()
		},
		methods: {
			//判断岗位名称与职位名称是否相同（不区分大小写）
			isSameName(className, name) {
				let str1 = className.trim();
				let str2 = name.trim();
				if (str1.length !== str2.length) {
					return true;
				}
				return str1.toLowerCase() !== str2.toLowerCase();
			},
			change1(e) {
				this.projectName = e
				this.userGetPostPushList()
			},
			change2(e) {
				this.experience = e
				this.userGetPostPushList()
			},
			change3(e) {
				this.salaryRange = e
				this.userGetPostPushList()
			},
			change4(e) {
				this.address = e
				this.userGetPostPushList()
			},
			changeClassify(e){
				console.log(e)
				this.page=1
				this.projectName = e
				this.userGetPostPushList()
			},
			searchResult(){
				this.page=1
				this.userGetPostPushList()
			},
			/**
			 * 上拉加载更多
			 */
			scrolltolower() {
				if (this.page < this.pages) {
					this.page += 1
					this.userGetPostPushList()
				}
			},
			/**
			 * 获取岗位列表
			 */
			userGetPostPushList() {
				let data = {
					companyId: this.companyId,
					page: this.page,
					limit: this.limit,
					ruleClassifyName: this.projectName, //岗位名称
					city: this.address, //城市
					salaryRange: this.salaryRange, //薪资
					experience: this.experience, //经验
				}
				this.$Request.getT("/app/postPush/userGetPostPushList", data).then(res => {
					if (res.code == 0) {
						this.pages = res.data.pages
						this.total=res.data.total
						if (this.page == 1) {
							this.list = res.data.records
						} else {
							this.list = [...this.list, ...res.data.records]
						}
					}
				})
			},
			gotos(postPushId) {
				console.log('rrrrrrrrrrrrrrrrrrrrrrrr')
				uni.navigateTo({
					url: '/pages/index/game/order?postPushId=' + postPushId
				})
			},
			refresherrefresh() {
				this.refresher = false
			},
			scrolltoupper(e) {
				// this.refresher = true
				this.refresher = true
				this.topY = false

			},
			start(e) {
				this.clientX = e.changedTouches[0].clientX
				this.clientY = e.changedTouches[0].clientY
			},
			end(e) {
				let subX = e.changedTouches[0].clientX - this.clientX
				let subY = e.changedTouches[0].clientY - this.clientY
				// 向下拉动超过150px时直接关闭弹窗
				if (subY > 150) {
					this.topY = false
					// 通知父组件关闭弹窗
					this.$emit('closePopup')
				} else if (subY < -50) {
					this.topY = true
				}
			},
			move(e) {

			},
		}
	}
</script>

<style lang="scss">
	.cover{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.5);
		position: fixed;
		z-index: 99998;
		top:0;
		left:0
	}
	.jobAll {
		width: 100%;
		height: 90vh;
		background-color: #f4f3f3;
		border-radius: 60rpx 60rpx 0px 0px;
		position: fixed;
		z-index: 99999;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
		overflow: hidden;
		.jobAll-search {
			width: 100%;
			margin-top: 20rpx;
border-top: 1px solid #ebebeb;
			.jobAll-search-box {
				width: 686rpx;
				height: 100%;
			}
		}

		.jobAll-item {
			width: 100%;
			height: calc(90vh - 120rpx);
			margin-top: 20rpx;
			padding: 0 20rpx;
			.jobAll-item-box {
				width: 100%;
				height: 100%;

				.jobAll-item-box-item {
					width: 100%;
					background-color: #ffffff;
					border-radius: 12rpx;
					margin-bottom: 20rpx;
					padding: 20rpx;
					border: 0.5px solid rgba(227, 231, 236, 1);
					background: rgba(253, 253, 253, 1);

					.jobAll-item-box-item-name {
						margin-top: 14rpx;
						color: #999999;
						font-size: 28rpx;
						font-weight: 500;
					}

					.jobAll-item-box-item-label {
						margin-top: 14rpx;
					}

					.jobAll-item-box-item-info {
						font-size: 26rpx;
						margin-top: 20rpx;

						.jobAll-item-box-item-info-l {
							color: #1A1A1A;
							display: flex;
							align-items: center;
							gap: 12rpx;
						}
					}

					.jobAll-item-box-item-line {
						width: 100%;
						border-bottom: 1rpx solid #E6E6E6;
						margin-top: 30rpx;
					}
				}
			}
		}
	}

	.start {
		border-radius: 60rpx 60rpx 0px 0px !important;
		bottom: -70vh;
		transition-duration: .5s
	}

	.end {
		border-radius: 60rpx 60rpx 0px 0px !important;
		bottom: 0;
		transition-duration: .5s
	}

	// 首页样式
	.job-title-text {
		color: var(--Grayscale/Grayscale 100, rgba(23, 23, 37, 1));
		font-family: DM Sans;
		font-size: 38rpx;
		font-weight: 700;
		line-height: 24px;
		letter-spacing: undefined;
		text-align: left;
	}

	.salary-text-box {
		display: flex;
		align-items: center;
		margin-left: 16rpx;

		.jipin-icon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 8rpx;
		}

		.jipin-text {
			color: #FF6B6B;
			font-size: 24rpx;
			font-weight: 600;
		}
	}

	.salary-text {
		color: rgba(1, 107, 246, 1);
		font-family: DM Sans;
		font-size: 28rpx;
		font-weight: 700;
		line-height: 20px;
		letter-spacing: 0.5%;
		text-align: right;
	}

	.company-name {
		color: var(--Grayscale/Grayscale 60, rgba(156, 164, 171, 1));
		font-family: DM Sans;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 20px;
		letter-spacing: 0.5%;
		text-align: left;
	}

	.company-people {
		color: var(--Grayscale/Grayscale 60, rgba(156, 164, 171, 1));
		font-family: DM Sans;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 20px;
		letter-spacing: 0.5%;
		text-align: left;
	}

	.job-tag {
		height: 42rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 8rpx;
		border-radius: 8rpx;
		background: rgba(198, 198, 198, 0.1);
		margin-right: 16rpx;
		color: rgba(153, 153, 153, 1);
		font-size: 24rpx;
	}

	.company-info-text,
	.location-text {
		color: rgba(156, 164, 171, 1);
		font-family: DM Sans;
		font-size: 20rpx;
		font-weight: 400;
		line-height: 40rpx;
		letter-spacing: 0.5%;
		text-align: left;
	}

	.reply-time {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 8rpx;
		font-family: DM Sans;
		font-size: 20rpx;
		font-weight: 400;
		line-height: 40rpx;
		letter-spacing: 0.5%;
		text-align: left;
		border-radius: 12rpx;
		background: #ECE1FD;
		color: #8858C5;
	}
	.header{
		width: 100%;
		background: #fff;
		text-align: center;
		color: #111;
		padding-bottom: 1rpx;
		.headerTitle{
			font-size: 34rpx;
			text{
				font-size: 20rpx;
				vertical-align:top
			}
		}
		.shut{
			color: #bbb;
			font-size: 60rpx;
			transform: scaleX(1.6)
		}
		.searchBox{
			width: 92%;
			margin: 30rpx auto;
			border-radius:70rpx;
			background:#f1f1f1;
			padding:0 20rpx
		}
		.nobg{
			background: none;
			border-radius: 0;
			gap: 20rpx;
			margin-left: 10rpx;
		}
		
	}
</style>