web/src/components/push-list/PushList.vue

<template>
  <el-card class="info-list-card" :class="{gray: config.gray}" v-loading="listState.loading">
    <div slot="header" class="clearfix" v-if="!config.gray">
      <span class="card-title">订阅推送</span>
      <el-button v-if="canSubmanager" @click="goManage" class="sub-manager" type="plain" icon="el-icon-jy-edit">订阅管理
      </el-button>
    </div>
    <div class="collect-list-header" style="" v-else>
      <div class="c-tab-container">
        <div class="left">
          <input @click="changeAllCheck($event)" class="has-top custom-checkbox title-text-checkbox"
                 style="margin: 16px;" type="checkbox"/>
          <div class="list-title">订阅信息</div>
        </div>
        <div class="right">
          <div class="right-line">
            <div class="icon-box" :class="{active: !isTable}" @click="toggleActiveIcon('list')"><span
              class="j-icon icon-list"></span> <span class="icon-text">列表</span></div>
            <div class="icon-box" :class="{active: isTable}" @click="toggleActiveIcon('table')"><span
              class="j-icon icon-table"></span> <span class="icon-text">表格</span></div>
          </div>
          <div class="icon-box right-line" @click="onClickDataExport">
            <span class="j-icon icon-data-export"></span> <span class="icon-text">数据导出</span>
          </div>
          <div class="icon-box" @click="onClickDataCollect"><span class="j-icon icon-star"></span> <span
            class="icon-text">标讯收藏</span></div>
        </div>
      </div>
    </div>
    <div class="info-list" v-show="!isTable">
      <article-item
        class="list-item"
        v-for="(item, index) in listState.list"
        :class="{ visited: item.visited }"
        :key="index"
        :index="(listState.pageSize * (listState.pageNum - 1)) +  index + 1"
        :article="item"
        :config="config"
        @onCollect="onCollect"
        @onClick="toDetail(item)"
        @changeCheck="changeCheck"
      />
      <empty v-show="showEmpty">
        <div v-if="isAllFirst && canSubmanager">
          <span>订阅关键词，接收最新招投标信息</span>
          <div class="add-key-button" @click="$router.push('/set_subscribe/config')">
            <span class="icon-chahao"></span>
            <span class="button-text">订阅关键词</span>
          </div>
        </div>
        <div v-else>
          <span>暂时无历史推送记录</span>
        </div>
      </empty>
    </div>
    <div class="info-list collect-table-list" v-show="isTable">
      <table class="table" v-show="tableList.length">
        <thead class="thead">
        <tr>
          <td width="48">序号</td>
          <td width="315" class="deep-border">项目名称</td>
          <td width="84">公告类型</td>
          <td width="73" class="deep-border">预算<br/>（万元）</td>
          <td width="181">招标单位</td>
          <td width="103" class="deep-border">开标日期</td>
          <td width="174">中标单位</td>
          <td width="76" class="deep-border">中标金额<br/>（万元）</td>
          <td width="103">发布日期</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in tableList" :class="{ visited: item.visited }" :key="index + '_' + item._id"
            @click="toDetail(item)">
          <td width="48">{{ index + 1 }}</td>
          <td width="315" class="tt-l" v-html="calcTitle(item, index)"></td>
          <td width="84">{{ item.type }}</td>
          <td width="73" class="tt-r">{{ calcBudget(item.budget) }}</td>
          <td width="181" class="tt-l">{{ item.buyer }}</td>
          <td width="103">{{ dateFromNow(item.bidopentime ? item.bidopentime * 1000 : null, 'yyyy-MM-dd HH:mm') }}</td>
          <td width="174" class="tt-l">{{ item.s_winner }}</td>
          <td width="76" class="tt-r">{{ item.bidamount }}</td>
          <td width="103">{{ dateFromNow(item.publishtime * 1000) }}</td>
        </tr>
        </tbody>
      </table>
      <div class="shade_table" v-show="showTableMore">
        <div class="more" data-need-bind-phone="" @click="onClickDataExport">
          查看更多&gt;
        </div>
      </div>
      <empty v-show="!tableList.length">
        <div>
          <span>暂时无历史推送记录</span>
        </div>
      </empty>
    </div>
    <div class="el-pagination-container" v-if="!isTable && ((listState.total > listState.pageSize) || showMore)"
         :class="showMore ? 'center' : ''">
      <el-pagination
        background
        layout="prev, pager, next, ->"
        :hide-on-single-page="true"
        :current-page="listState.pageNum"
        :page-size="listState.pageSize"
        :total="listState.total"
        @current-change="onPageChange"
      >
      </el-pagination>
      <div class="p-right" v-if="showMore && !showEmpty">
        <el-button size="mini" class="get-more" type="plain" icon="el-icon-arrow-right" @click="getMore">更多</el-button>
      </div>
    </div>
    <div class="sub-collection tags-box">
      <div class="tags-inputs">
        <div class="tag-input">
          <div class="tag-labels"></div>
          <input type="text" class="clear-input" maxlength="10" oninput="this.value=this.value.replace(/\s+/g,'')">
          <div class="tag-placeholder">新增标签回车保存</div>
        </div>
        <div class="add-tag-button">添加并使用</div>
      </div>
      <div class="tags-list clearfix"></div>
      <div class="tags-footer">
        <div class="tags-button button-confirm">确认添加</div>
        <div class="tags-button button-cancel">暂不添加</div>
      </div>
    </div>
  </el-card>
</template>

<script>
import { Button, Card, Pagination } from 'element-ui'
import Empty from '@/components/common/Empty.vue'
import ArticleItem from '@/components/article-item/ArticleItem.vue'
import { dateFromNow, moneyUnit, replaceKeyword } from '@/utils/'
import { getEventTarget } from '@/utils/jq-help'
import { mixinVisited } from '@/utils/mixins/visited'
import { tryCallHooks } from '@jianyu/easy-inject-qiankun'
import {
  getExportPushList,
  getExportSelectItems,
  getPushList,
  bidCollAction,
  getBidCollTagList,
  saveBidCollAddTag,
  createBidTag,
  checkBidsIsColl
} from '@/api/modules/'
/* eslint-disable */
var selectDataIds = []
export default {
  name: 'push-list',
  mixins: [mixinVisited],
  components: {
    [Pagination.name]: Pagination,
    [Card.name]: Card,
    [Button.name]: Button,
    ArticleItem,
    Empty
  },
  props: {
    showMore: {
      type: Boolean,
      default: true
    },
    subManager: {
      type: Boolean,
      default: false
    },
    config: {
      type: Object,
      default () {
        return {
          gray: false,
          table: false,
          collect: false
        }
      }
    },
    filters: {
      type: Object,
      default () {
        return {
          area: '',
          time: ''
        }
      }
    }
  },
  computed: {
    isTable () {
      return this.showIcon === 'table'
    },
    showTableMore () {
      return this.tableList.length === 10 && this.listState.total > 10
    },
    showEmpty () {
      return this.listState.list.length === 0 && this.listState.loaded
    },
    getFilters () {
      return this.filters
    },
    canSubmanager () {
      return !this.$store.state.user.info?.isSubCount
    }
  },
  data () {
    return {
      showIcon: 'list',
      isAllFirst: false,
      tableList: [],
      listState: {
        loaded: true, // 是否已经搜索过
        loading: false,
        pageNum: 1, // 当前页
        pageSize: 10, // 每页多少条数据
        total: 0, // 一共多少条数据
        list: [] // 查询请求返回的数据
      },
      nowCheckList: [],
    }
  },
  created () {
    if (!this.config.table) {
      this.doQuery(this.filters)
    }
  },
  mounted () {
    this.initCollectEvent()
  },
  methods: {
    dateFromNow,
    calcBudget (budget) {
      if (budget) {
        return moneyUnit(budget).replace('万元', '')
      } else {
        return budget
      }
    },
    calcTitle (item) {
      const {
        projectName,
        matchkeys
      } = item
      const hightLightedTitle = replaceKeyword(projectName, matchkeys, ['<span class="highlight-text">', '</span>'])
      return `${hightLightedTitle}`
    },
    async onClickDataExport () {
      this.getNewData()
      const $ = this.$querySelector.bind(this)
      let nowCheckItems = this.getCheckIds(function () {
        return $(this).attr('dataid')
      })
      nowCheckItems = selectDataIds
      let exportDataFlag = ''
      if (nowCheckItems.length) {
        //导出选择(因可以翻页多选，修改为post请求，防止穿参数过长，后跳转)
        //return location.href = `/front/dataExport/superSearchExport?selectIds=${nowCheckItems.join(',')}`
        const res = await getExportSelectItems({ selectIds: nowCheckItems.join(',') })
        if (res.error_code === 0) {
          exportDataFlag = res.data
        }
      } else {
        //导出筛选条件
        const query = {}
        if (this.getFilters && Object.keys(this.getFilters).length > 0) {
          Object.keys(this.getFilters).forEach(v => {
            if (typeof this.getFilters[v] !== 'undefined') {
              query[v] = this.getFilters[v]
            }
          })
        }

        if (query.vt === 'f') {
          query.vt = ''
        }

        const res = await getExportPushList(query)
        if (res.error_code === 0) {
          if (res.data._id) {
            exportDataFlag = res.data._id
          }
        }
      }
      if (exportDataFlag) {
        const link = `/front/dataExport/toCreateOrderPage/${exportDataFlag}`
        tryCallHooks({
          fn: () => {
            this.$BRACE.methods.open({
              route: {
                link
              }
            })
          },
          spareFn: () => {
            location.href = link
            // window.open(link)
          }
        })
      }
    },
    changeCheck (data) {
      const $ = this.$querySelector.bind(this)
      console.log(data)
      if(selectDataIds.length == 0) {
        if(data.check) {
          selectDataIds.push(data.id)
        }
      }
      selectDataIds.forEach((v, i) => {
        if(data.check) {
          if (!this.contains(selectDataIds, data.id)) {
            selectDataIds.push(data.id)
          }
        }
      })
      if(!data.check) {
        const index = selectDataIds.indexOf(data.id)
        selectDataIds.splice(index, 1)
          $('.custom-checkbox.has-top').prop('checked', false)
      }
    },
    onClickDataCollect () {
      let _this = this
      const $ = this.$querySelector.bind(this)
      let nowCheckItems = []
      this.getNewData()
      $('.custom-checkbox:not(.has-top):checked').each(function(index) {
        const tempN = $(this).attr('dataid')
        if (!_this.contains(selectDataIds, tempN)) {
          selectDataIds.push(tempN)
        }
        const haschecked =  $(this).siblings('.a-i-right').find('i').hasClass('checked')
        if (haschecked) {
          selectDataIds.splice(index, 1)
        }
      })
      selectDataIds.forEach((item, index) => {
        nowCheckItems.push({
          id: item,
          index: index,
          check: $(this).parent().find('.icon-collect.checked').length > 0
        }) 
      })
      this.onCollect({
        list: nowCheckItems
      })
    },
    toggleActiveIcon (type) {
      this.showIcon = type
    },
    changeAllCheck (e) {
      const $ = this.$querySelector.bind(this)
      const nowStatus = $(e.target).prop('checked')
      $('.custom-checkbox:not(.has-top)').prop('checked', nowStatus)
      if(nowStatus) {
        let pageCheckId = []
        this.listState.list.forEach((v) => {
          pageCheckId.push(v._id)
        })
        if(selectDataIds.length == 0) {
          selectDataIds = pageCheckId
        } else {
          selectDataIds.concat(pageCheckId)
        }
        selectDataIds = [...new Set(selectDataIds)]
      } else {
        this.listState.list.forEach((v) => {
          selectDataIds.forEach((s, index) => {
            if(v._id == s) {
              selectDataIds.splice(index, 1)
            }
          })
        })
      }
    },
    getCheckIds (callback) {
      const arr = []
      const $ = this.$querySelector.bind(this)
      $('.custom-checkbox:not(.has-top):checked').each(function () {
        const tempN = callback.bind(this)()
        arr.push(tempN)
      })
      return arr
    },
    goManage () {
      this.$router.push('/set_subscribe/config')
    },
    // 恢复数据至第一次请求的状态(页码等)
    resetListState () {
      const state = {
        loaded: false,
        loading: false,
        pageNum: 1,
        total: 0,
        list: []
      }
      Object.assign(this.listState, state)
    },
    doQuery (filters) {
      this.resetListState()
      this.getList(filters)
    },
    async getList (filters) {
      const $ = this.$querySelector.bind(this)
      let _this = this
      const query = {
        pageNum: this.listState.pageNum,
        pageSize: this.listState.pageSize
      }
      if (query.pageNum === 1) {
        query.format = 'table'
      }
      if (this.getFilters && Object.keys(this.getFilters).length > 0) {
        Object.keys(this.getFilters).forEach(v => {
          if (typeof this.getFilters[v] !== 'undefined') {
            query[v] = this.getFilters[v]
          }
        })
      }
      if (filters && Object.keys(filters).length > 0) {
        Object.keys(filters).forEach(v => {
          if (typeof filters[v] !== 'undefined') {
            query[v] = filters[v]
          }
        })
      }

      this.listState.loading = true
      this.listState.loaded = false
      // 判断是否无筛选条件
      this.isAllFirst = false
      if (query.pageNum === 1 && query.area === '' && query.time === '') {
        this.isAllFirst = true
      }
      const res = await getPushList(query)
      this.listState.loading = false
      this.listState.loaded = true
      if (Array.isArray(res.data)) {
        res.data.forEach(item => {
          const visited = this.pathVisited(
            this.createPathItem(
              '/article/content/*.html',
              `id=${item._id}`
            )
          )
          this.$set(item, 'visited', visited)
        })
      }
      if (query.pageNum === 1) {
        this.tableList = res.data || []
      }
      if (res?.total) {
        this.listState.total = res.total
        this.listState.list = res.data || []
        this.$nextTick(() => {
          this.getCollectStatusForList()
          // 等dataid赋值完成后再获取值
          var $dom = $('.info-list-card .title-text-checkbox[name="bid-list"]')
          var selectPageNum = 0
          $dom.each(function () {
            // 回显列表选中状态
            if (!_this.contains(selectDataIds, $(this).attr('dataid'))) {
              $(this).prop('checked', false)
            }
            if (_this.contains(selectDataIds, $(this).attr('dataid'))) {
              selectPageNum++
              $(this).prop('checked', true)
            }
            // 全选复选框选中/不选中
            if (!$(this).attr('checked')) {
              $('.custom-checkbox.has-top').prop('checked', false)
            }
            if (selectPageNum >= 10) {
              $('.custom-checkbox.has-top').prop('checked', true)
            }
          })
        })
      } else {
        this.listState.total = 0
        this.listState.list = []
      }
    },
    toDetail (item) {
      const { _id, matchkeys } = item
      item.visited = true
      this.pathVisiting(
        this.createPathItem(
          '/article/content/*.html',
          `id=${_id}`
        )
      )
      let match = ''
      if (Array.isArray(matchkeys) && matchkeys.length) {
        match = matchkeys.join(' ')
        if (match) {
          match = encodeURIComponent(match)
        }
      }
      window.open(`/article/content/${_id}.html?kds=${match}`)
    },
    getNewData () {
      const $ = this.$querySelector.bind(this)
      const nowCheckItems = this.getCheckIds(function () {
        return $(this).attr('dataid')
      })
      this.nowCheckList = nowCheckItems
      if(selectDataIds.length === 0) {
        selectDataIds = nowCheckItems
      } else {
        nowCheckItems.forEach((sum, index) => {
          if (!this.contains(selectDataIds, sum)) {
            selectDataIds.push(sum)
          }
        })
      }
    },
    onPageChange (p) {
      this.getNewData()
      this.listState.pageNum = p
      this.getList()
    },
    contains(arr, ele) {
      if(arr.length == 0){
        return;
      }
        var i = arr.length;
        while (i--) {
          if (arr[i] == ele) {
                return true;  
            }  
        }  
        return false;  
    },
    getMore () {
      this.$emit('getMore')
    },
    ajaxForCollectChange (baction, binfo, callback) {
      /*
        收藏或取消收藏ajax
        params: {
          baction: String, //用户行为：R：移除收藏；C：收藏（默认）非必填
          binfo: Array, // 招标信息数组 必填
          bid: String, // 招标信息加密后id 必填
        }
        参数示例 (baction=R binfo数组只需要bid即可)
      */
      const params = {
        baction: baction,
        binfo: binfo
      }
      bidCollAction(params).then(r => {
        callback && callback(r)
      })
    },
    onCollect (data) {
      const $ = this.$querySelector.bind(this)
      let {
        item,
        event,
        list
      } = data
      let binfo = []
      if (list) {
        binfo = list.filter(v => !v.check).map(v => ({ bid: v.id }))
        item = {}
        event = {}
      } else {
        binfo = [{ bid: item._id }]
      }
      var _this = this
      if (binfo.length === 0) {
        return _this.$toast(list.length ? '已收藏' : '尚未选择标讯，请选择', 800)
      }
      if (item.collection) {
        // 单个取消收藏行为
        this.ajaxForCollectChange('R', binfo, function (res) {
          if (res.data) {
            item.collection = 0
            _this.$toast('已取消收藏', 800)
          } else {
            _this.$toast(res.error_msg, 1000)
          }
        })
      } else {
        // 将本次收藏的标讯id缓存起来 用于绑定标签时使用
        sessionStorage.setItem('$save-tags-binfo', JSON.stringify(binfo))
        this.ajaxForCollectChange('C', binfo, function (res) {
          if (res.data) {
            _this.$toast('收藏成功', 1500)
            if (list) {
              list.filter(v => !v.check).forEach(function (v) {
                _this.nowCheckList.forEach(function(s, i) {
                  if (s === v.id) {
                    _this.listState.list[i].collection = 1
                  }
                })
              })
              event = {
                target: $('.info-list .list-item i.icon-collect')
              }
            } else {
              item.collection = 1
            }
            const { top, left } = _this.calcCardTopLeft(event, !!list)
            $('.tags-box').show(function () {
              window.pushListActiveTags = []
              $('.tag-labels').empty()
              $('.clear-input').val('')
              $('.tags-list').find('.tags-item').removeClass('tags-active')
              $('.tag-placeholder').show()
            }).css({
              top: top,
              right: 'unset',
              left: left
            })
            window.getUserTags()
          } else {
            if (res.error_msg.indexOf('付费') > -1) {
              _this.$toast('您的标讯收藏上限为5000条，请联系客服人员。', 1500)
            }
          }
        })
      }
    },
    calcCardTopLeft (e, batch) {
      const $ = this.$querySelector.bind(this)
      const containerWidth = this.$el.clientWidth
      const containerHeight = this.$el.clientHeight
      const cardWidth = 332
      const cardHeight = 362
      var top = parseInt($(getEventTarget(e)).position().top) + 30 + 50
      if (batch) {
        top -= 30
      }
      var left = parseInt($(getEventTarget(e)).position().left) - 300

      if (top >= containerHeight - cardHeight) {
        top = containerHeight - cardHeight
      }
      if (left >= containerWidth - cardWidth) {
        left = containerWidth - cardWidth
      }

      left += 'px'
      top += 'px'
      return {
        top,
        left
      }
    },
    initCollectEvent () {
      const _this = this
      const $ = this.$querySelector.bind(this)

      function toastFn (text, duration) {
        _this.$toast(text, duration)
      }

      // 自定义标签
      // 标签输入框事件
      $('.tags-box').click(function (e) {
        e.stopPropagation()
      })

      $('.tag-input').click(function (e) {
        e.stopPropagation()
        $(this).children('.tag-placeholder').hide()
        $(this).children('input').focus()
      })
      // 标签输入框回车事件
      $('.tag-input .clear-input').keydown(function (event) {
        event.stopPropagation()
        if (event.keyCode == 13) {
          if (!$('.tags-box').is(':hidden')) {
            $('.tags-inputs .add-tag-button').trigger('click')
          }
        }
      })
      // 标签输入框失去焦点事件
      $('.tag-input .clear-input').blur(function () {
        if ($('.tag-labels').children().length == 0 && $(this).val() == '') {
          $('.tag-placeholder').show()
        }
      })
      // 添加标签按钮事件
      $('.tags-inputs .add-tag-button').on('click', function () {
        var input = $('.tag-input .clear-input')
        if (input.val().length >= 2 && input.val().length < 11) {
          // ajax提交自定义标签
          addTagsAjax(input.val())
        }
      })
      // 点击确定按钮，绑定标签
      $('.tags-footer .button-confirm').on('click', function () {
        if (!$('.tags-box').is(':hidden')) {
          var lids = ''
          var lname = ''
          $('.tags-item.tags-active').each(function () {
            if ($(this).attr('data-id')) {
              if (lids != '') {
                lids += ','
              }
              if (lname != '') {
                lname += ','
              }
              lids += $(this).attr('data-id')
              lname += $(this).text()
            }
          })
          var params = {
            lids: lids,
            laction: 'S',
            binfo: JSON.parse(sessionStorage.getItem('$save-tags-binfo'))
          }

          // 执行保存绑定标签操作
          if (params.lids !== '') {
            saveChooseTags(params, function () {
              $('.tags-footer .button-cancel').trigger('click')
            })
          }
        }
      })

      $('.tags-footer .button-cancel').on('click', function () {
        $('.tags-box').hide(function () {
          // 标签弹框消失时 清除上次选择的标签分类
          pushListActiveTags = []
          $('.tag-labels').empty()
          $('.clear-input').val('')
          $('.tags-list').find('.tags-item').removeClass('tags-active')
          $('.tag-placeholder').show()
        })
      })

      window.pushListActiveTags = [] // 选中的自定义标签 作为全局变量使用
      // 解绑自定义标签
      function deleteInputTag (item) {
        var index = $(item).parent().attr('data-index')
        var id = $(item).parent().attr('data-id')
        pushListActiveTags.splice(index, 1)
        inputTagList()
        $('.tags-item[data-id="' + id + '"]').removeClass('tags-active')
      }

      function inputTagList () {
        var ht = ''
        $('.tag-labels').html(ht)
        pushListActiveTags.forEach(function (v, i) {
          ht += '<span class="tag-label" data-index=' + i + ' data-id="' + v.lid + '">'
          ht += '<em>' + v.lname + '</em>'
          ht += '<i class="tag-close"></i>'
          ht += '</span>'
        })
        $('.tag-labels').html(ht).off('click').on('click', '.tag-close' ,function (e) {
          const target = getEventTarget(e)
          deleteInputTag(target)
        })
        if ($('.tag-labels').children('.tag-label').length > 0) {
          $('.tag-placeholder').hide()
        }
        checkTagDisabled()
      }

      // 渲染标签列表数据
      function renderTagsList (data) {
        if (data && data.length > 0) {
          var ht = ''
          data.forEach(function (v, i) {
            ht += '<span class="tags-item" data-count=' + v.count + ' data-id=' + v.lid + '>' + v.lanme + '</span>'
          })
          $('.tags-list').html(ht)
          pushListActiveTags.forEach(function (s, j) {
            $('.tags-list .tags-item[data-id="' + s.lid + '"]').addClass('tags-active')
          })
          $('.tags-item').click(function (e) {
            e.stopPropagation()
            if ($(this).hasClass('disabled')) return
            var id = $(this).attr('data-id')
            var name = $(this).text()
            $(this).toggleClass('tags-active')
            if ($(this).hasClass('tags-active')) {
              pushListActiveTags.push({
                lid: id,
                lname: name
              })
              inputTagList()
            } else {
              var newArr = pushListActiveTags.filter(function (item) {
                return item.lid != id
              })
              pushListActiveTags = newArr
              console.log(pushListActiveTags, newArr, 'quxiao')
              inputTagList()
            }
          })
        }
        inputTagList()
      }

      // 获取用户自定义标签
      function getUserTags () {
        getBidCollTagList().then(r => {
          if (r.error_code == 0 && Array.isArray(r.data)) {
            renderTagsList(r.data.reverse())
          }
        })
      }

      window.getUserTags = getUserTags

      /*
        保存或清除标签 ajax
        params: {
          lids: String 标签id（加密后）,  非必传
          lname: String 标签名称,  非必传
          laction: String  用户行为:S添加或绑定标签；D删除标签  非必传
          binfo: Array 招标信息数组（已收藏的招标信息） 非必传
          bid: String 招标信息加密后id  必传
        }
        1：lids为空；lname不为空；laction=”S”;binfo数组不为空->新增标签并且绑定收藏信息
        2：lids不为空；laction=”S”;binfo数组不为空->收藏信息绑定标签
        3：lids不为空；laction=”D”；->删除标签 并解绑收藏的信息
      */
      function saveChooseTags (params, callback) {
        saveBidCollAddTag(params).then(r => {
          if (r.data) {
            toastFn('标签绑定成功', 1000)
            callback && callback()
          }
        })
      }

      // 新增标签
      function addTagsAjax (name) {
        createBidTag({ name }).then(r => {
          if (r.data) {
            $('.tag-input .clear-input').val('')
            // 添加标签成功后 绑定标签
            if (pushListActiveTags.length < 3) {
              pushListActiveTags.push({
                lid: r.data,
                lname: name
              })
            }
            getUserTags()
          } else {
            // toastFn(r.error_msg, 1000)
            toastFn('标签已经存在，无需添加', 1000)
          }
        })
      }

      function checkTagDisabled () {
        if (pushListActiveTags.length >= 3) {
          // 禁用标签
          $('.tags-list').find('.tags-item:not(.tags-active)').addClass('disabled')
        } else {
          // 解除禁用
          $('.tags-list').find('.disabled').removeClass('disabled')
        }
      }

      getUserTags()
    },
    getCollectStatusForList () {
      const $ = this.$querySelector.bind(this)
      // 获取当前页信息流收藏状态
      function getBidIsColl () {
        var bids = ''
        var dataId = ''
        // 区分标题搜索和全文搜索收藏
        var $dom = $('.info-list-card .title-text-checkbox[name="bid-list"]')
        $dom.each(function () {
          if ($(this).attr('dataid')) {
            dataId = $(this).attr('dataid')
            if (bids != '') {
              bids += ','
            }
            bids += dataId
          }
        })
        checkBidsIsColl({ bids: bids }).then(r => {
          if (r.data) {
            var data = r.data
            $('.icon-collect').removeClass('checked')
            data.forEach(function (item, index) {
              $('.icon-collect[dataid="' + item + '"]').addClass('checked')
            })
          }
        })
      }

      getBidIsColl()
    }
  }
}
/* eslint-enable */
</script>
<style>
.info-list-card .custom-checkbox {
  float: left;
  width: 14px;
  height: 14px;
  border: 1px solid #E0E0E0;
  border-radius: 3px;
  background-color: #fff;
  margin-right: 16px;
  cursor: pointer;
}

.custom-checkbox:checked {
  width: 14px;
  height: 14px;
  background: url(https://cdn-ali.jianyu360.com/images/biddingSearch/icon-checked.png) no-repeat center;
  background-size: contain;
  border: 0;
}

.tags-box {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 332px;
  padding: 20px 16px;
  background: #FFFFFF;
  border: 1px solid #ECECEC;
  box-sizing: border-box;
  border-radius: 8px;
  box-shadow: 0px 0px 28px 0px rgba(0, 0, 0, 0.08);
  z-index: 99;
}

.tags-box .tags-inputs {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tags-box .tags-inputs .tag-input {
  width: 100%;
  padding: 0;
  min-height: 34px;
  max-height: 74px;
  overflow-y: scroll;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  cursor: text;
  text-align: left;
}

.tags-inputs .tag-input::-webkit-scrollbar {
  width: 8px;
}

.tags-inputs .tag-input::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #ECECEC;
}

.tag-input > .tag-labels {
  display: inline;
  vertical-align: middle;
}

.tag-input > .clear-input {
  display: inline-block;
  padding: 0 10px;
  width: 160px;
  height: 36px;
  line-height: 1;
  background: #fff;
  border-radius: 2px;
  vertical-align: middle;
  border: none;
  background-color: transparent;
  box-shadow: none;
  box-sizing: border-box;
  font-size: 14px;
  color: #1d1d1d;
}

.tag-input > .tag-labels > .tag-label {
  display: inline-block;
  padding: 5px 12px;
  font-size: 14px;
  line-height: 1.2;
  margin: 5px;
  cursor: pointer;
  border: 1px solid #ECECEC;
  box-sizing: border-box;
  border-radius: 4px;
  background: #F5F6F7;
  color: #1D1D1D;
}

.tag-close {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEwSURBVHgB7ZWxDYMwEEXPER1NRmEFJggUiJpJQiahRhSECViBUdzQIYgdgYQIPnwXmkT+DcbY/s9n3wHg5PTPKoriejRGYB+rqrpP0xT1fR9mWSaBaO77fiuEeCZJ8gAqwGyez68dBWIxV83gbSJEboK47HXWda1DF626Ar2gTUi35lo6iqbxuwBxHEvP80JF3lEg9sxhjp5pDnoHdCSGYWjVDj4W3B4HZo4dHQpgC8E1twI4gtANrrk1AAYxP1nmJAAEArjmZIADiI5TsC5AlJRS5zWcJVIEDLd9LXIUrCNgSjVqsWIBYHnOqZhrHR6BTZGhVEwSAKXCcSHEGebfQBjvAKe8cv6iRgC1i4ZijkHotUxz0TtQlmWuFrpxKtxyHOM4Nmma5sAVJaednH5SLxmyS6JIrGjkAAAAAElFTkSuQmCC);
  background-position: center 2px;
  background-repeat: no-repeat;
  background-size: contain;
}

.tag-placeholder {
  position: absolute;
  top: 12px;
  left: 16px;
  color: #bbb;
  font-size: 14px;
}

.tags-box .tags-list {
  margin-top: 12px;
  overflow-y: auto;
  height: 220px;
}

.tags-box .tags-list::-webkit-scrollbar {
  width: 8px;
}

.tags-box .tags-list::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #ECECEC;
}

.tags-box .tags-list .tags-item {
  float: left;
  min-width: 44px;
  padding: 0 8px;
  margin: 10px 8px 0 0;
  height: 24px;
  line-height: 24px;
  border-radius: 4px;
  border: 1px solid #ECECEC;
  box-sizing: border-box;
  color: #1D1D1D;
  text-align: center;
  font-size: 14px;
  background: #F5F6F7;
  cursor: pointer;
}

.tags-item.tags-active {
  padding: 0 8px 0 24px !important;
  background: #2CB7CA url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADPSURBVHgB7ZNREcIwDIYjYRImYRLmZHPAHAwHlUAdIAEJSKiESgjpEY7Qg7uFdXnKd5eXdMmfpX8BHMdxDEDEgSJQ9GANiU4UGZ9cwBISXPFNGWIAKyrxZLr+suq/xdkwV4oFlFBNR3ET4veS0zaJosGoqOtZ8EVUi4tGWbM+rklC/Ax7KH++dY18ZbmZuGi8iKbhxzdTJT5DSyo/LNXZSZxljV80A3T4aayR86vIJTzyjX8xZTATF0NIU24y5xFDSFNGU3ExxNzsmTmO4zAPYEiZdz83IV0AAAAASUVORK5CYII=) no-repeat 6px center !important;
  color: #fff !important;
  background-size: 16px !important;
  border: 0 !important;
}

.tags-item.disabled {
  color: #8E8E8E !important;
}

.tag-label em {
  font-style: normal;
}

.add-tag-button {
  margin-left: 16px;
  color: #2cb7ca;
  font-size: 14px;
  line-height: 22px;
  white-space: nowrap;
  cursor: pointer;
}

.tags-footer {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tags-button {
  padding: 3px 17px;
  color: #1d1d1d;
  font-size: 14px;
  line-height: 22px;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  text-shadow: 0px 0px 28px 0px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}

.button-confirm {
  margin-right: 16px;
  color: #fff;
  background: #2cb7ca;
  border-color: #2cb7ca;
}

.j-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
}

.icon-list {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAYCAYAAACSuF9OAAAApElEQVRIie2UwQkDIRBFn7JNbEkWYAWmrTSg96Si3aQLc3AFI0H3EE0O82AufuEPKE957w1wJeGAu7UWgBACQM5XxvIAnC7K1mKxkhnLkPt1dagmFLdQGrgAT2AjPVlNzkezAW4BbrSfpJd/FRVjnNV1ivoP/RxZqMdyyO+NSoxT0SQT78eYD3dyHgfPDhgxdQcxdRcxdQ9ZqIeYujFi6jP8n6lfC3duA8uNLvEAAAAASUVORK5CYII=);
  background-repeat: no-repeat;
  background-size: contain;
}

.icon-box.active .icon-list {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAYCAYAAACSuF9OAAAAmklEQVRIie3UsQ2DMBCF4d+IJcIMULJDModZizmcGaBkBscZgwIswBE4KQwp7qtsn6U76aSnStM9gJaJBgxbvn4jLQdoVZrutWrmgCL4uK6n5rLgQZ3UeI/KgAZ4A5ZpZSFfT80yr+yEXvuGe725hyu7nAwUIwPF5CxJDBckdfXs/VGS+huS1B8kqX8lA8X83UCS1BGS1EcsoEd3djhI1jC4DwAAAABJRU5ErkJggg==);
  background-repeat: no-repeat;
  background-size: contain;
}

.icon-table {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAcCAYAAAAAwr0iAAAA3ElEQVRIie3XQUrDQBiG4SdDeghdeABX9QZScCH0EuqhulPX/wVcCD2DXqELewcttAsbO2jNys4UzAuBBD743vlDhkwTEad4xCVGyrDCM+5a3OOqUHFHi2s8JEwKl+dMkt3YVxijOfB1se2CUcps3vD694v8wQuW3UPqCR6SdW2BLwaBNrs/k72bUlSfwFEJLPy+eUyz3KwnN8ty057cYp9AFQaB6gJNRBT/9nOqT+CoBIZ94F8JNPsETnBeoHy87fo0iYh35Q4k3/lImFcqh3nCDZ7s/tVL0B3NbjcYbCQMu974QgAAAABJRU5ErkJggg==);
  background-repeat: no-repeat;
  background-size: contain;
}

.icon-box.active .icon-table {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAcCAYAAAAAwr0iAAAA30lEQVRIie3XQUrDQBiG4SdDeghdeICSRb2BFFwUegnbQ3VXvUUWQg+QlV6hC71DLejCph1qzcrOFMwLgQQ++N75Q4ZMUdXNNZ5wh4E0bPGMeYkl7hMVt5SY4DFgnLg8Zhwcxr7FCMWZr9tdFwxCZPOG179f5A9e8N4+hI7gOfnMLbCnFyij+xvRu0lF9glclMDa75vHNMotOnKLKDftyK1PCWShF8guUFR1k/zbj8k+gYsS6PeBfyVQnBK4wjBB+WjX9W1S1c1GugPJMR8Bq0zlsAp4QO3wr56C9mg2+wJlxSMZcnbbKAAAAABJRU5ErkJggg==);
  background-repeat: no-repeat;
  background-size: contain;
}

.icon-data-export {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAFfElEQVRoQ+2ZbYhUVRjHn/+dXWfKD72gvdArW2CW6QdLRIpAKiTb3kwNsbSMKHqVtb3nzJpeiOacGVeG3N7YMisR1jYsCjVoIwtLSKUQoQwphYw+1H6IXXfG3blPnOHOcr3tzN5178w60Pl4z3Oe5/87zznnPudeUJ031Ll++h8gqgwKIVYCWMTMr2qte8L6PSsykEwmL3Vd9wQAMDMT0cNa621hIP4D4DiONTAwsNyyrGZmvgXAJWEclbNh5gEAbyqlWsrZ2LZ9nmVZx4jofGNjIAAsUUp9NFrs0wCklNcx8w4A00cbONb+U6dOTd24ceNfFSDMZPUAiHsQBQAPjQYxDOA4TiKfzx8kouvHKi6E/QGl1M2j2Qkh5gPYTUSTwkIMAySTyaeZ+bVSEGbusSxrs+u6f44WuFK/67onM5nM92F9CCEWAPiMiBrCQAwDCCE2A3jMG7Rfaz0nbNCo7aSU93hLOeaDeEAp9Wkwlh9gH4C53oB1WuuXoxY2Fn9SygeZuQtAEYKIhohoURDCD3AIwI2e8YtKqfaxBKyGrQfxoTley0GcdQCLFy+ONTU1zQBwgRENYCURrfBN0BAzN2utPy/2lzqEEBOSASHEbMuy5jLzbGaeSUQzATRWyigzDwKYoZT6ZUIAbNu+EsBzRLQUwOVnsvxc1707nU7vrCmAEOJaAOuYeZlvc45ZPzPv6e3tvbOzs3OwJgBeqZBm5sdHEs7MeSIyL9FviegYM59oaGg4MTQ0lAfQDWCa7/20p7+/f0FHR4cZU/090NraOicWi5ma5orgVDPzN0S0JZ/Pb89mswP+/paWlimNjY17ANzge/5FX19fc0l81QFs257n1Tfn+MUx83uu6+pMJnNkpPXjid8bmPmdvb2995tl4x9TtSXkzfxXRHSuL/2/MvOKdDq9t9zCLyc+kUjc5ziOeZmd1qoCsHbt2msKhcKBUnnsRdwaj8efdBznZDnxyWTyYtd1vw7M/MeJRGLJSOKrtYQghPgBwCzfzL+jtX7ClPqjiP8OQJPPpuvo0aPLu7u7C+XGRZ4BIcQzADp84ru11ksriXccZ1Iul/sxcA/pUkotqzQu8gx4QszVcIoHcDyXy00PnjDB2Wxra7vKdV1zIys2Zv5Aa21KiLIZK9lGmgEhhDnn3/YJXKiU2lUu/f7nUsp3iciU0W9prV8KIz7yDEgp9xPRTZ6ww0qpUnUbhuGMbCLLQGtr67RYLPazbxms0lqbWR13W7169YWJRAJKqb+DziIDsG37WcuyNnkBcoODg1Pa29v7x6vetu17LcvqMh8qmHmRKeD8PiMDkFJuJ6IlnvNdSqmF4xVvxgsh3gfwiOdri1KqeO2NfBMLIX4DcLV3irRqrTdEBLAVwHLP11alVAmm+CiSDKxZs2ZyY2Nj3/CsALenUqkv6wbA3KoAmNKh2AqFwmWZTOaPugHwNton3vLJa60TUYj39kD1l5CU8ikiesMTfVwpVdwLUTQhRE0AkkT0ipeBg1rr0sts3Aw1ARBCOADWewB7tda3jlu556AmAFJKZY5sD6BHa31HXQEEirhNSqnn6wrA/BTJ5XKvmzI6Ho+vchznn7oCiErsSH5C74FAKdymlEpVU1hY3/4ay3zN0Fo/6h/rLyWGiyZm3q21vitskGrZeTe8I6Uai4i0UkqOCCClfIGIsr7OTYVCYUMmk/m9WgIr+U0mkzNc100BaC7ZAZifSqXMp5rhNpwBc2mIx+M/AbhoIgSHiLlPKTUvaHfaX0rbtpsty9pR+j8VwmmtTA7ncrnbstlsb0UA02nb9iwA2wLfJGslNBjHfATrjMfj68sdzWX/1EsppzKzKcomT5T6fD5/aKRZH3EPTJTI8cb9FyJEG14SVWmfAAAAAElFTkSuQmCC);
  background-repeat: no-repeat;
  background-size: contain;
}

/* /images/collected.png */
.icon-star {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANtSURBVHgB7VhbTuMwFL0tBfHUdAeEFdAldHZQPniJD9oVwKygdAewgqQfCPGQyqyAzgomrICwg/wgIfE8J9hgoqR1cPrXI1ncXMf26bm27w0iU0xhj4uLiwM2KREVKQlnZ2fezMzMHe2Xl5ffu7u7QykBVSkJs7OzXW3XarWulIRSFDTV04CKa1AxEkeUoqChXoQWp3xOcCZI9V5fX9vqcfj29nZCA76W7/t1cYQzQVMphLU3Nzd3LB8q1hcXFw/FEU4ElXot9Rhwz21sbJBcn45KpXLgqqITQZzWffxJCFA97Yd9rExnFZ0IYr+1lRmYJ1bZ17RdVaxJQXCx+fn5OtQ7AEGPPlM9DfhOcPUw/PXl5eXu6elpf29vL5SCyL0Hub+q1WqDJLDQqiLTQPPM97AH/+7s7LSy5ri8vLzBuGbKHUJV7tMQP+Ie/eHj42PY6XTirDm+KXh+ft7C4K4ikYQFzwyl5AF9x3l9z8/PPfy4ZsrdUPM1IUDiWFpaYh6PsVbIMWaaTIeYSjQy1uLgSE1wSxvKheMyhVqogsUbOgIYu45WxzPXMfcmfU303cIeaue3EKuUdSNfYbx+eHjo5MnvCu7nlZUV37iqIlVoRPqdb6eYHXxBPlIW0VpYWGjLhIDQ7o8iR2QekrSSvE62t7f7UiKurq5ILhhFLpfgpEnakhtJcFIki5AbS7BskkXJWREsi6S6YwdFyBFWudg43RprUhA6LQKxLTnCulhA/v28C7FA8ZyKy12ZdaQ263vVmiAm/cwwUCOSgmDm0TaKWs92nDVBKPBJ8CdViQqp/l5p2I6zJojE7ikzlxxTFw+U5CMhCDXLJ8gkrya/lwxiKK26SF13PO20s+bA1vinTE/KJqhPISsa049KpQ1i/9F/JB/ViUcb/jv2paaJkkWr1XWxhBXBwWCQLExbn2CEssmCFKav+0B+yKaG0eeTKN9V/ZHus/0MsCJonmCE8BeJMZRGtZzck5ubm0mD3ZGviii55JFFfPi1z/okW2WSVBYwEWNP9lDyZ1bVUK4NcrpCT6OztbUVyBhYKQhyzZQrhno9FLNreeQIXC0BleW76T7bk2z1VYdNvYoJ9WMAYn9sq2x1/x1BzQDzHOHH7qsuz2a8FUGGEZPHT09P/Z/+308RbYMoSR5ivkCmmELkHXyZDJTCB+QVAAAAAElFTkSuQmCC);
  background-repeat: no-repeat;
  background-size: contain;
}

.icon-star-active {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALRSURBVHgB7ZdPbtNAFMa/GTcuf6QmIFZs6myQumojsUEIqblBb4B6gnKDhBPQGxBOQjcFNojskLppOEGjFqo2KfN4MyTBST32i8dsqnxSEscev/n5mxm/N8BKK8lFn3BAX3CACqVQkegjEsQ4dX8M2uoVjlCBNKpSjM7sOEodB6oSB+fcm2qEpmpjgEBV42Cc4VhcjYvBDma691fDiYtDBCjcQb9TDb72BoEKcnDi3jcHk61gF8McjPEafjigAhfDHDx2cy8paBbk4tIO8rA26DMS+op3AjirBtbR4YfZQQl5HbQQGHNQzb8amw6GXCcJany9rm3GgLrgrzGWUZ97Hbpfgx8cs48b9H0OzwFyLt3jGzr8SfiKd25RnW+rpW69IqhLcsClRQyoGfY33qbT5PwQGwYEu5QD5x6ptmD8PQVq6LAlZ/sk7HKMvfTp+ZARuvw9yItDNc+s4Ej0WIMeBK27Acc5XAj7T+qFa9BGHuQ68sWAtKHKuOn6dgw+QBFkJHAoXnrIM+EyAXMhLdsaZJoO+f3CB/LCTcJkKxNSCpfWQ5U3L3PhcgGRAeldIEWy87J+a14WwhUC3oIs4+BUtbl5KYJz/UMol9429GkQpJXNPkPTlMBZydfZFb/pQ+FYirOOiyWUGPDmSblkPxNxOjxn+2xKjEVFhpMYUBtdHnDMcGdkN1JTiWPJBy2SP3Vabkh/0uLp6gF1RNu0TH1ruPUF+UqxBEItMe1VIm5pXftFtoTyaRvSWJJGrop+qs+Ko9GROmeqay6bijTCI8k2QLRIilcwDYwx+/oZtdVz91LfR0HZJl3JIkAVR54CloZkuAK+pNbaFnqz9i/R40+zAFS0UGSAY9pFNlgz2jJd1fLsJxjUpUlui/8JqNdoc9Yp0Ls21MoDm4PklMZ7jC731ORF8yF1KUFVGp1gh070+/F3weQvkMvpxzgsuw1d6c7pD2qO79xI3BNVAAAAAElFTkSuQmCC);
  background-repeat: no-repeat;
  background-size: contain;
}

.icon-hot-vip {
  display: inline-block;
  width: 42px;
  height: 20px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAAAkCAYAAAAjMNwcAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAyMSURBVHgBpVrdj1VXFV/rMuX7417AGWihDEIoJYEZIonyUaDxQZuY0uijD6XGF6MW+hdAffERbfTRgG8+mFAT44sxnUpJhWoL1FgSpR2odqApzIydKczXWe6918de+54zFOkOzD33nH32x2//1m+tvfZFeIhy98NzhwlpsEXVISAaDLfaABT/A/8Pf4jiH8T4hSoIn1RRJd8pfA/1MNXDWBPT7QpTB6E+NxSeEbfpnhM3T5jv8zWkTvk69YH5WbgcDZfXAavhcPcSVLOvr9j5gyH4Pws+aEX64LX27MKFxyqojoX+2zyoYoIFWICUhhv7EMAScLkigU4c0wsg7RE4kECAT58MQIWp+QhlFfpAAa0K7+pqSFsGmGuPFMz0l663gIYWtHpOLtnx/evwAOVzAYtAzSxadCK0f1wH7lZQQSDUVSdmTpq84AfFhImrG4ACTHokTCEDFN3kuL34jvabgGNQ0mfFgAtzIbFNgM1gZ+bxYIXFCGfmZu693Nn90vBDAzZ148Jz0DN7mhnFg40gVZWuGAkmBIU5ArOLJ1IwJsxJWAmRdWk26E1HzZU/GTv0rIvUCm3ofVCErV0GwSwXZOFQzRXygsuiOSYOhzsvr9z1wzPzYdKa78HMyIUT2FOdDX23Ddkw2IQVaLe82Ap7mgwJE1BXP923d+I1pscofwCyBqV3pKKAxWJnvaa64VmL+0rf+Z71Ea/5HZSGUHD3TQvYNmZuvT/8Of3pu788AfOURoZNj/zldGjkaJaEOnuY7mJioj0yITMxp1GuHRmsiH1mpz7K3805iOCrSfO1sBOcs3Cib9on3UlFSmMVk3XvSb98LWZ7ZuWuH73QjU2NYTMfvXUqvHNUFj91lFiB3gpMdVD1CKw+qrtiIhlzjCXROJCgoTAzuzis/VhBsXPEjLQQkjyV8xOvnQwcMvERyvrKuvTx/KdXfnEK7gfYzMhbJwir4zxUEiKBfkUzMwEJ8wxseUSAy6mUtE8Wo5O1d8WJgIGZrRAUem7DQhGyJ+kmmvmBstOaSiCzZqoSOHBkiXM7zMkQBh0ff+eV4x4jg/juyJv9C2DBB6jsYMoqlfMEnJfUuVi44MILcgItDsIJu8qKAkeYQw4TZxVvnllVmadTEfchgzPlNH7U7yYb0paOIcsYeA+r950UjAfgdqv3NIYFsE6rAGoUiBYhJWwpf0FybM6U4vVW5ihrVLgwM7E0SCLHpoQhClhMFH3OAg9ZxF0z2EKmrhoja4m+aISGLifC601ZL9QTZVlpL0A8bf2kJyNvH5qB2dcSQJWJInqXnsWV4J9vD8Hk+McupAFcuHgp7Nj7TV5p7H4H4NqlczAx9okKaip9j2+Ddf3b0r2rF/8E0/c+0xnYbLbs+iosW7U6Pbt6cQi8g6As5nVLyHBY/fhv+1f20iOLFoOwt3RqdYdj8V9g2dOBZUM98eEszJ0EJnmq3pLXEjuquiddtGQpnD/7W/SgJ8C+9g3QPQ/ygKK7oJvD7+H53/2quxn49os/tflMBUCu/Pn3tTobt+1MgC1ctAQmxu/A++9egC9Sdu5/uthuARQOxRYhX2KK5QLLToR7Q62oXQGmw+Bm7wzEVI6yN6TV6/trA4kMmBi/Xfg5CSzwX5feqNXfMrAvALEWfL9NpdO30a4nx2/DFymd3vWg5sj27rolJQkbnboPdVbh8vDoO6fagWELDhetmjdioWTdIY0Zkh0sb/cmRqkJabk1/B4sHzgAsulO/YdJ0rXLb9TwiIABiO+lCPjd+gTXbXAzAQp1au1s33Mw/H9KhDs6Qt4yXTn/R3j/738r6mZTVMgq4DgXVLsZu+Sv1MhUQgmD5R1t9SAecWGBuGL2cCLm6Dwkguy91vXvqE3w9siwhhvGzUtDZ2uT7Nv0BKzbtN0FAQB3bn1Ya2/5ytU5BKAI/p16nVWdwNQOLF3ZDp/hf3gnfp/472hjXfFNIj5Z3tNIJIaUHYrGuhZrBjwGQoYmbQcUW4nMORKQrQe4+JOhDjWWd3prA7pz8zpfiKOZHP8kiH3dHAcOPSsOPHvRbrbGsqy9xq6npz4L/+ssjPomQ1drSF/Hbn1Uq7t0xSoOM3LUwHMWuBw44uO7Jg4w2AoK3692akxDWVLkvZZVVzgiwzbXGTYaANM4JtYO7IImECLDLAYRHRm99e9a3dW9GyyeG20AIJZHgjPQ8fE8kKaCeU9P3avVFYYlM8Nu3qPpmk5VwuiiYn9IB8Eq/cZbFsbKkFPbLrYRUV/6awOKLJkcu520bnJsHnYdPCJNSZgeupiZukvQUCJ71Cwiw5pKAkENDVh/xz5uBjearJAB1Tv7XYpNM28AfSAaSxT90kGVu/d0xyJ//R7/rmivxSbhvzn8D9jafgouz8OurYP7VVV18xxM+Uajk1ydRJ8XenLsTlMVePMPv5FBZZc3fe9eY91lKztgO29UQZfEgfOY5LIn4hR0M4o94ASaPQ1g9jiq4ZCtWp1AmHAQfrxx9a/FoKKOTYxtD6HEudqABw4+5+NOG1yTh1y4eEk0N9u3Tow3A3brxjV4kBLZFdmYs8QacKHMv3K3NZHic3UJh9GCYWSxHFh+KYOnwObtRpPwx2i+WbvWwpbBfUZUlKA2AtLkITt9G6T79Ddo2H8aWfggpXfjZtj7zHd42BZpmtyIx9RCOT5jtHy/13vKprOz7bJTyPELWZp39fpNtUnEWKzJ4w0eOiKoU06riGlOjN2utbNcvJ84aWxqc8/Xj8ATew7GjYvb/pHtPTVDzPGzy325T9Fq0oArJ0HdlsngiWcA4L8XQIk4Uqaw6yne7+t/ErpLc3iwNmjXAQCgDJVtqFNwW3snMkydQ6zUFIN1eh+DvJBAHgNEcfNpzk7kJeaxHB9YJK8D04hBov6MSDDaV3Xb6GA0fLALI42ZTBBXtL+UIv7PK1sH9vugBMDSUDy4JpBXtNeQ5LdT/NUUg3X6HgXRe9mViLrahQY4mmsjAMvaCjiW+pHhoYg8dGeJUxlqgbNAD2gZg6n31HotTVgFT9YP9yvLk3Yd8IPKMxD4m2KwZavWgMbkQb9qz8UpQI4o0nmDkDJNV6yjmJQkOFEXX7OZVManfkduKaOhmBMrTBKLnJe/71ytBmhiXEHH4H6lr3970KO8yeZV5SbjwCd5w14r7d7HLPKbaWJX76Oc8sr7G93/dQmwL3q854Nw+a/xPrgUOmKOIFqtk/GzR1nEee7MAkk1Cx8xmyIC+PTIk3ufwc66x/UtWUQJTcLnuhjVCx1RB0CyGwifjyxcgvuefd6JAqVUDl9xQ1Gr9n7ru1lkw+eixYvJ4NIQqDQtm0POSmj+EEFjQDMVHj/6dyFnZ4dW7Hrx9fRseuSibX0w0VqP8yu/i88BHvtddOlluaX59lwvn+poIEg2aUkbQ74PoIlHoPKw1QeS5eGvjkvTs3PmIc051k6GVJNI1Qwgt29z8+MKmGyupahjF5UEahwkZVlLzDO65VXUkyGfDoJM0cJgpA+joDROrnsZo6UJZHWLFkgZAE4fFBgWGyOTjpuKfmwBja8oJ2McFRRhRAKrOA1XwEjSOZKVthd5gKJtLW4ZbIUpvwv+sFWQFiKhmxhydZuEmYAZP2IZ3hSuWn/cYgsjLl3aAcwU0gNlPegl442dLSCCIQeGoLNRpJ8FsE6CKwoYCnUdDmDiJZ5FE2kAOjBRNTFbOYbLx1kqo9GrAubJAImw+nW3Qeq+n9txKRsLErLQ6it6RkQ6lqzquT33XrYM3QppAoyNIkgT0K9XDRx/CbpK90GuMkpwzjMyjeIjeLeiouPq+sR55JMkgiygPE5+19mT3NAwQudahgbcgYLTXWy1TdZN6ArPmBch2aue/+WBhXpzAD/pDBw72tAN9BRdUna7PpujqNvvs6RvKoaOuicrPJVIrxdex3nSdihrro1BDo8ZRNLAND/PjsBF67pOJKNmJ+GHbXqrX9DiM8DRuYq+19n941dhntLqGnw2CXCJQwIXuxCacnSRBLKmyJQpL7w+12PvBECL/Msgq6/7fnACY/FBVzANReMyTnVaecxWVwek6XcSJxCq/nxubvrL9wMrFpetyAvPtNcffJjlycoCmOV6gSTLaAC6zbpzHqIXXhMr7JptYT7gDnSl3WTa7ld0boGUYfJOyX7A8iBHJzZawdwr1dzSIO4vjMEDlB7rTicsR+r22y0onZb+EEQnSZ6fdvLiNwzxTqUxij3I2lRYJ+ghriUYXYoFpQf7+YFLdlIeGzdfMju2Oh6mNIYVXQotDM0CXe48xE82/wdmDZ+o06UeQQAAAABJRU5ErkJggg==) no-repeat center center;
  background-size: contain;
}

.icon-box {
  display: flex;
  align-items: center;
  color: #252627;
  font-size: 14px;
}

.icon-box .icon-text {
  margin-left: 6px;
}

.icon-box.active {
  color: #2abed1;
}

.tab-title {
  margin: 40px 0 44px;
  font-size: 24px;
  line-height: 36px;
}

[class*=el-icon-] {
  transition: transform .2s ease;
}

[class*=no-select] {
  user-select: none;
}

.rotate180 {
  transform: rotate(180deg);
}

/* selector样式定制 */
.tag-list-container .j-button-item:not(.all) {
  border: 1px solid #ECECEC;
  background-color: #F5F6F7;
}

.selector-card:not(:last-of-type) {
  border-bottom: 1px dashed #ECECEC;
}

.other-filter .el-select {
  margin: 0 12px;
}

.other-filter .el-select input::placeholder {
  color: inherit;
}

.manage-tags {
  display: inline-block;
  position: relative;
  right: 0;
  top: 3px;
  font-size: 14px;
  height: 22px;
  line-height: 22px;
  color: #2CB7CA;
  cursor: pointer;
}

.collect-list-container {
  margin-top: 28px;
}

.collect-list-container .el-checkbox {
  margin: 16px;
}

.collect-list-header {
  border: 1px solid #ECECEC;
}

.collect-list-content,
.collect-list-content .list {
  min-height: 400px;
}

.c-tab-container .left,
.c-tab-container .right,
.c-tab-container .right-line {
  display: flex;
  flex-direction: row;
}

.c-tab-container .left .custom-checkbox {
  float: unset;
}

.c-tab-container {
  display: flex;
  flex-direction: row;
  height: 49px;
  width: 100%;
  justify-content: space-between;
}

.c-tab-container .list-title {
  position: relative;
  height: 100%;
  line-height: 49px;
  text-align: center;
  color: #2abed1;
}

.c-tab-container .list-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background-color: #2abed1;
}

.c-tab-container .icon-box {
  cursor: pointer;
}

.c-tab-container .j-icon {
  width: 16px;
  height: 16px;
  background-position: center;
}

.c-tab-container .icon-box {
  padding: 0 10px;
}

.c-tab-container .right-line {
  position: relative;
}

.c-tab-container .right-line::after {
  content: '';
  position: absolute;
  margin-top: -8px;
  width: 1px;
  height: 16px;
  right: 0;
  top: 50%;
  background-color: #ECECEC;
}

.list-item {
  border-bottom: 1px solid #ECECEC;
}

.list-item:hover {
  background-color: #F5F6F7;
  box-shadow: inset 0px -1px 0px rgb(0, 0, 0, .05);
}

.list-index {
  margin-right: 2px;
}

.append-container .j-icon {
  margin: 0 16px 0 8px;
  cursor: pointer;
}

/* table */
.collect-table-list table {
  width: 1199px;
  border-collapse: collapse;
}

.collect-table-list .thead tr {
  font-size: 14px;
  color: #888;
  background-color: #f3fbff;
}

.collect-table-list tbody tr:hover {
  background-color: #F5F6F7;
  box-shadow: inset 0px -1px 0px rgb(0, 0, 0, .05);
  cursor: pointer;
}

.collect-table-list table tr td {
  vertical-align: middle;
  text-align: center;
  line-height: 26px;
  border: 1px solid #e0e0e0;
}

.collect-table-list table tr td.tt-l {
  text-align: left;
}

.collect-table-list table tr td.tt-c {
  text-align: center;
}

.collect-table-list table tr td.tt-r {
  text-align: right;
}

.collect-table-list .thead td {
  padding: 6px 0;
  border-top: 3px solid #2cb7ca;
}

.collect-table-list .tbody tr {
  cursor: pointer;
}

.collect-table-list .thead .deep {
  border-top: 3px solid #2C90CB;
}

.tag-drawer .el-drawer__header {
  margin-bottom: 0;
  padding-bottom: 22px;
  font-size: 20px;
  line-height: 32px;
  border-bottom: 1px solid #ebebeb;
  /* box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.05) inset;  */
}

.tag-drawer .tag-title {
  flex: unset;
  color: #1D1D1D;
}

.tag-drawer .tag-count {
  margin-left: 8px;
  color: #2CB7CA;
}

.add-tag-confirm-button {
  height: 100%;
  color: #2CB7CA;
  white-space: nowrap;
  cursor: pointer;
}

.tag-drawer .add-tag-confirm-button {
  margin-left: 16px;
}

.tag-drawer .el-drawer__body {
  overflow-y: scroll;
}

.tag-drawer .tag-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tag-drawer .tag-header {
  padding: 28px 28px 20px;
  justify-content: space-between;
}

.tag-drawer .tag-main {
  padding: 0 20px;
  flex: 1;
  overflow-y: scroll;
}

.tag-drawer .tag-footer {
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  box-shadow: 0px -8px 8px 0px rgba(0, 0, 0, 0.05);
}

.tag-drawer .el-tag {
  margin: 6px;
  padding: 1px 8px;
  height: auto;
  color: #1d1d1d;
  background-color: #f5f6f7;
  border: 1px solid #ececec;
  border-radius: 5px;
  line-height: 22px;
  cursor: pointer;
}

.tag-drawer .el-tag:hover {
  color: #2CB7CA;
  border-color: #2CB7CA;
}

.tag-drawer .el-tag:hover .el-icon-close {
  color: #2CB7CA;
  background-color: transparent;

}

.tag-drawer .el-tag .el-icon-close {
  font-weight: 700;
}

.select-title {
  color: #686868;
  font-size: 14px;
  line-height: 22px;
}

.el-select + .select-title {
  margin-left: 14px;
}

.vip .selector-card-header {
  padding-right: 50px;
}

.selector-card-header .icon-hot-vip {
  position: absolute;
  right: 0;
  top: 6px;
}

.selector-card-header .s-h-title {
  font-weight: 700;
  color: #996118;
}

.shade_table {
  width: 1199px;
  position: absolute;
  margin-top: -150px;
  height: 150px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 1));
}

.shade_table .more {
  position: absolute;
  height: 35px;
  width: 120px;
  left: 50%;
  margin-left: -60px;
  bottom: 0px;
  color: #2cb7ca;
  border-radius: 5px;
  border: 1px solid #2cb7ca;
  line-height: 35px;
  text-align: center;
  cursor: pointer;
}
</style>

<style lang="scss" scoped>
@include diy-icon('edit', 20, 20);

// card样式重置
::v-deep {
  .el-card__header {
    margin: 0 40px;
    padding-left: 0;
    padding-right: 0;
  }

  .el-card__body {
    padding: 20px 40px;
  }

  .get-more {
    display: flex;

    .el-icon-arrow-right {
      margin-left: 4px;
      order: 2;
    }
  }
}

.c-tab-container {

}

.sub-manager {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  font-size: 14px;
  line-height: 24px;
  color: #1d1d1d;
  border-color: #E0E0E0;

  &.el-button:focus,
  &.el-button:hover {
    color: inherit;
    background-color: inherit;
  }
}

.info-list-card {
  position: relative;
  &.gray {
    padding: 0;
    box-shadow: unset;
    border: none;

    ::v-deep {
      .el-card__body {
        padding: 0;
      }
    }
  }

  .card-title {
    font-size: 24px;
    color: #1d1d1d;
    line-height: 36px;
  }

  .sub-manager {
    float: right;
  }

  .info-list {
    min-height: 300px;
    border-top: 1px solid transparent;
    position: relative;
  }

  .add-key-button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 32px;
    padding: 8px 16px;
    color: #F7F9FA;
    border-radius: 6px;
    background-color: #2ABED1;
    cursor: pointer;

    .icon-chahao {
      margin-right: 4px;
      transform: rotate(-45deg);
    }

    .button-text {
      margin-left: 4px;
      white-space: nowrap;
    }
  }

  .icon-chahao {
    position: relative;
    display: inline-block;
    width: 14px;
    height: 14px;

    &:before,
    &:after {
      position: absolute;
      content: '';
      background-color: #fff;
      top: 50%;
      left: 50%;
      width: 14px;
      height: 2px;
      border-radius: 2px;
    }

    &:before {
      transform: translate(-50%, -50%) rotate(45deg);
    }

    &:after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }
  }

  .el-pagination-container.center {
    .el-pagination {
      left: 50%;
      right: unset;
      transform: translateX(-50%);
    }
  }
}
</style>