yizhizan-h5/pages/my/jobPosting.vue

<template>
	<view class="switch-roles">
		<nav-bar title="发布职位" color="#000" :isBack="isBack"></nav-bar>
		<view class="roles-content">
			<view class="content">
				<view class="title">{{ isDisabled ? '编辑【' + jobInfo.ruleClassifyName + '】' : '发布社招' }}岗位</view>
				<view class="desc">{{ companyName }}</view>
				<!-- <view class="step">
					<u-steps :list="numList" mode="number" :current="0"></u-steps>
				</view> -->
				<view class="step-progress flex align-center">
					<view class="circle-wrapper">
						<view class="check-icon check-active">
							<u-icon name="checkbox-mark" color="#fff" size="20"></u-icon>
						</view>
						<view class="step-progress-text">填写基本信息</view>
					</view>
					<view class="line blue"></view>
					<view class="line"></view>
					<view class="circle-wrapper">
						<view class="check-icon">
							<u-icon name="checkbox-mark" color="#fff" size="20"></u-icon>
						</view>
						<view class="step-progress-text">填写岗位要求</view>
					</view>
				</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 flex align-center">
								<radio value="0" :checked="true" class="radio-size" :disabled="isDisabled" />普通岗位招聘
								<text style="font-size: 13px;color: rgba(120, 130, 138, 1);position: absolute;right: 0">
									普通岗位剩余{{lastPostTimes }}个
								</text>
							</label>
							
							<label class="radio radioselet flex align-center">
								<radio value="1" class="radio-size" :disabled="isDisabled" />急聘
								<text style="font-size: 13px;color: rgba(120, 130, 138, 1);position: absolute;right: 0">
									急聘职位剩余{{lastDueTimes }}个
								</text>
							</label>
							
						</view>
					</radio-group>

				</view>


				<!-- <view class="check-title">招聘类型</view>
				<view class="check-box" :class="{ disabled: isDisabled }">
					<view class="check-item" :class="{ 'is-check': check == index }" v-for="(item, index) in peopleList"
						:key="index" @click="!isDisabled && checkPeople(index)">{{ item }}</view>
				</view> -->
				<view class="check-title-big">招聘职位</view>
				<view class="check-select" @click="!isDisabledid && goJob()" :class="{ disabled: isDisabledid }">
					<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-sub-title">招聘岗位、招聘类型等发布后不可修改</view>
				<view class="job-desc-wrapper">
					<view class="placeholder" v-if="!text">
						<view class="placeholder-text">请勿填写QQ、微信、电话等联系方式及特殊符号，性别歧视词、违反劳动法相关内容，否则有可能导致账号封禁。</view>
						<view class="placeholder-text">1. 工作内容</view>
						<view class="placeholder-text">2. 任务要求</view>
						<view class="placeholder-text">3. 特别说明</view>
					</view>
					<textarea type="text" v-model="text" maxlength="2000" class="job-desc-input" />
				</view>
				<!-- <view class="check-select" @click="goJobContent">
				    <view class="select-txt" v-if="textList.length > 0">
				      <view v-for="(item, index) in textList" :key="index">
				        {{ item }}
				      </view>
				    </view>
					<view class="select-txt" v-else>介绍工作内容、职位要求</view>
				    <u-icon name="arrow-down" color="#D3D3D6" size="22"></u-icon>
				  </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="button-section">
			<view class="link-btn" v-if="showNotPushBtn" @click="handleToIndex">稍后发布</view>
			<view class="submit-btn" :class="{ 'active-btn': canNext }" @click="goJobPostingSecond">下一步</view>
		</view>
		
		<c-modal
			:value="showTipModal"
			title="温馨提示"
			:show-cancel-button="false"
			confirm-button-text="我知道了"
			@confirm="showTipModal = false"
		>
			<view>发布提交后需要企业管理员认证账号，</view>
			<view>岗位将会在1-3个工作日审核</view>
		</c-modal>
	</view>
</template>
<script>
import navBar from "@/components/nav-bar/index.vue";
import cModal from '@/components/c-modal.vue'
export default {
	data() {
		return {
			selectedValue: 0, // 默认选中值
			peopleList: ["社招全职", "应届生校园招聘", "实习生招聘", "兼职招聘"],
			check: 0,
			isDisabled: false,
			isDisabledid: false,
			isCompanyVip: 0,
			postPushId: "",
			update: "",
			vipPostTimes: 0,
			text: "",
			textList: [],
			status: "",
			companyName: "",
			companyId: "",
			isBack: true,
			numList: [{
				name: "填写基本信息",
			},
			{
				name: "选择职位要求",
			},
			],
			jobInfo: {
				ruleClassifyId: '',
				ruleClassifyName: '请选择要招聘的职位',
				price: ''
			},
			lastDueTimes:0,
			lastPostTimes:0,
			companyAddressInfo:{
				address:'',
				fullText:'',
				latitude:'',
				longitude:'',
				province:'',
				city:'',
				district:'',
			},
			remainingPostionCount: 0, // 剩余岗位数量
			showTipModal: false,
			isAdmin: true,
			companyInfo: {}
		};
	},
	components: {
		navBar,
		cModal
	},
	computed: {
		// 判断是否可以点击下一步
		canNext() {
			if (this.jobInfo.ruleClassifyId && this.text && this.remainingPostionCount) {
				return true
			}
			return false
		},
		
		// 显示稍后发布按钮
		showNotPushBtn() {
			// 显示条件
			// 1. 企业是待审核状态
			// 2. 员工申请加入是待审核状态
			let adminStatus = this.isAdmin && this.status != 2
			let employeeStatus = !this.isAdmin && this.companyInfo?.companyUser?.status == 1
			if (adminStatus || employeeStatus) {
				return true
			}
			return false
		}
	},

	onLoad(options) {
		if (options.isBack == 'false') {

			this.isBack = false;
		}
		// 接收上个页面传递的公司名称参数
		if (options.postPushId) {
			this.postPushId = options.postPushId
			this.getInfo()
		}
		if (options.type) {
			this.update = decodeURIComponent(options.type);
			this.isDisabled = true;
		}
		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.textList = this.text.split('\n').filter(i => i.trim());
		});

		this.onJobEvent = (data) => {
			console.log('接收从B页传来的数据：', data)
			this.jobInfo = data
		}
		uni.$on('jobs', this.onJobEvent)

		if (options.companyId) {
			this.companyId = options.companyId;
		}
		else {
			this.companyId = uni.getStorageSync('companyId')
		}
		if (options.status) {
			this.status = options.status;
		}
		this.isCompanyVip = uni.getStorageSync('isCompanyVip') || 0
		this.vipPostTimes = uni.getStorageSync('vipPostTimes') || 0

		this.getVipData();
		console.log('接收的公司名称：', this.companyName);
		console.log("收到岗位描述数据：", this.text);
		console.log('接收的公司ID：', this.companyId);
		console.log('接收的公司状态：', this.status);
		this.getAddress();
		this.getcompanystatus();
	},
	onUnload() {
		// 页面卸载时移除监听，避免内存泄漏
		uni.$off('jobs', this.onJobEvent);
	},
	methods: {
		// 获取公司地址
		getAddress(){
			let data = {
			  status: '',
			  page: 1,
			  limit: 10,
			  companyId: this.companyId
			}
			this.$Request.getT('/app/postPush/getMyPostPush', data).then(res => {
				if (res.code == 0) {
					if(res.data && res.data.records.length > 0){
						this.companyAddressInfo = {
							address:res.data.records[0].address,
							fullText:res.data.records[0].address,
							latitude:res.data.records[0].lat,
							longitude:res.data.records[0].lng,
							province:res.data.records[0].province,
							city:res.data.records[0].city,
							district:res.data.records[0].county
						}
					}
				}
			}).catch(err => {
			  
			})
		},
		getVipData(){
			this.$Request.get("/app/user/vipData").then((res) => {
				if (res.code == 0) {
					this.lastDueTimes = res.data.lastDueTimes || 0;
					this.lastPostTimes = res.data.lastPostTimes || 0;
					this.remainingPostionCount = Number(res.data.lastDueTimes || 0) + Number(res.data.lastPostTimes || 0)
					if (!this.remainingPostionCount) {
						this.showTipModal = true
					}
				}
			})
		},
		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?text=${this.text}`,
			});
		},

		/**
		 * 获取岗位详情
		 */
		getInfo() {
			this.$Request.getT("/app/postPush/selectPostPushDetails", {
				// userId:uni.getStorageSync('userId'),
				postPushId: this.postPushId
			}).then(res => {
				if (res.code == 0) {
					this.jobInfo = res.data
					this.text = res.data.positionDetails
					if (!this.jobInfo?.ruleClassifyId) {
						this.isDisabledid = false
					} else {
						this.isDisabledid = true
					}
				}
			})
		},


		//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.lastDueTimes < 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 > 2000) {
					uni.hideLoading();
					uni.showToast({
						title: '岗位描述不能超过2000字',
						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.lastDueTimes < 1) {
					uni.showToast({
						title: '对不起，您的次数已经用完，不能发布。',
						icon: 'none',
						duration: 2000
					});
					return
				}
			}
			
			if (!this.remainingPostionCount) {
				this.showTipModal = true
				return
			}


			const data = {
				type: this.check,
				isDue: this.selectedValue,
				positionDetails: this.text,
				ruleClassifyId: this.jobInfo.ruleClassifyId,
				ruleClassifyName: this.jobInfo.ruleClassifyName,
				orderId: 1
			}
			console.log(this.postPushId)
			uni.navigateTo({
				url: "/pages/my/jobPostingSecond?pid=" + this.postPushId 
				+ '&companyId=' + this.companyId 
				+ "&status=" + this.status 
				+ "&companyName=" + this.companyName 
				+ '&type=' + this.update 
				+ '&workData=' + encodeURIComponent(JSON.stringify(this.jobInfo)) 
				+ '&isBack=' + true 
				+ '&ruleClassifyId=' + this.jobInfo.ruleClassifyId 
				+ '&dataInfo=' + JSON.stringify(data) 
				+ '&companyAddressInfo=' + encodeURIComponent(JSON.stringify(this.companyAddressInfo)) 
			});

			// 发送请求
			// 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(() => {
							
			// 			}, 1500);
			// 		} else {
			// 			uni.showToast({
			// 				title: res.msg || '提交失败，请重试',
			// 				icon: 'none'
			// 			});
			// 		}
			// 	})
			// 	.catch((err) => {
			// 		uni.hideLoading();
			// 		console.error('请求失败：', err);
			// 		uni.showToast({
			// 			title: '网络异常，请稍后重试',
			// 			icon: 'none'
			// 		});
			// 	});


		},
		
		// 跳转至公司认证页面
		handleToIndex() {
			if (!this.isAdmin) {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			} else {
				uni.navigateTo({
					url: `/package/jobIntention/companyImg?companyName=${this.companyName}&companyId=${this.companyId}`
				})
			}
		},
		
		// 查询用户企业状态
		getcompanystatus() {
			this.$Request.get('/app/company/selectCompanyByUserId')
				.then((res) => {
					if (res.code == 0) {
						// 判断是否是管理员
						if (res.data?.companyUser?.isAdmin != 1) {
							this.isAdmin = false
						}
						this.status = res.data.status
						this.companyInfo = res.data
						this.companyId = res.data.companyId
					}
				})
		},
	},
};
</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;
			
			// 步骤条
			.step-progress {
				padding: 20rpx 0 60rpx;
				.circle-wrapper {
					position: relative;
					.check-icon {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 40rpx;
						height: 40rpx;
						border: 1px solid rgba(198, 198, 198, 1);
						border-radius: 40rpx;
					}
					.check-active {
						background: #016bf6;
						border-color: #016bf6;
					}
					.step-progress-text {
						position: absolute;
						left: 50%;
						bottom: -36rpx;
						width: 150rpx;
						font-size: 20rpx;
						font-weight: 500;
						line-height: 32rpx;
						color: rgba(111, 111, 111, 1);
						transform: translateX(-50%);
						text-align: center;
					}
				}
				.line {
					width: 220rpx;
					height: 1px;
					background: rgba(198, 198, 198, 1);
				}
				.blue {
					background: rgba(1, 107, 246, 1);
				}
			}

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

			.desc {
				color: rgba(102, 102, 102, 1);
				width: 100%;
				font-family: DM Sans;
				font-size: 28rpx;
				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: 36rpx;
				font-weight: 500;
				line-height: 44rpx;
				margin-top: 20rpx;
				margin-bottom: 16rpx;
			}

			.check-title-big {
				color: rgba(31, 44, 55, 1);
				font-family: DM Sans;
				font-size: 36rpx;
				font-weight: 500;
				line-height: 44rpx;
				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 {}
			}
			
			// 岗位描述
			.check-sub-title {
				width: 100%;
				color: rgba(102, 102, 102, 1);
				font-size: 20rpx;
				font-weight: 400;
				line-height: 26rpx;
				margin-bottom: 20rpx;
			}
			.job-desc-wrapper {
				position: relative;
				width: 100%;
				height: 220rpx;
				padding: 20rpx 28rpx;
				border-radius: 6px;
				background: rgba(153, 153, 153, 0.05);
				.job-desc-input {
					position: relative;
					width: 100%;
					height: 180rpx;
					font-size: 20rpx;
					line-height: 26rpx;
				}
				.placeholder {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 200rpx;
					padding: 24rpx 28rpx;
					box-sizing: border-box;
					.placeholder-text {
						color: rgba(153, 153, 153, 1);
						font-size: 20rpx;
						font-weight: 400;
						line-height: 26rpx;
						&:first-child {
							margin-bottom: 20rpx;
						}
					}
				}
			}

			/* 禁用状态样式 */
			.check-select.disabled {
				background-color: #f5f5f5;
				opacity: 0.6;
				pointer-events: none;
				/* 防止点击穿透 */
			}

			.check-select.disabled .select-txt {
				color: #999;
				/* 文字变灰 */
			}

			.check-select.disabled u-icon {
				color: #ccc;
				/* 图标变灰 */
			}

			/* 禁用状态样式 */
			.check-box.disabled {
				opacity: 0.6;
			}

			.check-box.disabled .check-item {
				pointer-events: none;
				background-color: #e9e9e9;
				color: #999;
			}

			.check-box.disabled .check-item.is-check {
				background-color: #b3d1ff;
				color: #666;
			}

			.radioseletvi {
				position: relative;
				padding: 0;
				box-shadow: none;
				::v-deep uni-radio-group{
					flex: 1;
					.radio {
						&:first-child {
							margin-top: 0;
						}
					}
				}
			}

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

			.radioselet {
				position: relative;
				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;
	}

	.button-section {
		padding: 28rpx 40rpx;
		box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.04);
	}
	.submit-btn {
		flex-shrink: 0;
		border-radius: 999px;
		box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.04);
		// background: linear-gradient(90deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
		background: rgba(0, 0, 0, 0.08);
		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;
		&.active-btn {
			background: linear-gradient(90deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
		}
	}
	.link-btn {
		text-align: center;
		color: rgba(1, 107, 246, 1);
		font-size: 16px;
		font-weight: 400;
		line-height: 16px;
		margin-bottom: 32rpx;
	}

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