yizhizan-h5/package/jobIntention/completeMsg.vue

<template>
	<view class="company">
		<nav-bar title="完善招聘名片"></nav-bar>
		<view class="company-content">
			<view class="company-title">完善你的招聘名片</view>
			<view class="company-desc">求职者更愿意主动联系名片信息完整的HR</view>
			<!-- 头像上传区域 -->
			<view class="form-label">头像</view>
			<view class="avatar-section">
				<view class="avatar-upload" @click="chooseAvatar">
					<view class="avatar-preview">
						<image v-if="avatar" :src="avatar" class="avatar-image" mode="aspectFill"></image>
						<image v-else src="@/static/images/jobApplicant/touxiang.svg" mode="scaleToFill"
							class="user-img" />
					</view>
					<view class="upload-view">修改头像</view>
				</view>
			</view>
			<!-- 姓名 -->
			<view class="form-item">
				<view class="form-label">填写职务</view>
				<view class="input-wrapper">
					<input placeholder="真实的职务，更能赢得牛人的信任" v-model="name" class="form-input" placeholder-class="placeholder" />
				</view>
			</view>
			<!-- email -->
			<!-- <view class="form-item">
				<view class="form-label">填写email</view>
				<u-input placeholder="填写email，方便牛人联系" v-model="email" :border="false"
					:class="{ 'form-input': true, 'error': emailError }" @blur="validateEmailOnBlur"></u-input>
				<view v-if="emailError" class="error-message">
					{{ emailError }}
				</view>
			</view> -->
			<view class="form-item list">
				<view class="form-label">求职者视角中的效果</view>
				<view class="form-border" v-for="(item, inx) in userpost" :key="inx">
					<view class="form-border-top">
						<view class="form-border-title">{{ item.ruleClassifyName }}</view>
						<view class="form-border-money">{{ item.salaryRange }} <text v-if="item.salaryTimes">· {{ item.salaryTimes }}</text></view>
					</view>
					<view class="form-border-desc" v-if="item.company">{{ item.company.companyName || item.company.companyAllName}} {{ item.company.companyPeople }}</view>
					<view class="form-border-img-name">
						<view class="people-img">
							<image v-if="avatar" :src="avatar" class="avatar-image"
								mode="aspectFill"></image>
							<image v-else src="@/static/images/jobApplicant/touxiang.svg" mode="scaleToFill"
								class="user-img" />
						</view>
						<view class="people-name">{{ item.hr ? item.hr.hrPosition : "无" }} 招聘者</view>
					</view>
				</view>
			</view>
			<view class="fixed-section">
				<view class="link-btn" v-if="showAfterBtn" @click="handleAfterFinished">稍后完善</view>
				<view class="submit-btn" @click="submithr">开始招聘</view>
			</view>
		</view>
		<!-- 弹窗说明 -->
		<c-modal
			:value="showModal"
			title="企业介绍"
			confirm-button-text="完善信息"
			cancel-button-text="稍后完善"
			@cancel="handleAfterFinished"
			@confirm="handleConfirm"
		>为了让更多的求职者关注您的招聘岗位，建议您直接完善公司介绍</c-modal>
		<!-- 权限说明弹窗 -->
		<u-popup mode="top" ref="permission">
			<view class="popup-content">
				<view class="popup-text-permission">选择/拍摄照片需要相机/相册权限，用于上传用户头像</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
import navBar from "@/components/nav-bar/index.vue";
import cModal from '@/components/c-modal.vue';
export default {
	data() {
		return {
			avatar: "",
			name: "",
			isok: false,
			email: '',
			emailError: "", // 添加错误提示
			userpost: [],
			showAfterBtn: false, // 显示页面的稍后完善按钮，用户没有职务时显示
			showModal: false,
			companyStatus: 1, // 公司状态 1审核中 2审核通过 3审核拒绝
			isAdmin: false, // 是否是管理员
			hasReviewPosition: false, // 判断是否有审核中的岗位
			companyId: ''
		};
	},
	components: {
		navBar,
		cModal,
	},
	onShow() {
		this.getPositionInfo()
		this.getmypost()
		this.getcompanystatus()
	},
	methods: {
		// 选择头像
		async chooseAvatar() {
			var that = this

			/// 1. 检查权限状态
				const hasPermission = await this.$queue.checkPermission(
					'camera',
					'选择/拍摄照片需要相机/相册权限，用于上传用户头像',
					this
				);

				// 2. 如果未授权或者用户拒绝，显示提示
				if (!hasPermission) {
					return;
				}


			uni.chooseImage({
				count: 1,
				sizeType: ["compressed"],
				sourceType: ["album", "camera"],
				success: (res) => {
					that.$queue.uploadFile(res.tempFilePaths[0], function (path) {
						console.log("上传返回？：", path)
						if (path) {
							that.avatar = path;
						}

					})

				},
			});
		},
		
		// 验证所有表单字段
		validateForm() {
			let isValid = true;

			// 验证头像
			if (!this.avatar) {
				uni.showToast({
					title: "请上传头像",
					icon: "none"
				});
				return false;
			}

			// 验证职务
			if (!this.name) {
				uni.showToast({
					title: "请输入职务",
					icon: "none"
				});
				return false;
			}

			// // 验证邮箱
			// if (!this.email) {
			// 	this.emailError = "邮箱不能为空";
			// 	uni.showToast({
			// 		title: "请输入邮箱",
			// 		icon: "none"
			// 	});
			// 	return false;
			// }

			// // 验证邮箱格式
			// if (!this.validateEmail(this.email)) {
			// 	this.emailError = "邮箱格式不正确";
			// 	uni.showToast({
			// 		title: "邮箱格式不正确",
			// 		icon: "none"
			// 	});
			// 	return false;
			// }

			this.emailError = ""; // 清除错误提示
			return true;
		},

		// 提交 hr 信息（修改后的版本）
		submithr() {
			// 先验证表单
			if (!this.validateForm()) {
				return;
			}

			// 构造提交数据（添加邮箱）
			const data = {
				hrImg: this.avatar, // 头像
				hrPosition: this.name, // 职位
				hrEmail: this.email // 添加邮箱
			};

			// 调用接口提交
			uni.showLoading({
				title: "提交中..."
			});
			this.$Request.postJson("/app/HrFirst/addHr", data)
				.then((res) => {
					uni.hideLoading();
					if (res.code === 0) {
						this.isok = true;
						// 判断是否是管理员
						if (this.isAdmin && this.companyStatus != 2) {
							this.showModal = true
						} else {
							this.handleAfterFinished()							
						}
					} else {
						uni.showToast({
							title: res.msg || "提交失败",
							icon: "none"
						});
					}
				})
				.catch((err) => {
					uni.hideLoading();
					console.error("提交失败：", err);
					// uni.showToast({
					// 	title: "网络异常",
					// 	icon: "none"
					// });
				});
		},

		//获取我发布的岗位列表
		getmypost() {
			this.$Request.get("/app/postPush/getMyPostPush", { status: "" })
				.then((res) => {
					if (res.code != 0) {
						uni.showToast({
							title: res.msg || "查询失败",
							icon: "none"
						});
						return;
					}
					this.userpost = res.data.records || [];
					if (this.userpost.length && this.userpost[0].hr) {
						// this.name = this.userpost[0].hr.hrPosition || ""
						// this.avatar = this.userpost[0].hr.hrImg || ""
						this.showAfterBtn = this.userpost[0]?.hr?.hrPosition ? false : true
					}
					
					// 判断是否有审核中职位
					if (this.userpost.length == 1) {
						this.hasReviewPosition = this.userpost[0].status == 1
					}

					console.log("查询我的岗位列表状态", res)
				})
				.catch((err) => {
					console.error("查询失败：", err);
					uni.showToast({
						title: "查询失败",
						icon: "none"
					});
				});
		},
		
		// 查询用户企业状态
		getcompanystatus() {
			this.$Request.get('/app/company/selectCompanyByUserId')
				.then((res) => {
					if (res.code == 0) {
						// 判断是否是管理员
						if (res.data?.companyUser?.isAdmin == 1) {
							this.isAdmin = true
						}
						// 公司状态
						if (res.data.status) {
							this.companyStatus = res.data.status
						}
						this.companyId = res.data.companyId
					}
				})
		},
		
		// 获取职位信息
		getPositionInfo() {
			this.$Request.getT('/app/HrFirst/getUserHr')
				.then(res => {
					if (res.code == 0) {
						this.avatar = res.data.HrEntity.hrImg
						this.name = res.data.HrEntity.hrPosition
						this.email = res.data.HrEntity.hrEmail
					}
				})
		},
		
		handleConfirm() {
			this.showModal = false
			uni.navigateTo({
				url: `/my/renzheng/editCompany?companyId=${this.companyId}`
			})
		},
		
		// 稍后完善，如果没有职位等待审核中，则跳转到陈列页
		handleAfterFinished() {
			if (this.hasReviewPosition) {
				// 第一次发布岗位，并且正在审核中
				uni.reLaunch({ url: '/pages/index/index' })
			} else {
				uni.navigateTo({ url: '/pages/jobManagement/jobManagement?type=canClose' })
			}
		}
	},
};
</script>
<style scoped lang="scss">
@import '@/common.scss';
.company {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	font-family: DM Sans;

	.company-content {
		flex: 1;
		padding: 40rpx 40rpx 180rpx;
		box-sizing: border-box;
		overflow: hidden;
		overflow-y: auto;

		.company-title {
			color: #333;
			font-size: 48rpx;
			font-weight: 700;
			line-height: 60rpx;
			margin-bottom: 20rpx;
		}
		
		.company-desc {
			color: rgba(102, 102, 102, 1);
			font-size: 24rpx;
			font-weight: 400;
			line-height: 32rpx;
			margin-bottom: 20rpx;
		}

		.form-label {
			color: #1f2c37;
			font-family: DM Sans;
			font-size: 28rpx;
			font-weight: 500;
			line-height: 44rpx;
			margin-bottom: 20rpx;
			box-sizing: border-box;
		}

		.avatar-section {
			display: flex;
			margin-bottom: 36rpx;
		}

		.avatar-upload {
			display: flex;
			align-items: center;
		}

		.avatar-preview {
			width: 48rpx;
			height: 48rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;
		}

		.avatar-image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}

		.upload-view {
			color: #016bf6;
			font-family: DM Sans;
			font-size: 20rpx;
			font-weight: 500;
			line-height: 48rpx;
		}

		.form-item {
			padding-bottom: 24rpx;
			box-sizing: border-box;

			.job-txt {
				color: #016bf6;
				font-family: DM Sans;
				font-size: 20rpx;
				margin-left: 16rpx;
			}

			.form-border {
				box-sizing: border-box;
				border: 1rpx solid rgba(227, 231, 236, 1);
				border-radius: 12rpx;
				background: rgba(253, 253, 253, 1);
				padding: 36rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;

				.form-border-top {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.form-border-title {
						color: rgba(23, 23, 37, 1);
						font-family: DM Sans;
						font-size: 32rpx;
						font-weight: 700;
						line-height: 48rpx;
					}

					.form-border-money {
						color: #016bf6;
						font-family: DM Sans;
						font-size: 24rpx;
						font-weight: 700;
						line-height: 40rpx;
					}
				}

				.form-border-desc {
					color: rgba(156, 164, 171, 1);
					font-family: DM Sans;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 40rpx;
					padding: 6rpx 0;
					box-sizing: border-box;
				}

				.form-border-img-name {
					display: flex;
					align-items: center;
					gap: 8rpx;

					.people-img {
						image {
							width: 40rpx;
							height: 40rpx;
						}
					}

					.people-name {
						color: rgba(156, 164, 171, 1);
						font-family: DM Sans;
						font-size: 16rpx;
						font-weight: 400;
					}
				}
			}
		}

		.form-item:last-child {
			border-bottom: none;
		}
		
		.list {
			padding-bottom: 100rpx;
		}

		.form-label {
			color: #1f2c37;
			font-family: DM Sans;
			font-size: 28rpx;
			font-weight: 500;
			line-height: 44rpx;
			margin-bottom: 20rpx;
			box-sizing: border-box;
		}

		.input-wrapper {
			flex: 1;
			border: 1px solid rgba(227, 231, 236, 1);
			padding: 11rpx 32rpx;
			border-radius: 30rpx;
		}
		.form-input {
			font-size: 24rpx;
			line-height: 48rpx;
		}
		.placeholder {
			color: rgba(153, 153, 153, 1);
		}
	}

	.submit-btn {
		text-align: center;
		line-height: 90rpx;
		color: #fff;
	}
	.link-btn {
		text-align: center;
		color: rgba(1, 107, 246, 1);
		font-size: 16px;
		font-weight: 400;
		line-height: 16px;
		margin-bottom: 32rpx;
	}
}

::v-deep .u-input {
	text-align: left !important;
}

// .error-message {
// 	color: #ff4d4f;
// 	font-size: 24rpx;
// 	margin-top: 8rpx;
// 	padding-left: 24rpx;
// }

/* 如果有错误，可以修改输入框边框颜色 */
// .form-input.error {
// 	border-color: #ff4d4f !important;
// }
</style>