menduner-uniapp/pagesA/resumeOnline/portrait.vue

<template>
  <view class="box">
    <!-- 已选中 -->
    <view class="chose borderLine">
      <view class="choseTitle MiSans-Noraml">已选中标签</view>
      <view class="tags">
        <view
          v-for="tag in select"
          :key="tag"
          class="tag"
          style="color: orange; border: 2rpx solid orange;"
          @tap="handleCancelSelect(tag)"
        >
          {{ tag }}
          <uni-icons type="clear" size="16" color="#ea8d03"></uni-icons>
        </view>
      </view>
    </view>
    <!-- 选择项 -->
    <view v-if="showTagList && tagList?.length" class="list">
      <uni-collapse v-model="collapseOpen">
        <uni-collapse-item
          v-for="val in tagList" :key="val.id"
          :name="val.id"
          :title="val?.nameCn || '--'"
        >
          <view v-if="val?.children?.length" class="tags">
            <view v-for="k in val.children" :key="k.id">
              <view v-if="select.includes(k.nameCn)" class="tag" style="color: grey; border: 2rpx solid grey;">
                <uni-icons type="plusempty" size="14" color="#00B760"></uni-icons>
                {{ k?.nameCn || '--' }}
              </view>
              <view v-else class="tag" style="color: #00B760; border: 2rpx solid #00B760;" @tap="handleSelect(k.nameCn)">
                <uni-icons type="plusempty" size="14" color="#00B760"></uni-icons>
                {{ k?.nameCn || '--' }}
              </view>
            </view>
          </view>
        </uni-collapse-item>
      </uni-collapse>
    </view>
    <view class="f-horizon-center">
      <button type="primary" size="default" class="send-button MiSans-Medium"  @click="submit">提 交</button>
    </view>
  </view>
</template>

<script setup>
import { getTagTreeDataApi, savePersonPortrait } from '@/api/user'
import { ref } from 'vue'
import { userStore } from '@/store/user'; const useUserStore = userStore()


// 选择
const handleSelect = (nameCn) => {
  const result = select.value.includes(nameCn)
  if (!result) return select.value.push(nameCn)
  else select.value = select.value.filter(e => e !== nameCn)
}

// 删除
const handleCancelSelect = (nameCn) => {
  select.value = select.value.filter(e => e !== nameCn)
}

const select = ref([])
// 获取基础信息
function getBaseInfo () {
  const baseInfo = useUserStore.baseInfo
  select.value = baseInfo.tagList &&  baseInfo.tagList?.length ? baseInfo.tagList : []
}

// 获取基础信息
getBaseInfo()

const tagList = ref([])
const collapseOpen = ref([])
const showTagList = ref(false)
// 获取标签字典数据
const getTagList = async () => {
  showTagList.value = false
  const res = await getTagTreeDataApi({ type: 0 })
  tagList.value = res?.data || []
  collapseOpen.value = tagList.value?.map(e => e.id)
  showTagList.value = true
}
getTagList()

// 提交
const submit = async () => {
  await savePersonPortrait({ tagList: select.value })
  uni.showToast({ title: '编辑成功', icon: 'success' })
  await useUserStore.getInfo()
  //
  setTimeout(() => {
		uni.navigateBack({
			delta: 1,
		})
	}, 1000);
}
</script>

<style lang="scss" scoped>
$px: 30rpx;
.borderLine {
  border-bottom: 2rpx solid #f5f5f5;
}
.box {
  padding: 20rpx $px;
  .chose {
    margin-bottom: $px;
    .choseTitle {
      margin-bottom: $px;
    }
  }
  .tags {
    padding: $px 0;
    display: flex;
    flex-wrap: wrap;
    .tag {
      margin: 0 15rpx 12rpx 0;
      border: 2rpx 15rpx #00B760;
      color: #00B760;
      white-space: nowrap;
      padding: 4rpx 10rpx;
      border-radius: 10rpx;
      font-size: 24rpx;
    }
  }
}
</style>