yizhizan-h5/package/jobIntention/tagManage.vue

<template>
	<view class="tag-manage">
		<!-- 顶部导航 -->
		<view class="nav-bar">
			<view class="nav-left" @click="goBack">
				<u-icon name="arrow-leftward" color="#fff" style="font-size: 38rpx;"></u-icon>
			</view>
			<view class="nav-title">期望职位</view>
			<view class="nav-right"></view>
		</view>

		<view class="tag-manage-text1">哪个岗位是你的心仪工作？</view>
		<view class="tag-manage-text">可以添加多个求职期望，获得更多精准推荐机会</view>
		
		<!-- 全职期望卡片 -->
		<view class="expectation-card">
			<view class="card-header">
				<view class="header-left">
					<image src="../../static/images/index/lingdai.svg" class="header-icon" />
					<text class="header-title">全职期望</text>
				</view>
				<text class="progress-text">2/3</text>
			</view>
			
			<view class="job-list">
				<view class="job-item">
					<view class="job-info">
						<view>
							<text class="job-title">亚马逊运营总监</text>
							<view @click="goToPreferenceSetting('亚马逊运营总监')">
								<view class="preference-btn">
								<text>设置求职偏好</text>
								</view>
								<u-icon name="arrow-right" color="rgba(29, 33, 41, 1)" size="28"></u-icon>
							</view>
						</view>
						<text class="job-details">30-40K・不限</text>
						<text class="job-location">深圳</text>
					</view>
				</view>
				
				<view class="job-item">
					<view class="job-info">
						<view>
							<text class="job-title">TikTok运营总监</text>
							<view @click="goToPreferenceSetting('TikTok运营总监')">
								<view class="preference-btn">
									<text>设置求职偏好</text>
								</view>
								<u-icon name="arrow-right" color="rgba(29, 33, 41, 1)" size="28"></u-icon>
							</view>
						</view>
						<text class="job-details">30-40K・精品铺货</text>
						<text class="job-location">深圳</text>
					</view>
				</view>
			</view>
			
			<view class="add-expectation-btn" @click="addExpectation">
				<text>添加求职期望</text>
			</view>
		</view>
		
		<!-- 求职状态卡片 -->
		<view class="status-card">
			<view class="status-item" @click="showJobStatusPicker">
				<text class="status-label">求职状态</text>
				<view class="status-value">
					<text>{{ selectedJobStatus }}</text>
					<u-icon name="arrow-right" color="rgba(29, 33, 41, 1)" size="24"></u-icon>
				</view>
			</view>
		</view>
		
		<!-- 求职状态选择器 -->
		<u-popup v-model="showJobStatusModal" mode="bottom" border-radius="42" height="auto" :safe-area-inset-bottom="true">
			<view class="job-status-picker">
				<view class="picker-header">
					<text class="picker-title">求职状态</text>
				</view>
				
				<view class="picker-content">
					<view 
						class="status-option" 
						:class="{ active: selectedJobStatus === item.text }"
						v-for="item in jobStatusList" 
						:key="item.value"
						@click="selectJobStatus(item)"
					>
						<view class="option-left">
							<view class="radio-btn" :class="{ checked: selectedJobStatus === item.text }">
								<u-icon v-if="selectedJobStatus === item.text" name="checkmark" color="#ffffff" size="28"></u-icon>
							</view>
							<text class="option-text">{{ item.text }}</text>
							<view v-if="item.recommended" class="recommend-tag">
								<text>推荐</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showJobStatusModal: false,
			selectedJobStatus: '在职-考虑机会',
			jobStatusList: [
				{
					value: 'unemployed_available',
					text: '离职-随时到岗',
					recommended: true
				},
				{
					value: 'employed_monthly',
					text: '在职-月内到岗',
					recommended: true
				},
				{
					value: 'employed_considering',
					text: '在职-考虑机会',
					recommended: false
				},
				{
					value: 'employed_not_considering',
					text: '在职-暂不考虑',
					recommended: false
				}
			]
		}
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		addExpectation() {
			uni.navigateTo({
				url: '/package/jobIntention/addExpectation'
			})
		},
		showJobStatusPicker() {
			this.showJobStatusModal = true
		},
		closeJobStatusPicker() {
			this.showJobStatusModal = false
		},
		selectJobStatus(item) {
			this.selectedJobStatus = item.text
			this.showJobStatusModal = false
			
			// 可以在这里添加保存状态的逻辑
			console.log('选择的求职状态:', item)
		},
		goToPreferenceSetting(jobTitle) {
			uni.navigateTo({
				url: `/package/jobIntention/preferenceSetting?jobTitle=${encodeURIComponent(jobTitle)}`
			})
		}
	},
	mounted() {
		// 监听偏好设置更新
		uni.$on('preferenceUpdated', (data) => {
			console.log('偏好设置已更新:', data)
			// 这里可以更新对应的职位偏好显示
			uni.showToast({
				title: `${data.jobTitle}偏好已更新`,
				icon: 'success'
			})
		})
	},
	beforeDestroy() {
		// 移除事件监听
		uni.$off('preferenceUpdated')
	}
}
</script>

<style lang="scss" scoped>
.tag-manage {
	min-height: 100vh;
	background: url('../../static/images/index/zhiwei.png') no-repeat;
	background-size: 100% 40%; /* 宽度100%，高度60% */
	background-position: top center;
	padding: 88rpx 40rpx 40rpx 40rpx;
}

.tag-manage-text1 {
	color: rgba(255, 255, 255, 1);
	font-family: DM Sans;
	font-size: 52rpx;
	font-weight: 700;
	line-height: 30px;
	letter-spacing: 0px;
	text-align: left;
	margin: 40rpx 0 30rpx 0;
}

.tag-manage-text {
	color: rgba(255, 255, 255, 1);
	font-family: DM Sans;
	font-size: 26rpx;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: 0px;
	text-align: left;
	margin-bottom: 30rpx;
}

/* 全职期望卡片 */
.expectation-card {
	background: #ffffff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-sizing: border-box;
	border: 0.5px solid rgba(227, 231, 236, 1);
	border-radius: 6px;
	background: rgba(253, 253, 253, 1);
	
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.header-left {
			display: flex;
			align-items: center;
			
			.header-icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}
			
			.header-title {
				color: rgba(29, 33, 41, 1);
				font-family: DM Sans;
				font-size: 28rpx;
				font-weight: 500;
				line-height: 16px;
				letter-spacing: 0%;
				text-align: left;
			}
		}
		
		.progress-text {
			font-family: DM Sans;
			font-size: 24rpx;
			font-weight: 700;
			line-height: 13px;
			letter-spacing: 0%;
			text-align: right;
		}
	}
	
	.job-list {
		margin-bottom: 10rpx;
		
		.job-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			
			&:last-child {
				border-bottom: none;
			}
			
			.job-info {
				flex: 1;
				
				> view:first-child {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 4rpx;
				}
				
				.job-title {
					color: rgba(29, 33, 41, 1);
					font-family: DM Sans;
					font-size: 28rpx;
					font-weight: 500;
					line-height: 16px;
					letter-spacing: 0%;
					text-align: left;
				}
				
				.job-details {
					display: block;
					font-size: 24rpx;
					color: rgba(153, 153, 153, 1);
					margin-bottom: 4rpx;
				}
				
				.job-location {
					font-size: 24rpx;
					color: rgba(153, 153, 153, 1);
				}
			}
			
			.preference-btn {
				display: flex;
				align-items: center;
				padding: 8rpx;
				border: 0.5rpx solid #007AFF;
				border-radius: 12rpx;
				margin-right: 10rpx;
				
				text {
					font-size: 18rpx;
					color: #007AFF;
				}
			}
			
			.job-info > view:first-child > view:last-child {
				display: flex;
				align-items: center;
			}
		}
	}
	
	.add-expectation-btn {
		width: 100%;
		height: 80rpx;
		border: 1rpx solid #007AFF;
		border-radius: 42rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
		text {
			font-size: 28rpx;
			color: #007AFF;
			font-weight: 500;
		}
	}
}

/* 求职状态卡片 */
.status-card {
	background: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx;
	box-sizing: border-box;
	border: 0.5px solid rgba(227, 231, 236, 1);
	border-radius: 6px;
	background: rgba(253, 253, 253, 1);
	
	.status-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.status-label {
			color: rgba(29, 33, 41, 1);
			font-family: DM Sans;
			font-size: 28rpx;
			font-weight: 500;
			line-height: 16px;
			letter-spacing: 0%;
			text-align: left;
		}
		
		.status-value {
			display: flex;
			align-items: center;
			
			text {
				color: rgba(153, 153, 153, 1);
				font-family: DM Sans;
				font-size: 24rpx;
				font-weight: 400;
				line-height: 13px;
				letter-spacing: 0%;
				text-align: left;
				margin-right: 10rpx;
			}
		}
	}
}

.nav-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx auto;

	.nav-left {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav-title {
		color: rgba(255, 255, 255, 1);
		font-family: DM Sans;
		font-size: 32rpx;
		font-weight: 700;
		line-height: 26px;
		letter-spacing: undefined;
		text-align: center;
	}
}

/* 求职状态选择器样式 */
.job-status-picker {
	background: #fff;
	border-radius: 20rpx 20rpx 0 0;
	overflow: hidden;
}

.picker-header {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30rpx 40rpx 20rpx;
	border-bottom: 1rpx solid #F2F2F2;
	position: relative;

	.picker-title {
		color: rgba(34, 37, 42, 1);
		font-family: DM Sans;
		font-size: 36rpx;
		font-weight: 500;
		line-height: 23px;
		letter-spacing: 0px;
		text-align: center;
	}

	.picker-close {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.picker-content {
	padding: 32rpx;
}

.status-option {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	padding: 16rpx 28rpx;
	box-sizing: border-box;
	border: 1px solid rgba(227, 231, 236, 1);
	border-radius: 24px;
	background: rgba(255, 255, 255, 1);
	margin-bottom: 32rpx;

	&:active {
		background-color: #F9F9F9;
	}

	.option-left {
		display: flex;
		align-items: center;
		flex: 1;

		.radio-btn {
			width: 40rpx;
			height: 40rpx;
			border: 2rpx solid #E5E5EA;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 24rpx;
			background: #fff;
			transition: all 0.2s;

			&.checked {
				border-color: #007AFF;
				background: #007AFF;
			}
		}

		.option-text {
			font-size: 28rpx;
			color: rgba(29, 33, 41, 1);
			font-weight: 400;
		}
	}



	.recommend-tag {
		background: rgba(153, 196, 250, 0.4);
		border-radius: 8rpx;
		padding: 0 8rpx;
		margin-bottom: 0 !important;
		margin-left: 20rpx;

		text {
			font-size: 16rpx;
			line-height: 16rpx;
			color: rgba(1, 107, 246, 1);
		}
	}
}

.picker-content :last-child {
	margin-bottom: 0rpx;
}

</style>