yizhizan-h5/pages/my/jobPosting.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="0"></u-steps>
				</view>

				<view class="check-title-big">招聘模式</view>
				<view class="check-select radioseletvi">
					<radio-group @change="onRadioChange">
						<view class="select-txt radioseletview">
							<label class="radio radioselet">
								<radio value="0" :checked="true" class="radio-size" />普通岗位招聘
							</label>
							<label class="radio radioselet">
								<radio value="1" class="radio-size" />急聘
							</label>
							<text
								style="position: absolute;right: 0;bottom: 18px;font-size: 12px;color: rgba(120, 130, 138, 1);">急聘职位剩余{{vipDueTimes}}个</text>
						</view>
					</radio-group>

				</view>


				<view class="check-title">招聘类型</view>
				<view class="check-box">
					<view class="check-item" :class="{ 'is-check': check == index }" v-for="(item, index) in peopleList"
						:key="index" @click="checkPeople(index)">{{ item }}</view>
				</view>
				<view class="check-title-big">招聘职位</view>
				<view class="check-select" @click="goJob">
					<view class="select-txt">{{jobInfo.ruleClassifyName}}</view>
					<u-icon name="arrow-down" color="#D3D3D6" size="22"></u-icon>
				</view>
				<view class="check-title-big">岗位描述</view>
				<view class="check-select" @click="goJobContent">
					<view class="select-txt">{{this.text ? this.text : "介绍工作内容、职位要求" }}</view>
					<u-icon name="arrow-down" color="#D3D3D6" size="22"></u-icon>
				</view>
				<view class="txt-desc">注：职位名称、职位类型等发布后不可修改</view>
			</view>
		</view>
		<view class="submit-btn" @click="goJobPostingSecond">下一步</view>
	</view>
</template>
<script>
	import navBar from "@/components/nav-bar/index.vue";
	export default {
		data() {
			return {
				selectedValue: 0, // 默认选中值
				peopleList: ["社招全职", "应届生校园招聘", "实习生招聘", "兼职招聘"],
				check: 0,
				isCompanyVip: 0,
				vipDueTimes: 0,
				vipPostTimes: 0,
				text: "",
				status: "",
				companyName: "",
				companyId: "",
				numList: [{
						name: "填写基本信息",
					},
					{
						name: "选择职位要求",
					},
				],
				jobInfo: {
					ruleClassifyId: '',
					ruleClassifyName: '请选择要招聘的职位',
					price: ''
				}
			};
		},
		components: {
			navBar,
		},

		onLoad(options) {
			// 接收上个页面传递的公司名称参数
			if (options.companyName) {
				this.companyName = decodeURIComponent(options.companyName);
			}else{
				this.companyName = uni.getStorageSync('companyName')
			}
			this.descListener = uni.$on("jobDescUpdated", (data) => {
				this.text = data.desc; // 赋值给当前页变量
			});
			this.jobListener = uni.$on('jobs', (data) => {
				console.log('接收从B页传来的数据：', data);
				// 手动更新 A 页的 data
				this.jobInfo = data;
			});
			if (options.companyId) {
				this.companyId = options.companyId;
			}else{
				this.companyId = uni.getStorageSync('companyId')
			}
			if (options.status) {
				this.status = options.status;
			}else{
				this.status = uni.getStorageSync('companyStatus')
			}
			this.isCompanyVip = uni.getStorageSync('isCompanyVip') || 0
			this.vipDueTimes = uni.getStorageSync('vipDueTimes') || 0
			this.vipPostTimes = uni.getStorageSync('vipPostTimes') || 0
			
			
			console.log('接收的公司名称：', this.companyName);
			console.log("收到岗位描述数据：", this.text);
			console.log('接收的公司ID：', this.companyId);
			console.log('接收的公司状态：', this.status);

		},
		onUnload() {
			// 页面卸载时移除监听，避免内存泄漏
			uni.$off('jobs', this.jobListener);
		},
		methods: {
			goBusinessLicense() {
				uni.navigateTo({
					url: "/pages/my/businessLicense"
				});
			},
			checkPeople(index) {
				this.check = index;
			},
			goJob() {
				uni.navigateTo({
					url: "/package/jobIntention/jobList",
				});
			},
			goJobContent() {
				uni.navigateTo({
					url: `/package/jobIntention/editJob`,
				});
			},
			//radio 选中变化时触发
			onRadioChange(e) {
				// 获取选中的值


				// 根据值做不同处理
				if (this.selectedValue === 0) {
					console.log('选中了：普通岗位招聘');
					// 执行普通岗位招聘的逻辑
				} else if (this.selectedValue === 1) {
					console.log('选中了：急聘');
					if (!this.isCompanyVip) {
						uni.showToast({
							title: '对不起，您还不是会员，不能发布急聘。',
							icon: 'none',
							duration: 2000
						});
						return
					}
					if (this.vipDueTimes < 1) {
						uni.showToast({
							title: '对不起，您的次数已经用完，不能发布。',
							icon: 'none',
							duration: 2000
						});
						return
					}

					// 执行急聘的逻辑
				}
				this.selectedValue = e.detail.value;


			},

			//提交
			goJobPostingSecond() {

				// 显示加载中
				uni.showLoading({
					title: '提交中...'
				});

				//校验数据

				// 校验数据
				const validate = () => {

					// 2. 校验岗位描述（positionDetails）
					if (!this.text || this.text.trim() === '') {
						uni.hideLoading();
						uni.showToast({
							title: '岗位描述不能为空',
							icon: 'none',
							duration: 2000
						});
						return false;
					}
					if (this.text.length > 500) {
						uni.hideLoading();
						uni.showToast({
							title: '岗位描述不能超过500字',
							icon: 'none',
							duration: 2000
						});
						return false;
					}
					// 校验是否包含违规内容（简单示例，可根据实际需求扩展）
					const illegalChars = /QQ|微信|电话|手机号|\?/g;
					if (illegalChars.test(this.text)) {
						uni.hideLoading();
						uni.showToast({
							title: '岗位描述不能包含联系方式或特殊符号',
							icon: 'none',
							duration: 2000
						});
						return false;
					}

					// 3. 校验岗位分类信息（假设ruleClassifyId是必选）
					if (!this.jobInfo?.ruleClassifyId) {
						uni.hideLoading();
						uni.showToast({
							title: '请选择岗位分类',
							icon: 'none',
							duration: 2000
						});
						return false;
					}
					if (!this.jobInfo?.ruleClassifyName || this.jobInfo?.ruleClassifyName == '请选择要招聘的职位') {
						uni.hideLoading();
						uni.showToast({
							title: '岗位分类名称异常，请重新选择',
							icon: 'none',
							duration: 2000
						});
						return false;
					}

					// 4. 校验orderId（如果有实际业务含义，可根据需求调整）
					// if (!this.orderId || this.orderId < 1) {
					//   uni.hideLoading();
					//   uni.showToast({
					//     title: '订单信息异常',
					//     icon: 'none',
					//     duration: 2000
					//   });
					//   return false;
					// }

					// 所有校验通过
					return true;
				};

				// 执行校验，通过后再提交
				if (!validate()) {
					return; // 校验失败，终止提交
				}


				if (this.selectedValue == 1) {//急聘刚
					if (!this.isCompanyVip) {
						uni.showToast({
							title: '对不起，您还不是会员，不能发布急聘。',
							icon: 'none',
							duration: 2000
						});
						return
					}
					if (this.vipDueTimes < 1) {
						uni.showToast({
							title: '对不起，您的次数已经用完，不能发布。',
							icon: 'none',
							duration: 2000
						});
						return
					}
				}


				const data = {
					type: this.check,
					isDue: this.selectedValue,
					positionDetails: this.text,
					ruleClassifyId: this.jobInfo.ruleClassifyId,
					ruleClassifyName: this.jobInfo.ruleClassifyName,
					orderId: 1
				}

				// 发送请求
				this.$Request.postJson("/app/postPush/savePostPush", data)
					.then((res) => {
						uni.hideLoading();

						if (res.code === 0) {
							uni.showToast({
								title: '提交成功',
								icon: 'success'
							});
							console.log("sssssss", this.companyId)
							var pid = res.data || ""
							if (!pid) {
								uni.showToast({
									title: '系统错误，请重新提交',
									icon: 'none'
								});
								return
							}
							// 提交成功后跳转到职位发布页面
							setTimeout(() => {
								uni.navigateTo({
									url: "/pages/my/jobPostingSecond?pid=" + pid + "&status=" + this
										.status + "&companyName=" + this.companyName + '&companyId=' +
										this.companyId
								});
							}, 1500);
						} 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: hidden;
			overflow-y: auto;

			.content {
				padding: 40rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.title {
					color: #333;
					width: 100%;
					font-family: DM Sans;
					font-size: 40rpx;
					font-weight: 600;
				}

				.desc {
					color: rgba(102, 102, 102, 1);
					width: 100%;
					font-family: DM Sans;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 32rpx;
					letter-spacing: 0.5%;
					text-align: left;
					padding: 20rpx 0;
					box-sizing: border-box;
				}

				.check-title {
					width: 100%;
					color: rgba(31, 44, 55, 1);
					font-family: DM Sans;
					font-size: 28rpx;
					font-weight: 500;
					line-height: 44rpx;
					margin-top: 20rpx;
					margin-bottom: 16rpx;
				}

				.check-title-big {
					color: rgba(58, 57, 67, 1);
					font-family: DM Sans;
					font-size: 36rpx;
					font-weight: 500;
					line-height: 48rpx;
					width: 100%;
					padding: 20rpx 0;
					box-sizing: border-box;
				}

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

					.select-txt {}
				}

				.radioseletvi {
					position: relative;
				}

				.radioseletview {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					font-size: 14px;
				}

				.radioselet {
					display: block;
					margin-top: 10px;
				}

				.radio-size {
					transform: scale(0.5);
					/* 放大到1.5倍，可根据需要调整数值 */
					/* 可选：调整位置避免偏移 */
				}




				.check-box {
					width: 100%;
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					gap: 24rpx;

					.check-item {
						border-radius: 16rpx;
						background: rgba(245, 248, 254, 1);
						color: rgba(153, 153, 153, 1);
						font-family: DM Sans;
						font-size: 28rpx;
						font-weight: 400;
						line-height: 44rpx;
						text-align: center;
						padding: 12rpx 48rpx;
						box-sizing: border-box;
					}

					.is-check {
						box-sizing: border-box;
						border: 1rpx solid #016bf6;
						border-radius: 16rpx;
						background: rgba(252, 233, 220, 1);
						color: #016bf6;
					}
				}
			}
		}

		.step {
			width: 100%;
			padding: 32rpx 0;
			box-sizing: border-box;
		}

		.submit-btn {
			flex-shrink: 0;
			border-radius: 999px;
			box-shadow: 0px 2px 4px 0px rgba(9, 196, 116, 0.3);
			background: linear-gradient(90deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
			color: rgba(255, 255, 255, 1);
			font-family: DM Sans;
			font-size: 32rpx;
			font-weight: 400;
			line-height: 48rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 16rpx 32rpx;
			box-sizing: border-box;
			margin: 60rpx 20rpx;
		}

		.txt-desc {
			color: rgba(102, 102, 102, 1);
			font-family: DM Sans;
			font-size: 24rpx;
			font-weight: 400;
			line-height: 32rpx;
			text-align: left;
			width: 100%;
			margin-top: 20rpx;
		}
	}
</style>