yizhizan-h5/package/jobIntention/basicInfo.vue

<template>
	<view class="basic-info">
		<navBar title="基本信息" color="#000" />
		<!-- 表单内容 -->
		<view class="form-content">
			<!-- 头像 -->
			<view class="form-item">
				<view class="form-label">
					<text class="required-mark">*</text>
					<text>头像</text>
				</view>
				<view @click="chooseAvatar" class="avatar-container">
					<image :src="avatar?avatar:'../../static/images/logo.jpg'" class="user-avatar" mode="aspectFill"></image>
					<view class="tip">重新上传</view>
				</view>
			</view>

			<!-- 姓名 -->
			<view class="form-item" style="margin-bottom: 13px;">
				<view class="form-label">
					<text class="required-mark">*</text>
					<text>姓名</text>
				</view>
				<input class="form-input" type="text" placeholder="请输入姓名" v-model="userName" />
			</view>
			
			<!-- 是否匿名展示 -->
			<view class="form-item">
				<u-checkbox-group class="checkbox">
					<u-checkbox v-model="isAnonymous" :label-disabled="false">匿名展示</u-checkbox>
				</u-checkbox-group>				
			</view>

			<!-- 性别 -->
			<view class="form-item">
				<view class="form-label">
					<text class="required-mark">*</text>
					<text>性别</text>
				</view>
				<u-radio-group v-model="sex" direction="row">
					<u-radio name="1" activeColor="#007AFF">男</u-radio>
					<u-radio name="2" activeColor="#007AFF">女</u-radio>
				</u-radio-group>
			</view>
			
			<!-- 出生年月 -->
			<view class="form-item">
				<view class="form-label">
					<text class="required-mark">*</text>
					<text>出生年月</text>
				</view>
				<view class="date-picker" @click="showDatePicker = true">
					<text class="date-text" v-if="birthDateText">{{ birthDateText }}</text>
					<text class="placeholder-text" v-else>请选择出生年月</text>
					<u-icon name="arrow-down" color="#999" size="24"></u-icon>
				</view>
			
				<u-picker :default-time="birthDateText" v-model="showDatePicker" mode="time" :params="dateParams"
					@confirm="onDateConfirm"></u-picker>
			</view>
			
			<!-- 手机号 -->
			<view class="form-item">
				<view class="form-label">手机号</view>
				<view class="flex align-center justify-between">
					<view class="phone-number">{{ hidePhoneNumber }}</view>
					<text class="modify-link" @click="showChangeModal = true">修改手机号</text>
				</view>
			</view>

			<!-- 联系方式 -->
			<!-- <view class="form-item">
				<view class="form-label">联系方式</view>
				<input class="form-input" type="text" placeholder="请输入手机号" v-model="phone" />
			</view> -->

			<!-- 微信号码 -->
			<view class="form-item">
				<view class="form-label">微信号码</view>
				<input class="form-input" type="text" placeholder="请输入微信号码，方便给对方交换微信联系" v-model="weChatNum" />
			</view>
			
			<view class="form-item">
				<view class="form-label">
					<text>邮箱</text>
				</view>
				<input class="form-input" type="text" placeholder="请输入您的邮箱" v-model="email" />
			</view>
			

			<!-- 求职状态 -->
			<!-- <view class="form-item">
				<view class="form-label">
					<text>求职状态</text>
				</view>
				<view class="select-picker" @click="showJobStatusPicker">
					<text class="select-text">{{ jobStatusList[selectedJobStatus].text }}</text>
					<u-icon name="arrow-down" color="#999" size="24"></u-icon>
				</view>
			</view> -->
		</view>

		<!-- 保存按钮 -->
		<view class="button-section">
			<view class="link-btn" v-if="!hasUserType" @click="handleIgnore">稍后填写</view>
			<view class="btn" @click="messagebtn">保存</view>
		</view>

		<!-- 求职状态选择器 -->
		<u-popup v-model="showJobStatusModal" mode="bottom" border-radius="42" height="auto"
			:safe-area-inset-bottom="true">
			<view class="job-status-picker">
				<view class="picker-header">
					<text class="picker-title">求职状态</text>
				</view>

				<view class="picker-content">
					<view class="status-option" :class="{ active: selectedJobStatus == item.value }"
						v-for="item in jobStatusList" :key="item.value" @click="selectJobStatus(item)">
						<view class="option-left">
							<view class="radio-btn" :class="{ checked: selectedJobStatus == item.value }">
								<u-icon v-if="selectedJobStatus == item.value" name="checkmark" color="#ffffff"
									size="28"></u-icon>
							</view>
							<text class="option-text">{{ item.text }}</text>
							<view v-if="item.recommended" class="recommend-tag">
								<text>推荐</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 权限说明弹窗 -->
		<u-popup mode="top" ref="permission">
			<view class="popup-content">
				<view class="popup-text-permission">选择/拍摄照片需要相机/相册权限，用于上传用户头像</view>
			</view>
		</u-popup>
		<!-- 变更手机号 -->
		<c-modal
			:value="showChangeModal"
			title="请填写您需要变更的手机号"
			@cancel="showChangeModal = false"
			@confirm="submitChangePhoneNumber"
		>
			<view class="input-wrapper" style="margin-top: 30px">
				<input v-model="phoneNum" type="number" placeholder="请输入要变更的手机号码" maxlength="11" placeholder-class="placeholder" />
			</view>
			<view class="input-wrapper flex align-center justify-between" style="margin-bottom: 30px;">
				<input v-model="verifyCode" type="number" placeholder="输入验证码" maxlength="6" class="verify-input" placeholder-class="placeholder" />
				<view class="verify-btn" @click="getVerifyCode">{{ disabled ? `${countdown}s` : '获取验证码' }}</view>
			</view>
		</c-modal>
	</view>
</template>

<script>
	import navBar from "@/components/nav-bar/index.vue";
	import cModal from '@/components/c-modal.vue'
	export default {
		components: {
			navBar,
			cModal
		},
		data() {
			return {
				BarHeight: '',
				weChatNum: '',
				email:'',
				sex: '',
				phone: '',
				avatar: '',
				ifExp: 0,
				userName: '',
				birthDateText: '', // 显示的日期文本
				showDatePicker: false, // 控制日期选择器显示
				dateParams: {
					year: true,
					month: true
				},
				// 求职状态相关
				showJobStatusModal: false,
				selectedJobStatus: 0,
				jobStatusList: [{
						value: '0',
						text: '离职-随时到岗',
						recommended: true
					},
					{
						value: '1',
						text: '在职-月内到岗',
						recommended: true
					},
					{
						value: '2',
						text: '在职-考虑机会',
						recommended: false
					},
					{
						value: '3',
						text: '在职-暂不考虑',
						recommended: false
					},
					// {
					// 	value: '4',
					// 	text: '实习',
					// 	recommended: false
					// }
				],
				isAnonymous: false, // 匿名展示
				scene: 0, // 0.默认 1.H5邀请 2.注册进入
				showChangeModal: false,
				disabled: false,
				timer: null,
				countdown: 60,
				getting: false,
				verifyCode: '',
				phoneNum: '', // 输入手机号
			}
		},
		computed: {
			hidePhoneNumber() {
				return String(this.phone).replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
			},
			// 判断是否有用户类型userType
			hasUserType() {
				return this.$queue.getData('userType')
			}
		},
		watch: {
			showChangeModal(nValue) {
				if (!nValue) {
					// 关闭弹窗时清除选择的手机号
					this.changePhoneNum = ''
					this.verifyCode = ''
					this.phoneNum = ''
					this.clearCountdownTimer()
				}
			}
		},
		onLoad(options) {
			// #ifdef APP-PLUS
			let systemInfo = uni.getSystemInfoSync();
			this.BarHeight = systemInfo.statusBarHeight;
			// #endif
			if (options && options.resumesStatus)
				this.selectedJobStatus = options.resumesStatus
			if (options && options.birthday)
				this.birthDateText = options.birthday
			if (options && options.ifExp)
				this.ifExp = options.ifExp
			if (options && options.resumesPhone)
				this.phone = options.resumesPhone
			if (options && options.resumesEmail)
				this.email = options.resumesEmail
			if (options.scene) {
				this.scene = options.scene
			}
			this.getUserInfo()
		},
		onUnload() {
			this.clearCountdownTimer()
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			// 选择头像
			async chooseAvatar() {
				// 1. 检查权限状态
				const hasPermission = await this.$queue.checkPermission(
					'camera',
					'选择/拍摄照片需要相机/相册权限，用于上传用户头像',
					this
				);

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

				// 3. 调用系统选择图片（系统弹框会出现，让用户授权）
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						// 上传图片
						this.$queue.uploadFile(res.tempFilePaths[0], (path) => {
							if (path) this.avatar = path;
						});
						// 上传成功隐藏提示
						this.$refs.permission.close();
					},
					fail: (err) => {
						console.log('用户拒绝或取消选择', err);
						// 用户拒绝仍然保持提示文字
					}
				});
			},
			// 日期选择确认
			onDateConfirm(e) {
				const {
					year,
					month,
					day
				} = e;
				this.birthDateText = `${year}-${String(month).padStart(2, '0')}`;
				this.showDatePicker = false;
			},
			// 显示求职状态选择器
			showJobStatusPicker() {
				this.showJobStatusModal = true;
			},
			// 选择求职状态
			selectJobStatus(item) {
				this.selectedJobStatus = item.value;
				this.showJobStatusModal = false;

				// 可以在这里添加保存状态的逻辑
				console.log('选择的求职状态:', item);
			},
			getUserInfo() {
				// 老接口 /app/user/selectUserById
				// 新接口 /app/user/getUserInfo
				this.$Request.get("/app/user/getUserInfo").then(res => {
					// 获取稍后填写的缓存数据
					const temp_baseInfo = this.$queue.getData('temp_baseInfo') || {}
					if (res.code == 0) {
						const data = this.$queue.deepMergeObject(temp_baseInfo, res.data)
						this.weChatNum = data.weChatNum
						this.sex = data.sex
						this.avatar = data.avatar
						this.userName = data.userName
						this.phone = data.phone
						this.isAnonymous = Boolean(data.isAnonymous)
						this.selectedJobStatus = data.resumesStatus || 0
						this.birthDateText = data.birthday || ''
						this.email = data.resumesEmail
						this.ifExp = data.ifExp
					}
					uni.hideLoading();
				});


			},
			// 保存
			messagebtn() {
				if (!this.userName) {
					this.$queue.showToast('请输入用户名');
				} else if (!this.sex) {
					this.$queue.showToast('请选择性别');
				} else if (!this.birthDateText) {
					this.$queue.showToast('请选择出生年月');
				} else {
					uni.showModal({
						title: '温馨提示',
						content: '确定保存信息',
						success: e => {
							if (e.confirm) {
								// 老接口 /app/user/updateUser
								// 新接口 /app/user/updateUserInfo
								this.$Request.postJson("/app/user/updateUserInfo", {
									userName: this.userName,
									avatar: this.avatar,
									sex: this.sex,
									weChatNum: this.weChatNum,
									isAnonymous: this.isAnonymous ? 1 : 0,
									resumesStatus: this.selectedJobStatus,
									resumesPhone: this.phone,
									birthday: this.birthDateText,
									resumesEmail: this.email,
									ifExp: this.ifExp
								}).then(res => {
									if (res.code === 0) {
										if (this.weChatNum) {
											this.$queue.setData('weChatNum', this.weChatNum)
										}
										
										uni.showToast({
											title: '保存成功',
											icon: "none"
										})
										if (this.scene == 1) {
											uni.navigateTo({
												url: `/pages/public/improvePrompt?scene=${this.scene}`
											});
										} else if (!this.$queue.getData('userType')) {
											// 没有角色类型
											this.toSelectUserType()
										} else {
											// 实际开发中可以在这里添加跳转逻辑
											uni.$emit('updateResume')
											setTimeout(function() {
												uni.navigateBack()
											}, 1000)							
										}
										// this.setResume()
										
										// 保存成功后，删除首次进入“稍后填写”保存的数据
										if (this.$queue.getData('temp_baseInfo')) {
											this.$queue.remove('temp_baseInfo')
										}
									} else {
										uni.showToast({
											title: res.msg,
											icon: "none"
										})
									}
								})
							}
						}
					});
				}
			},
			
			// 注册时跳转选择角色页面
			toSelectUserType() {
				uni.reLaunch({
					url: '/pages/my/jobApplicant/guidePage'
				})
			},
			
			// 稍后填写
			handleIgnore() {
				this.$queue.setData('temp_baseInfo', {
					userName: this.userName,
					avatar: this.avatar,
					sex: this.sex,
					weChatNum: this.weChatNum,
					isAnonymous: this.isAnonymous ? 1 : 0,
					resumesStatus: this.selectedJobStatus,
					resumesPhone: this.phone,
					birthday: this.birthDateText,
					resumesEmail: this.email,
					ifExp: this.ifExp
				})
				this.toSelectUserType()
			},
			// setResume() {
			// 	let data = {
			// 		resumesStatus: this.selectedJobStatus,
			// 		resumesPhone: this.phone,
			// 		birthday: this.birthDateText,
			// 		resumesEmail:this.email,
			// 		ifExp: this.ifExp
			// 	}
			// 	this.$Request.postJson("/app/userFirst/regist", data).then((res) => {
			// 		if (res.code == 0) {
			// 			if (this.scene == 1) {
			// 				uni.redirectTo({
			// 					url: `/pages/public/improvePrompt?scene=${this.scene}`
			// 				});
			// 			} else {
			// 				// 实际开发中可以在这里添加跳转逻辑
			// 				uni.$emit('updateResume')
			// 				setTimeout(function() {
			// 					uni.navigateBack()
			// 				}, 1000)							
			// 			}
			// 		} else {
			// 			uni.showToast({
			// 				title: res.msg,
			// 				icon: "none",
			// 			});
			// 		}
			// 	});
			// }
			
			// 变更手机号
			submitChangePhoneNumber() {
				if (this.updating) return
				this.updating = true
				
				if (!this.phoneNum) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				
				if (!this.verifyCode) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				}
				
				uni.showLoading({ title: '处理中' })
				this.$Request.getT('/app/user/updateUserByUserId', {
					phone: this.phoneNum,
					msg: this.verifyCode,
				}).then(res => {
					if (res.code == 0) {
						this.showChangeModal = false
						this.$queue.showToast('更换成功')
						this.getUserInfo()
					} else {
						this.$queue.showToast(res.msg || '出错了，请稍后再试')
					}
				}).finally(() => {
					uni.hideLoading()
					this.updating = false
				})
			},
			
			// 获取验证码
			getVerifyCode() {
				if (!this.phoneNum) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				if (!/^1[3-9]\d{9}$/.test(this.phoneNum)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				
				if (this.disabled || this.getting) return
				
				uni.showLoading({ title: '正在发送验证码' })
				this.getting = true
				this.$Request
					.getT('/app/Login/sendMsg/' + this.phoneNum + '/bind')
					.then((res) => {
						if (res.code === 0) {
							this.startCountdown()
						} else {
							uni.showModal({
								showCancel: false,
								title: '短信发送失败',
								content: res.msg ? res.msg : '请一分钟后再获取验证码',
							});
						}
					})
					.finally(() => {
						this.getting = false
						uni.hideLoading();
					})
			},
			
			startCountdown() {
				this.disabled = true
				this.timer = setInterval(() => {
					this.countdown--
					if (this.countdown <= 0) {
					    this.clearCountdownTimer()
					}
				}, 1000)
			},
			
			clearCountdownTimer() {
			    if (this.timer) {
					clearInterval(this.timer)
					this.timer = null // 重置定时器实例
					this.countdown = 60
					this.disabled = false
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.basic-info {
		background-color: #fff;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	// 表单内容
	.form-content {
		padding: 0 40rpx 210rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: auto;

		.form-item {
			margin-bottom: 36rpx;

			.form-label {
				color: var(--Neutral/100, rgba(31, 44, 55, 1));
				font-family: DM Sans;
				font-size: 28rpx;
				font-weight: 500;
				line-height: 44rpx;
				letter-spacing: 0.5%;
				text-align: left;
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;

				.required-mark {
					color: #FF3B30;
					font-size: 18px;
					font-weight: 600;
					margin-right: 8rpx;
				}

				text {
					color: var(--Neutral/100, rgba(31, 44, 55, 1));
					font-family: DM Sans;
					font-size: 16px;
					font-weight: 500;
					line-height: 22px;
					letter-spacing: 0.5%;
					text-align: left;
				}
			}

			.form-input {
				width: 100%;
				height: 75rpx;
				font-size: 14px;
				border: 1px solid rgba(227, 231, 236, 1);
				border-radius: 24px;
				color: rgba(23, 23, 37, 1);
				padding: 0 16px;
				box-sizing: border-box;
			}

			.form-display {
				color: rgba(23, 23, 37, 1);
				font-family: DM Sans;
				font-size: 16px;
				font-weight: 400;
				line-height: 22px;
				letter-spacing: 0%;
				text-align: left;
				padding: 15px 0px;
			}

			// 头像样式
			.avatar-container {
				display: flex;
				align-items: center;

				.user-avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 24rpx;
				}
				.tip {
					font-size: 20rpx;
					line-height: 44rpx;
					color: rgba(1, 107, 246, 1);
				}
			}


			// 日期选择器样式
			.date-picker {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 75rpx;
				font-size: 14px;
				border: 1px solid rgba(227, 231, 236, 1);
				border-radius: 24px;
				color: rgba(23, 23, 37, 1);
				padding: 12px 16px;

				.date-text {
					color: rgba(23, 23, 37, 1);
					font-family: DM Sans;
					font-size: 14px;
					font-weight: 400;
					line-height: 22px;
					letter-spacing: 0%;
					text-align: left;
				}
			}

			// 下拉选择器样式
			.select-picker {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 75rpx;
				font-size: 14px;
				border: 1px solid rgba(227, 231, 236, 1);
				border-radius: 24px;
				color: rgba(23, 23, 37, 1);
				padding: 12px 16px;

				.select-text {
					color: rgba(23, 23, 37, 1);
					font-family: DM Sans;
					font-size: 14px;
					font-weight: 400;
					line-height: 22px;
					letter-spacing: 0%;
					text-align: left;
				}
			}
			
			.u-checkbox {
				padding-bottom: 0;
			}
			
			// 手机号
			.phone-number {
				height: 48rpx;
				font-family: DM Sans;
				font-size: 24rpx;
				font-weight: bold;
				color: #333;
				line-height: 48rpx;
			}
			
			.modify-link {
				color: #007AFF;
			}
			
			// 出生年月placeholder样式
			.placeholder-text {
				color: #999;
			}
		}
	}

	// 保存按钮
	.button-section {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		// height: 210rpx;
		box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.04);
		background: rgba(255, 255, 255, 1);
		.link-btn {
			font-size: 32rpx;
			line-height: 1;
			text-align: center;
			color: rgba(1, 107, 246, 1);
			padding-top: 28rpx;
		}
		.btn {
			width: 600rpx;
			height: 88rpx;
			border-radius: 100px;
			background: var(--线性渐变, linear-gradient(90.00deg, rgba(13, 39, 247, 1),rgba(19, 193, 234, 1) 100%));
			font-size: 32rpx;
			font-weight: bold;
			line-height: 88rpx;
			text-align: center;
			color: #fff;
			margin: 32rpx auto 32rpx;
		}
	}

	// 求职状态选择器样式
	.job-status-picker {
		background: #fff;
		border-radius: 42rpx 42rpx 0 0;

		.picker-header {
			padding: 40rpx 40rpx 20rpx 40rpx;
			text-align: center;
			border-bottom: 1px solid #f0f0f0;

			.picker-title {
				color: rgba(23, 23, 37, 1);
				font-family: DM Sans;
				font-size: 18px;
				font-weight: 600;
				line-height: 26px;
				letter-spacing: 0%;
				text-align: center;
			}
		}

		.picker-content {
			padding: 20rpx 40rpx 40rpx 40rpx;

			.status-option {
				padding: 30rpx 0;
				border-bottom: 1px solid #f0f0f0;

				&:last-child {
					border-bottom: none;
				}

				&.active {
					background-color: rgba(0, 122, 255, 0.05);
				}

				.option-left {
					display: flex;
					align-items: center;

					.radio-btn {
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						border: 2px solid #e0e0e0;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 20rpx;

						&.checked {
							background-color: #007AFF;
							border-color: #007AFF;
						}
					}

					.option-text {
						flex: 1;
						color: rgba(23, 23, 37, 1);
						font-family: DM Sans;
						font-size: 16px;
						font-weight: 400;
						line-height: 22px;
						letter-spacing: 0%;
						text-align: left;
					}

					.recommend-tag {
						background-color: #007AFF;
						border-radius: 8rpx;
						padding: 4rpx 12rpx;
						margin-left: 16rpx;

						text {
							color: #fff;
							font-family: DM Sans;
							font-size: 12px;
							font-weight: 500;
							line-height: 16px;
							letter-spacing: 0%;
							text-align: center;
						}
					}
				}
			}
		}
	}

	// 权限弹窗页面
	.popup-content {
		height: 100vh;

		.popup-text {
			font-size: 32rpx;
			padding-left: 32rpx;
			padding-right: 32rpx;
		}
	}
	
	// 更换账号弹窗
	.input-wrapper {
		box-sizing: border-box;
		border: 1px solid rgba(242, 242, 242, 1);
		border-radius: 6px;
		background: rgba(250, 250, 250, 1);
		margin-bottom: 16rpx;
		padding: 10rpx 24rpx;
		font-size: 28rpx;
		line-height: 60rpx;
		input {
			height: 60rpx;
			font-size: 28rpx;
			color: #1f2c37;
		}
		.placeholder {
			color: rgba(158, 161, 168, 1);
		}
		.verify-input {
			width: 300rpx;
		}
		.verify-btn {
			color: rgba(1, 107, 246, 1);
		}
	}
</style>