yizhizan-h5/package/jobIntention/basicInfo.vue

<template>
	<view class="basic-info">
		<!-- 顶部导航栏 -->
		<view class="navbar" :style="{ paddingTop: (12 + statusBarHeight) + 'px' }">
			<view class="navbar-content">
				<view class="navbar-left" @click="goBack">
					<u-icon name="arrow-leftward" size="42" color="#333"></u-icon>
				</view>
				<view class="navbar-title">基本信息</view>
				<view class="navbar-right"></view>
			</view>
		</view>

		<!-- 表单内容 -->
		<view class="form-content">
			<!-- 头像 -->
			<view class="form-item">
				<view class="form-label">头像</view>
				<view @click="chooseAvatar" class="avatar-container">
					<image :src="avatar?avatar:'../../static/logo.png'" class="user-avatar" mode="aspectFill"></image>
					<view class="edit-avatar-icon">
						<image src="../../static/images/index/Combined-Shape.svg" style="width: 32rpx;height: 32rpx;" mode=""></image>
					</view>
				</view>
			</view>

			<!-- 姓名 -->
			<view class="form-item">
				<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">
				<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">联系方式</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 class="required-mark">*</text>
					<text>出生年月</text>
				</view>
				<view class="date-picker" @click="showDatePicker = true">
					<text class="date-text">{{ birthDateText }}</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">
					<text class="required-mark">*</text>
					<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 @click="messagebtn" class="save-button">
			<text class="save-text">保存</text>
		</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>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0, // 状态栏高度
				weChatNum :''	,	
				sex : '',
				age :'',
				phone :'',
				avatar :'',
				ifExp:0,
				userName :'',
				birthDateText: '1991-11-29', // 显示的日期文本
				showDatePicker: false, // 控制日期选择器显示
				dateParams: {
					year: true,
					month: true,
					day: 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
					}
				]
			}
		},
		onLoad(options){
			// 获取状态栏高度
			let systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 0;
			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
			this.getUserInfo()
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			// 选择头像
			chooseAvatar() {
				var that=this
			  uni.chooseImage({
			    count: 1,
			    sizeType: ["compressed"],
			    sourceType: ["album", "camera"],
			    success: (res) => {
					console.log(res.tempFilePaths[0])
				  that.$queue.uploadFile(res.tempFilePaths[0],function(path){
					  if(path)
						that.avatar = path;
				  })
			    },
			  });
			},
			// 日期选择确认
			onDateConfirm(e) {
				const { year, month, day } = e;
				this.birthDateText = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
				this.showDatePicker = false;
			},
			// 显示求职状态选择器
			showJobStatusPicker() {
				this.showJobStatusModal = true;
			},
			// 选择求职状态
			selectJobStatus(item) {
				this.selectedJobStatus = item.value;
				this.showJobStatusModal = false;
				
				// 可以在这里添加保存状态的逻辑
				console.log('选择的求职状态:', item);
			},
			getUserInfo() {
				let userId = uni.getStorageSync('userId')
				this.$Request.get("/app/user/selectUserById").then(res => {
					if (res.code == 0) {
						this.weChatNum = res.data.weChatNum
						this.sex = res.data.sex
						this.age = res.data.age
						this.avatar = res.data.avatar;
						this.userName = res.data.userName;
					}
					uni.hideLoading();
				});
			
			
			},
			// 保存
			messagebtn() {
				if (!this.userName) {
					// this.$queue.showToast('用户名不能为空');
					uni.showToast({
						title: "用户名不能为空",
						icon: "none"
					})
				} else if (!this.phone) {
					// this.$queue.showToast('用户名不能为空');
					uni.showToast({
						title: "联系电话不能为空",
						icon: "none"
					})
				} else {
					let that = this
					uni.showModal({
						title: '温馨提示',
						content: '确定保存信息',
						success: e => {
							if (e.confirm) {
								that.$Request.postJson("/app/user/updateUser", {
									userName: that.userName,
									avatar: that.avatar,
									sex: that.sex,
									age: that.age,
									weChatNum:that.weChatNum
								}).then(res => {
									if (res.code === 0) {
										uni.showToast({
											title: '保存成功',
											icon: "none"
										})
										that.setResume()
									} else {
										uni.showToast({
											title: res.msg,
											icon: "none"
										})
									}
								})
							}
						}
					});
				}
			},
			setResume() {
				let data={
					resumesStatus:this.selectedJobStatus,
					resumesPhone: that.phone,
					birthday:this.birthDateText,
					ifExp:this.ifExp
				}
			  this.$Request.postJson("/app/userFirst/regist", data).then((res) => {
			    if (res.code == 0) {
			        // 实际开发中可以在这里添加跳转逻辑
					uni.$emit('updateResume')
					setTimeout(function() {
						uni.navigateBack()
					}, 1000)
			    } else {
			      uni.showToast({
			        title: res.msg,
			        icon: "none",
			      });
			    }
			  });
			}
		}
	}
</script>

<style lang="scss" scoped>
	.basic-info {
		background-color: #fff;
		min-height: 100vh;
		padding: 0 0 40rpx 0;
	}

	// 顶部导航栏
	.navbar {
		background: #fff;
        margin-bottom: 30rpx;
		padding-left: 40rpx;
		padding-right: 40rpx;
		.navbar-content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			height: 60rpx;
			
			.navbar-left {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.navbar-title {
                color: var(--Grayscale/Grayscale 100, rgba(23, 23, 37, 1));
                font-family: DM Sans;
                font-size: 36rpx;
                font-weight: 700;
                line-height: 52rpx;
                letter-spacing: 0%;
                text-align: center;
			}
			
			.navbar-right {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}

	// 表单内容
	.form-content {
		padding: 0 40rpx;
		
		.form-item {
			margin-bottom: 30rpx;
			
			.form-label {
                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;
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				
				.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: 12px 16px;
			}
			
			.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 {
				position: relative;
				display: inline-block;
				
				.user-avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
				
				.edit-avatar-icon {
					position: absolute;
					bottom: 10rpx;
					right: 5rpx;
					width: 25rpx;
					height: 25rpx;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.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;
				}
			}
		}
	}

	// 保存按钮
	.save-button {
		position: fixed;
		bottom: 60rpx;
		left: 0;
		right: 0;
		height: 120rpx;
        margin: 0 60rpx;
        border-radius: 24px;
		background: #007AFF;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.save-text {
            color: rgba(255, 255, 255, 1);
            font-family: DM Sans;
            font-size: 18px;
            font-weight: 400;
            line-height: 24px;
            letter-spacing: 0.5%;
            text-align: left;
		}
	}
	
	// 求职状态选择器样式
	.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;
						}
					}
				}
			}
		}
	}
</style>