yizhizan-h5/my/renzheng/peopleDev.vue

<template>
	<view class="switch-roles">
		<nav-bar title="公司信息" color="#000"></nav-bar>
		<view class="roles-content">
			<view class="content">
				<view class="progress-num"> <text>4</text>/8 </view>
				<view class="title">
					<view>人才发展</view>
				</view>
				<view class="desc">
					介绍公司可提供的员工培养＆晋升制度，良好的职业成长空间对人才更有吸引力</view>
				<view class="content-index">
					<view class="content-item">
						<view class="content-item-title">晋升制度</view>
						<view class="check-box">
							<view class="check-item" :class="{ 'check-active': selectedUp.includes(index) }"
								v-for="(item, index) in upList" :key="index" @click="checkUp(index)">{{ item }}</view>
						</view>
					</view>
					<view class="content-item">
						<view class="content-item-title">人才激励</view>
						<view class="check-box">
							<view class="check-item" :class="{ 'check-active': selectedPeople.includes(index) }"
								v-for="(item, index) in peopleList" :key="index" @click="checkPeople(index)">{{ item }}
							</view>
						</view>
					</view>
					<view class="content-item">
						<view class="content-item-title">能力培养</view>
						<view class="check-box">
							<view class="check-item" :class="{ 'check-active': selectedPower.includes(index) }"
								v-for="(item, index) in powerList" :key="index" @click="checkPower(index)">{{ item }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="submit-btn" @click="goJobPostingSecond">下一步</view>
	</view>
</template>

<script>
	import navBar from "@/components/nav-bar/index.vue";
	export default {
		data() {
			return {
				upList: ["考核晋升", "定期晋升", "完善的晋升机制"],
				selectedUp: [], // 改为数组存储多个选择

				peopleList: [
					"定期普调",
					"定期绩效调薪",
					"晋级涨薪",
					"项目奖金",
					"团队奖金",
					"个人奖金",
					"绩效提成",
					"股票期权",
					"人才补贴",
				],
				selectedPeople: [], // 改为数组存储多个选择

				powerList: [
					"老员工带新",
					"导师一对一",
					"岗前带薪培训",
					"内部定期培训",
					"专业技能培训",
					"内部课程资源",
					"大牛带队",
					"人脉积累",
					"国内外进修",
					"校招培养",
				],
				selectedPower: [], // 改为数组存储多个选择

				// companyData: {},
				companyPeopleDevelop: [],
				isUpdateMode: false // 新增：标记是否为编辑模式
			};
		},
		components: {
			navBar,
		},
		onLoad(options) {
			this.loadSavedPeopleDevelop();

			// if (options.companyData) {
			// 	this.companyData = JSON.parse(options.companyData);
			// 	// 如果之前有保存的数据，恢复选择状态
			// 	this.restoreSelections();
			// }
		},
		methods: {
			// 加载已保存的人才发展数据（从缓存）
			loadSavedPeopleDevelop() {
				try {
					let companyInfo = uni.getStorageSync('companyInfo');

					if (companyInfo?.companyPeopleDevelop) {
						// 处理字符串并分割为数组
						const savedPeopleDevelop = companyInfo.companyPeopleDevelop
							.replace(/，/g, ',') // 替换中文逗号
							.split(',') // 分割
							.map(item => item.trim()) // 去除空格
							.filter(item => item); // 过滤空值

						console.log('加载的人才发展数据:', savedPeopleDevelop);

						// 清空之前的选中
						this.selectedUp = [];
						this.selectedPeople = [];
						this.selectedPower = [];

						// 恢复晋升制度选择
						this.upList.forEach((item, index) => {
							if (savedPeopleDevelop.includes(item)) {
								this.selectedUp.push(index);
							}
						});

						// 恢复人才激励选择
						this.peopleList.forEach((item, index) => {
							if (savedPeopleDevelop.includes(item)) {
								this.selectedPeople.push(index);
							}
						});

						// 恢复能力培养选择
						this.powerList.forEach((item, index) => {
							if (savedPeopleDevelop.includes(item)) {
								this.selectedPower.push(index);
							}
						});
						console.log('人才发展数据已加载完成');
					} else {
						console.log('缓存中没有人才发展数据');
					}
				} catch (error) {
					console.error('加载人才发展数据失败:', error);
				}
			},

			// 晋升制度多选
			checkUp(index) {
				const idx = this.selectedUp.indexOf(index);
				if (idx > -1) {
					// 如果已选中，则取消选中
					this.selectedUp.splice(idx, 1);
				} else {
					// 如果未选中，则添加
					this.selectedUp.push(index);
				}
			},

			// 人才激励多选
			checkPeople(index) {
				const idx = this.selectedPeople.indexOf(index);
				if (idx > -1) {
					this.selectedPeople.splice(idx, 1);
				} else {
					this.selectedPeople.push(index);
				}
			},

			// 能力培养多选
			checkPower(index) {
				const idx = this.selectedPower.indexOf(index);
				if (idx > -1) {
					this.selectedPower.splice(idx, 1);
				} else {
					this.selectedPower.push(index);
				}
			},

			// 恢复之前的选择（编辑时使用）
			// restoreSelections() {
			// 	if (this.companyData.companyPeopleDevelop) {
			// 		const savedData = this.companyData.companyPeopleDevelop.split(',');

			// 		// 恢复晋升制度选择
			// 		this.upList.forEach((item, index) => {
			// 			if (savedData.includes(item)) {
			// 				this.selectedUp.push(index);
			// 			}
			// 		});

			// 		// 恢复人才激励选择
			// 		this.peopleList.forEach((item, index) => {
			// 			if (savedData.includes(item)) {
			// 				this.selectedPeople.push(index);
			// 			}
			// 		});

			// 		// 恢复能力培养选择
			// 		this.powerList.forEach((item, index) => {
			// 			if (savedData.includes(item)) {
			// 				this.selectedPower.push(index);
			// 			}
			// 		});
			// 	}
			// },

			goJobPostingSecond() {
				// 清空之前的数组
				this.companyPeopleDevelop = [];

				// 添加选中的晋升制度
				this.selectedUp.forEach(index => {
					if (this.upList[index]) {
						this.companyPeopleDevelop.push(this.upList[index]);
					}
				});

				// 添加选中的人才激励
				this.selectedPeople.forEach(index => {
					if (this.peopleList[index]) {
						this.companyPeopleDevelop.push(this.peopleList[index]);
					}
				});

				// 添加选中的能力培养
				this.selectedPower.forEach(index => {
					if (this.powerList[index]) {
						this.companyPeopleDevelop.push(this.powerList[index]);
					}
				});

				// 验证是否至少选择了一项
				if (this.companyPeopleDevelop.length === 0) {
					uni.showToast({
						title: "请至少选择一项人才发展方向",
						icon: "none",
					});
					return;
				}

				
				let companyData = {
					companyId: this.$queue.getData('companyId'),
					companyPeopleDevelop: this.companyPeopleDevelop.join(',')
				}
				this.$Request.postJson('/app/company/updateCompany', companyData).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '提交成功',
							duration: 1500,
						});
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/my/index'
							});
						}, 500)
					}
				})

				// 如果是编辑模式，同时更新缓存
				// if (this.isUpdateMode) {
				// 	try {
				// 		let companyInfo = uni.getStorageSync('companyInfo');
				// 		if (companyInfo) {
				// 			companyInfo.companyPeopleDevelop = companyData.companyPeopleDevelop;
				// 			uni.setStorageSync('companyInfo', companyInfo);
				// 			console.log('已更新缓存中的人才发展数据');
				// 		}
				// 	} catch (error) {
				// 		console.error('更新缓存失败:', error);
				// 	}
				// }

				// 跳转到下一步
				// uni.navigateTo({
				// 	url: "/my/renzheng/editCompanyDesc?companyData=" +
				// 		encodeURIComponent(JSON.stringify(companyData)) +
				// 		(this.isUpdateMode ? "&update=true" : "")
				// });
			}
		},
	};
</script>

<style lang="scss" scoped>
	/* 样式保持不变 */
	.switch-roles {
		background-color: #fff;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;

		.roles-content {
			width: 100%;
			flex: 1;
			overflow: hidden;
			overflow-y: auto;

			.content {
				padding: 40rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.progress-num {
					color: #016bf6;
					font-family: DM Sans;
					font-size: 24rpx;
					font-weight: 500;
					width: 100%;
					padding-bottom: 20rpx;
					box-sizing: border-box;

					text {
						font-size: 48rpx;
						font-weight: 700;
					}
				}

				.title {
					color: #333;
					width: 100%;
					font-family: DM Sans;
					font-size: 48rpx;
					font-weight: 700;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;
				}

				.desc {
					color: rgba(102, 102, 102, 1);
					width: 100%;
					font-family: DM Sans;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 32rpx;
					letter-spacing: 0.5%;
					text-align: left;
					padding: 20rpx 0;
					box-sizing: border-box;
					margin-bottom: 20rpx;
				}

				.content-index {
					width: 100%;

					.content-item {
						margin-bottom: 40rpx;

						.content-item-title {
							color: rgba(34, 37, 42, 1);
							font-family: DM Sans;
							font-size: 32rpx;
							font-weight: 400;
							line-height: 48rpx;
							padding-bottom: 12rpx;
							box-sizing: border-box;
						}

						.check-box {
							display: flex;
							gap: 20rpx;
							flex-wrap: wrap;
							align-items: center;

							.check-item {
								flex-shrink: 0;
								padding: 8rpx;
								border-radius: 8rpx;
								background: #9999991a;
								border: 1rpx solid #9999991a;
								box-sizing: border-box;
								color: rgba(102, 102, 102, 1);
								font-family: DM Sans;
								font-size: 26rpx;
								font-weight: 400;
								cursor: pointer;
								transition: all 0.3s;
							}

							.check-active {
								box-sizing: border-box;
								border: 1rpx solid #016bf6;
								border-radius: 8rpx;
								background: rgba(252, 233, 220, 1);
								color: #016bf6;
							}
						}
					}
				}
			}
		}

		.submit-btn {
			flex-shrink: 0;
			border-radius: 999px;
			background: #ff6600;
			color: rgba(255, 255, 255, 1);
			font-family: DM Sans;
			font-size: 32rpx;
			font-weight: 400;
			line-height: 48rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 24rpx 32rpx;
			box-sizing: border-box;
			margin: 30rpx 40rpx;
			margin-top: 20rpx;
		}
	}
</style>