web/src/views/portrayal/components/DynamicList.vue

<template>
  <el-card class="info-list-card gray" v-loading="listState.loading">
    <div class="collect-list-header">
      <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" v-if="config.isWinner">项目动态</div>
          <div class="list-title" v-else>招标动态</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>
    <el-dialog class="unit-dialog-group" :title="getDialogInfo.title" :visible.sync="isDialogShow">
      <div class="unit-dialog-content">{{ getDialogInfo.content }}</div>
      <span slot="footer" class="unit-dialog-footer">
          <el-button type="primary" @click="openBigPage">{{ getButtonTip }}</el-button>
          <el-button @click="isDialogShow = false">取消</el-button>
        </span>
    </el-dialog>
    <div class="info-list" v-show="!isTable&&!showEmpty">
      <portrayal-article-item
        class="list-item"
        :class="{ visited: item.visited }"
        v-for="item in listState.list"
        :key="item.id"
        :article="item"
        :selected="selected[item.id]"
        @change="changeCheckInput"
        @onCollect="onCollect"
        @onClick="toDetail(item)"
      />
    </div>
    <empty v-show="!listState.list.length">
      <div>
        <span>暂无动态</span>
      </div>
    </empty>
    <div class="info-list collect-table-list" v-show="isTable&&!showEmpty">
      <table class="table" v-show="tableList.length" style="max-width: 856px">
        <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" class="buyer-column" v-if="config.isWinner">招标单位</td>
          <td width="133" class="deep-border">开标日期</td>
          <td width="174" class="winner-column" v-if="!config.isWinner">中标单位</td>
          <td width="76" class="deep-border">中标金额<br/>（万元）</td>
          <td width="133">发布日期</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">{{ (listState.pageNum - 1) * listState.pageSize + index + 1 }}</td>
          <td width="315" class="tt-l">{{ item.title }}</td>
          <td width="84">{{ item.bidstatus }}</td>
          <td width="73" class="tt-r">{{ calcBudget(item.budget) }}</td>
          <td width="181" class="tt-l buyer-column" v-if="config.isWinner"
              v-on:click.stop="goPortrayalDetail(item.buyer)">{{ item.buyer }}
          </td>
          <td width="133">{{
              dateFormatter(item.bidopentime ? item.bidopentime * 1000 : null, 'yyyy-MM-dd HH:mm')
            }}
          </td>
          <td width="174" class="tt-l winner-column" v-if="!config.isWinner">
            <a v-for="(w, i) in getWinnerList(item)" :key="i" style="text-decoration:none"
               v-on:click.stop="goPortrayalDetail(w.id)"><span v-if="i > 0">,</span>
              {{ w.name }}</a>
          </td>
          <td width="76" class="tt-r">{{ calcAmount(item.bidamount) }}</td>
          <td width="133">{{ dateFormatter(item.firsttime * 1000, 'yyyy-MM-dd') || '--' }}</td>
        </tr>
        </tbody>
      </table>
      <empty v-show="!tableList.length">
        <div>
          <span>暂时无动态</span>
        </div>
      </empty>
    </div>
    <div class="el-pagination-container center" v-if="listState.total > listState.pageSize">
      <el-pagination
        background
        layout="prev, pager, next, ->"
        :hide-on-single-page="true"
        :current-page.sync="listState.pageNum"
        :page-size="listState.pageSize"
        :total="listState.total"
        @current-change="onPageChange"
      >
      </el-pagination>
    </div>
    <div class="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-dialog
      :visible.sync="tipDialog"
      title="提示信息"
      :show-close="false"
      class="tip-dialog"
      width="380px"
      center>
      <div>
        当月采购单位画像余额为0，如需查看更多，请前往充值
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click.stop="goHandle(dialogBtnText)">{{ dialogBtnText }}</el-button>
        <el-button @click="tipDialog = false">取 消</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import { Button, Card, Dialog, Pagination } from 'element-ui'
import Empty from '@/components/common/Empty.vue'
import PortrayalArticleItem from './DynamicListItem.vue'
import { dateFormatter, moneyUnit } from '@/utils/'
import { mapState } from 'vuex'
import { mixinVisited } from '@/utils/mixins/visited'
import { getNewMsg, getPortrayalSearchExportId, getSvipNewMsg, getUnitDt, getVipUnitDt } from '@/api/modules'
/* eslint-disable */
export default {
  name: 'portrayal-dynamic-list',
  mixins: [mixinVisited],
  components: {
    [Pagination.name]: Pagination,
    [Card.name]: Card,
    [Button.name]: Button,
    [Dialog.name]: Dialog,
    PortrayalArticleItem,
    Empty
  },
  props: {
    subManager: {
      type: Boolean,
      default: false
    },
    config: {
      type: Object,
      default () {
        return {
          isWinner: false,
          hasPower: false,
          baseParam: {
            buyer: '',
            entId: '',
          }
        }
      }
    },
    filters: {
      type: Object,
      default () {
        return {
          area: '',
          time: ''
        }
      }
    },
    usage: {
      type: Object,
      default () {
        return {}
      }
    },
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.info
    }),
    isTable () {
      return this.showIcon === 'table'
    },
    showEmpty () {
      return this.listState.list.length === 0 && this.listState.loaded
    },
    getFilters () {
      return Object.assign({}, this.config.baseParam, this.filters)
    },
    canSubmanager () {
      return !this.$store.state.user.info?.isSubCount
    },
    getButtonTip () {
      let btnText = ''
      const info = this.userInfo
      const usage = this.usage
      // 【立即解锁】：未体验过采购单位画像的免费用户，点击进行“欢迎体验采购单位全景分析”留资
      // 【去开通】：已体验过1次采购单位画像的免费用户，点击进入超级订阅购买页
      // 【前往升级】：超级订阅老版用户+购买了非全国采购单位画像余额为0的超级订阅新版用户，点击进入超级订阅升级页
      // 【联系客服】：购买了全国采购单位画像余额为0的超级订阅新版用户+无采购单位画像权限的大会员客户；点击调起智齿在线客服
      if (info.isFree) {
        if (info.freeBuyerPort === 0) {
          btnText = '立即解锁'
        } else {
          btnText = '去开通'
        }
      } else {
        // 老超级订阅用户
        const oldVip = info.vipStatus > 0 && !info.viper
        // 新超级订阅用户
        const newVip = info.vipStatus > 0 && info.viper
        // 大会员用户
        const member = info.memberStatus > 0
        // 新超级订阅用户买的非全国 余额为0
        const noAllProvinNoCounts = newVip && usage.provin !== -1 && usage.balance <= 0
        // 超级订阅新用户 购买的全国 余额为0
        const allProvinNoCounts = newVip && usage.provin === -1 && usage.balance <= 0
        // 无权限的大会员用户
        const noAuthMember = info.memberStatus > 0 && info.power.indexOf(5) === -1
        // 纯商机管理用户
        const entniche = info.entniche && !oldVip && !newVip && !member
        if (oldVip || noAllProvinNoCounts) {
          btnText = '前往升级'
        } else if (allProvinNoCounts || noAuthMember || entniche) {
          btnText = '联系客服'
        }
      }
      return btnText
    },
    dialogBtnText () {
      // if (this.usage.provin === -1) {
      //   return '联系客服'
      // } else {
      //   return '前往升级'
      // }
      return '立即充值'
    },
    getDialogInfo () {
      //采购单位画像弹框
      const info = {}
      const str = this.getButtonTip
      if (str === '去开通') {
        info.title = '开通超级订阅'
        info.content = '您已经免费解锁过【采购单位全景分析】权益1次，暂无免费查看权限。如需查看更多，请开通超级订阅获取更多权限。'
      } else if (str === '前往升级') {
        info.title = '升级超级订阅'
        info.content = '对不起，暂无权限，您可升级超级订阅解锁采购单位全景分析，查看更多招标动态。'
      } else if (str === '立即解锁') {
        console.log('立即解锁')
      } else {
        info.title = '开通大会员'
        info.content = '采购单位项目动态全面获取，帮助企业洞察采购需求，开发新客户！'
      }
      return info
    }
  },
  data () {
    return {
      showIcon: 'list',
      isAllFirst: false,
      isDialogShow: false,
      tipDialog: false,
      selected: {}, // 已选中的信息
      tableList: [],
      listState: {
        loaded: true, // 是否已经搜索过
        loading: false,
        pageNum: 1, // 当前页
        pageSize: 5, // 每页多少条数据
        lastNum: 1, // 上次页面
        total: 0, // 一共多少条数据
        list: [] // 查询请求返回的数据
      }
    }
  },
  created () {
    this.doQuery()
  },
  mounted () {
    this.initCollectEvent()
  },
  methods: {
    getCheckStatus (id) {
      console.log('id', id, this.selected[id])
      return this.selected[id]
    },
    changeCheckInput (id) {
      this.$set(this.selected, id, !this.selected[id])
    },
    dateFormatter,
    calcBudget (budget) {
      if (budget) {
        return moneyUnit(budget).replace('万元', '')
      } else {
        return budget
      }
    },
    calcAmount (bidamount) {
      if (bidamount) {
        return moneyUnit(bidamount).replace('万元', '')
      } else {
        return bidamount
      }
    },
    getWinnerList (item) {
      const {
        winner: names = [],
        winnerIds: ids = []
      } = item
      let list = []
      if (names.length === ids.length) {
        list = names.map((v, i) => {
          return {
            name: v,
            id: ids[i],
          }
        })
      }

      return list
    },
    goHandle (data) {
      const usage = this.usage
      if (data === '立即充值') {
        if (usage.provin === -1) {
          this.$router.push('/free/filePack/buy?type=1')
        } else {
          this.$emit('vipClick')
        }
        this.tipDialog = false
      } else if (data === '联系客服') {
        $('.help-slide-zx.open-customer').trigger('click')
        this.tipDialog = false
      } else {
        this.$router.push('/free/svip/buy?type=upgrade')
      }
    },
    goPortrayalDetail (flag) {
      if (this.config.isWinner) {
        window.open('/swordfish/page_big_pc/unit_portrayal/' + flag)
      } else {
        if (this.userInfo.power.indexOf(5) > -1) {
          window.open('/swordfish/page_big_pc/ent_portrait/' + flag)
        } else {
          window.open('/swordfish/page_big_pc/svip/ent_ser_portrait/' + flag)
        }
      }
    },
    showToDataExportAlert () {
      this.$confirm('如需查看更多表格数据，请前往进行数据导出', '', {
        confirmButtonText: '数据导出',
        cancelButtonText: '取消',
        center: true,
        showClose: false,
        customClass: 'exportDialog'
      }).then(() => {
        this.onClickDataExport()
      }).catch(() => {
        this.showIcon = 'list'
      })
    },
    async onClickDataExport () {
      const nowCheckItems = this.getAllSelectId()
      let param = this.getFilters
      if (nowCheckItems.length) {//有选择导出选择条
        param.selectIds = nowCheckItems.join(',')
      }
      const res = await getPortrayalSearchExportId(this.userInfo.memberStatus > 0, this.config.isWinner, param)
      if (res.error_code === 0) {
        if (res.data) {
          location.href = '/front/dataExport/toCreateOrderPage/' + res.data
        }
      }
    },
    onClickDataCollect () {
      const nowCheckItems = this.getAllSelectId(function (id) {
        return {
          id: id,
        }
      })
      this.onCollect({
        list: nowCheckItems
      })
    },
    toggleActiveIcon (type) {
      if (type === 'table') {
        if (this.listState.pageNum > 4) {
          this.showToDataExportAlert()
          return false
        }
      }
      this.showIcon = type
    },
    changeAllCheck (e) {
      //次页数据全选或这全不选切换
      var _this = this
      const nowStatus = $(e.target).prop('checked')
      $('.custom-checkbox:not(.has-top)').prop('checked', nowStatus)
      this.getPageInputObj(function () {
        _this.selected[$(this).attr('dataid')] = nowStatus
      })
    },
    getPageInputObj (callback) {
      const arr = []
      $('.custom-checkbox:not(.has-top)').each(function () {
        const tempN = callback.bind(this)()
        arr.push(tempN)
      })
      return arr
    },
    getAllSelectId (callback) {
      const arr = []
      for (var id in this.selected) {
        if (this.selected[id]) {
          if (callback) {
            arr.push(callback(id))
          } else {
            arr.push(id)
          }
        }
      }
      return arr
    },
    // 恢复数据至第一次请求的状态(页码等)
    resetListState () {
      const state = {
        loaded: false,
        loading: false,
        pageNum: 1,
        total: 0,
        list: []
      }
      Object.assign(this.listState, state)
    },
    doQuery () {
      this.resetListState()
      this.getList()
    },
    async getList () {
      let query = {
        pageNum: this.listState.pageNum,
        pageSize: this.listState.pageSize,
      }
      query = Object.assign(this.getFilters, query)

      this.listState.loading = true
      this.listState.loaded = false
      // 判断是否无筛选条件
      this.isAllFirst = true
      let res = {}
      if (this.userInfo.memberStatus > 0) {
        if (this.config.isWinner) {
          // 大会员-企业画像
          // fix: 新增自定义版大会员判断
          if (this.userInfo.power.indexOf(13) > -1) {
            res = await getNewMsg(query)
          } else {
            res = await getSvipNewMsg(query)
          }

        } else {//大会员-采购单位画像
          res = await getUnitDt(query)
        }
      } else {
        if (this.config.isWinner) {//超级订阅及免费用户-企业画像
          res = await getSvipNewMsg(query)
        } else {//超级订阅及免费用户-采购单位画像
          res = await getVipUnitDt(query)
        }
      }
      this.listState.loading = false
      this.listState.loaded = true

      if (res.data?.count) {
        if (this.listState.pageNum === 1) {
          this.listState.total = res.data.count
          if (res.data.count !== res.data.list.length) {
            this.listState.pageSize = res.data.list.length
          }
        }
        try {
          res.data.list = res.data.list.map(item => {
            const visited = this.pathVisited(
              this.createPathItem(
                '/article/content/*.html',
                `id=${item.id}`
              )
            )
            return {
              ...item,
              visited
            }
          })
        } catch (error) {
        }
        this.listState.list = res.data.list.map(v => {
          v.collection = 0
          return v
        }) || []
        this.tableList = res.data.list || []
        this.$nextTick(() => {
          this.getCollectStatusForList()
        })
      } else {
        this.listState.total = 0
        this.listState.list = []
        this.tableList = []
      }
    },
    toDetail (item) {
      item.visited = true
      this.pathVisiting(
        this.createPathItem(
          '/article/content/*.html',
          `id=${item.id}`
        )
      )
      window.open(`/article/content/${item.id}.html`)
    },
    onPageChange (p) {
      //免费用户仅展示前三条
      //付费用户展示前4页 20条表格数据
      if (this.isTable) {
        if (this.config.hasPower) {
          if (p > 4) {
            this.listState.pageNum = this.listState.lastNum
            this.showToDataExportAlert()
            return false
          }
        } else {
          this.listState.pageNum = this.listState.lastNum
          this.showToDataExportAlert()
          return false
        }
      } else {
        if (!this.config.isWinner) { //采购单位无权限留资等逻辑
          const isFree = this.userInfo.isFree && this.userInfo.freeBuyerPort === 0
          const usage = this.usage
          // 免费体验 - 去留资
          if (p !== 1 && isFree) {
            this.$emit('onClickUnlock', 'buyer_portrait_getNewMsg_freeuser')
            this.listState.pageNum = this.listState.lastNum
            return false
          }
          // 没有权限 弹出对应弹框
          if (p !== 1 && !this.config.hasPower) {
            if (usage.provin === -1 && usage.balance === 0) {
              this.tipDialog = true
            } else if (usage.provin >= 1 && usage.balance === 0) {
              this.tipDialog = true
            } else {
              this.isDialogShow = true
            }
            this.listState.pageNum = this.listState.lastNum
            return false
          }
        }
      }

      $('.custom-checkbox').prop('checked', false) //清除选择框

      this.listState.pageNum = p
      this.listState.lastNum = p
      this.getList()
    },
    openBigPage () {
      this.isDialogShow = false
      this.$emit('click', '招标动态', { button: this.getButtonTip })
    },
    showTip (text, duration) {
      if (duration) {
        duration = 1000
      }
      var _html = ''
      _html += '<div class="custom-toast"><div class="mask" style="background-color: transparent;"></div><div class="toast-container">'
      _html += '<span>' + text + '</span></div></div>'
      $('body').append(_html)
      setTimeout(function () {
        $('.custom-toast').fadeOut().remove()
      }, duration)
    }
    ,
    ajaxForCollectChange (baction, binfo, callback) {
      /*
          收藏或取消收藏ajax
          params: {
            baction: String, //用户行为：R：移除收藏；C：收藏（默认）非必填
            binfo: Array, // 招标信息数组 必填
            bid: String, // 招标信息加密后id 必填
          }
          参数示例 (baction=R binfo数组只需要bid即可)
        */
      function collBidAction (baction, binfo, callback) {
        var params = {
          baction: baction,
          binfo: binfo
        }
        $.ajax({
          type: 'post',
          contentType: 'application/json',
          url: '/publicapply/bidcoll/action',
          data: JSON.stringify(params),
          dataType: 'json',
          success: function (r) {
            if (r) {
              callback && callback(r)
            }
          }
        })
      }

      return collBidAction(baction, binfo, callback)
    }
    ,
    onCollect (data) {
      let {
        item,
        event,
        list
      } = data
      let binfo = []
      if (list) {
        binfo = list.map(v => ({ bid: v.id }))
        item = {}
        event = {}
      } else {
        binfo = [{ bid: item.id }]
      }
      var _this = this
      if (binfo.length === 0) {
        return _this.showTip(list.length ? '已收藏' : '尚未选择标讯，请选择', 800)
      }
      if (item.collection) {
        // 单个取消收藏行为
        this.ajaxForCollectChange('R', binfo, function (res) {
          if (res.data) {
            item.collection = 0
            _this.showTip('已取消收藏', 800)
          } else {
            _this.showTip(res.error_msg, 1000)
          }
        })
      } else {
        // 将本次收藏的标讯id缓存起来 用于绑定标签时使用
        sessionStorage.setItem('$save-tags-binfo', JSON.stringify(binfo))
        this.ajaxForCollectChange('C', binfo, function (res) {
          if (res.data) {
            _this.showTip('收藏成功', 1500)
            if (list) {
              const tempList = list.map(v => v.id)
              _this.listState.list.forEach(v => {
                const tempIndex = tempList.indexOf(v.id)
                if (tempIndex > -1) {
                  v.collection = 1
                }
              })
              event = {
                target: $('.info-list .list-item i.icon-collect')
              }
            } else {
              item.collection = 1
            }
            var top = (parseInt($(event.target).position().top) + 30 - (list ? 28 : 0)) + 'px'
            var left = (parseInt($(event.target).position().left) - 300)

            if (left < 0) {
              top = (parseInt($('.collect-list-header .j-icon.icon-star').position().top) + 30 - (list ? 28 : 0)) + 33 + 'px'
              left = (parseInt($('.collect-list-header .j-icon.icon-star').position().left) - 300 + 54)
            }
            left += 'px'

            $('.tags-box').show(function () {
              window.activeTags = []
              $('.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.showTip('您的标讯收藏上限为5000条，请联系客服人员。', 1500)
            }
          }
        })
      }
    }
    ,
    initCollectEvent () {
      const _this = this

      function toastFn (text, duration) {
        _this.showTip(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 () {
          // 标签弹框消失时 清除上次选择的标签分类
          activeTags = []
          $('.tag-labels').empty()
          $('.clear-input').val('')
          $('.tags-list').find('.tags-item').removeClass('tags-active')
          $('.tag-placeholder').show()
        })
      })

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

      window.deleteInputTag = deleteInputTag

      function inputTagList () {
        var ht = ''
        $('.tag-labels').html(ht)
        activeTags.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" onclick="deleteInputTag(this)"></i>'
          ht += '</span>'
        })
        $('.tag-labels').html(ht)
        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)
          activeTags.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')) {
              activeTags.push({
                lid: id,
                lname: name
              })
              inputTagList()
            } else {
              var newArr = activeTags.filter(function (item) {
                return item.lid != id
              })
              activeTags = newArr
              console.log(activeTags, newArr, 'quxiao')
              inputTagList()
            }
          })
        }
        inputTagList()
      }

      // 获取用户自定义标签
      function getUserTags () {
        $.ajax({
          type: 'post',
          url: '/publicapply/bidcoll/getLabel?t=' + Date.now(),
          success: function (r) {
            if (r.error_code == 0 && $.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) {
        $.ajax({
          type: 'post',
          url: '/publicapply/bidcoll/label',
          contentType: 'application/json',
          data: JSON.stringify(params),
          dataType: 'json',
          success: function (r) {
            if (r.data) {
              toastFn('标签绑定成功', 1000)
              callback && callback()
            }
          }
        })
      }

      // 新增标签
      function addTagsAjax (name) {
        $.ajax({
          type: 'post',
          url: '/publicapply/bidcoll/addLabel',
          data: {
            name: name
          },
          dataType: 'json',
          success: function (r) {
            if (r.data) {
              $('.tag-input .clear-input').val('')
              // 添加标签成功后 绑定标签
              if (activeTags.length < 3) {
                activeTags.push({
                  lid: r.data,
                  lname: name
                })
              }
              getUserTags()
            } else {
              // toastFn(r.error_msg, 1000)
              toastFn('标签已经存在，无需添加', 1000)
            }
          }
        })
      }

      /*
        收藏或取消收藏ajax
        params: {
          baction: String, //用户行为：R：移除收藏；C：收藏（默认）非必填
          binfo: Array, // 招标信息数组 必填
          bid: String, // 招标信息加密后id 必填
        }
        参数示例 (baction=R binfo数组只需要bid即可)
      */
      function collBidAction (baction, binfo, callback) {
        var params = {
          baction: baction,
          binfo: binfo
        }
        $.ajax({
          type: 'post',
          contentType: 'application/json',
          url: '/publicapply/bidcoll/action',
          data: JSON.stringify(params),
          dataType: 'json',
          success: function (r) {
            if (r) {
              callback && callback(r)
            }
          }
        })
      }

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

      function baiduEvent (str) {
        try {
          // eslint-disable-next-line no-undef
          _hmt.push(['_trackEvent', '大会员-pc', 'click', str])
        } catch (e) {
          console.log('未初始化百度统计')
        }
      }

      // 收藏点击事件
      function collectClick () {
        // console.log(vipState, '是否是超级订阅用户')
        // 单个收藏点击事件
        $('.icon-collect').on('click', function (e) {
          baiduEvent('列表页标讯收藏-星标') // 百度统计代码
          e.stopPropagation()
          var $that = $(this)
          var checked = $(this).hasClass('checked')
          var checkedId = $(this).attr('dataid')
          var binfo = [{
            bid: checkedId
          }]
          if (checked) {
            // 单个取消收藏行为
            collBidAction('R', binfo, function (res) {
              if (res.data) {
                $that.removeClass('checked')
                toastFn('已取消收藏', 800)
              } else {
                toastFn(res.error_msg, 1000)
              }
            })
          } else {
            // 将本次收藏的标讯id缓存起来 用于绑定标签时使用
            sessionStorage.setItem('$save-tags-binfo', JSON.stringify(binfo))
            collBidAction('C', binfo, function (res) {
              if (res.data) {
                toastFn('收藏成功', 1500)
                if (selectType == 'title') {
                  $that.addClass('checked')
                } else {
                  $that.addClass('checked')
                }
                var top = (parseInt($that.position().top) + 50) + 'px'
                $('.tags-box').show(function () {
                  activeTags = []
                  $('.tag-labels').empty()
                  $('.clear-input').val('')
                  $('.tags-list').find('.tags-item').removeClass('tags-active')
                  $('.tag-placeholder').show()
                }).css('top', top)
                getUserTags()
              } else {
                // 是超级订阅用户或者其他付费用户
                if (vipState || res.error_msg.indexOf('付费') > -1) {
                  toastFn('您的标讯收藏上限为5000条，请联系客服人员。', 1500)
                } else {
                  updateVipDialog('标讯收藏满100条-去升级')
                }
              }
            })
          }
        })
        // 批量收藏
        $('#bid-collect').off('click').bind('click', function (e) {
          baiduEvent('列表页标讯收藏-星标') // 百度统计代码
          e.stopPropagation()
          var top = (parseInt($(this).position().top) + 60) + 'px'
          var len = $('.custom-checkbox:not(".check-all"):checked').length
          var checkedId = [] // 提交后端需要的标讯id数组
          var leftArr = [] // checkbox选中的数据
          var rightArr = [] // 当前已收藏过的数据
          var notSameArr = [] // 选中的数据 与 收藏过的数据相比不同的数组
          $('.custom-checkbox:not(".check-all"):checked').each(function () {
            if ($(this).attr('dataid')) {
              checkedId.push({
                bid: $(this).attr('dataid')
              })
              leftArr.push($(this).attr('dataid'))
            }
          })
          $('.icon-collect.checked').each(function () {
            if ($(this).attr('dataid')) {
              rightArr.push($(this).attr('dataid'))
            }
          })
          var $that = $(this)
          // 判断有无选中的标讯信息
          if (len > 0) {
            if (leftArr.length <= rightArr.length) {
              for (key in leftArr) {
                var stra = leftArr[key]
                var count = 0
                for (var j = 0; j < rightArr.length; j++) {
                  var strb = rightArr[j]
                  if (stra == strb) {
                    count++
                  }
                }
                if (count === 0) { // 表示数组1的这个值没有重复的，放到notSameArr列表中
                  notSameArr.push(stra)
                }
              }
              // 如果没有不同的值 即为选中的标讯都已收藏过 有不同的值即为有未收藏的标讯
              console.log(notSameArr, 'notSameArr')
              if (notSameArr.length == 0) {
                toastFn('已收藏', 800)
                return
              }
            }

            sessionStorage.setItem('$save-tags-binfo', JSON.stringify(checkedId)) // 将本次收藏的标讯id缓存起来 用于绑定标签时使用
            collBidAction('C', checkedId, function (res) {
              if (res.data) {
                toastFn('收藏成功', 1500)
                if (selectType == 'title') {
                  $('.custom-checkbox:not(".check-all"):checked').siblings().children('.icon-collect').addClass('checked')
                } else {
                  $('.custom-checkbox:not(".check-all"):checked').parents('.liLuceneList').find('.icon-collect').addClass('checked')
                }
                // 收藏成功后再查一次收藏状态，为了区分达到收藏上限点时部分收藏成功，部分收藏失败
                getBidIsColl()
                // 弹出标签弹框时 清除上次选择的标签
                $('.tags-box').show().css('top', top)
                getUserTags()
              } else {
                // 是超级订阅用户或者其他付费用户
                if (vipState || res.error_msg.indexOf('付费') > -1) {
                  toastFn('您的标讯收藏上限为5000条，请联系客服人员。', 1500)
                } else {
                  updateVipDialog('标讯收藏满100条-去升级')
                }
              }
            })
          } else {
            toastFn('尚未选择标讯，请选择', 1000)
          }
        })
      }

      getUserTags()
    }
    ,
    getCollectStatusForList () {
      const _this = this

      // 获取当前页信息流收藏状态
      function getBidIsColl () {
        // collectClick()
        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
          }
        })
        $.ajax({
          type: 'post',
          url: '/publicapply/bidcoll/isColl?t=' + Date.now(),
          data: {
            bids: bids
          },
          dataType: 'json',
          success: function (r) {
            if (r.data) {
              var data = r.data
              $('.icon-collect').removeClass('checked')
              data.forEach(function (item, index) {
                _this.listState.list.forEach(v => {
                  if (v.id === item) {
                    v.collection = 1
                  }
                })
                $('.icon-collect[dataid="' + item + '"]').addClass('checked')
              })
            }
          }
        })
      }

      getBidIsColl()
    }
  }
}
/* eslint-enable */
</script>
<style lang="scss" scoped>
.tip-dialog {
  ::v-deep {
    .el-button--primary,
    .el-button--primary:hover,
    .el-button--primary:focus {
      width: 132px;
      height: 36px;
      margin-right: 52px;
      text-align: center;
      background: #2CB7CA;
      border-radius: 6px;
      font-size: 16px;
      color: #fff;
      border: 0;
    }

    .el-dialog__header {
      padding-top: 32px !important;
    }

    .el-dialog__body {
      padding: 20px 32px;
      color: #686868;
      font-size: 14px;
      line-height: 22px;
      text-align: justify;
    }

    .el-dialog__body i {
      color: #2CB7CA;
    }

    .el-button--default,
    .el-button--default:hover,
    .el-button--default:focus {
      width: 132px;
      height: 36px;
      text-align: center;
      background: #fff;
      border-radius: 6px;
      font-size: 16px;
      color: #686868;
      border: 1px solid #DCDFE6;
    }

    .el-dialog__footer {
      padding-bottom: 32px;
    }
  }
}
</style>
<style lang="scss">
.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;
}

.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,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) 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-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;
  font-size: 18px;
  font-weight: 400;
  color: #1D1D1D;
}

.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;
}

.buyer-column {
  max-width: 181px;
  word-break: break-all;
}

.winner-column {
  max-width: 174px;
  word-break: break-all;
}

.winner-column a {
  color: #1D1D1D;
}

.collect-table-list table {
  border: none;
  border-left: 1px solid #ECECEC;
  border-top: 1px solid #ECECEC;
}

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

.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: none;
  border-right: 1px solid #ECECEC;
  border-bottom: 1px solid #ECECEC;
  font-size: 14px;
  color: #1D1D1D;
}

.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;
}

.exportDialog {
  width: 380px;
  height: 154px;
  background: #FFFFFF;
  border-radius: 8px 8px 8px 8px;
  padding: 32px;

  .el-message-box__header {
    display: none;
  }

  .el-message-box__content {
    padding: 0px;
    font-size: 14px;
    font-weight: 400;
    color: #686868;
    line-height: 22px;
  }

  .el-message-box__btns {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;

    .el-button {
      width: 132px;
      height: 36px;
      border-radius: 6px 6px 6px 6px;
      opacity: 1;
      font-weight: 400;
      font-size: 16px;
      padding: 0;
      margin: 0;
      color: #686868;
    }

    .el-button--primary {
      background: #2CB7CA;
      color: #fff;
      border-color: #2CB7CA;
    }
  }
}
</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;
    }
  }

  .a-i-left {
    color: #303133;
    font-size: 16px;
  }
}

.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 {
  &.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: 150px;
    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%);
    }
  }
}

.unit-dialog-group {
  ::v-deep {
    .el-dialog__header {
      display: none;
    }

    .el-dialog {
      width: 380px;
      height: auto;
      background: #ffffff;
      border-radius: 8px;
    }

    .el-dialog__header {
      text-align: center;
      padding: 32px;
      padding-bottom: 20px;
    }

    .el-dialog__body {
      padding: 32px;
      font-size: 14px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      text-align: CENTER;
      color: #686868;
      line-height: 22px;
    }

    .el-dialog__title {
      font-size: 18px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      color: #1d1d1d;
      line-height: 28px;
    }

    .el-dialog__footer {
      padding: 0;
    }
  }

  .unit-dialog-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 32px;
    padding-top: 0;

    ::v-deep {
      .el-button--default {
        border: 1px solid #e0e0e0;
        color: #686868;
        background: #fff;
      }

      .el-button {
        width: 132px;
        height: 36px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: 400;
        text-align: CENTER;
        border-radius: 6px;

      }

      .el-button--primary {
        background: #2cb7ca;
        color: #ffffff;
        border-color: #2CB7CA;
      }
    }
  }
}
</style>