yizhizan-h5/package/jobIntention/preferenceSetting.vue

<template>
	<view class="preference-setting">
		<view class="container">
			<!-- 自定义导航栏 -->
			<view class="custom-navbar" :style="{ paddingTop: (12 + statusBarHeight) + 'px' }">
				<view class="navbar-content">
					<view class="nav-left" @click="goBack">
						<u-icon name="close" color="#333" size="32"></u-icon>
					</view>
					<view class="nav-title">跨境职业标签</view>
					<view class="nav-right"></view>
				</view>
			</view>

			<!-- 主要内容 -->
			<view class="main-content">
				<view class="job-title">{{ jobTitle }}-职位偏好</view>
				<view class="description">根据你的偏好设置,为你推荐更匹配的职位</view>

				<view class="preference-section">
					<view class="section-title">请选择你的从事偏好</view>

					<!-- 偏好标签网格 -->
					<view class="preference-grid">
						<view v-for="(parent, pIndex) in preferenceOptions" :key="pIndex" class="preference-group">
							<!-- 一级标题 -->
							<view class="preference-title">
								<text>{{ parent.postSkillName }}</text>
							</view>

							<!-- 二级可选项 -->
							<view class="preference-children">
								<view v-for="(child, cIndex) in parent.childrenList" :key="cIndex" class="preference-tag"
									:class="{ active: selectedPreferences.includes(child.postSkillName) }"
									@click="togglePreference(pIndex,child.postSkillName)">
									<text>{{ child.postSkillName }}</text>
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>			
		</view>

		<!-- 底部确定按钮 -->
		<view class="button-section">
			<view class="submit-btn" @click="confirmSelection">确定</view>
		</view>
	</view>
</template>

<script>
var set = 0
export default {
	data() {
		return {
			statusBarHeight: 0, // 状态栏高度
			jobTitle: '岗位',
			jobId: '',
			selectedPreferences: [],
			preferenceOptions: []
		}
	},
	onLoad(options) {
		// 获取状态栏高度
		let systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight || 0;
		if (options && options.jobTitle) {
			this.jobTitle = decodeURIComponent(options.jobTitle)
		}
		if (options && options.jobId) {
			this.jobId = options.jobId
		}
		if (options && options.selectedPreferences)
			this.selectedPreferences = JSON.parse(decodeURIComponent(options.selectedPreferences))
		this.getData()
		set = options && options.set ? options.set : 0
	},
	methods: {
		getData() {
			let data = {
				ruleClassifyId: this.jobId
			}
			this.$Request.getT('/app/userFirst/getPostSkill', data).then(res => {
				if (res.code == 0) {
					this.preferenceOptions = res.data
				}
			})
		},
		goBack() {
			uni.navigateBack()
		},
		// togglePreference(name) {
		// 	const index = this.selectedPreferences.indexOf(name);
		// 	const realLength = this.selectedPreferences.filter(item => item !== '不限').length;
		// 	if (index === -1) {
		// 		if (realLength >= 5) {
		// 			uni.showToast({
		// 				title: '最多选择5个偏好！',
		// 				icon: 'none'
		// 			})
		// 			return;
		// 		}
		// 		this.selectedPreferences.push(name);
		// 	} else {
		// 		this.selectedPreferences.splice(index, 1);
		// 	}
		// },
		togglePreference(pIndex, name) {
			const parent = this.preferenceOptions[pIndex];
			// 当前分类下已选中的标签（排除不限）
			const selectedInGroup = parent.childrenList
				.filter(item => item.postSkillName !== '不限' && this.selectedPreferences.includes(item.postSkillName));
		
			const index = this.selectedPreferences.indexOf(name);
		
			if (index === -1) {
				if (selectedInGroup.length >= 5) {
					uni.showToast({
						title: '每个分类最多选择5个偏好！',
						icon: 'none'
					});
					return;
				}
				this.selectedPreferences.push(name);
			} else {
				this.selectedPreferences.splice(index, 1);
			}
		},
		confirmSelection() {
			// 返回选中的偏好设置
			uni.navigateBack({
				delta: 1
			})

			// 通知父页面更新偏好设置
			uni.$emit('preferenceUpdated', {
				jobTitle: this.jobTitle,
				preferences: this.selectedPreferences,
				set
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.preference-setting {
	height: 100vh;
	background: #fff;
	display: flex;
	flex-direction: column;
	// padding: 0 40rpx 40rpx 40rpx;
	padding-bottom: 40rpx;
}

.container {
	flex: 1;
	padding: 0 40rpx;
}

.navbar-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 88rpx;
}

.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: 20rpx;
	flex: 1;
	overflow: auto;
}

.job-title {
	color: rgba(51, 51, 51, 1);
	font-family: DM Sans;
	font-size: 52rpx;
	font-weight: 700;
	line-height: 30px;
	letter-spacing: 0px;
	text-align: left;
}

.description {
	margin: 20rpx 0;
	color: rgba(102, 102, 102, 1);
	font-family: DM Sans;
	font-size: 28rpx;
	font-weight: 400;
	letter-spacing: 0px;
	text-align: left;
}

.preference-section {
	margin-bottom: 40rpx;
}

.section-title {
	color: rgba(34, 37, 42, 1);
	font-family: DM Sans;
	font-size: 36rpx;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0px;
	text-align: left;
	margin-bottom: 20rpx;
}

.preference-grid {
	display: flex;
	// flex-wrap: wrap;
	flex-direction: column;
	gap: 12rpx;

	.preference-group {}

	.preference-children {
		margin-top: 20rpx;
		// display: grid;
		// grid-template-columns: repeat(4, 1fr);
		// gap: 16rpx 10rpx;
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;

	}
}

.preference-tag {
	// width: calc((100% - 72rpx) / 7);
	padding: 14rpx 20rpx;
	background: #F7F8FA;
	border: 1rpx solid #F7F8FA;
	border-radius: 12rpx;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	word-break: break-all;

	text {
		font-size: 24rpx;
		color: rgba(102, 102, 102, 1);
		font-weight: 400;
		text-align: center;
		line-height: 1.2;
	}

	&.active {
		background: rgba(153, 196, 250, 0.4);
		border: 0.5px solid rgba(1, 107, 246, 1);

		text {
			color: rgba(1, 107, 246, 1);
			font-weight: 400;
		}
	}

	&:active {
		transform: scale(0.95);
	}
}

.button-section {
	padding: 28rpx 40rpx;
	box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.04);
}
.submit-btn {
	flex-shrink: 0;
	border-radius: 999px;
	box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.04);
	background: linear-gradient(90deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
	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: 16rpx 32rpx;
	box-sizing: border-box;
}
</style>