hire-wx-houxuanren/pagesB/general.vue

<template>
	<view class="index-page">
		<view class="index-navbar">
			<view style="position: relative;height: 392rpx;">
				<image class="index-bg" src="../static/images/index-header.png" mode=""></image>
				<u-navbar :fixed="false" bgColor='rgba(0,0,0,0)' placeholder :safeAreaInsetTop="true"
					@leftClick="return1"></u-navbar>
				<view class="header">
					<image style="width: 104rpx;height: 104rpx;" :src="detail.school.logo" mode=""></image>
					<view class="font">
						<text class="title">{{detail.school.name}}{{detail.title}}</text>
						<text
							class="active">活动时间：{{(detail.start_time).replaceAll('-','.')}}-{{(detail.end_time).replaceAll("-",".").slice(-5)}}</text>
					</view>
				</view>
				<view class="u-flex" style="box-sizing: border-box; padding: 18rpx 24rpx;height: 70rpx;">
					<view class="u-flex" @click="showcity = true">
						<text class="font1" style="margin-right: 14rpx;">{{city_name|| '工作城市'}}</text>
						<u-icon name="arrow-down-fill" size="8"></u-icon>
					</view>
					<!-- 					<view class="u-flex" style="margin-left: 54rpx;">
						<text class="font1" style="margin-right: 14rpx;">职位类型</text>
						<u-icon name="arrow-down-fill" size="8"></u-icon>
					</view> -->
				</view>
			</view>
			<view class="contant">
				<view class="list" @click="togongsi(item.id)" v-for="(item,index) in company_list" :key="item.id">
					<view class="u-flex u-row-between">
						<view class="title">
							<text class="title">{{item.company.name}}</text>
							<text class="jianjie">{{item.company.categoryindustry.name}} {{item.company.stage.name}}
								{{item.company.scale.name}}</text>
						</view>
						<image style="width: 93rpx;height: 92rpx;" :src="item.company.logo" mode=""></image>
					</view>
					<view class="bottom">
						<view class="u-flex" style="margin-top: 18rpx;">
							<image style="width: 28rpx;height: 28rpx;" src="../static/images/address.png" mode="">
							</image>
							<text class="font" v-for="(city,cityindex) in item.city.slice(0,2)"
								:key="city.apply.id">{{city.city}}</text>
							<text class="font" v-if="item.city.length == 1">{{item.city.length}}个城市</text>
							<text class="font" v-else>等{{item.city.length}}个城市</text>
						</view>
						<view class="u-flex" style="margin-top: 32rpx;">
							<image style="width: 28rpx;height: 28rpx;" src="../static/images/woek.png" mode=""></image>
							<text class="font" v-for="(job,index) in item.activityjobinfo.slice(0,2)"
								:key="job.apply.id">{{job.job_name}}</text>
							<text class="font"
								v-if="item.activityjobinfo.length == 1">{{item.activityjobinfo.length}}个岗位</text>
							<text class="font" v-else>等{{item.activityjobinfo.length}}个岗位</text>
						</view>
					</view>
				</view>
			</view>
			<view style="height: 70vh;display: flex;justify-content: center;align-items: center;"
				v-if="company_list.length == 0">
				<u-empty text="暂无数据" mode="list"></u-empty>
			</view>
			<u-picker :columns="cityList" ref="uPicker" :show="showcity" keyName="name" @confirm="changecity"
				@change="changeHandler" @cancel="showcity = false"></u-picker>
		</view>
	</view>
</template>

<script>
	import {
		get_detail,
		get_company_list,
		getAllArea
	} from "@/units/inquire.js"
	export default {
		data() {
			return {
				showcity: 0,
				id: '',
				detail: {
					start_time: "",
					end_time: ""
				},
				job_id: "",
				city_id: '',
				company_list: [],
				city_name: '',
				cityList:[]
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getdetail()
			this.getcompanylist()
			this.getAllArea()
		},
		onReachBottom() {

		},
		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
				// 		}
				// 	}))
				// }
			},
			changecity(e) {
				console.log(e);
				let a = e.value[0].name + e.value[1].name
				let ids = String(e.value[0].id) + String(e.value[1].id)
				this.showcity = false
				this.city_id = e.value[1].id
				this.city_name = e.value[1].name
				this.getcompanylist()
			},
			getAllArea() {
				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]
				})
			},
			getcompanylist() {
				get_company_list({
					id: this.id,
					category_job_id: this.job_id,
					city_id: this.city_id
				}).then(res => {
					this.company_list = res.data
				})
			},
			return1() {
				uni.navigateBack()
			},
			togongsi(id) {
				uni.navigateTo({
					url: "/pagesB/general-info?id=" + id
				})
			},
			getdetail() {
				get_detail({
					id: this.id
				}).then(res => {
					this.detail = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {}

	.index-page {
		background-color: #F3F3F3;
		min-height: 100vh;

		.contant {
			background: #F3F3F3;
			height: 100%;
			padding: 0 24rpx;

			.title {
				.title {
					font-size: 34rpx;
					font-family: SFPro-Medium, SFPro;
					font-weight: 500;
					color: #222222;
					display: block;
				}

				.jianjie {
					font-size: 24rpx;
					font-family: SFPro-Regular, SFPro;
					font-weight: 400;
					color: #555555;
					display: block;
					margin-top: 10rpx;
				}

			}

			.list {
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 28rpx;
				margin-top: 20rpx;
			}

			.bottom {
				margin-top: 32rpx;
				border-top: 2rpx solid #F3F3F3;

				.font {
					margin-left: 14rpx;
					font-size: 24rpx;
					font-family: SFPro-Regular, SFPro;
					font-weight: 400;
					color: #888888;
				}
			}
		}

		.font1 {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #1A1C24;
		}

		.header {
			height: 144rpx;
			border-bottom: 2rpx solid #F3F3F3;
			padding: 20rpx 24rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;



			.font {
				margin-left: 16rpx;

				.title {
					width: 534rpx;
					height: 44rpx;
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #1A1C24;
					line-height: 44rpx;
					display: block;
				}

				.active {
					height: 34rpx;
					font-size: 24rpx;
					font-family: SFPro-Regular, SFPro;
					font-weight: 400;
					color: #444444;
					line-height: 28rpx;
					display: block;
					margin-top: 18rpx;
				}
			}
		}

		.index-navbar {
			position: sticky;
			top: 0;
			left: 0;
			width: 750rpx;
			z-index: 100;

			.header-down {
				height: 92rpx;
				padding: 20rpx 24rpx;
				box-sizing: border-box;

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

				.right-item {
					padding: 0 16rpx;
					height: 52rpx;
					background: #F3F3F3;
					border-radius: 4rpx;
					margin-left: 20rpx;

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

				.down-left {
					.text {
						margin-right: 4rpx;
						font-size: 26rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #222222;
					}
				}
			}

			.index-bg {
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
				width: 750rpx;
				height: 392rpx;
			}
		}

		.index-header {
			flex: 1;
			padding: 0 32rpx;
			height: 50rpx;

			.index-search {
				width: 200rpx;
				height: 64rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 0 28rpx;

				.text1 {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					margin-left: 16rpx;
				}
			}

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

				text:last-child {
					width: 76rpx;
					height: 12rpx;
					background: linear-gradient(270deg, #208EFF 0%, rgba(28, 159, 227, 0) 100%);
					margin-top: -20rpx;
					border-radius: 100rpx;
				}
			}
		}
	}

	::v-deep .u-navbar__content__left {
		padding: 0 !important;
	}

	::v-deep .u-icon__icon {
		margin-left: 11rpx !important;
	}
</style>