yizhizan-h5/package/jobIntention/preferenceSetting.vue

<template>
	<view class="preference-setting">
		<!-- 自定义导航栏 -->
		<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(child.postSkillName)">
								<text>{{ child.postSkillName }}</text>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>

		<!-- 底部确定按钮 -->
		<view class="bottom-btn-container">
			<view class="confirm-btn" @click="confirmSelection">
				<text>确定</text>
			</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);
			if (index === -1) {
				if (this.selectedPreferences.length > 4) {
					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;
}

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

.bottom-btn-container {
	// position: fixed;
	// bottom: 0;
	// left: 0;
	// right: 0;
	padding: 32rpx;
	background: #fff;
	border-top: 1px solid #f0f0f0;
}

.confirm-btn {
	width: 100%;
	height: 88rpx;
	background: #007AFF;
	border-radius: 44rpx;
	display: flex;
	align-items: center;
	justify-content: center;

	text {
		font-size: 32rpx;
		font-weight: 600;
		color: #fff;
	}

	&:active {
		background: #0056CC;
	}
}
</style>