yizhizan-h5/package/jobIntention/completeMsg.vue

<template>
	<view class="company">
		<nav-bar title="完善信息" color="#000"></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>
				<u-input placeholder="真实的职务，更能赢得牛人的信任" v-model="name" :border="false" class="form-input"></u-input>
			</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">
				<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 }}</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="bottom-btn" @click="submithr">开始招聘</view>
		</view>
		<!-- 权限说明弹窗 -->
				<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";
export default {
	data() {
		return {
			avatar: "",
			name: "",
			isok: false,
			email: '',
			emailError: "", // 添加错误提示
			userpost: []
		};
	},
	components: {
		navBar,
	},
	onShow() {
		this.getmypost()
		// this.HrFirst()
	},
	methods: {
		goUploadImg() {
			uni.navigateTo({
				url: "/package/jobIntention/companyImg"
			});
		},
		goCompanyReview() {
			if (this.isok) {
				uni.navigateTo({
					url: "/package/jobIntention/companyReview",
				});
			}
			return uni.showToast({
				title: "请补全资料",
				icon: "none"
			});

		},
		// 选择头像
		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;
						}

					})

				},
			});
		},
		//提交hr 信息
		// 邮箱验证方法
		validateEmail(email) {
			const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
			return emailRegex.test(email);
		},
		// 邮箱失焦验证
		validateEmailOnBlur() {
			if (!this.email) {
				this.emailError = "邮箱不能为空";
				return;
			}

			if (!this.validateEmail(this.email)) {
				this.emailError = "邮箱格式不正确";
			} else {
				this.emailError = "";
			}
		},

		// 实时验证（可选）
		onEmailInput(e) {
			this.email = e;
			// 如果之前有错误，输入时清除错误提示
			if (this.emailError && this.email) {
				this.emailError = "";
			}
		},
		// 验证所有表单字段
		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;
						uni.showToast({
							title: "提交成功，请开始招聘吧。",
							icon: "success"
						});
						// uni.switchTab({
						// 	url: '/pages/index/index'
						// });
						uni.navigateTo({ url: '/package/jobIntention/underReview' })
					} else {
						uni.showToast({
							title: res.msg || "提交失败",
							icon: "none"
						});
					}
				})
				.catch((err) => {
					uni.hideLoading();
					console.error("提交失败：", err);
					// uni.showToast({
					// 	title: "网络异常",
					// 	icon: "none"
					// });
				});
		},

		// submithr() {
		// 	// 验证必填项
		// 	if (!this.avatar) {
		// 		return uni.showToast({
		// 			title: "请上传头像",
		// 			icon: "none"
		// 		});
		// 	}
		// 	if (!this.name) {
		// 		return uni.showToast({
		// 			title: "请输入职务",
		// 			icon: "none"
		// 		});
		// 	}
		// 	// 构造提交数据
		// 	const data = {
		// 		hrImg: this.avatar, //头像
		// 		hrPosition: this.name, //职位
		// 	};

		// 	// 调用接口提交
		// 	uni.showLoading({
		// 		title: "提交中..."
		// 	});
		// 	this.$Request.postJson("/app/HrFirst/addHr", data)
		// 		.then((res) => {
		// 			uni.hideLoading();
		// 			if (res.code === 0) {
		// 				this.isok = true
		// 				uni.showToast({
		// 					title: "提交成功，请开始招聘吧。",
		// 					icon: "success"
		// 				});
		// 				// uni.navigateTo({
		// 				// 	url: "/package/jobIntention/companyReview",
		// 				// });
		// 				uni.switchTab({
		// 					url: '/pages/index/index'
		// 				})

		// 			} 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[0].hr) {
						this.name = this.userpost[0].hr.hrPosition || ""
						this.avatar = this.userpost[0].hr.hrImg || ""
					}

					console.log("查询我的岗位列表状态", res)
				})
				.catch((err) => {
					console.error("查询失败：", err);
					uni.showToast({
						title: "查询失败",
						icon: "none"
					});
				});
		},
		//Hr 名片
		// HrFirst() {
		// 	this.$Request.get("/app/HrFirst", "")
		// 		.then((res) => {
		// 			if (res.code != 0) {
		// 				uni.showToast({
		// 					title: res.msg || "查询失败",
		// 					icon: "none"
		// 				});
		// 				return;
		// 			}

		// 			console.log("Hr 名片", res)
		// 		})
		// 		.catch((err) => {
		// 			console.error("查询失败：", err);
		// 			uni.showToast({
		// 				title: "查询失败",
		// 				icon: "none"
		// 			});
		// 		});
		// },

	},
};
</script>
<style scoped lang="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;
		box-sizing: border-box;
		overflow: hidden;
		overflow-y: auto;

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

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

		.avatar-section {
			display: flex;
		}

		.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;

				.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;
		}

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

		.form-input {
			flex: 1;
			box-sizing: border-box;
			border: 2rpx solid #9ea1a8;
			border-radius: 100rpx;
			background: rgba(255, 255, 255, 1);
			padding: 0rpx 24rpx !important;
		}
	}

	.bottom-btn {
		border-radius: 999px;
		background: rgba(255, 102, 0, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		color: rgba(255, 255, 255, 1);
		font-family: DM Sans;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 48rpx;
		padding: 16rpx 32rpx;
		box-sizing: border-box;
	}
}

::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>