yizhizan-h5/my/renzheng/mainWorkIntro.vue

<template>
	<view class="switch-roles">
		<nav-bar title="公司信息" color="#000"></nav-bar>
		<view class="roles-content">
			<view class="content">
				<view class="progress-num"> <text>8</text>/8 </view>
				<view class="title">
					<view>主营业务介绍</view>
				</view>
				<view class="desc">
					介绍公司主营业务及旗下的产品信息，可有效提升求职者对公司及品牌的认知
				</view>
				<view class="content-index">
					<view class="content-item">
						<view class="content-item-title">主营产品</view>
						<view class="check-box">
							<view class="check-item" :class="{ 'check-active': selectedProducts.includes(item) }"
								v-for="(item, index) in productList" :key="index" @click="toggleProduct(item)">
								{{ item }}</view>
						</view>
					</view>
					<view class="content-item">
						<view class="content-item-title">自定义</view>
						<!-- 自定义标签显示区域 -->
						<view class="custom-tags-box">
							<view class="check-item custom-tag"
								:class="{ 'check-active': selectedCustomTags.includes(tag) }"
								v-for="(tag, index) in customTags" :key="'custom-' + index"
								@click="toggleCustomTag(tag)">
								{{ tag }}
								<text class="delete-tag" @click.stop="deleteCustomTag(index)">×</text>
							</view>
							<!-- 添加按钮 -->
							<view class="add-tag-btn" @click="showAddDialog">
								<text class="add-text">添加</text>
								<image class="add-icon" src="@/static/images/my/my/add.svg" mode="aspectFix" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

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

		<!-- 添加标签弹框 -->
		<u-modal v-model="showDialog" :show-cancel-button="true" confirm-text="确定" cancel-text="取消" title="添加标签"
			@confirm="confirmAddTag" @cancel="cancelAddTag">
			<view class="dialog-content">
				<u-input v-model="tempTag" type="text" :border="true" :clearable="true" input-align="left"
					placeholder="请输入标签内容" maxlength="20" @confirm="confirmAddTag" />
				<view class="input-tips">最多输入20个字符</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import navBar from "@/components/nav-bar/index.vue";
	export default {
		data() {
			return {
				// 主营产品列表
				productList: [
					"3C数码",
					"美妆日化",
					"智能家居",
					"宠物相机",
					"监控摄像头",
					"家装产品",
					"耗材",
					"装修材料",
					"卫浴产品",
				],
				// 选中的产品
				selectedProducts: [],
				// 自定义标签列表
				customTags: [],
				// 选中的自定义标签
				selectedCustomTags: [],
				// 弹框显示控制
				showDialog: false,
				// 临时标签输入
				tempTag: ""
			};
		},
		components: {
			navBar,
		},
		onLoad(options) {
			this.loadSavedCompanyScope();
		},
		methods: {
			// 加载已保存的业务范围数据（从缓存）
			loadSavedCompanyScope() {
				try {
					let companyInfo = uni.getStorageSync('companyInfo');
					console.log('从缓存获取的公司信息:', companyInfo);

					if (companyInfo?.companyScope) {
						this.processCompanyScope(companyInfo.companyScope);
						console.log('已加载保存的业务范围数据');
					} else {
						console.log('缓存中没有业务范围数据');
					}
				} catch (error) {
					console.error('加载业务范围数据失败:', error);
				}
			},

			// 处理业务范围数据
			processCompanyScope(scopeString) {
				if (!scopeString) return;

				// 处理字符串：替换中文逗号，分割，过滤空值
				const scopeItems = scopeString
					.replace(/，/g, ',')
					.split(',')
					.map(item => item.trim())
					.filter(item => item);

				console.log('解析后的业务范围:', scopeItems);

				// 清空当前选择
				this.selectedProducts = [];
				this.customTags = [];
				this.selectedCustomTags = [];

				// 分离标准产品和自定义标签
				scopeItems.forEach(item => {
					if (this.productList.includes(item)) {
						// 是标准产品
						this.selectedProducts.push(item);
					} else {
						// 是自定义标签
						this.customTags.push(item);
						this.selectedCustomTags.push(item); // 自定义标签默认都是选中的
					}
				});
			},

			// 切换产品选择
			toggleProduct(product) {
				const index = this.selectedProducts.indexOf(product);
				if (index > -1) {
					this.selectedProducts.splice(index, 1);
				} else {
					this.selectedProducts.push(product);
				}
			},

			// 显示添加标签弹框
			showAddDialog() {
				this.tempTag = "";
				this.showDialog = true;
			},

			// 确认添加标签
			confirmAddTag() {
				if (this.tempTag.trim() === "") {
					uni.showToast({
						title: "请输入标签内容",
						icon: "none",
					});
					return;
				}

				if (this.customTags.includes(this.tempTag.trim())) {
					uni.showToast({
						title: "标签已存在",
						icon: "none",
					});
					return;
				}

				// 检查是否与标准产品重复
				if (this.productList.includes(this.tempTag.trim())) {
					uni.showToast({
						title: "该标签已存在于主营产品列表中",
						icon: "none",
					});
					return;
				}

				const newTag = this.tempTag.trim();
				this.customTags.push(newTag);
				this.selectedCustomTags.push(newTag); // 新增的自定义标签默认选中
				this.showDialog = false;
				this.tempTag = "";
			},

			// 取消添加标签
			cancelAddTag() {
				this.showDialog = false;
				this.tempTag = "";
			},

			// 切换自定义标签选择
			toggleCustomTag(tag) {
				const index = this.selectedCustomTags.indexOf(tag);
				if (index > -1) {
					this.selectedCustomTags.splice(index, 1);
				} else {
					this.selectedCustomTags.push(tag);
				}
			},

			// 删除自定义标签
			deleteCustomTag(index) {
				const tag = this.customTags[index];
				// 如果这个标签被选中了，先从选中列表中移除
				const selectedIndex = this.selectedCustomTags.indexOf(tag);
				if (selectedIndex > -1) {
					this.selectedCustomTags.splice(selectedIndex, 1);
				}
				// 删除标签
				this.customTags.splice(index, 1);
			},

			goJobPostingSecond() {
				// 获取所有选中的标签
				const allSelectedTags = [...this.selectedProducts, ...this.selectedCustomTags];

				if (allSelectedTags.length === 0) {
					uni.showToast({
						title: "请至少选择一个业务标签",
						icon: "none",
					});
					return;
				}

				console.log("选中的业务标签:", allSelectedTags);

				let companyData = {
					companyId: this.$queue.getData('companyId'),
					companyScope: allSelectedTags.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)
					}
				})
			},
		},
	};
</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;
				}

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

				.content-index {
					width: 100%;

					.content-item {
						margin-bottom: 40rpx;

						.content-item-title {
							color: rgba(34, 37, 42, 1);
							font-family: DM Sans;
							font-size: 32rpx;
							font-weight: 400;
							line-height: 48rpx;
							padding-bottom: 12rpx;
							box-sizing: border-box;
						}

						.check-box {
							display: flex;
							gap: 12rpx;
							flex-wrap: wrap;
							align-items: center;
						}

						// 自定义标签区域
						.custom-tags-box {
							display: flex;
							gap: 12rpx;
							flex-wrap: wrap;
							align-items: center;

							.custom-tag {
								position: relative;
								padding-right: 30rpx;

								.delete-tag {
									position: absolute;
									right: 8rpx;
									top: 50%;
									transform: translateY(-50%);
									font-size: 18rpx;
									color: #999;
									width: 20rpx;
									height: 20rpx;
									display: flex;
									align-items: center;
									justify-content: center;
								}
							}

							.add-tag-btn {
								flex-shrink: 0;
								padding: 8rpx 16rpx;
								border-radius: 8rpx;
								background: #9999991a;
								border: 1rpx solid #9999991a;
								box-sizing: border-box;
								color: rgba(102, 102, 102, 1);
								font-family: DM Sans;
								font-size: 16rpx;
								font-weight: 400;
								display: flex;
								align-items: center;
								gap: 4rpx;

								.add-text {
									color: #016bf6;
								}

								.add-icon {
									width: 16rpx;
									height: 16rpx;
								}
							}
						}
					}
				}

				.check-item {
					flex-shrink: 0;
					padding: 8rpx 16rpx;
					border-radius: 8rpx;
					background: #9999991a;
					border: 1rpx solid #9999991a;
					box-sizing: border-box;
					color: rgba(102, 102, 102, 1);
					font-family: DM Sans;
					font-size: 16rpx;
					font-weight: 400;
				}

				.check-active {
					box-sizing: border-box;
					border: 1rpx solid #016bf6;
					border-radius: 8rpx;
					background: rgba(252, 233, 220, 1);
					color: #016bf6;
				}
			}
		}

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

	// 弹框内容样式
	.dialog-content {
		padding: 40rpx;
		box-sizing: border-box;

		.input-tips {
			color: #999;
			font-size: 24rpx;
			text-align: right;
			margin-top: 10rpx;
		}
	}

	// 输入框placeholder样式
	.input-placeholder {
		color: rgba(153, 153, 153, 1);
		font-family: DM Sans;
		font-size: 16rpx;
		font-weight: 400;
	}
</style>