yizhizan-h5/package/jobIntention/fund.vue

<template>
  <view class="switch-roles">
    <nav-bar title="福利待遇" color="#000"></nav-bar>
    <view class="roles-content">
      <view class="content-card">
        <view class="card-title">福利待遇</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.stop="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>
    <view class="submit-btn" @click="submitWelfare">确定</view>
  </view>
</template>

<script>
import navBar from "@/components/nav-bar/index.vue";
export default {
  data() {
    return {
      fundList: [
        "五险一金", "定期体检", "年终奖", "带薪年假", 
        "员工旅游", "节日福利", "绩效奖金", "零食下午茶",
        "住房补贴", "交通补贴", "餐饮补贴", "通讯补贴"
      ],
      customWelfare: "", 
      selectedTags: [], // 存储所有选中的标签（系统+自定义）
    };
  },
  components: { navBar },
  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 = ""; // 清空输入框
    },

    // 提交回传
    submitWelfare() {
      const welfareData = this.selectedTags.join(';');
      uni.$emit("fundData", 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: 20rpx;
  }

  .content-card {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  }

  .card-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 20rpx;
  }

  /* 已选标签展示区样式 */
  .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: 24rpx;
      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: 26rpx;
      margin-bottom: 16rpx;
    }

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

    .word-count {
      font-size: 22rpx;
      color: #999;
      text-align: right;
      text {
        color: #007aff;
      }
    }
  }

  .tag-section {
    .section-title {
      font-size: 28rpx;
      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: 26rpx;
        background-color: #fff;
      }

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

    .selected-count {
      font-size: 24rpx;
      color: #666;
    }
  }

  .submit-btn {
    margin: 30rpx;
    padding: 24rpx 0;
    border-radius: 100rpx;
    background: linear-gradient(90deg, #005eff, #00bfff);
    color: #fff;
    font-size: 32rpx;
    font-weight: 500;
    text-align: center;
  }
}
</style>