添加跨境标签

src/views/search/index.vue

@@ -77,11 +77,37 @@
 								</div>
 							</div>
 						</div>
-						<!-- 地区选择 -->
-						<div class="condizione-box-c-city">
-							<div class="condizione-box-c-city-title">
+						<div class="flex">
+							<div class="condizione-box-c-city-title" :class="activeIndex == 1 ? 'condizione-box-c-city-title-active' : ''"
+								@click="activeIndex = 1">
+								跨境标签
+							</div>
+							<div class="condizione-box-c-city-title"
+								:class="activeIndex == 2 ? 'condizione-box-c-city-title-active' : ''"
+								@click="activeIndex = 2">
 								城市和地区
 							</div>
+						</div>
+						<!-- 跨境标签选择 -->
+						<div class="condizione-box-c-city" v-if="activeIndex == 1">
+							<div class="flex align-center text-item">
+								<div style="color: rgba(51, 51, 51, 1);font-size: 16px;margin-right: 16px;">请选择您的跨境标签</div>
+								<div>您的跨境标签将用于为您推荐更匹配的职位</div>
+							</div>
+							<!-- 岗位对应的跨境标签 -->
+							<div style="margin-top: 20px;">
+								<div class="tag-list flex" v-if="tabs.length">
+									<span v-for="(tag, i) in ['不限', ...parseSkills(tabs[tabsCurr]?.industry)]"
+										:key="i" class="tag-item"
+										:class="{ 'tag-item-active': selectedTags.includes(tag) }"
+										@click="selectTag(tag)">
+										{{ tag }}
+									</span>
+								</div>
+							</div>
+						</div>
+						<!-- 地区选择 -->
+						<div class="condizione-box-c-city" v-if="activeIndex == 2">
 							<div class="condizione-box-c-city-s flex flex-wrap">
 								<div class="condizione-box-c-city-s-i flex align-center" @click="openCityDialog()">
 									<el-text style="color: #00DD9A;font-size: 14px;margin-right: 10px;">{{
@@ -358,7 +384,7 @@ export default {
 	data() {
 		return {
 			tabs: [],
-			tabsCurr:null,
+			tabsCurr:0,
 			size: 160, //二维码大小
 			qrColor: {
 				'background': '#ffffff'
@@ -421,6 +447,8 @@ export default {
 			allCitys: false, //是否显示全部城市弹框
 			citys: '', //定位城市
 			searchType: '职位', //搜索类型，默认职位
+			activeIndex: 1, // 当前选中的标签类型（1: 跨境标签, 2: 城市和地区）
+			selectedTags: ['不限'], // 当前选中的跨境标签
 		}
 	},
 	computed: {
@@ -796,8 +824,9 @@ export default {
 				companyPeople: this.companyPeople == '不限' ? '' : this.companyPeople || '', //公司规模
 				// lng: this.longitude,
 				// lat: this.latitude,
-				userId: localStorage.getItem('userId') ? localStorage.getItem('userId') : ''
-			}
+				userId: localStorage.getItem('userId') ? localStorage.getItem('userId') : '',
+				preference: this.selectedTags.includes('不限') ? '' : this.selectedTags.filter(tag => tag !== '不限').join(',') //跨境标签
+		}
 			let url = '';
 			if(this.searchType == '职位'){
 				url = '/app/postPush/userGetPostPushList'
@@ -985,9 +1014,53 @@ export default {
 				// 设置默认区县为"全部"
 				this.county = '全部'
 			}
-
 			this.getLocation()
 		},
+		// 解析技能标签字符串为数组
+		parseSkills(str) {
+			if (!str) return [];
+			try {
+				const parsed = JSON.parse(str);
+				if (Array.isArray(parsed)) {
+					return parsed;
+				}
+			} catch (e) {
+
+			}
+			str = str.replace(/，/g, ',');
+			// 判断分隔符
+			if (str.includes('/')) {
+				return str.split('/').filter(Boolean);
+			} else if (str.includes(',')) {
+				return str.split(',').filter(Boolean);
+			}
+			return [str];
+		},
+		// 选择跨境标签
+		selectTag(tag) {
+			if (tag === '不限') {
+				// 如果选择'不限'，则只保留'不限'
+				this.selectedTags = ['不限'];
+			} else {
+				if (this.selectedTags.includes('不限')) {
+					// 如果当前包含'不限'，则移除'不限'并添加新标签
+					this.selectedTags = [tag];
+				} else if (this.selectedTags.includes(tag)) {
+					// 如果已经包含该标签，则移除
+					this.selectedTags = this.selectedTags.filter(item => item !== tag);
+					// 如果移除后没有标签，则添加'不限'
+					if (this.selectedTags.length === 0) {
+						this.selectedTags = ['不限'];
+					}
+				} else {
+					// 添加新标签
+					this.selectedTags.push(tag);
+				}
+			}
+			// 重新获取岗位列表
+			this.page = 1;
+			this.getUserList();
+		}
 	}
 }
 </script>
@@ -1327,19 +1400,24 @@ $marginTop-60: 120px;
 			}
 		}
 	}
-
+	.condizione-box-c-city-title {
+		width: fit-content;
+		border-bottom: 4px solid #fff;
+		font-weight: 400;
+		cursor: pointer;
+		margin-right: 20px;
+		color: rgba(153, 153, 153, 1);
+	}
+	.condizione-box-c-city-title-active{
+		color: #00DD9A;
+		border-bottom: 4px solid #00DD9A;
+	}
 	.condizione-box-c-city {
-		width: 100%;
+		// width: 100%;
 		height: auto;
 		margin-top: 10px;
 
-		.condizione-box-c-city-title {
-			width: fit-content;
-			color: #00DD9A;
-			border-bottom: 4px solid #00DD9A;
-			font-weight: 500;
-			cursor: pointer;
-		}
+		
 
 		.condizione-box-c-city-s {
 			margin-top: 18px;
@@ -1594,4 +1672,46 @@ $marginTop-60: 120px;
 	margin-right: 10px;
 	margin-top: 10px;
 }
+
+/* 跨境标签样式 */
+.label-box {
+	padding: 4px 12px;
+	background-color: #f8f8f8;
+	border-radius: 4px;
+	cursor: pointer;
+	font-size: 14px;
+}
+
+.label-active {
+	background-color: #00DD9A;
+	color: #ffffff;
+}
+
+.tag-list {
+	flex-wrap: wrap;
+}
+
+.tag-item {
+	padding: 4px 12px;
+	background-color: #f8f8f8;
+	border-radius: 4px;
+	margin-right: 10px;
+	margin-bottom: 10px;
+	cursor: pointer;
+	font-size: 14px;
+	color: #333333;
+	cursor: pointer;
+}
+
+.tag-item-active {
+	background-color: #00DD9A;
+	color: #ffffff;
+}
+.text-item {
+	color: rgba(153, 153, 153, 1);
+	font-family: DM Sans;
+	font-size: 14px;
+	font-weight: 400;
+	margin-top: 18px;
+}
 </style>