yizhizan-h5/pages/my/jobPostingSecond.vue

<template>
	<view class="switch-roles">
		<nav-bar title="选择职位要求" color="#000"></nav-bar>
		<view class="roles-content">
			<view class="content">
				<view class="title">继续填写</view>
				<view class="desc">“{{companyName}}”的职位要求</view>
				<view class="step">
					<u-steps :list="numList" mode="number" :current="2"></u-steps>
				</view>

				<!-- 经验要求 -->
				<view class="check-title-big">经验要求</view>
				<view class="check-select" @click="showExper = true">
					<view class="select-txt">{{ selectedExper || "请选择经验要求" }}</view>
					<u-icon name="arrow-down" color="#D3D3D6" size="22"></u-icon>
				</view>

				<!-- 最低学历 -->
				<view class="check-title-big">最低学历</view>
				<view class="check-select" @click="showLevel = true">
					<view class="select-txt">{{ selectedLevel || "请选择学历" }}</view>
					<u-icon name="arrow-down" color="#D3D3D6" size="22"></u-icon>
				</view>

				<!-- 薪资范围 -->
				<view class="check-title-big">薪资范围</view>
				<view class="check-select" @click="showMoney = true">
					<view class="select-txt">{{ selectedSalary || "请选择合理的薪资范围" }}</view>
					<u-icon name="arrow-down" color="#D3D3D6" size="22"></u-icon>
				</view>

				<!-- 福利待遇 -->
				<view class="check-title-big">福利待遇（选填）</view>
				<view class="check-select" @click="goFund">
					<view class="select-txt">{{ welfareTag || "请填写奖金绩效" }}</view>
					<u-icon name="arrow-down" color="#D3D3D6" size="22"></u-icon>
				</view>

				<!-- 职位关键词 -->
				<view class="check-title-big">职位关键词</view>
				<view class="check-select" @click="goJobSkill">
					<view class="select-txt">{{ positionTag || "被选中的关键词将突出展示给牛人" }}</view>
					<u-icon name="arrow-down" color="#D3D3D6" size="22"></u-icon>
				</view>

				<!-- 工作地址 -->
				<view class="check-title-big">工作地址</view>
				<view class="check-select" @click="goAddAddress">
					<view class="select-txt">{{ stationName.fullText || "请填写精确的工作地点" }}</view>
					<u-icon name="arrow-down" color="#D3D3D6" size="22"></u-icon>
				</view>

				<view class="txt-desc">
					温馨提示：职位类型、职位名称和工作城市发布后不可修改，请您确保信息正确 <br /><br />
					发布职位即表示同意遵守《招聘行为管理规范》，如违反规则将导致账号被锁定
				</view>
			</view>
		</view>

		<view class="submit-btn" @click="submitPost">确定</view>

		<!-- 经验选择器 -->
		<u-select v-model="showExper" :list="listExper" title="请选择经验" @confirm="onExperConfirm"
			@cancel="showExper = false"></u-select>

		<!-- 学历选择器 -->
		<u-select v-model="showLevel" :list="listLevel" title="请选择学历" @confirm="onLevelConfirm"
			@cancel="showLevel = false"></u-select>

		<!-- 薪资选择器 -->
		<u-select v-model="showMoney" mode="mutil-column" :list="listMoney" title="请选择月薪范围" @confirm="onMoneyConfirm"
			@cancel="showMoney = false"></u-select>
	</view>
</template>

<script>
	import navBar from "@/components/nav-bar/index.vue";
	export default {
		data() {
			return {
				// 选中值（用于页面渲染）
				selectedExper: "", // 经验
				selectedLevel: "", // 学历
				selectedSalary: "", // 薪资范围
				welfareTag: "", // 福利待遇
				positionTag: "", // 职位关键词
				stationName: "",
				companyName: "",
				companyId: "",
				status: 1,

				// 选择器显示控制
				showExper: false,
				showLevel: false,
				showMoney: false,

				// 经验选择数据源
				listExper: [{
						label: "不限",
						value: "不限"
					},
					{
						label: "1年以内",
						value: "1年以内"
					},
					{
						label: "1-3年",
						value: "1-3年"
					},
					{
						label: "3-5年",
						value: "3-5年"
					},
					{
						label: "5-10年",
						value: "5-10年"
					},
					{
						label: "10年以上",
						value: "10年以上"
					},
				],

				// 学历选择数据源
				listLevel: [{
						label: "不限",
						value: "不限"
					},
					{
						label: "专科",
						value: "专科"
					},
					{
						label: "本科",
						value: "本科"
					},
					{
						label: "硕士",
						value: "硕士"
					},
					{
						label: "博士",
						value: "博士"
					},
				],

				// 薪资选择数据源（修正格式）
				listMoney: [
					[{
							value: "3k",
							label: "3k"
						},
						{
							value: "4k",
							label: "4k"
						},
						{
							value: "5k",
							label: "5k"
						},
						{
							value: "6k",
							label: "6k"
						},
						{
							value: "10k",
							label: "10k"
						},
						{
							value: "15k",
							label: "15k"
						},
						{
							value: "20k",
							label: "20k"
						},
					],
					[{
							value: "10k",
							label: "10k"
						},
						{
							value: "15k",
							label: "15k"
						},
						{
							value: "20k",
							label: "20k"
						},
						{
							value: "30k",
							label: "30k"
						},
						{
							value: "50k",
							label: "50k"
						},
						{
							value: "100k",
							label: "100k"
						},
					],
				],

				numList: [{
						name: "填写基本信息"
					},
					{
						name: "选择职位要求"
					},
				],
			};
		},
		components: {
			navBar,
		},
		onLoad(options) {
			// 接收上个页面传递的公司名称参数
			if (options.companyName) {
				this.companyName = decodeURIComponent(options.companyName);
				console.log('接收的公司名称：', this.companyName);
			}
			if (options.status) {
				this.status = decodeURIComponent(options.status);
				console.log('接收的公司状态：', this.status);
			}
			this.fundListener = uni.$on("fundData", (data) => {
				console.log("接收到的福利数据：", data);
				this.welfareTag = data; // 赋值给当前页面变量
			});
			this.fundListener = uni.$on("skillsUpdated", (data) => {
				console.log("接收到的职位技能数据：", data);
				this.positionTag = data.selectedTags; // 赋值给当前页面变量
			});
			this.fundListener = uni.$on("addressData", (data) => {
				console.log("接收到的地址数据：", data);
				this.stationName = data; // 赋值给当前页面变量
			});
			if (options.companyId) {
				this.companyId = options.companyId;
				console.log('接收的公司ID：', this.companyId);
			}else{
				this.companyId = uni.getStorageSync('companyId') || ""
			}

		},
		onUnload() {
			// 页面关闭时移除监听，避免内存泄漏
			if (this.fundListener) {
				uni.$off("fundData", this.fundListener);
			}
		},
		methods: {
			// 处理经验选择（核心修复：直接接收选中的label）
			onExperConfirm(selectedItem) {
				// 不同版本u-select返回格式可能是对象或数组，这里兼容处理
				if (Array.isArray(selectedItem)) {
					this.selectedExper = selectedItem[0]?.label || "";
				} else {
					this.selectedExper = selectedItem?.label || "";
				}
				this.showExper = false; // 关闭选择器
			},

			// 处理学历选择（核心修复）
			onLevelConfirm(selectedItem) {
				if (Array.isArray(selectedItem)) {
					this.selectedLevel = selectedItem[0]?.label || "";
				} else {
					this.selectedLevel = selectedItem?.label || "";
				}
				this.showLevel = false;
			},

			// 处理薪资范围选择（核心修复）
			onMoneyConfirm(selectedItems) {
				// 多列选择器返回数组，取每列选中的label拼接
				if (Array.isArray(selectedItems) && selectedItems.length >= 2) {
					const min = selectedItems[0]?.label || "";
					const max = selectedItems[1]?.label || "";
					this.selectedSalary = `${min}-${max}`;
				}
				this.showMoney = false;
			},

			// 跳转页面并接收参数（福利待遇）
			goFund() {
				uni.navigateTo({
					url: "/package/jobIntention/fund",
					events: {
						// 监听子页面发送的福利数据
						fundData: (data) => {
							this.welfareTag = data;
						},
					},
				});
			},

			// 跳转页面并接收参数（职位关键词）
			goJobSkill() {
				uni.navigateTo({
					url: "/package/jobIntention/jobSkills",
					events: {
						skillsUpdated: (data) => {
							this.positionTag = data.selectedTags;
						},
					},
				});
			},

			// 跳转页面并接收参数（工作地址）
			goAddAddress() {
				uni.navigateTo({
					url: "/package/jobIntention/addAddress",
					events: {
						addressData: (data) => {
							this.stationName = data;
						},
					},
				});
			},

			// 提交表单
			submitPost() {
				// 验证必填项
				if (!this.selectedExper) {
					return uni.showToast({
						title: "请选择经验要求",
						icon: "none"
					});
				}
				if (!this.selectedLevel) {
					return uni.showToast({
						title: "请选择最低学历",
						icon: "none"
					});
				}
				if (!this.selectedSalary) {
					return uni.showToast({
						title: "请选择薪资范围",
						icon: "none"
					});
				}
				if (!this.stationName.fullText) {
					return uni.showToast({
						title: "请填写工作地址",
						icon: "none"
					});
				}
				var positionTag = this.positionTag
				const str = positionTag.join(',');
				// 构造提交数据
				const data = {
					experience: this.selectedExper, //工作经验
					education: this.selectedLevel, //学历
					salaryRange: this.selectedSalary, //薪资范围
					welfareTag: this.welfareTag, //福利相关标签
					positionTag: str, //职位技能
					address: this.stationName.fullText, //地址
					lat: this.stationName.latitude,
					lng: this.stationName.longitude,
					province: this.stationName.province,
					city: this.stationName.city,
					county: this.stationName.district
				};

				// 调用接口提交
				uni.showLoading({
					title: "提交中..."
				});
				this.$Request.postJson("/app/postPush/savePostPush", data)
					.then((res) => {
						uni.hideLoading();
						if (res.code === 0) {
							uni.showToast({
								title: "提交成功",
								icon: "success"
							});
							//这里要选择跳转，第一次是要跳公司页，如果是二次就到职位管理页
							if (this.status == 1) { //审核中
								uni.navigateTo({
									url: "/package/jobIntention/company?companyName=" + this.companyName +
										'&companyId=' + this.companyId
								});
							} else {
								uni.navigateTo({
									url: '/pages/jobManagement/jobManagement'
								})
							}



						} else {
							uni.showToast({
								title: res.msg || "提交失败",
								icon: "none"
							});
						}
					})
					.catch((err) => {
						uni.hideLoading();
						console.error("提交失败：", err);
						uni.showToast({
							title: "网络异常",
							icon: "none"
						});
					});
			},
		},
	};
</script>

<style lang="scss" scoped>
	/* 原有样式保持不变 */
	.switch-roles {
		background-color: #fff;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;

		.roles-content {
			width: 100%;
			flex: 1;
			overflow: auto;

			.content {
				padding: 40rpx;

				.title {
					color: #333;
					font-size: 40rpx;
					font-weight: 600;
					margin-bottom: 10rpx;
				}

				.desc {
					color: #666;
					font-size: 24rpx;
					margin-bottom: 20rpx;
				}

				.check-title-big {
					color: #3a3943;
					font-size: 36rpx;
					font-weight: 500;
					padding: 20rpx 0;
				}

				.check-select {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 32rpx 47rpx;
					border-radius: 12rpx;
					box-shadow: 0 16rpx 300rpx rgba(0, 0, 0, 0.06);
					background: #fff;
					margin-bottom: 20rpx;

					.select-txt {
						color: #999;
						font-size: 28rpx;
					}
				}

				.txt-desc {
					color: #666;
					font-size: 24rpx;
					margin-top: 20rpx;
					line-height: 1.5;
				}
			}
		}

		.step {
			padding: 32rpx 0;
		}

		.submit-btn {
			margin: 60rpx 20rpx;
			padding: 16rpx 32rpx;
			border-radius: 999px;
			background: linear-gradient(90deg, #0d27f7, #13c1ea);
			color: #fff;
			font-size: 32rpx;
			text-align: center;
			line-height: 48rpx;
		}
	}
</style>