yizhizan-h5/my/renzheng/mainWorkIntro.vue

<template>
	<view class="page-container">
		<nav-bar title="公司信息">
			<view class="nav-bar-right-btn" slot="right" @click="toNext">跳过</view>
		</nav-bar>
		
		<view class="content">
			<view class="num-title">
				<text class="current-num">4</text>
				<text>/6</text>
			</view>
			
			<view class="main-title">主营业务介绍</view>
			<view>介绍公司主营业务及旗下的产品信息，可有效提升求职者对公司及品牌的认知</view>
			
			<view class="section">
				<view class="title">主营产品</view>
				<view class="tags">
					<view
						class="tag"
						:class="{ 'active-tag': selectedProducts.includes(item) }"
						v-for="(item, index) in productList"
						:key="index"
						@click="toggleProduct(item)"
					>{{ item }}</view>
				</view>
			</view>
			
			<view class="section">
				<view class="title">自定义</view>
				<view class="tags">
					<view
						class="tag"
						:class="{ 'active-tag': 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="tag custom-tag" @click="showAddDialog">
						添加<image class="add-icon" src="@/static/images/my/my/add.svg" mode="aspectFix" />
					</view>
				</view>
			</view>
		</view>

		<view class="fixed-button">
			<view class="button" @click="goJobPostingSecond">保存</view>
		</view>

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

<script>
	import navBar from "@/components/nav-bar/index.vue";
	import cModal from '@/components/c-modal.vue'
	export default {
		data() {
			return {
				loading: false,
				companyId: '',
				// 主营产品列表
				productList: [
					"3C数码",
					"美妆日化",
					"智能家居",
					"宠物相机",
					"监控摄像头",
					"家装产品",
					"耗材",
					"装修材料",
					"卫浴产品",
				],
				// 选中的产品
				selectedProducts: [],
				// 自定义标签列表
				customTags: [],
				// 选中的自定义标签
				selectedCustomTags: [],
				// 弹框显示控制
				showDialog: false,
				// 临时标签输入
				tempTag: ""
			};
		},
		components: {
			navBar,
			cModal
		},
		onLoad(options) {
			this.getCompanyInfo()
		},
		methods: {
			toNext() {
				uni.redirectTo({
					url: '/my/renzheng/companyImg'
				})
			},
			
			// 获取公司信息
			getCompanyInfo() {
				uni.showLoading({ title: '加载中' })
				this.$Request.get('/app/company/selectCompanyByUserId')
					.then((res) => {
						if (res.code != 0) {
							uni.showToast({
								title: res.msg || '查询状态失败',
								icon: 'none'
							});
							return
						}
						this.companyId = res.data.companyId
						this.processCompanyScope(res.data.companyScope);
						uni.hideLoading()
					})
					.catch((err) => {
						uni.hideLoading()
						uni.showToast({
							title: '网络异常',
							icon: 'none'
						})
					})
			},

			// 处理业务范围数据
			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() {
				if (this.loading) return
				// 获取所有选中的标签
				const allSelectedTags = [...this.selectedProducts, ...this.selectedCustomTags];

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

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

				this.loading = true
				uni.showLoading({ title: '保存中' })
				let companyData = {
					companyId: this.companyId,
					companyScope: allSelectedTags.join(',')
				}
				this.$Request.postJson('/app/company/updateCompany', companyData)
					.then(res => {
						if (res.code == 0) {
							uni.showToast({
								title: '提交成功',
								duration: 1500,
							});
							setTimeout(() => {
								uni.$emit('updateCompanyInfo')
								uni.navigateBack()
							}, 500)
						}
						this.loading = false
						uni.hideLoading()
					})
					.catch(() => {
						this.loading = false
						uni.hideLoading()
					})
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import './company.scss';
	
	.delete-tag {
		margin-left: 6rpx;
	}
	.add-icon {
		width: 16rpx;
		height: 16rpx;
		margin-left: 8rpx;
	}
	.custom-tag {
		color: rgba(1, 107, 246, 1) !important;
	}
	.dialog-content {
		padding-top: 20rpx;
	}
</style>