yizhizan-h5/pages/my/educationExperience.vue

<template>
	<view class="work-experience">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar" :style="{ paddingTop: (12 + statusBarHeight) + 'px' }">
			<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>
				</view>
				<view class="nav-right"></view>
			</view>
		</view>
		
		<!-- 主要内容 -->
		<view class="main-content">
			<view class="form-section">				
				<!-- 学校名称 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required-mark">*</text>
						<text class="label-text">学校名称</text>
					</view>
					<input 
						v-model="formData.companyName" 
						placeholder="请填写学校名称" 
						class="form-input"
					/>
				</view>
			</view>
			
			<view class="form-section">
				<!-- 在校时间 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required-mark">*</text>
						<text class="label-text">在校时间</text>
					</view>
					<!-- <view class="form-input time-range">
						<view class="time-input">
							<uni-datetime-picker v-model="formData.employmentTime[0]" type="date"
								:border="false" placeholder="开始时间" />
						</view>
						<view class="time-separator">至</view>
						<view class="time-input">
							<uni-datetime-picker v-model="formData.employmentTime[1]" type="date"
								:border="false" placeholder="结束时间" />
							<image src="../../static/images/index/Iconly_Light_Calendar.svg"
								style="width: 48rpx; height: 48rpx;" mode="aspectFit"></image>
						</view>
					</view> -->
					<view class="form-input time-range">
					  <!-- 开始年月 -->
					  <view class="time-input">
					    <picker
					      mode="multiSelector"
					      :range="yearMonthRange"
					      :value="employmentTimeIndex[0]"
					      @change="onStartChange"
					    >
					      <view class="picker-label">
					        {{ formData.employmentTime[0] || '开始年月' }}
					      </view>
					    </picker>
					  </view>
					  
					  <view class="time-separator">至</view>
					  
					  <!-- 结束年月 -->
					  <view class="time-input" @click="onEndClick">
					    <picker
					      mode="multiSelector"
					      :range="yearMonthRange"
					      :value="employmentTimeIndex[1]"
					      @change="onEndChange"
					      :disabled="!formData.employmentTime[0]"
					    >
					      <view class="picker-label">
					        {{ formData.employmentTime[1] || '结束年月' }}
					      </view>
					    </picker>
					    <image
					      src="../../static/images/index/Iconly_Light_Calendar.svg"
					      style="width: 48rpx; height: 48rpx;"
					      mode="aspectFit"
					    />
					  </view>
					</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">
						<picker class="picker" mode="selector" :range="departments" @change="selectDepartment">
							<text>{{departments.length>0?departments[formData.departmentIndex]:'请选择学历'}}</text>
						</picker>
						<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">
						<textarea auto-height v-model="formData.workPerformance" placeholder="请输入专业"></textarea>
					</view>
				</view>
				
				<!-- 教育经历 -->
				<view class="form-item">
					<view class="form-label">
						<text class="label-text">教育经历</text>
					</view>
					<view class="form-input">
						<textarea auto-height v-model="formData.workContent" placeholder="请输入教育经历内容"></textarea>
					</view>
				</view>
			</view>
			
			<!-- 删除教育经历 -->
			<view class="delete-experience" v-if="isEdit" @click="handleDeleteExp">删除教育经历</view>
			
			<!-- 底部保存按钮 -->
			<view class="bottom-btn-container">
				<view class="save-btn" @click="saveWorkExperience">
					<text>保存</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var id=''
export default {
	data() {
		return {
			statusBarHeight: 0, // 状态栏高度
			currentResumeIndex: 0,
			formData: {
				companyName: '',
				employmentTime: ['', ''],
				departmentIndex: 0,
				workContent: '',
				workPerformance: ''
			},
			employmentTimeIndex: [[0, 0], [0, 0]],
			yearMonthRange: [],
			departments:[
					"初中",
						"高中",
						"中专",
						"大专",
						"本科",
						"硕士",
						"博士",
						"博士后"
				],
			isWork:false,
			isEdit: false
		}
	},
	onLoad(options) {
		// 获取状态栏高度
		let systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight || 0;
		// 接收从在线简历页面传递的业务类型参数
		id=options&&options.id?options.id:''
		if(id!=''&&id!=0)
		this.getData()
		this.initYearMonth();
		// 监听技能设置更新
		
		if (options && options.id) {
			this.isEdit = true
		}
	},
	beforeDestroy() {
		
	},
	computed: {
		
	},
	methods: {
		// 初始化年份-月份列表
		initYearMonth() {
		  const years = []
		  const months = []
		  const currentDate = new Date()
		  const currentYear = currentDate.getFullYear()
		  const currentMonth = currentDate.getMonth() + 1
	
		  for (let y = currentYear - 50; y <= currentYear + 5; y++) {
			years.push(y)
		  }
		  for (let m = 1; m <= 12; m++) {
			months.push(m < 10 ? '0' + m : '' + m)
		  }
	
		  this.yearMonthRange = [years, months]
	
		  // 计算当前年月对应的索引
		  const yearIndex = years.indexOf(currentYear)
		  const monthIndex = months.indexOf(currentMonth < 10 ? '0' + currentMonth : '' + currentMonth)
	
		  // 设置默认滚轮位置
		  this.employmentTimeIndex = [
			[yearIndex, monthIndex],
			[yearIndex, monthIndex]
		  ]
		},
		onStartChange(e) {
		  const [yIndex, mIndex] = e.detail.value
		  this.employmentTimeIndex[0] = e.detail.value
		  this.$set(this.formData.employmentTime, 0, `${this.yearMonthRange[0][yIndex]}-${this.yearMonthRange[1][mIndex]}`)
		
		  // 如果结束年月已选择，检查是否小于开始年月
		  if (this.formData.employmentTime[1]) {
		    const [endYear, endMonth] = this.formData.employmentTime[1].split('-').map(Number)
		    const startYear = this.yearMonthRange[0][yIndex]
		    const startMonth = Number(this.yearMonthRange[1][mIndex])
		
		    if (endYear < startYear || (endYear === startYear && endMonth < startMonth)) {
		      // 如果结束年月小于开始年月，清空结束年月
		      this.$set(this.formData.employmentTime, 1, '')
		      this.employmentTimeIndex[1] = [yIndex, mIndex] // 重置 picker 滚轮到开始年月
		    }
		  }
		},
		onEndClick(){
			if (!this.formData.employmentTime[0]) {
			  uni.showToast({ title: '请先选择开始年月', icon: 'none' })
			  return
			}
		},
		onEndChange(e) {
		  if (!this.formData.employmentTime[0]) {
		    uni.showToast({ title: '请先选择开始年月', icon: 'none' })
		    return
		  }
		
		  const [yIndex, mIndex] = e.detail.value
		  const startDate = this.formData.employmentTime[0].split('-').map(Number)
		  const startYear = startDate[0]
		  const startMonth = startDate[1]
		  const selectedYear = this.yearMonthRange[0][yIndex]
		  const selectedMonth = Number(this.yearMonthRange[1][mIndex])
		
		  // 校验结束年月是否小于开始年月
		  if (selectedYear < startYear || (selectedYear === startYear && selectedMonth < startMonth)) {
		    uni.showToast({ title: '结束年月不能小于开始年月', icon: 'none' })
		    return
		  }
		
		  this.employmentTimeIndex[1] = e.detail.value
		  this.$set(this.formData.employmentTime, 1, `${selectedYear}-${this.yearMonthRange[1][mIndex]}`)
		},
		goBack() {
			uni.navigateBack()
		},
		getData(){
			var that=this
			this.$Request.getT("/app/userFirst/selectEdu", {eduId:id}).then((res) => {
			  if (res.code == 0) {
				  res=res.data
			    that.formData.companyName= res.school
				that.formData.employmentTime= [res.startTime ? res.startTime.slice(0, 7) : '',res.endTime ? res.endTime.slice(0, 7) : '']
				that.formData.departmentIndex= that.departments.indexOf(res.degree)<=0?0:that.departments.indexOf(res.degree)
				that.formData.workContent= res.detail
				that.formData.workPerformance= res.profession
			  } else {
			    uni.showToast({
			      title: res.msg,
			      icon: "none",
			    });
			  }
			});
		},
		selectDepartment(e){
			this.formData.departmentIndex=e.detail.value
		},
		formatter(type, value) {
		                if (type === 'year') {
		                    return `${value}年`
		                }
		                if (type === 'month') {
		                    return `${value}月`
		                }
		                if (type === 'day') {
		                    return `${value}日`
		                }
		                return value
		            },

		saveWorkExperience() {
			console.log(this.formData.resumes)
			if (!this.formData.companyName) {
				uni.showToast({ title: "请输入学校名称", icon: "none" });
				return;
			}
			
			const times = this.formData.employmentTime.filter(time => {
				if (time) {
					return time
				}
			})
			if (times.length <= 0) {
				uni.showToast({ title: "请选择在校时间", icon: "none" });
				return;
			}
			if (times.length < 2) {
				uni.showToast({ title: "请完善在校时间", icon: "none" });
				return
			}
			
			if (!this.departments[this.formData.departmentIndex]) {
				uni.showToast({ title: "请选择学历", icon: "none" });
				return
			}
			
			if (!this.formData.workPerformance) {
				uni.showToast({ title: "请输入专业", icon: "none" });
				return
			}
		  
			let data={
				eduId:id,
				school:this.formData.companyName,
				profession:this.formData.workPerformance,
				startTime:this.formData.employmentTime.length<=0?'':this.formData.employmentTime[0] + '-' + '01',
				endTime:this.formData.employmentTime.length<=0?'':this.formData.employmentTime[1] + '-' + '01',
				degree:this.departments[this.formData.departmentIndex],
				detail:this.formData.workContent
			}
			if(this.isWork)
				return
				this.isWork=true
		  uni.showLoading({ title: "提交中..." });
		  this.$Request.postJson("/app/userFirst/addEdu", data).then((res) => {
			  uni.hideLoading();
			  this.isWork=false
			  this.formData.companyName=''
		    if (res.code == 0) {
		        uni.showToast({ title: "保存成功", icon: "none" });
		        // 实际开发中可以在这里添加跳转逻辑
				uni.$emit('updateResume')
		      setTimeout(() => {
		        uni.navigateBack()
		      }, 1000);
		    } else {
		      uni.showToast({
		        title: res.msg,
		        icon: "none",
		      });
		    }
		  });
		},
		
		// 删除教育经历
		handleDeleteExp() {
			this.$queue.appConfirm('确定删除该教育经历吗？', (res) => {
				if (!res) {
					return;
				}
				this.$Request.postJson('/app/userFirst/deleteEdu', {
					eduId: id
				}).then((res) => {
					if (res.code == 0) {
						uni.showToast({
							title: "操作成功",
							icon: "none"
						});
						// 实际开发中可以在这里添加跳转逻辑
						uni.$emit('updateResume')
						setTimeout(() => {
							uni.navigateBack()
						}, 1000);
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
						});
					}
				});
			})
		},
	}
}
</script>

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

.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: 88rpx;
		padding-left: 40rpx;
		padding-right: 40rpx;
		box-sizing: border-box;
		
		.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: 68rpx;
	padding: 0 20rpx 40rpx 20rpx;
	overflow: auto;
	flex: 1;
}

.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%;
		min-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;
		}
		picker{
			width: 100%;
		}
		textarea{
			font-size: 28rpx;
			line-height: 32rpx;
		}
	}
}

/* 时间选择器样式 */
.time-range {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.time-input {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	// border-bottom: 1rpx solid #E5E5EA;
	// padding-bottom: 10rpx;
	text-align: center;
}

.time-input:first-child {
	margin-right: 20rpx;
}

.time-input:last-child {
	margin-left: 20rpx;
}

.time-separator {
	font-size: 28rpx;
	color: #666;
}

/* 调整日期选择器输入框样式 */
.time-input /deep/ .uni-datetime-picker__input {
	width: 100%;
	font-size: 28rpx;
	color: #333;
}

.time-input /deep/ .uni-datetime-picker__placeholder {
	color: #999;
	font-size: 28rpx;
}
.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;
	}
}

// 删除教育经历
.delete-experience {
	font-size: 32rpx;
	text-align: center;
	line-height: 88rpx;
	color: rgba(153, 153, 153, 1);
	margin-top: 32rpx;
}

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

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