hire-wx-houxuanren/pagesB/gongsi-info.vue

<template>
	<view class="gongsi-info">
		<image src="../static/images/gongsi-bg.png" class="gongsi-bg" mode=""></image>
		<u-navbar :fixed="false" bgColor='rgba(0,0,0,0)' placeholder :safeAreaInsetTop="true"
			@leftClick="return1"></u-navbar>
		<view class="" style="padding:  0 24rpx 0;box-sizing: border-box;">
			<view class="gongsi-header">
				<view class="header-top u-flex">
					<image :src="detail.logo" class="gongsi-logo" mode="aspectFill"></image>
					<view class="top-right u-flex-col u-flex-1">
						<text>{{detail.name || ''}}</text>
						<text>{{detail.category_name || ''}}｜{{detail.stage_name || ''}}·{{detail.scale_name || ''}}</text>
					</view>
				</view>
				<view class="gongso-label u-flex u-flex-wrap">
					<text v-for="(a,b) in detail.tag_text" :key="b">{{a}}</text>
				</view>
			</view>
			<view class="gongsi-address">
				<view class="address-title">
					公司地址
				</view>
				<view class="address-down u-flex u-row-between">
					<text>{{detail.province || ''}}{{detail.city || ''}}{{detail.address || ''}}</text>
					<image src="@/static/images/address1.png" style="width: 68rpx;height: 68rpx;" mode=""
						@click="openlocation"></image>
				</view>
			</view>
			<view class="gongsi-text">
				<view class="text-title">
					公司介绍
				</view>
				<view class="text-body">
					{{detail.introduce || ''}}
				</view>
			</view>
			<view class="gongsi-text">
				<view class="text-title">
					公司优势
				</view>
				<view class="text-body">
					{{detail.welfare_tag_text ? detail.welfare_tag_text.join(',') : ''}}
				</view>
			</view>
		</view>
		<view class="" style="height: 220rpx;"></view>
		<!-- <u-mask :show="showzhiwei" z-index="990" @click="closeshaixuan"></u-mask> -->
		<u-overlay :show="showzhiwei" z-index="990" @click="closeshaixuan"></u-overlay>
		<view class="gongsi-zhiwei u-flex-col" :style="{bottom:showzhiwei ? '0' : 'calc(210rpx - 90vh)'}">
			<view class="zhiwei-header">
				<view class="header-top" v-if="showsearch">
					<u-search placeholder="搜索职位" @search="tosearch(1)" action-text="取消" @custom="chongzhi"
						v-model="keyword1"></u-search>
				</view>
				<view class="header-top u-flex u-row-between" v-else @click="openzhiwei">
					<text class="text1">招聘职位（{{total}}）</text>
					<view @click.stop="opensearch">
						<u-icon name="search" size="32"></u-icon>
					</view>
				</view>
				<view class="header-shaixuan u-flex u-row-between">
					<view class="shaixuan-item u-flex u-row-center"
						:class="{shaixuanItemActive:(showshaixuan == 1 || zhiwei > 0)}" @click="openshaixuan(1)">
						<text class="text u-line-1">{{zhiwei == 0 ? '职位' : zhiweilist[zhiwei].name}}</text>
						<u-icon name="arrow-down-fill" size="8"></u-icon>
					</view>
					<view class="shaixuan-item u-flex u-row-center"
						:class="{shaixuanItemActive:showshaixuan == 2 || jingyan > -1}" @click="openshaixuan(2)">
						<text class="text u-line-1">{{jingyan == -1 ? '经验' : jingyanlist[jingyan].name}}</text>
						<u-icon name="arrow-down-fill" size="8"></u-icon>
					</view>
					<view class="shaixuan-item u-flex u-row-center"
						:class="{shaixuanItemActive:(showshaixuan == 3 || city1.id)}" @click="openshaixuan(3)">
						<text class="text u-line-1">{{city1.name || '城市'}}</text>
						<u-icon name="arrow-down-fill" size="8"></u-icon>
					</view>
					<view class="shaixuan-item u-flex u-row-center"
						:class="{shaixuanItemActive:showshaixuan == 4 || xinzi.name}" @click="openshaixuan(4)">
						<text class="text u-line-1">{{xinzi.name || '薪资'}}</text>
						<u-icon name="arrow-down-fill" size="8"></u-icon>
					</view>
				</view>
			</view>
			<view class="zhiwei-list u-flex-1">
				<scroll-view v-if="showshaixuan == 1" scroll-y="true" class="zhiwei-shaixuan">
					<view class="shaixuan1-item" v-for="(a,b) in zhiweilist" :key="b" :class="{shaixuan1:zhiwei == b}"
						@click="changeshaixuan(1,b)">
						{{a.name}}
					</view>
				</scroll-view>
				<scroll-view v-if="showshaixuan == 2" scroll-y="true" class="zhiwei-shaixuan">
					<view class="shaixuan1-item" :class="{shaixuan1:jingyan == -1}" @click="changeshaixuan(2,-1)">
						全部
					</view>
					<view class="shaixuan1-item" v-for="(a,b) in jingyanlist" :key="b" :class="{shaixuan1:jingyan == b}"
						@click="changeshaixuan(2,b)">
						{{a.name}}
					</view>
				</scroll-view>
				<scroll-view scroll-y="true" class="zhiwei-scroll">
					<view class="zhiwei-item" v-for="(item,index) in list" :key="index" @click="toinfo(item)">
						<view class="item-top u-flex u-row-between">
							<text class="text1">{{item.job_name}}</text>
							<!-- <text class="text2">3天内反馈</text> -->
							<text class="text3 u-flex-1">{{item.salary_min}}-{{item.salary_max}}K</text>
						</view>
						<view class="item-label u-flex">
							<text>{{item.education_name}}</text>
							<text>{{item.experience_name}}</text>
						</view>
						<view class="item-down u-flex u-row-between">
							<text>{{item.audit_time}}发布</text>
							<text>{{item.work_province}} {{item.work_city}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="safe-area-inset-bottom"></view>
		</view>
		<u-picker :columns="cityList" ref="uPicker" :show="showcity" keyName="name" @confirm="changecity"
			@change="changeHandler" @cancel="confirm1"></u-picker>
		<!-- <u-picker :columns="cityList" ref="uPicker" :show="showcity" @confirm="changecity" @change="changeHandler" @cancel="confirm1"></u-picker> -->
		<u-picker keyName="label" :columns="xinzilist" :show="showxinzi" @confirm="changexinzi"
			@cancel="confirm1"></u-picker>
	</view>
</template>

<script>
	import {
		companydetail,
		getjoblist,
		jobdata,
		getexperience,
		getareacity,
		getAllArea
	} from "@/units/inquire.js"
	export default {
		data() {
			return {
				showzhiwei: false,
				showsearch: false,
				showshaixuan: 0,
				zhiweilist: [],
				zhiwei: 0,
				jingyanlist: [],
				jingyan: -1,
				showcity: false,
				cityList: [],
				province: [], //省份
				city: [],
				area: [], //区域
				provinceid: "", //省数据
				cityid: "", //市数据
				areaid: "", //区数据
				indexs: [], //默认地区下标
				city1: {
					id: '',
					name: ''
				},
				showxinzi: false,
				xinzilist: [],
				xinzi: {
					max: '',
					min: '',
					name: ''
				},
				keyword1: '',
				keyword: '',
				page: 1,
				total: 0,
				list: [],
				detail: {}
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getdata()
			this.getlist()
			this.getconfig()
		},
		methods: {
			changeHandler(e) {
				const {
					columnIndex, //当前改变值的列下标
					value,
					values, // values为当前变化列的数组内容
					indexs, //当前地区值下标
					picker = this.$refs.uPicker
				} = e
				//columnIndex代表第几列，意思是下标为0的列发生变化

				if (columnIndex === 0) {
					picker.setColumnValues(1, this.city[indexs[0]].map(v => {
						return {
							name: v.name,
							id: v.id
						}
					}))
					// picker.setColumnValues(2, this.area[indexs[0]][0].map(v => {
					// 	return {
					// 		name: v.name,
					// 		id: v.id
					// 	}
					// }))
				}
				// if (columnIndex === 1) {
				// 	picker.setColumnValues(2, this.area[indexs[0]][indexs[1]].map(v => {
				// 		return {
				// 			name: v.name,
				// 			id: v.id
				// 		}
				// 	}))
				// }
			},
			confirm1() {
				this.showxinzi = false,
					this.showcity = false
			},
			return1() {
				uni.navigateBack()
			},
			toinfo(item) {
				uni.navigateTo({
					url: "/pagesB/details?id=" + item.id
				})
			},
			openlocation() {
				uni.openLocation({
					longitude: Number(this.detail.lng),
					latitude: Number(this.detail.lat)
				})
			},
			getdata() {
				companydetail({
					id: this.id
				}).then((res) => {
					this.detail = res.data
				})
			},
			chongzhi() {
				this.keyword1 = ''
				this.showsearch = false
				this.tosearch()
			},
			opensearch() {
				if (this.showzhiwei) {
					this.showsearch = true
				} else {
					this.showzhiwei = true
				}
			},
			changexinzi(e) {
				if (e.value[0].value > e.value[1].value) {
					this.xinzi.min = e.value[1].value
					this.xinzi.max = e.value[0].value
					this.xinzi.name = e.value[1].label + "-" + e.value[0].label
				} else {
					this.xinzi.min = e.value[0].value
					this.xinzi.max = e.value[1].value
					this.xinzi.name = e.value[0].label + "-" + e.value[1].label
				}
				this.showxinzi = false
				this.tosearch()
			},
			changeshaixuan(type, index) {
				if (type == 1) {
					this.zhiwei = index
				}
				if (type == 2) {
					this.jingyan = index
				}
				this.showshaixuan = 0
				this.tosearch()
			},
			closeshaixuan() {
				this.showzhiwei = false;
				this.showsearch = false
				this.showshaixuan1 = false
			},
			openshaixuan(type) {
				if (!this.showzhiwei) {
					this.showzhiwei = true
					return
				}
				if (this.showshaixuan == type) {
					this.showshaixuan = 0
				} else {
					this.showshaixuan = type
				}
				if (type == 3) {
					this.showcity = true
				}
				if (type == 4) {
					this.showxinzi = true
				}
			},
			tosearch(type) {
				if (type == 1) {
					this.keyword = this.keyword1
				}
				this.page = 1
				this.total = 0
				this.list = []
				this.getlist()
			},
			openzhiwei() {
				if (this.showzhiwei) {
					this.showzhiwei = false
					this.showsearch = false
				} else {
					this.showzhiwei = true
				}
			},
			changecity(e) {
				console.log(e);
				// let a = e.value[0].name + e.value[1].name + e.value[2].name
				let a = e.value[0].name + e.value[1].name
				// let ids = String(e.value[0].id) + String(e.value[1].id) + String(e.value[2].id)
				let ids = String(e.value[0].id) + String(e.value[1].id)
				this.showcity = false
				this.city1.id = e.value[1].id
				this.city1.name = e.value[1].name
				console.log(this.city.name);
				this.tosearch()
			},
			getlist() {
				getjoblist({
					id: this.id,
					group_id: 3,
					category_job_id: this.zhiwei > 0 ? this.zhiweilist[this.zhiwei].id : '',
					city_id: this.city1.id,
					search:this.keyword,
					experience_id: this.jingyan == -1 ? '' : this.jingyanlist[this.jingyan].id,
					salary_min: this.xinzi.min,
					salary_max: this.xinzi.max
				}).then(res => {
					this.total = res.data.length
					this.list = res.data
				})
			},
			getconfig() {
				jobdata({
					id: this.id
				}).then(res => {
					this.zhiweilist = res.data
				})
				getexperience().then(res => {
					this.jingyanlist = res.data
				})
				getAllArea().then(res => {
					this.province = res.data.map(t => {
						return {
							name: t.name,
							id: t.id
						}
					})
					this.city = res.data.map(t => t.children.map(v => {
						return {
							name: v.name,
							id: v.id
						}
					}))
					this.area = res.data.map(t => t.children.map(v => v.children.map(i => {
						return {
							name: i.name,
							id: i.id
						}
					})))
					let a = []
					let b = []
					let c = []
					this.province.map(res => {
						a.push({
							name: res.name,
							id: res.id,
						})
					})
					this.city[0].map(res => {
						b.push({
							name: res.name,
							id: res.id,
						})
					})
					this.area[0][0].map(res => {
						c.push({
							name: res.name,
							id: res.id,
						})
					})
					this.cityList = [a, b]
					console.log(996, this.cityList);
				})
				var xinzilist = []
				for (var i = 1; i <= 100; i++) {
					xinzilist.push({
						label: `${i}K`,
						value: i
					})
				}
				this.xinzilist.push(xinzilist)
				this.xinzilist.push(xinzilist)
			}
		}
	}
</script>

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

	.gongsi-info {
		position: relative;
		z-index: 1;

		.zhiwei-list {
			min-height: 1rpx;
			position: relative;

			.zhiwei-shaixuan {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				background-color: #fff;
				width: 750rpx;
				height: 100%;
				padding: 16rpx 0;
				box-sizing: border-box;

				.shaixuan1-item {
					padding: 16rpx 66rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #444444;
				}

				.shaixuan1 {
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #0C66C2;
				}
			}

			.zhiwei-scroll {
				height: 100%;
				padding: 0 20rpx;
				box-sizing: border-box;

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

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

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

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

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

					.item-top {
						padding: 24rpx 0 20rpx 0;

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

						.text2 {
							margin: 0 16rpx;
							line-height: 32rpx;
							background: #E6EFF8;
							border-radius: 6rpx;
							padding: 0 4rpx;
							font-size: 20rpx;
							font-family: SFPro-Regular, SFPro;
							font-weight: 400;
							color: #0C66C2;
						}

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


		.gongsi-zhiwei {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 750rpx;
			height: 90vh;
			background: #F3F3F3;
			box-shadow: 0rpx -8rpx 48rpx 0rpx rgba(0, 0, 0, 0.2);
			border-radius: 28rpx 28rpx 0rpx 0rpx;
			z-index: 999;
			transition: all 0.3s;
			border-radius: 28rpx 28rpx 0 0;
			overflow: hidden;

			.zhiwei-header {
				border-bottom: 2rpx solid #F3F3F3;
				background-color: #fff;
				padding: 0 32rpx;

				.header-shaixuan {
					padding-bottom: 28rpx;

					.shaixuan-item {
						width: 150rpx;
						height: 60rpx;
						background: #F3F3F3;
						border-radius: 6rpx;

						.text {
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
							margin-right: 16rpx;
							max-width: 80rpx;
						}
					}

					.shaixuanItemActive {
						background-color: #E6EFF8;
						color: #0C66C2;

						.text {
							color: #0C66C2;
						}
					}
				}

				.header-top {
					padding: 32rpx 0;

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

		.gongsi-text {
			// width: 702rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 0 20rpx 24rpx 20rpx;
			margin: 20rpx auto;

			.text-body {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #555555;
			}

			.text-title {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				padding: 24rpx 0;
			}
		}

		.gongsi-address {
			// width: 702rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin: 20rpx auto;
			padding: 0 20rpx 24rpx 20rpx;

			.address-down {
				text {
					flex: 1;
					margin-right: 20rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}

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

			.address-title {
				padding: 24rpx 0;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
			}
		}

		.gongsi-header {
			// width: 702rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 20rpx auto;
			padding: 0 24rpx;

			.gongso-label {
				text {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #444444;
					padding: 0 12rpx;
					line-height: 50rpx;
					background: #F3F3F3;
					border-radius: 6rpx;
					margin-right: 16rpx;
					margin-bottom: 20rpx;
				}
			}

			.header-top {
				padding: 28rpx 0;

				.top-right {
					text:first-child {
						font-size: 40rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #222222;
						margin-bottom: 12rpx;
					}

					text:nth-child(2) {
						font-size: 26rpx;
						font-family: SFPro-Regular, SFPro;
						font-weight: 400;
						color: #555555;
					}
				}

				.gongsi-logo {
					width: 120rpx;
					height: 120rpx;
					border-radius: 12rpx;
					border: 2rpx solid rgba(151, 151, 151, 0.7);
					margin-right: 20rpx;
				}
			}
		}

		.gongsi-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 750rpx;
			height: 396rpx;
			z-index: -1;
		}
	}
</style>