jy/src/web/staticres/vipsubscribe/js/keyWord.js

var vm = new Vue({
  delimiters: ['${', '}'],
  el: '#app',
  data: {
    conf: {
      sessKey: '$data-vipsubscribe-keyword-list',
      keywordMax: 300
    },
    batchDeleteState: false, // 是否在批量删除状态
    userData: {}, // getUserInfo接口用户原始数据
    keywordsGroupList: [], // 所有关键词列表
    groupNameList: [], // 关键词分类名称列表
    // 当前信息
    filter: {
      loaded: false, // 是否请求加载完成
      pickerShow: false, // picker是否显示
      groupName: '', // 为空表示全部
      allKeywordsList: [],  // 筛选前的数组
      keywordsList: [], // 筛选后的数组
    },
    dialog: {
      fastImport: false, // 快速导入弹框
      upgrade: false // 关键词升级提示弹框
    },
    tip: {
      fastImport: true, // 控制快速导入入口的显示隐藏
      i_vip_fastimport: 0,
      ordinarykc: 0
    },
    scrollTop: 0 // 记录滚动高度
  },
  computed: {
    keyListSorted: function () {
      return this.filter.keywordsList.sort(function (a, b) {
        return b.updatetime - a.updatetime
      })
    },
    fastImportTipShow: function () {
      var needShow = this.tip.i_vip_fastimport == 0 && this.tip.ordinarykc > 0
      return needShow && this.filter.loaded && this.tip.fastImport
    },
    listShow: function () {
      return this.filter.keywordsList.length !== 0 && this.filter.loaded
    },
    emptyShow: function () {
      return this.filter.keywordsList.length === 0 && this.filter.loaded
    },
    selectedCount: function () {
      var selectedArr = this.getSelectedArr()
      return selectedArr.length
    },
    totalKeywordsCount: function () {
      // var count = 0
      // this.filter.allKeywordsList.forEach(function (item) {
      //   if (item.matchway == 1) {
      //     // 模糊匹配
      //     var key = item.key
      //     if (Array.isArray(item.appendkey)) {
      //       key = key.concat(item.appendkey)
      //     }
      //     count += key.length
      //   } else {
      //     // 精准匹配(matchway：0/undefined)
      //     count++
      //   }
      // })
      return this.filter.allKeywordsList.length
    }
  },
  created: function () {
    this.restoreState()
    this.getKeywordsGroupList(true)
  },
  mounted: function () {},
  methods: {
    showLoading: function () {
      return this.$toast.loading({
        duration: 0,
        forbidClick: true,
        message: 'loading...',
      })
    },
    showToast: function (message) {
      return this.$toast({
        duration: 1500,
        forbidClick: true,
        message: message,
      })
    },
    showDialog: function (conf) {
      var defaultConf = {
        title: '提示',
        message: 'message',
        className: 'j-confirm-dialog',
        showConfirmButton: true,
        showCancelButton: true,
        confirmButtonColor: '#2abed1'
      }
      if (conf) {
        Object.assign(defaultConf, conf)
      }
      return this.$dialog.confirm(defaultConf)
    },
    // 对象转form
    qsStringify: function (t) {
      var arr = []
      for (var k in t) {
        arr.push(`${k}=${t[k]}`)
      }
      return arr.join('&')
    },
    scrollTo: function (scrollTop, animate) {
      var jMain = this.$refs.jMain
      if (animate) {
        $(jMain).animate({ scrollTop: scrollTop }, 300)
      } else {
        $(jMain).scrollTop(scrollTop)
      }
    },
    getKeywordsGroupList: function (needLoading) {
      var _this = this
      if (needLoading)  {
        var loading = this.showLoading()
      }
      $.ajax({
        type: 'POST',
        url: '/subscribepay/afterPay/getUserInfo?t=' + Date.now(),
        success: function (res) {
          if (needLoading) {
            loading && loading.clear()
          }
          if (res && res.userData) {
            _this.userData = res.userData
            if (res.userData) {
              _this.tip.i_vip_fastimport = res.userData.i_vip_fastimport
              _this.tip.ordinarykc = res.userData.ordinarykc
              // 关键词弹窗提醒 fasle:需要弹窗 true:不需要弹窗
              if (!res.userData.b_keytip) {
                _this.dialog.upgrade = true
              }
            }
            if (res.userData && res.userData.o_vipjy) {
              // 整理数据
              var groupList = _this.addInfoToKeyItem(res.userData.o_vipjy.a_items)
              var groupNameList = _this.getGroupNameList(groupList)
              _this.keywordsGroupList = groupList
              _this.groupNameList = groupNameList
              _this.doFilter(_this.filter.groupName)
              _this.filter.allKeywordsList = _this.filterKeywordsList()
              if (needLoading && _this.scrollTop != 0) {
                _this.$nextTick(function () {
                  _this.scrollTo(_this.scrollTop)
                  _this.scrollTop = 0
                })
              }
            }
          }
        },
        error: function () {
          if (needLoading) {
            loading && loading.clear()
          }
        },
        complete: function () {
          _this.filter.loaded = true
        }
      })
    },
    // 向关键词中添加一些信息
    addInfoToKeyItem: function (groupList) {
      var _this = this
      if (!Array.isArray(groupList)) return []
      var arr = []

      groupList.forEach(function (keywordsList, index) {
        if (keywordsList && Array.isArray(keywordsList.a_key)) {
          keywordsList.groupIndex = index
          if (!keywordsList.updatetime) {
            keywordsList.updatetime = 0
          }
          keywordsList.a_key.forEach(function (keyword, iindex) {
            // 添加一些其他信息
            keyword.groupName = keywordsList.s_item // 分类名
            keyword.groupIndex = index // 该关键词所在分类 在分类列表中的索引
            keyword.keyIndex = iindex // 该关键词在其所在分类中的索引
            if (!keyword.updatetime) {
              keyword.updatetime = 0
            }
          })
          arr.push(keywordsList)
        }
      })

      return arr
    },
    getGroupNameList: function (keywordsGroupList) {
      var groupNameList = []
      if (!Array.isArray(keywordsGroupList)) return groupNameList
      keywordsGroupList.forEach(function (item) {
        if (item) {
          var count = Array.isArray(item.a_key) ? item.a_key.length : 0
          groupNameList.push({
            name: item.s_item, // 分类名
            count: count, // 分类下有多少个关键词
            groupIndex: item.groupIndex,
            updatetime: item.updatetime
          })
        }
      })
      return groupNameList
    },
    calcKeyInfo: function (item) {
      // 匹配方式 item.matchway 0/null精准 1模糊
      var key = item.key
      var notkey = []
      if (Array.isArray(item.appendkey)) {
        key = key.concat(item.appendkey)
      }
      if (Array.isArray(item.notkey)) {
        notkey = item.notkey
      }

      return {
        key: key.join(' '),
        notkey: notkey.join(' '),
        matchWay: item.matchway == 1 ? '模糊' : '精准',
        matchWayClass: item.matchway == 1 ? 'tag-orange' : 'tag-green'
      }
    },
    showFilterPicker: function (f) {
      this.filter.pickerShow = f
    },
    checkThisGroup: function (item) {
      var groupName = ''
      if (item) {
        groupName = item.name
      } else {
        groupName = ''
      }
      this.doFilter(groupName)
      this.showFilterPicker(false)
    },
    doFilter: function (groupName) {
      var _this = this
      this.filter.groupName = groupName
      var rList = this.filterKeywordsList(groupName)
      this.filter.keywordsList = rList
      this.$nextTick(function () {
        _this.scrollTo(0)
      })
    },
    // 筛选分类列表
    filterKeywordsList: function (filterName) {
      var list = []
      // 筛选关键词
      this.keywordsGroupList.forEach(function (keywordsList) {
        if (Array.isArray(keywordsList.a_key)) {
          keywordsList.a_key.forEach(function (keyword) {
            // 筛选全部(筛选词为空)，需要把关键词所属分类信息记录
            if (!filterName) {
              list.push(keyword)
            } else {
              if (filterName === keywordsList.s_item) {
                list.push(keyword)
              }
            }
          })
        }
      })
      // 给新的list添加checked
      list = JSON.parse(JSON.stringify(list))
      list.forEach(function (item) {
        item.checked = false
        item.calcInfo = this.calcKeyInfo(item)
      }.bind(this))
      return list
    },
    clickKeyCard: function (item) {
      if (this.batchDeleteState) {
        // 执行点击选中逻辑
        // 如果关键词组下有关键词，则不能点击
        item.checked = !item.checked
      } else {
        // type: edit编辑、add新增
        // gIndex: groupIndex 该关键词所在分类 在分类列表中的索引
        // kIndex: keyIndex 该关键词在其所在分类中的索引
        this.savePageState()
        location.href = `/front/vipsubscribe/toSetinfoPage?type=edit&gIndex=${item.groupIndex}&kIndex=${item.keyIndex}`
      }
    },
    batchDeleteStateChange: function () {
      this.batchDeleteState = !this.batchDeleteState
    },
    batchDelete: function () {
      var _this = this
      if (this.selectedCount <= 0) return
      this.showDialog({
        title: '',
        message: '确定删除所选' + this.selectedCount + '个关键词吗？',
        className: 'j-confirm-dialog text-center',
      }).then(function () {
        console.log('确认批量删除关键词')
        _this.batchDeleteConfirmed()
      })
      .catch(function() {
        console.log('取消批量删除关键词')
      })
    },
    getSelectedArr: function () {
      var selectedArr = []
      this.filter.keywordsList.forEach(function (item) {
        if (item.checked) {
          selectedArr.push(item)
        }
      })
      return selectedArr
    },
    getDeleteKey: function () {
      var deleteKeyArr = {}
      var deleteKey = {}
      var selectedArr = this.getSelectedArr()
      selectedArr.forEach(function (item) {
        var groupIndex = item.groupIndex
        var keyIndex = item.keyIndex
        if (deleteKeyArr[groupIndex]) {
          deleteKeyArr[groupIndex].push(keyIndex)
        } else {
          deleteKeyArr[groupIndex] = [keyIndex]
        }
      })

      for (var key in deleteKeyArr) {
        if (Array.isArray(deleteKeyArr[key])) {
          deleteKeyArr[key] = deleteKeyArr[key].sort(function (a, b) { return a - b })
          deleteKey[key] = deleteKeyArr[key].join(',')
        }
      }
      return deleteKey
    },
    batchDeleteConfirmed: function () {
      var deleteKey = this.getDeleteKey()
      if (Object.keys(deleteKey).length === 0) return
      var loading = this.showLoading()
      var _this = this
      $.ajax({
        url: '/subscribepay/afterPay/setUserInfo',
        type: 'POST',
        data: {
          pageType: 'keyWords',
          actionType: 'DK',
          delete_key: JSON.stringify(deleteKey)
        },
        success: function (res) {
          loading && loading.clear()
          if (res.flag) {
            _this.showToast('删除成功')
            _this.getKeywordsGroupList()
            _this.batchDeleteState = false
          } else {
            _this.showToast(res.msg ? res.msg : '删除失败' )
          }
        },
        error: function () {
          loading && loading.clear()
        }
      })
    },
    beforeKeySwipeCellClose: function (e) {
      // position 为关闭时点击的位置
      // instance 为对应的 SwipeCell 实例
      var position = e.position
      var instance = e.instance
      var index = e.name // item.groupIndex-item.keyIndex

      switch (position) {
        case 'left': {
          break
        }
        case 'cell': {
          instance.close()
          break
        }
        case 'outside': {
          instance.close()
          break
        }
        case 'right': {
          this.delThisKey(index, instance)
          break
        }
        default: {
          break
        }
      }
    },
    getGroupFromIndex: function (gIndex, kIndex) {
      var groupItem = {}
      this.filter.keywordsList.some(function (item) {
        if (item) {
          var gotThis = item.groupIndex == gIndex && item.keyIndex == kIndex
          if (gotThis) {
            groupItem = item
          }
          return gotThis
        }
      })
      return groupItem
    },
    /**
     * 删除单个关键词
     * @param {number} index 当前关键词在列表中的index
     * @param {Object} instance SwipeCell的实例
     */
    delThisKey: function (index, instance) {
      var _this = this
      // 需要找到当前关键词组的item
      var indexArr = index.split('-')
      var gIndex = indexArr[0]
      var kIndex = indexArr[1]
      var key = this.getGroupFromIndex(gIndex, kIndex)

      this.showDialog({
        title: '',
        message: '确定删除当前关键词？',
        confirmButtonText: '删除',
        className: 'j-confirm-dialog text-center'
      }).then(function () {
        // 点击确定，将当前关键词在批量选选择中，选中
        key.checked = true
        _this.batchDeleteConfirmed()
      }).catch(function () {
        console.log('取消删除关键词')
      })
    },
    // 根据分类名，得到分类索引
    getGroupIndexWithGroupName: function (gn) {
      var groupIndex = -1
      this.keywordsGroupList.forEach(function(item) {
        if (gn === item.s_item) {
          groupIndex = item.groupIndex
        }
      })
      return groupIndex
    },
    addKeyWord: function () {
      var query = {
        type: 'add'
      }
      // 新增，往哪个分组下新增（默认往未分组下新增）
      var groupIndex = this.getGroupIndexWithGroupName(this.filter.groupName)
      if (groupIndex != -1) {
        query.gIndex = groupIndex
      }

      this.savePageState()
      var queryString = this.qsStringify(query)
      location.href = '/front/vipsubscribe/toSetinfoPage' + '?' + queryString
    },
    toKeyManagePage: function () {
      this.filter.pickerShow = false
      this.savePageState()
      location.href = '/front/vipsubscribe/toSetmanagePage'
    },
    fastImportDialogShow: function () {
      this.dialog.fastImport = true
    },
    fastImport: function () {
      var _this = this
      var loading = this.showLoading()
      $.ajax({
        type: 'POST',
        url: '/subscribepay/afterPay/fastImport',
        data: {
          c_index: _this.keywordsGroupList.length,
          c_name: '未分类'
        },
        success: function (r) {
          loading && loading.clear()
          if (r.flagInt == 1) {
            _this.showToast('成功导入' + r.kwMap.length + '个关键词')
            _this.getKeywordsGroupList()
          } else {
            _this.showToast('导入失败')
          }
          try {
            JyObj.checkLab(); //刷新搜索首页和订阅首页
            sessionStorage.reloadHomePage = true;
            sessionStorage.reloadSubPage = true;
          } catch (e) {}
        },
        error: function () {
          loading && loading.clear()
        }
      })
    },
    upgradeDialogClose: function () {
      $.ajax({
        type: 'POST',
        url: '/subscribepay/afterPay/setUserInfo',
        data: {
          pageType: 'keytip'
        }
      })
    },
    // 恢复数据
    restoreState: function () {
      var $data = sessionStorage.getItem(this.conf.sessKey)
      if ($data) {
        $data = JSON.parse($data)
        Object.assign(this.filter, $data.filter || {})
        this.scrollTop = $data.scrollTop
        sessionStorage.removeItem(this.conf.sessKey)
      }
      return !!$data
    },
    // 保存数据
    savePageState: function () {
      this.scrollTop = $(this.$refs.jMain).scrollTop()
      var data = {
        filter: {
          groupName: this.filter.groupName
        },
        scrollTop: this.scrollTop
      }
      sessionStorage.setItem(this.conf.sessKey, JSON.stringify(data))
    }
  }
})