yizhizan-h5/package/jobIntention/fund.vue

<template>
  <view class="switch-roles">
    <nav-bar title="福利待遇"></nav-bar>
    <view class="roles-content">
      <view class="content-card">
        <view class="card-title">福利待遇</view>
		
		<view class="other-input-area">
			<textarea v-model="otherWelfare" placeholder="请详细描述公司的福利待遇" maxlength="5000" class="other-textarea" />
			<view class="input-count flex align-center justify-end">
				<text class="hight-light">{{ otherWelfare.length }}</text>
				<text>/5000</text>
			</view>
		</view>
		
		<!-- 福利标签 -->
		<view class="tag-list">
			<view
				class="tag flex"
				:class="{ 'tag-active': selectedTags.includes(item) }"
				v-for="(item, index) in fundList"
				:key="index + item"
				@click="toggleTag(item)"
			>
				{{ item }}
				<view style="margin-left: 2px" v-if="index > 11" @click.stop="removeCustomTag(item, index)">
					<u-icon name="close" size="16"></u-icon>
				</view>
			</view>
		</view>
		<view class="add-tag-wrapper flex">
			<view class="tag tag-active flex" @click="showAddModal = true">
				<text>自定义标签</text>
				<image src="/static/images/svg/add-border.svg" class="add-icon"></image>
			</view>
		</view>
		<view class="tag-count-wrapper">已选 {{ selectedTags.length }} 个</view>

        <!-- 已选标签展示区（核心新增） -->
        <!-- <view class="selected-tags" v-if="selectedTags.length > 0">
          <view class="selected-tag-item" v-for="(tag, index) in selectedTags" :key="index">
            <text>{{ tag }}</text>
            <u-icon name="close" size="24rpx" color="#999" @click="removeTag(index)"></u-icon>
          </view>
        </view> -->

        <!-- 自定义输入 + 添加按钮区域 -->
        <!-- <view class="input-area">
          <textarea v-model="customWelfare" placeholder="请输入自定义福利" maxlength="500" class="custom-textarea"></textarea>
          <button class="add-btn" @click="addCustomTag">添加</button>
          <view class="word-count">
            <text>{{ customWelfare.length }}</text> /500
          </view>
        </view> -->

        <!-- 常用标签区域 -->
        <!-- <view class="tag-section">
          <view class="section-title">常用福利标签</view>
          <view class="tag-list">
            <view class="tag-item" :class="{ 'tag-selected': selectedTags.includes(item) }" v-for="item in fundList"
              :key="item" @click="toggleTag(item)">
              {{ item }}
            </view>
          </view>
          <view class="selected-count">已选 {{ selectedTags.length }} 个福利</view>
        </view> -->
      </view>
    </view>
	
	<!-- 添加自定义弹窗 -->
	<u-modal v-model="showAddModal" show-cancel-button title="添加自定义" @confirm="confirmAddCustomeWelfare">
		<view class="custom-input">
			<input v-model="addCustomWelfare" placeholder="请输入自定义福利" maxlength="50" class="input" />
		</view>
	</u-modal>
	
	<view class="button-section">
		<view class="submit-btn" @click="submitWelfare">确定</view>
	</view>
  </view>
</template>

<script>
import navBar from "@/components/nav-bar/index.vue";
export default {
  data() {
    return {
		fundList: [
			"五险一金", "定期体检", "年终奖", "带薪年假",
			"员工旅游", "节日福利", "绩效奖金", "零食下午茶",
			"住房补贴", "交通补贴", "餐饮补贴", "通讯补贴"
		],
		customWelfare: "",
		selectedTags: [], // 存储所有选中的标签（系统+自定义）
		otherWelfare: '', // 福利描述
		showAddModal: false,
		addCustomWelfare: ''
    };
  },
  components: { navBar },
  onLoad(options) {
    if (options.tag&&options.tag.length>0&&options.tag!='undefined') {
      this.selectedTags = decodeURIComponent(options.tag).split(';')
    }
	if (options.text) {
		this.otherWelfare = decodeURIComponent(options.text)
	}
  },
  methods: {
    // 切换系统标签选中状态
    toggleTag(tag) {
      if (this.selectedTags.includes(tag)) {
        this.selectedTags = this.selectedTags.filter(item => item !== tag);
      } else {
        if (this.selectedTags.length < 10) {
          this.selectedTags.push(tag);
        } else {
          uni.showToast({ title: '最多选择10个福利', icon: 'none' });
        }
      }
    },

    // // 移除已选标签（系统或自定义）
    // removeTag(index) {
    //   this.selectedTags.splice(index, 1);
    // },

    // // 添加自定义标签
    // addCustomTag() {
    //   const tag = this.customWelfare.trim();
    //   if (!tag) {
    //     uni.showToast({ title: '请输入福利内容', icon: 'none' });
    //     return;
    //   }
    //   if (this.selectedTags.includes(tag)) {
    //     uni.showToast({ title: '该福利已添加', icon: 'none' });
    //     return;
    //   }
    //   if (this.selectedTags.length >= 10) {
    //     uni.showToast({ title: '最多选择10个福利', icon: 'none' });
    //     return;
    //   }
    //   this.selectedTags.push(tag); // 添加到选中列表
    //   this.customWelfare = ""; // 清空输入框
    // },
	
	// 移除自定义福利
	removeCustomTag(tag, index) {
		this.fundList.splice(index, 1)
		
		const list = []
		this.selectedTags.forEach(item => {
			if (item != tag) {
				list.push(item)
			}
		})
		console.log(list)
		this.selectedTags = list
		console.log(this.selectedTags)
	},
	
	// 添加自定义福利
	confirmAddCustomeWelfare() {
		const tag = this.addCustomWelfare.trim();
		if (!tag) {
			uni.showToast({ title: '请输入福利内容', icon: 'none' });
			return;
		}
		if (this.fundList.includes(tag)) {
			uni.showToast({ title: '该福利已添加', icon: 'none' });
			return;
		}
		if (this.fundList.length >= 22) {
			uni.showToast({ title: '最多选择10个福利', icon: 'none' });
			return;
		}
		this.fundList.push(tag)
		this.selectedTags.push(tag) // 添加到选中列表
		this.addCustomWelfare = ''
		this.showAddModal = false
	},

    // 提交回传
    submitWelfare() {
		const welfareData = this.selectedTags.join(';');
		uni.$emit("fundData", {
			text: this.otherWelfare,
			tagText: welfareData
		});
		uni.navigateBack();
    },
  },
};
</script>

<style lang="scss" scoped>
.switch-roles {
  background-color: #f5f7fa;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;

  .roles-content {
    width: 100%;
    flex: 1;
    overflow-y: auto;
    padding: 32rpx 40rpx;
  }

  .card-title {
    font-size: 48rpx;
    font-weight: 700;
	line-height: 60rpx;
    color: #333;
    margin-bottom: 20rpx;
  }
  
	.other-input-area {
		padding: 40rpx 32rpx 20rpx;
		border-radius: 6px;
		background: rgba(153, 153, 153, 0.05);
		margin-bottom: 20rpx;
		.other-textarea {
			width: 100%;
			height: 340rpx;
			font-size: 28rpx;
			line-height: 36rpx;
		}
		.input-count {
			font-size: 20rpx;
			margin-top: 20rpx;
			color: #999;
			.hight-light {
				color: #016BF6;
			}
		}
	}
  
	// 福利标签
	.tag-list {
		display: flex;
		flex-wrap: wrap;
	}
	.tag {
		color: rgba(102, 102, 102, 1);
		font-size: 20rpx;
		line-height: 1;
		border-radius: 8rpx;
		background: rgba(153, 153, 153, 0.1);
		margin-right: 12rpx;
		margin-bottom: 8rpx;
		padding: 8rpx 9rpx;
		&.tag-active {
			color: rgba(1, 107, 246, 1);
			background: rgba(1, 107, 246, 0.1);
		}
	}
	.add-tag-wrapper {
		margin: 20rpx 0 10rpx;
		.add-icon {
			display: inline-block;
			width: 20rpx;
			height: 20rpx;
			margin-left: 4rpx;
		}
	}
	.tag-count-wrapper {
		color: #016BF6;
		font-size: 20rpx;
		line-height: 26rpx;
	}
	
	// 添加自定义弹窗
	.custom-input {
		margin: 40rpx 60rpx;
		border: 1px solid #ddd;
		border-radius: 4px;
		padding: 0 20rpx;
		.input {
			height: 60rpx;
			line-height: 40rpx;
			margin: 0 auto;
		}
	}

  /* 已选标签展示区样式 */
  // .selected-tags {
  //   display: flex;
  //   flex-wrap: wrap;
  //   gap: 16rpx;
  //   padding: 10rpx 0;
  //   margin-bottom: 20rpx;
  //   min-height: 60rpx;
  //   border-bottom: 1rpx solid #f0f0f0;
  //   padding-bottom: 15rpx;

  //   .selected-tag-item {
  //     display: inline-flex;
  //     align-items: center;
  //     background-color: #f0f7ff;
  //     border-radius: 60rpx;
  //     padding: 8rpx 20rpx;
  //     padding-right: 12rpx;
  //     font-size: 28rpx;
  //     color: #007aff;
  //     gap: 8rpx;

  //     u-icon {
  //       margin-left: 5rpx;
  //       padding: 2rpx;

  //       &:active {
  //         background-color: rgba(0, 0, 0, 0.05);
  //         border-radius: 50%;
  //       }
  //     }
  //   }
  // }

  // .input-area {
  //   display: flex;
  //   flex-direction: column;
  //   margin-bottom: 30rpx;

  //   .custom-textarea {
  //     width: 100%;
  //     min-height: 120rpx;
  //     border: 1rpx solid #e5e7eb;
  //     border-radius: 8rpx;
  //     padding: 20rpx;
  //     font-size: 28rpx;
  //     margin-bottom: 16rpx;
  //   }

  //   .add-btn {
  //     align-self: flex-end;
  //     background-color: #007aff;
  //     color: #fff;
  //     border-radius: 8rpx;
  //     font-size: 28rpx;
  //     padding: 10rpx 24rpx;
  //     margin-bottom: 10rpx;
  //   }

  //   .word-count {
  //     font-size: 26rpx;
  //     color: #999;
  //     text-align: right;

  //     text {
  //       color: #007aff;
  //     }
  //   }
  // }

  // .tag-section {
  //   .section-title {
  //     font-size: 30rpx;
  //     color: #666;
  //     margin-bottom: 20rpx;
  //   }

  //   .tag-list {
  //     display: flex;
  //     flex-wrap: wrap;
  //     gap: 16rpx;
  //     margin-bottom: 20rpx;

  //     .tag-item {
  //       padding: 12rpx 24rpx;
  //       border: 1rpx solid #d1d5db;
  //       border-radius: 60rpx;
  //       color: #4b5563;
  //       font-size: 28rpx;
  //       background-color: #fff;
  //     }

  //     .tag-selected {
  //       border-color: #007aff;
  //       color: #007aff;
  //       background-color: #e0f2ff;
  //     }
  //   }

  //   .selected-count {
  //     font-size: 26rpx;
  //     color: #666;
  //   }
  // }
  
  .button-section {
  	padding: 28rpx 40rpx;
  	box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.04);
  }
  .submit-btn {
  	flex-shrink: 0;
  	border-radius: 999px;
  	box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.04);
  	background: linear-gradient(90deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
  	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: 16rpx 32rpx;
  	box-sizing: border-box;
  }
}
</style>