yizhizan-h5/my/renzheng/companyFund.vue

<template>
	<view class="switch-roles">
		<nav-bar title="公司福利"></nav-bar>
		<view class="roles-content">
			<view class="content">
				<view class="progress-num"> <text>3</text>/8 </view>
				<view class="title">
					<view>公司福利</view>
					<view class="check-num">
						<text>{{ selectedCount }}</text>/{{ totalCount }}
					</view>
				</view>
				<view class="desc"> 选择公司提供的福利信息，以吸引更多求职者 </view>

				<!-- 福利分类 -->
				<view class="welfare-category" v-for="(category, categoryIndex) in welfareList" :key="categoryIndex">
					<view class="category-title">{{ category.title }}</view>
					<view class="check-box">
						<view class="check-item" v-for="(item, index) in category.items" :key="index"
							@click="checkItem(categoryIndex, index)">
							<view class="check-txt">{{ item.name }}</view>
							<view class="check-icon" :class="{ 'check-icon-active': item.selected }">
								<u-icon name="checkmark" color="#fff" size="18" v-if="item.selected"></u-icon>
								<u-icon name="plus" color="#666" size="28" v-else></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 已选福利 -->
		<view class="check-list" v-if="selectedWelfare.length > 0">
			已选：
			<view class="check-list-item" v-for="(item, index) in selectedWelfare" :key="index"
				@click="removeSelected(item.categoryIndex, item.itemIndex)">
				{{ item.name }}
				<text class="remove-icon">×</text>
			</view>
		</view>

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

<script>
	import navBar from "@/components/nav-bar/index.vue";
	export default {
		data() {
			return {
				welfareList: [{
						title: "保险",
						items: [{
								name: "五险一金",
								selected: false
							},
							{
								name: "补充医疗保险",
								selected: false
							},
							{
								name: "意外险",
								selected: false
							},
							{
								name: "定期体检",
								selected: false
							},
						],
					},
					{
						title: "薪资期权",
						items: [{
								name: "年终奖",
								selected: false
							},
							{
								name: "绩效奖金",
								selected: false
							},
							{
								name: "保底工资",
								selected: false
							},
							{
								name: "底薪加提成",
								selected: false
							},
							{
								name: "股票期权",
								selected: false
							},
							{
								name: "企业年金",
								selected: false
							},
						],
					},
					{
						title: "补贴",
						items: [{
								name: "餐补",
								selected: false
							},
							{
								name: "交通补贴",
								selected: false
							},
							{
								name: "住房补贴",
								selected: false
							},
							{
								name: "加班补贴",
								selected: false
							},
							{
								name: "团建补贴",
								selected: false
							},
						],
					},
					{
						title: "休假",
						items: [{
								name: "带薪年假",
								selected: false
							},
							{
								name: "节假日加班费",
								selected: false
							},
							{
								name: "法定节假日三薪",
								selected: false
							},
							{
								name: "员工购房",
								selected: false
							},
						],
					},
				],
				selectedCount: 0,
				totalCount: 20,
			};
		},
		components: {
			navBar,
		},
		computed: {
			// 计算已选的福利项目
			selectedWelfare() {
				const selected = [];
				this.welfareList.forEach((category, categoryIndex) => {
					category.items.forEach((item, itemIndex) => {
						if (item.selected) {
							selected.push({
								name: item.name,
								categoryIndex: categoryIndex,
								itemIndex: itemIndex,
							});
						}
					});
				});
				return selected;
			},
		},
		onLoad(options) {
			let companyInfo = uni.getStorageSync('companyInfo');
			if (companyInfo && companyInfo.welfare) {
				let welfareString = companyInfo.welfare;
				// 将中文逗号替换为英文逗号，并去除首尾空格
				welfareString = welfareString.replace(/，/g, ',').trim();
			
				// 分割字符串为数组
				const savedWelfareList = welfareString.split(',').map(item => item.trim()).filter(item => item);
			
				// 直接遍历福利列表，设置选中状态
				this.welfareList.forEach(category => {
					category.items.forEach(item => {
						// 如果当前福利名称在保存的列表中，则设置为选中
						item.selected = savedWelfareList.includes(item.name);
					});
				});
			
				// 更新选中数量
				this.updateSelectedCount();
			}
		},
		methods: {
			// 选择/取消选择福利项目
			checkItem(categoryIndex, itemIndex) {
				const item = this.welfareList[categoryIndex].items[itemIndex];
				item.selected = !item.selected;

				// 更新选中数量
				this.updateSelectedCount();
			},

			// 移除已选项目
			removeSelected(categoryIndex, itemIndex) {
				this.welfareList[categoryIndex].items[itemIndex].selected = false;
				this.updateSelectedCount();
			},

			// 更新选中数量
			updateSelectedCount() {
				let count = 0;
				this.welfareList.forEach((category) => {
					category.items.forEach((item) => {
						if (item.selected) count++;
					});
				});
				this.selectedCount = count;
			},

			goJobPostingSecond() {
				if (this.selectedCount === 0) {
					uni.showToast({
						title: "请至少选择一项福利",
						icon: "none",
					});
					return;
				}
				const selectedBenefits = this.selectedWelfare.map((item) => item.name);
				let companyData = {
					companyId: this.$queue.getData('companyId'),
					welfare: selectedBenefits.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)
					}
				})

				// uni.navigateTo({
				//   url:
				//     "/my/renzheng/peopleDev?companyData=" +
				//     encodeURIComponent(JSON.stringify(companyData))+'&update=true',
				// });
				// console.log(companyData);
			},
		},
		mounted() {
			// 初始化总数量
			this.totalCount = this.welfareList.reduce(
				(total, category) => total + category.items.length,
				0
			);
		},
	};
</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;

					.check-num {
						font-family: DM Sans;
						font-size: 48rpx;
						font-weight: 700;
						line-height: 60rpx;
						color: #999;

						text {
							color: #016bf6;
						}
					}
				}

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

				.welfare-category {
					width: 100%;
					margin-bottom: 40rpx;

					.category-title {
						color: rgba(31, 44, 55, 1);
						font-family: DM Sans;
						font-size: 28rpx;
						font-weight: 500;
						line-height: 44rpx;
						padding-bottom: 20rpx;
						box-sizing: border-box;
					}

					.check-box {
						width: 100%;
						display: grid;
						grid-template-columns: repeat(1, 1fr);
						gap: 20rpx;

						.check-item {
							padding: 20rpx 24rpx;
							box-sizing: border-box;
							border-radius: 16rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							gap: 20rpx;

							.check-icon {
								width: 32rpx;
								height: 32rpx;
								border-radius: 8rpx;
								border: 2rpx solid #666;
								display: flex;
								justify-content: center;
								align-items: center;
								background: #fff;
								flex-shrink: 0;
							}

							.check-icon-active {
								background-color: #016bf6;
								border-color: #016bf6;
								border-radius: 50%;
							}

							.check-txt {
								border-radius: 4px;
								background: rgba(153, 153, 153, 0.1);
								padding: 8rpx;
								box-sizing: border-box;
								color: rgba(102, 102, 102, 1);
								font-family: DM Sans;
								font-size: 24rpx;
								font-weight: 400;
							}
						}
					}
				}
			}
		}

		.check-list {
			flex-shrink: 0;
			padding: 20rpx 40rpx;
			box-sizing: border-box;
			color: #016bf6;
			font-family: DM Sans;
			font-size: 16rpx;
			font-weight: 400;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 16rpx;

			.check-list-item {
				box-sizing: border-box;
				border: 1rpx solid #016bf6;
				border-radius: 8rpx;
				background: rgba(252, 233, 220, 1);
				padding: 4rpx 8rpx;
				display: flex;
				align-items: center;
				gap: 8rpx;

				.remove-icon {
					font-size: 24rpx;
					font-weight: bold;
					margin-left: 8rpx;
					cursor: pointer;
				}
			}
		}

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