yizhizan-h5/package/my/editUserInfo.vue

<template>
	<view class="container">
		<!-- 顶部导航 -->
		<view class="nav-bar" :style="{ paddingTop: (12 + statusBarHeight) + 'px' }">
			<view class="nav-left" @click="goBack">
				<u-icon name="arrow-leftward" color="rgba(51, 51, 51, 1)" style="font-size: 38rpx;"></u-icon>
			</view>
			<view class="nav-title">个人信息</view>
			<view class="nav-right"></view>
		</view>
		
		<!-- 表单内容 -->
		<view class="form-container">
			<view class="form-item">
				<view class="form-label">
					<text class="required-mark">*</text>
					<text class="label-text">求职状态</text>
				</view>
				<view class="form-content flex-between select-picker form-content-border" @click="showJobStatusPicker">
					<text class="select-text">{{ jobStatusList[selectedJobStatus].text }}</text>
					<u-icon name="arrow-down" color="#999" size="24"></u-icon>
				</view>
			</view>
			
			<view class="form-item">
				<view class="form-label">
					<text class="label-text">我的优势</text>
					<text class="text-num">（{{ textNum }}/1000）</text>
				</view>
				<view class="form-content form-content-border">
					<textarea class="form-input" type="text" maxlength="1000" auto-height placeholder="请填写您的个人优势" v-model="advantages" />
				</view>
			</view>
			
			<view class="form-item">
				<view class="form-label">
					<text class="label-text">我的技能</text>
				</view>
				<view class="form-content flex-between form-content-border skills-content">
					<view class="skills-tags">
						<view v-for="(skill, index) in skills" :key="index" class="skill-tag">
							<text>{{ skill }}</text>
						</view>
					</view>
					<view class="add-skill-btn" @click="addSkill()">
						<u-icon name="plus" color="rgba(102, 102, 102, 1)" size="28"></u-icon>
					</view>
				</view>
			</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>
		
		<view class="fixed-section">
			<u-button type="primary" class="submit-btn" @click="submitData">保存</u-button>
		</view>
	</view>
</template>

<script>
	import { jobStatus } from '@/constants/userInfo.js'
	
	export default {
		data() {
			return {
				statusBarHeight: 0, // 状态栏高度
				selectedJobStatus: 0,
				jobStatusList: jobStatus,
				showJobStatusModal: false,
				advantages: '', // 优势
				skills: [], // 我的技能
			};
		},
		computed: {
			textNum() {
				if (typeof this.advantages == 'string') {
					return this.advantages.length
				}
				return '0'
			}
		},
		onLoad() {
			// 获取状态栏高度
			let systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 0;
			
			this.getUserInfoData()
			
			// 监听技能设置更新
			uni.$on('skillsUpdated', (data) => {
				if (data.set != 1)
					return
				this.updateSkills(data.selectedTags)
			})
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			// 获取用户数据
			getUserInfoData() {
				uni.showLoading({
					title: '加载中'
				})
				this.$Request.getT("/app/userFirst/getUserResumes", {}).then((res) => {
					if (res.code === 0) {
						this.selectedJobStatus = res.data.resumeList.resumesStatus
						this.advantages = res.data.resumeList.adv
						this.skills = res.data.skills.map(skill => skill.skillName)
					}
				}).finally(() => {
					uni.hideLoading()
				})
			},
			// 显示求职状态选择器
			showJobStatusPicker() {
				this.showJobStatusModal = true;
			},
			// 选择求职状态
			selectJobStatus(item) {
				this.selectedJobStatus = item.value;
				this.showJobStatusModal = false;
			},
			// 移除技能
			removeSkill(index) {
				this.skills.splice(index, 1)
			},
			// 增加技能
			addSkill() {
				uni.navigateTo({
					url: '/package/jobIntention/jobSkills?from=userInfo&set=1&jobTitle=我的&skill=' + encodeURIComponent(JSON
						.stringify(this.skills == null ? [] : this.$queue.array_column(this
							.skills, 'skillName')))
				})
			},
			// 更新本地技能数据
			updateSkills(data) {
				this.skills = data;
			},
			// 保存数据
			submitData() {
				uni.showLoading({
					title: '保存中'
				})
				this.$Request.postJson('/app/user/updatePersonalInfo', {
					resumesStatus: this.selectedJobStatus,
					adv: this.advantages,
					skills: this.skills.map(skill => {
						return {
							isUse: 1,
							skillId: '',
							skillName: skill,
							userId: ''
						}
					})
				}).then((res) => {
					uni.showToast({
						title: '更新成功',
						icon: 'none',
					})
					setTimeout(() => {
						uni.$emit('updateResume')
						uni.navigateBack()
					}, 1000)
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
				}).finally(() => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss">
@import '../../common.scss';

.container {
	.flex-between {
		display: flex;
		justify-content: space-between;
	}
	.form-content-border {
		min-height: 75rpx;
		border: 1px solid rgba(227, 231, 236, 1);
		border-radius: 48rpx;
		padding: 24rpx 32rpx;
		font-size: 28rpx;
		color: #78828a; 
	}
	// 下拉选择器样式
	.select-picker {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.select-text {
			color: #78828a; 
			font-family: DM Sans;
			font-size: 14px;
			font-weight: 400;
			line-height: 22px;
			letter-spacing: 0%;
			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;
				}

				.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;
						}
					}
				}
			}
		}
	}
	// 输入框内容
	.form-input {
		font-size: 28rpx;
		line-height: 32rpx;
	}
	.text-num {
		font-weight: normal;
		color: #78828a;
		font-size: 28rpx;
	}
	// 我的技能
	.skills-content {
		align-items: center;
		
		.skills-tags {
			display: flex;
			flex-wrap: wrap;
			gap: 12rpx;
			flex: 1;
		
			.skill-tag {
				padding: 8rpx 16rpx;
				background: #F5F5F5;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
		
				text {
					font-size: 24rpx;
					color: #666666;
					margin-right: 8rpx;
				}
			}
		}
		
		.add-skill-btn {
			width: 40rpx;
			height: 40rpx;
			border: 1rpx solid rgba(102, 102, 102, 1);
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #fff;
			flex-shrink: 0;
		}
	}	
}
</style>