yizhizan-h5/pages/my/workExperience.vue

<template>
	<view class="work-experience">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-content">
				<view class="nav-left" @click="goBack">
					<u-icon name="arrow-leftward" color="#333" size="42"></u-icon>
				</view>
				<view class="nav-title">工作经历</view>
				<view class="nav-right"></view>
			</view>
		</view>
		
		<!-- 主要内容 -->
		<view class="main-content">
			<!-- 公司信息 -->
			<view class="form-section">				
				<!-- 公司名称 -->
				<view class="form-item">
					<view class="form-label">公司名称</view>
					<input 
						v-model="formData.companyName" 
						placeholder="深圳市四海芯舟科技有限公司" 
						class="form-input"
					/>
				</view>
				
				<!-- 公司业务类型 -->
				<view class="form-item">
					<view class="form-label" style="margin-bottom: 20rpx;">
						<text class="required-mark">*</text>
						<text class="label-text">公司业务类型</text>
					</view>
					<view class="checkbox-container">
						<u-checkbox-group 
							@change="checkboxGroupChange"
							:wrap="false"
							shape="square"
							active-color="#007AFF"
						>
							<u-checkbox 
								v-for="(option, index) in businessTypeOptions" 
								:key="index"
								:name="option.value"
								v-model="option.checked"
								class="checkbox-item"
							>
								{{ option.label }}
							</u-checkbox>
						</u-checkbox-group>
					</view>
				</view>
			</view>
			
			<!-- 岗位履历 -->
			<view class="form-section" v-for="(resume, index) in formData.resumes" :key="index">
				<view class="section-title" v-if="hasCrossBorderExperience" >岗位履历 ({{ index + 1 }})</view>
				
				<!-- 任职时间 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required-mark">*</text>
						<text class="label-text">{{ hasCrossBorderExperience ? '任职时间' : '在职时间' }}</text>
					</view>
					<view class="form-input" @click="selectEmploymentTime(index)">
						<text v-if="resume.employmentTime">{{ resume.employmentTime }}</text>
						<text v-else class="placeholder">{{ hasCrossBorderExperience ? '选择任职时间&离职时间' : '选择在职时间&离职时间' }}</text>
						<image src="../../static/images/index/Iconly_Light_Calendar.svg" style="width: 48rpx; height: 48rpx;" mode="aspectFit"></image>
					</view>
				</view>
				
				<!-- 所在部门 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required-mark">*</text>
						<text class="label-text">所在部门</text>
					</view>
					<view class="form-input" @click="selectDepartment(index)">
						<text v-if="resume.department">{{ resume.department }}</text>
						<text v-else class="placeholder">请选择部门</text>
						<u-icon name="arrow-down" color="#999" size="36"></u-icon>
					</view>
				</view>
				
				<!-- 岗位 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required-mark">*</text>
						<text class="label-text">岗位</text>
					</view>
					<view class="form-input" @click="selectPosition(index)">
						<text v-if="resume.position">{{ resume.position }}</text>
						<text v-else class="placeholder">请选择岗位</text>
						<u-icon name="arrow-down" color="#999" size="36"></u-icon>
					</view>
				</view>
				
				<!-- 岗位职级 -->
				<view class="form-item">
					<view class="form-label">岗位职级</view>
					<view class="form-input" @click="selectPositionLevel(index)">
						<text v-if="resume.positionLevel">{{ resume.positionLevel }}</text>
						<text v-else class="placeholder">请选择职级</text>
						<u-icon name="arrow-down" color="#999" size="36"></u-icon>
					</view>
				</view>
				
				<!-- 岗位职业技能 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required-mark">*</text>
						<text class="label-text">岗位职业技能</text>
					</view>
					<view class="skills-input-container">
						<view class="skills-tags">
							<view 
								v-for="(skill, skillIndex) in resume.skills" 
								:key="skillIndex"
								class="skill-tag"
							>
								<text>{{ skill }}</text>
								<u-icon name="close" color="#999" size="16" @click="removeSkill(index, skillIndex)"></u-icon>
							</view>
						</view>
						<view class="add-skill-btn" @click="addSkill(index)">
							<u-icon name="plus" color="rgba(102, 102, 102, 1)" size="28"></u-icon>
						</view>
					</view>
				</view>
				
				<!-- 工作内容 -->
				<view class="form-item">
					<view class="form-label">工作内容</view>
					<view class="form-input" @click="selectWorkContent(index)">
						<text v-if="resume.workContent">{{ resume.workContent }}</text>
						<text v-else class="placeholder">选填,请输入</text>
						<u-icon name="arrow-down" color="#999" size="36"></u-icon>
					</view>
				</view>
				36
				<!-- 工作业绩 -->
				<view class="form-item">
					<view class="form-label">工作业绩</view>
					<view class="form-input" @click="selectWorkPerformance(index)">
						<text v-if="resume.workPerformance">{{ resume.workPerformance }}</text>
						<text v-else class="placeholder">选填,请输入</text>
						<u-icon name="arrow-down" color="#999" size="36"></u-icon>
					</view>
				</view>
				
				<!-- 添加岗位履历按钮 -->
				<view class="add-resume-btn" @click="addResume" v-if="index === formData.resumes.length - 1 && hasCrossBorderExperience">
					<text>添加岗位履历</text>
				</view>
			</view>
		</view>
		
		<!-- 底部保存按钮 -->
		<view class="bottom-btn-container">
			<view class="save-btn" @click="saveWorkExperience">
				<text>保存</text>
			</view>
		</view>
		
		<!-- 添加技能弹窗 -->
		<u-popup v-model="showAddSkill" mode="center" border-radius="24" width="80%">
			<view class="add-skill-popup">
				<view class="popup-title">添加技能</view>
				<view class="popup-content">
					<input 
						v-model="newSkillName" 
						placeholder="请输入技能名称" 
						class="skill-input"
						maxlength="10"
					/>
				</view>
				<view class="popup-buttons">
					<view class="popup-btn cancel-btn" @click="cancelAddSkill">取消</view>
					<view class="popup-btn confirm-btn" @click="confirmAddSkill">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showAddSkill: false,
			newSkillName: '',
			currentResumeIndex: 0,
			businessTypeOptions: [
				{ label: '跨境电商', value: 'cross-border-ecommerce', checked: false },
				{ label: '国内电商', value: 'domestic-ecommerce', checked: false },
				{ label: '外贸', value: 'foreign-trade', checked: false },
				{ label: '其他', value: 'other', checked: false }
			],
			formData: {
				companyName: '',
				businessTypes: [],
				resumes: [{
					employmentTime: '',
					department: '运营部',
					position: '亚马逊运营',
					positionLevel: '资深',
					skills: ['铺货', '品牌精品', '精品精铺', '店铺运营'],
					workContent: '',
					workPerformance: ''
				}]
			}
		}
	},
	onLoad(options) {
		// 接收从在线简历页面传递的业务类型参数
		if (options.businessTypes) {
			try {
				const businessTypes = JSON.parse(decodeURIComponent(options.businessTypes))
				this.formData.businessTypes = businessTypes
				console.log('接收到的业务类型:', businessTypes)
				console.log('是否有跨境经验:', this.hasCrossBorderExperience)
			} catch (e) {
				console.error('解析业务类型参数失败:', e)
			}
		}
	},
	computed: {
		hasCrossBorderExperience() {
			return this.formData.businessTypes.includes('cross-border-ecommerce')
		}
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		
		checkboxGroupChange(e) {
			console.log('选中的业务类型:', e)
			// 更新 formData.businessTypes 以保持数据同步
			this.formData.businessTypes = e
		},

		selectEmploymentTime(index) {
			// 选择任职时间
			uni.showToast({
				title: '选择任职时间',
				icon: 'none'
			})
		},
		selectDepartment(index) {
			// 选择部门
			uni.showToast({
				title: '选择部门',
				icon: 'none'
			})
		},
		selectPosition(index) {
			// 选择岗位
			uni.showToast({
				title: '选择岗位',
				icon: 'none'
			})
		},
		selectPositionLevel(index) {
			// 选择岗位职级
			uni.showToast({
				title: '选择岗位职级',
				icon: 'none'
			})
		},
		addSkill(index) {
			this.currentResumeIndex = index
			this.showAddSkill = true
			this.newSkillName = ''
		},
		removeSkill(resumeIndex, skillIndex) {
			this.formData.resumes[resumeIndex].skills.splice(skillIndex, 1)
		},
		cancelAddSkill() {
			this.showAddSkill = false
			this.newSkillName = ''
		},
		confirmAddSkill() {
			if (this.newSkillName.trim()) {
				this.formData.resumes[this.currentResumeIndex].skills.push(this.newSkillName.trim())
				this.showAddSkill = false
				this.newSkillName = ''
			} else {
				uni.showToast({
					title: '请输入技能名称',
					icon: 'none'
				})
			}
		},
		selectWorkContent(index) {
			// 选择工作内容
			uni.showToast({
				title: '选择工作内容',
				icon: 'none'
			})
		},
		selectWorkPerformance(index) {
			// 选择工作业绩
			uni.showToast({
				title: '选择工作业绩',
				icon: 'none'
			})
		},
		addResume() {
			this.formData.resumes.push({
				employmentTime: '',
				department: '',
				position: '',
				positionLevel: '',
				skills: [],
				workContent: '',
				workPerformance: ''
			})
		},
		saveWorkExperience() {
			uni.showToast({
				title: '保存成功',
				icon: 'success'
			})
			setTimeout(() => {
				uni.navigateBack()
			}, 1500)
		}
	}
}
</script>

<style lang="scss" scoped>
.work-experience {
	min-height: 100vh;
	padding-bottom: 120rpx;
}

.custom-navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding-top: 80rpx;
	background-color: #ffffff;
	z-index: 9999;
	
	.navbar-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100%;
		padding: 0 40rpx;
		
		.nav-left, .nav-right {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.nav-title {
			color: rgba(51, 51, 51, 1);
			font-family: DM Sans;
			font-size: 36rpx;
			font-weight: 700;
			line-height: 26px;
			letter-spacing: 0px;
			text-align: center;
		}
	}
}

.main-content {
	margin-top: 88rpx;
	padding: 80rpx 20rpx 40rpx 20rpx;
}

.form-section {
	background: #fff;
	border-radius: 16rpx;
	padding: 0rpx 10rpx;
	
	.section-title {
		color: rgba(23, 23, 37, 1);
		font-family: Inter;
		font-size: 32rpx;
		font-weight: 600;
		line-height: 48rpx;
		letter-spacing: 0%;
		text-align: left;
		padding: 16rpx 0 32rpx 0;
	}
}

.form-item {
	margin-bottom: 30rpx;
	
	.form-label {
			color: rgba(31, 44, 55, 1);
			font-family: DM Sans;
			font-size: 16px;
			font-weight: 500;
			line-height: 22px;
			letter-spacing: 0%;
			text-align: left;
			margin-bottom: 20rpx;

		.required-mark {
			color: #FF3B30;
			font-size: 18px;
			font-weight: 500;
			margin-right: 4rpx;
		}
		
		.label-text {
			color: rgba(31, 44, 55, 1);
			font-family: DM Sans;
			font-size: 16px;
			font-weight: 500;
			line-height: 22px;
			letter-spacing: 0%;
			text-align: left;
		}
	}
	
	.form-input {
		width: 100%;
		height: 80rpx;
		padding: 0 40rpx;
		border: 1px solid rgba(227, 231, 236, 1);
		border-radius: 24px;
		background: rgba(255, 255, 255, 1);
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.placeholder {
			color: #999999;
		}
	}
}

.skills-input-container {
	width: 100%;
	min-height: 80rpx;
	padding: 0rpx 40rpx;
	border: 1px solid rgba(227, 231, 236, 1);
	border-radius: 32px;
	background: rgba(255, 255, 255, 1);
	display: flex;
	align-items: center;
	justify-content: space-between;
	
	.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;
			gap: 8rpx;
			
			text {
				font-size: 24rpx;
				color: #666666;
			}
		}
	}
	
	.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;
	}
}

.add-resume-btn {
	width: 100%;
	height: 80rpx;
	border: 1rpx solid #007AFF;
	border-radius: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 20rpx;
	
	text {
		color: #007AFF;
		font-size: 28rpx;
		font-weight: 500;
	}
}

.bottom-btn-container {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 30rpx 20rpx;
	background: #fff;
	border-top: 1px solid #f0f0f0;
	z-index: 9999;
}

.save-btn {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(90deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
	border-radius: 44rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	
	text {
		font-size: 32rpx;
		font-weight: 600;
		color: #fff;
	}
}

.add-skill-popup {
	background: #fff;
	border-radius: 24rpx;
	padding: 40rpx;
	
	.popup-title {
		color: rgba(34, 37, 42, 1);
		font-size: 36rpx;
		font-weight: 500;
		text-align: center;
		margin-bottom: 30rpx;
	}
	
	.popup-content {
		margin-bottom: 30rpx;
		
		.skill-input {
			width: 100%;
			height: 80rpx;
			padding: 0 20rpx;
			border: 1rpx solid #E5E5EA;
			border-radius: 12rpx;
			font-size: 28rpx;
			color: rgba(34, 37, 42, 1);
			background: #F7F8FA;
		}
	}
	
	.popup-buttons {
		display: flex;
		gap: 20rpx;
		
		.popup-btn {
			flex: 1;
			height: 80rpx;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			font-weight: 500;
		}
		
		.cancel-btn {
			background: #F7F8FA;
			color: rgba(102, 102, 102, 1);
		}
		
		.confirm-btn {
			background: #007AFF;
			color: #fff;
		}
	}
}

.checkbox-container {
	display: flex;
	flex-wrap: nowrap;
	gap: 10rpx;
	
	/deep/ .u-checkbox-group {
		display: flex;
		flex-wrap: nowrap;
		width: 100%;
	}
	
	/deep/ .u-checkbox {
		flex: 1;
		min-width: 0;
		margin-right: 0;
	}

	/deep/ .u-checkbox__label {
		color: var(--Grayscale/Grayscale 100, rgba(23, 23, 37, 1));
		font-family: DM Sans;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 48rpx;
		letter-spacing: 0%;
		text-align: left;
	}
}
</style>