lottery/lottery/js/select-tag.js

var demo_str = `
  <van-popup v-model="popupVisible" duration="0.2" round position="bottom" :close-on-click-overlay="false" :style="{ width: '100%', height: '566px' }">
    <div class="clientTag_title">
      <div class="close_icon"></div>
      <div>按客户标签筛选</div>
      <img class="close_icon" :src="closeIcon" alt="" @click="popupVisible = false">
    </div>
    <div class="search_box">
      <van-search class="search_input" placeholder="搜索标签" v-model="keyword" search :clearable="false" left-icon="" @search="getTagList">
        <!-- 自定义右侧图标 -->
        <template v-slot:right-icon>
          <img class="search_icon" :src="searchIcon" alt="" @click="getTagList" />
        </template>
      </van-search>
    </div>
    <van-radio-group v-model="tagType" direction="horizontal" v-if="showLabelFilter">
      <van-radio :name="0">
        标签满足其一
        <template #icon="props">
          <div :class="props.checked ? 'check_div_active' : 'check_div'"></div>
        </template>
      </van-radio>
      <van-radio :name="1">
        标签同时满足
        <template #icon="props">
          <div :class="props.checked ? 'check_div_active' : 'check_div'"></div>
        </template>
      </van-radio>
    </van-radio-group>
    <div class="tag_list1">
      <div class="tag_item" v-for="(item, index) in tagGroupList" :key="index">
        <div class="tag_top">
          <van-checkbox v-model="item.single" @change="selectAllTag(item)">
            <template #icon="props">
              <div :class="props.checked ? 'check_div_active' : 'check_div'"></div>
            </template>
          </van-checkbox>
          <div class="tag_item_title">{{ item.groupName }}</div>
        </div>
        <div class="tag_item_data">
          <span :class="{tag_checked: tag.checked, tag_unchecked: !tag.checked}" v-for="(tag, tagIndex) in item.tagList" :key="tagIndex" @click="handleTag(tag, item)">{{ tag.name }}</span>
        </div>
      </div>
    </div>
    <div class="tag_footer">
      <div class="tag_re_btn" @click="handleClear">重选</div>
      <div class="tag_ok_btn" @click="handleSubmit">确定</div>
    </div>
  </van-popup>
`
var demoComponent = Vue.extend({
  template:demo_str ,
  data: function () {
    // 初始化时先获取路径信息
    const isQwPath = window.location.pathname.includes('/qw')
    return {
      // 根据路径设置不同的图片路径
      closeIcon: isQwPath ? '../img/qw/close_icon.png' : './img/qw/close_icon.png',
      searchIcon: isQwPath ? '../img/qw/search_icon.png' : './img/qw/search_icon.png',
      httpUrl: '',
      env: '',
      keyword: '',
      tagType: 0,
      popupVisible: this.showClientTag, // 本地状态，避免直接修改 prop
      tagGroupList: [],
      showTagList: [],
    }
  },
  props: {
    labelFilter: {
      type: Number,
      default: 0
    },
    showClientTag: {
      type: Boolean,
      default: () => false
    },
    selectTagList: {
      type: Array,
      default: () => []
    },
    showLabelFilter: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    showClientTag(val) {
      this.popupVisible = val
      if (val) {
        this.showTagList = this.selectTagList || []
        this.getTagList()
        this.tagType = this.labelFilter
        console.log('tagType', this.tagType)
      }
    },
    popupVisible(val) {
      this.$emit('update:showClientTag', val)
    }
  },
  created() {
    this.env = this.getQueryParam('env')

    if (!this.env || this.env === 'prod') {
      this.httpUrl = 'https://wlapi.wefanbot.com'
    } else {
      this.httpUrl = 'http://test.wefanbot.com:18993'
    }
  },
  methods: {
    getTagList() {
      const headers = new Headers()
      headers.append('token', 'k1176728601917100001')
      headers.append('tenancyId', '103548289110001')
      headers.append('userId', '100884320310007')
      fetch(this.httpUrl + `/scrm/v1/wxcp-tag/m/findListWithGroup?keyword=${this.keyword}`, {
          method: 'GET',
          headers: headers
        }).then(res => {
          return res.json()
        }).then(result => {
          let { data, code, msg } = result
          if (code === 1) {
            if (data && data.length > 0) {
              const groupedData = {}
              data.forEach(item => {
                  if (!groupedData[item.groupId]) {
                      groupedData[item.groupId] = {
                          ...item,
                          single: false,
                          tagList: []
                      }
                  }
                  this.$set(item, 'checked', false)
                  const tag = {
                      id: item.tagId,
                      name: item.tagName,
                      checked: item.checked,
                  }
                  groupedData[item.groupId].tagList.push(tag)
                  delete groupedData[item.groupId].tagId
                  delete groupedData[item.groupId].tagName
                  delete groupedData[item.groupId].tagSort
              })
              // 将分组结果转换为数组形式
              this.tagGroupList = Object.values(groupedData)
              this.tagGroupList.forEach(item => {
                  item.tagList.forEach(t => {
                      this.selectTagList.forEach(tl => {
                          if (t.id === tl.id) {
                              this.$set(t, 'checked', true)
                          }
                      })
                  })
                  if (item.tagList.every(obj => obj['checked'] === true)) {
                      this.$set(item, 'single', true)
                  } else {
                      this.$set(item, 'single', false)
                  }
              })
            }
          } else {
            vant.Toast.fail(msg)
          }
        })
    },
    handleTag(val, data) {
      this.tagGroupList.forEach(item => {
        if (data.groupId === item.groupId) {
          item.tagList.forEach(t => {
            if (t.id === val.id) {
              this.$set(t, 'checked', !t.checked)
            }
          })
          if (val.checked) {
              this.showTagList.push(val)
              if (item.tagList.every(obj => obj['checked'] === true)) {
                  this.$set(item, 'single', true)
              } else {
                  this.$set(item, 'single', false)
              }
          } else {
              this.showTagList = this.showTagList.filter(item => item.id !== val.id)
              this.$set(item, 'single', false)
          }
        }
      })
    },
    selectAllTag(data) {
        this.tagGroupList.forEach(item => {
            if (data.groupId === item.groupId) {
                item.tagList.forEach(t => {
                    this.$set(t, 'checked', data.single)
                    if (data.single) {
                        this.showTagList.push(t)
                        // 去重
                        const map = new Map()
                        this.showTagList = this.showTagList.filter(v => !map.has(v.id) && map.set(v.id, v))
                    } else {
                        this.showTagList = this.showTagList.filter(s => s.id !== t.id)
                    }
                })
            }
        })
    },
    handleClear() {
      this.showTagList = []
      this.tagGroupList.forEach(item => {
        item.single = false
        item.tagList.forEach(t => {
            this.$set(t, 'checked', false)
        })
      })
    },
    handleSubmit() {
      this.$emit('add', this.tagType, this.showTagList)
      this.$emit('update:showClientTag', false)
    },
    // 截取url中的数据
      getQueryParam(paramName) {
        // 获取当前URL的查询字符串部分  
        const queryString = window.location.search;
        // 创建一个URLSearchParams对象  
        const urlParams = new URLSearchParams(queryString);
        // 返回指定参数的值，如果不存在则返回null  
        return urlParams.get(paramName);
      },
  },
})

Vue.component('select-tag',demoComponent )  //注：此处my-demo就是html中组件的名字