menduner-uniapp/components/positionItem/components/portrait.vue

<template>
  <uni-popup ref="popup" :is-mask-click="true" borderRadius="10px 10px 0 0" background-color="#fff" >
      <view class="popup-content">
        <view class="popup-content-close">
          <view class="icon" @tap="handleClose">
            <uni-icons
              type="closeempty"
              color="#999"
              size="20"
            />
          </view>
        </view>
        <view class="popup-content-main">
          <view class="box">
            <!-- 已选中 -->
            <view class="chose borderLine">
              <view class="choseTitle">已选中关键字：</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"  @click="submit">提 交</button>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
</template>

<script setup>
import { ref, computed } from 'vue'
import { getTagTreeDataApi } from '@/api/user'
const emit = defineEmits(['submit'])

const popup = ref()
const handleClose = () => {
  popup.value.close()
}
const handleOpen = () => {
  popup.value.open('bottom')
}

// 选择
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)
}

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

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

// 提交
const submit = () => {
  emit('submit', select.value)
  handleClose()
}

defineExpose({
  handleOpen
})
</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;
    }
  }
}

.popup-content {
  z-index: 999;
  max-height: 500px;
  display: flex;
  flex-direction: column;
  &-close {
    display: flex;
    padding: 10px;
    justify-content: flex-end;
    .icon {
      width: 30px;
      height: 30px;
      background: #ccc;
      border-radius: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  &-main {
    flex: 1;
    height: 0;
    overflow-y: auto;
    &-count {
      margin-bottom: 20px;
      text-align: center;
      .title {
        font-size: 28rpx;
        color: #666
      }
      .pay {
        font-size: 52rpx;
        color: #000;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 0;
      }
    }
    &-type {
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
      .card {
        border-radius: 10px;
        margin: 0 auto;
        background: #FFF;
        padding: 10px;
        &-label {
          padding: 15px 0;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #eee;
          &:last-of-type {
            border-bottom: none;
          }
          .name {
            display: flex;
            align-items: center;
            color: #333;
          }
        }
      }
    }
  }
  &-btn {
    height: 70px;
    width: 100%;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    &-s {
      height: 40px;
      width: 75%;
      line-height: 40px;
      color: #FFF;
      // color: #724d2b;
      background: #00B760;
      // background: linear-gradient(121deg,#fde2c2 29.02%,#c19164 104.03%);
      border-radius: 90px;
    }
  }
}
</style>