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

// 模拟数据
var data = {
    "data": {
        "area": {
            "安徽": [],
            "福建": ['福州市', '莆田市'],
            "广东": [],
        },
        "buyset": {
            "areacount": 1,
            "buyerclasscount": 3,
            "citys": {
                "贵州": 2,
                "广东": 2,
                "广西": 2,
                "福建": 1,
            }
        },
        "industry": [
            "安监",
            // "保监"
        ],
        "isTrial": false
    },
    "errMsg": "",
    "success": true
}


var buyCount = data.data.buyset.buyerclasscount;//已购买的行业数量  -1是全部行业，正数为购买的行业数量
var array = data.data.industry;//已选择的行业（数组）
var result = [];//声明一个空数组为选择结果
// 初始化行业数据，渲染到页面
function initData() {
    if (data.data.isTrial) {
        $('.update_tips').text("已超出现订单购买范围，需购买")
    }
    buyCount = data.data.buyset.buyerclasscount;//已购买的行业数量  -1是全部行业，正数为购买的行业数量
    array = data.data.industry;//已选择的行业（数组）
    /* 已购买过的行业 */
    if (buyCount == -1) {
        $('.result_name').html('全部行业')
        $('.alr_purchase').hide()
    } else {
        $('.result_name').html(buyCount + '个行业')
    }
    /* 已选择的行业 数组为空时即选择的全部行业 不为空时对应选择的结果 */
    if (array.length == 0) {
        $('.result_count').html('全部行业');
        $('.industry_item.whole').addClass('active')
    } else {
        $('.result_count').html(array.length + '个行业');
        $('.industry_item:not(.whole)').each(function () {
            var text = $(this).text().trim()
            for (var i = 0; i < array.length; i++) {
                var element = array[i];
                if (element == text) {
                    $(this).addClass('active')
                }
            }
        })
    }
    resultCount();
}

// 实时改变选择结果
function resultCount() {
    $('.result_count').empty();
    var count = $('.list').find('.industry_item.active:not(.whole)').length;
    if ($('.industry_item.whole').hasClass('active')) {
        $('.result_count').html('全部行业');
        result = [];
        if (buyCount != -1) {
            $('.update_tips').show();
        } else {
            $('.update_tips').hide();
        }
    } else {
        var buttons = $('.select-area-box .list button:not(.whole)');
        var canChangeArr = [];
        buttons.each(function () {
            if ($(this).hasClass('active')) {
                canChangeArr.push($(this).text())
            }
        })
        if (count > buyCount && buyCount != -1) {
            $('.update_tips').show();
        } else {
            $('.update_tips').hide();
        }
        if(count>0){
            $('.result_count').html(count + '个行业');
        }else {
            $('.result_count').html("");
        }

        if ($('.list').find('.industry_item.active:not(.whole)').length === 0) {
            $('.save-btn').prop('disabled', true)
        } else {
            $('.save-btn').prop('disabled', false)
        }
        result = canChangeArr;
    }
}

$(function () {

    // 公共资源交易介绍提示框
    $('#showTips').click(function (e) {
      e.stopPropagation();
      $('#js_dialog').show()
    });
    // 匹配未分类行业提示框
    $('#matchTips').click(function (e) {
        e.stopPropagation();
        $('#match_dialog').show()
    });
    $('.know').click(function () {
      $('#js_dialog').hide()
      $('#match_dialog').hide()
    })
    // 点击导航跳转
    $("body").on('click', '.slide a', function () {
        var s = $(this).html()
        if (s == '#') {
            return;
        }
        document.querySelector('#' + s).scrollIntoView({
            block: 'center'
        });
    })
    // 选择全部行业
    $('.industry_item.whole').on('click', function () {
        $(this).addClass('active').parents('.list').find('.industry_item:not(.whole)').removeClass('active');
        resultCount();
        showNeedPopver(false)
    })
    // 选择非全部行业
    $('.industry_item:not(.whole)').on('click', function (e) {
        $('.industry_item.whole').removeClass('active');
        $(this).toggleClass('active');
        showNeedPopver(false)
        if ($(this).hasClass('active')) {
          showNeedPopver(true, e)
        }
        resultCount();
    })

  /* ---S 行业推荐弹窗 @date 2021/4/1 ---*/
  // 监听页面滚动事件
  $('.form').scroll(function() {
    showNeedPopver(false)
  });
  // 原始数据集合
  var needPopverTipMap = [
    ['教育', '学校'],
    ['卫健委', '医疗'],
    ['交通', '运输物流'],
    ['工信', '信息技术', '电信行业'],
    ['农业', '农林牧渔'],
    ['住建', '建筑业'],
    ['城管', '市政'],
    ['人行', '金融业']
  ]
  // 常量化索引
  var nowSelectIndex = -1
  var allNeedTipIndexMap = {}
  needPopverTipMap.map(function (v, index) {
    v.map(function (s) {
      allNeedTipIndexMap[s] = index
    })
  })
  // 获取提示文字
  function getNeedPopverTip (str) {
    str = str.trim()
    var findIndex = allNeedTipIndexMap[str]
    if (typeof findIndex === 'number') {
      nowSelectIndex = findIndex
      var outTip = needPopverTipMap[findIndex].filter(function (v) {
        return v !== str
      })
      return '根据您的选择，推荐添加【'+ outTip.join(',') +'】'
    } else {
      nowSelectIndex = -1
      return ''
    }
                }

  // 控制提示框
  function showNeedPopver (show, e) {
    if (show) {
      var nowStr = getNeedPopverTip($(e.target).text())
      if (nowStr !== '') {
        var tipDom = $('.add_alert')
        tipDom.show().attr('data-index', allNeedTipIndexMap[$(e.target).text()])
        tipDom.find('.add_option').text(nowStr)
        // 计算及调整显示位置
        var computeCoordinateForPop = {
          w: tipDom[0].offsetWidth,
          h: tipDom[0].offsetHeight
        }
        var nowSelectDom = $(e.target)
        var computeCoordinateForNow = {
          w: nowSelectDom[0].offsetWidth,
          h: nowSelectDom[0].offsetHeight,
          t: nowSelectDom.offset().top,
          l: nowSelectDom.offset().left
        }

        var isTop = e.clientY <= (document.documentElement.clientHeight / 2)
        var isLeft = e.clientX <= (document.documentElement.clientWidth / 2)
        var cententValue = (document.body.offsetWidth - computeCoordinateForPop.w) / 2

        tipDom.css({
          top: isTop ? (computeCoordinateForNow.t + computeCoordinateForNow.h + 8) : (computeCoordinateForNow.t - computeCoordinateForPop.h - 8),
          left: isLeft ? computeCoordinateForNow.l : cententValue
        })

        var arrowDom = tipDom.find('.triangle')
        arrowDom.css({
          top: isTop ? '-14px' : 'initial',
          bottom: !isTop ? '-14px' : 'initial',
          transform: isTop ? 'rotate(180deg)' : 'rotate(0)',
          left: isLeft ? (computeCoordinateForNow.l + 'px') : (computeCoordinateForNow.l - computeCoordinateForNow.w / 2) + 'px'
        })

      } else {
        return showNeedPopver(false)
      }
    } else {
      $('.add_alert').hide()
                }
            }

    // 弹窗取消按钮
  $('.btn_cancel').on('click', showNeedPopver.bind(this, false))
    // 弹窗确定按钮
    $('.btn_confirm').on('click',function(){
    showNeedPopver(false)
        var buttons = $('.select-area-box .list button')
        buttons.each(function () {
      var btnStr = $(this).text()
      var tempD = $(this)
      if (nowSelectIndex !== -1) {
        needPopverTipMap[nowSelectIndex].map(function (v) {
          if (btnStr === v) {
            tempD.addClass('active')
                }
            })
      }
        })
    resultCount();
    $('.add_toast').fadeIn()
    setTimeout(function() {
      $('.add_toast').fadeOut()
        }, 1500)
    })

  /* ---E 行业推荐弹窗 @date 2021/4/1 ---*/


    // 重置按钮事件
    $('.reset-btn').on('click', function () {
        $('.list').find('.industry_item').removeClass('active');
        $('.update_tips').hide();
        initData();
        showNeedPopver(false)
    })
    // 确认按钮事件
    $('.save-btn').on('click', function () {
        data.data.industry = result

        var params = {
          area: JSON.stringify(data.data.area),
          industry: data.data.industry.join(',')
        }
        // 超级订阅新套餐 修改订阅条件需要提交后台保存， 因是共用页面,为不影响其他页面逻辑，url加上参数进行判断
        if (getParam('header') === 'save') {
          let url = ''
          if(getParam('subvip') === 'free') {
            url = '/subscribepay/vipsubscribe/freeSaveChange'
          } else {
            url = '/subscribepay/vipsubscribe/saveChange'
          }
          $DoPost(url, params, function (res) {
            if (res.data && res.data.doSuccess) {
              weui.toast('修改成功', {
                duration: 2000,
                className: 'custom-toast',
                callback: function() {
                  history.back()
                }
              });
            } else {
              weui.toast(res.errMsg, {
                duration: 2000,
                className: 'custom-toast'
              });
            }
          })
        } else {
          sessionStorage.setItem('sub_vip_state', JSON.stringify(data.data))
          history.back()
        }
    })


    function getDataWitXHR() {
        $DoPost('/subscribepay/vipsubscribe/getSubBuyMsg', {}, function (res) {
            if (!res.success) return;
            data.data = res.data;
            res.data.oldArea = res.data.area;
            res.data.oldIndustry = res.data.industry;
            sessionStorage.setItem('sub_vip_state', JSON.stringify(res.data));
            initData();
        })
    }

    var subVipState = sessionStorage.getItem('sub_vip_state')
    if (subVipState && !getParam('header')) {
        data.data = JSON.parse(subVipState)
        initData();
    } else {
        getDataWitXHR()
    }
})