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

var AreaChoose = {
  selectObj: {},//已选择，未购买城市;
  selectedIndustryArr: ["一个行业"],//计算价格临时变量
  timeSelect: [1, 2],//计算价格临时变量 timeSelect[0]时长  timeSelect[1] 1:年 2:月
  vipSubisTrial: false,
  inintData: function () {
      //已选择
      try {
          let select = sessionStorage.getItem("vipSubSelectArea");
          if (select) {
              this.selectObj = JSON.parse(select);
          }
          if (sessionStorage.getItem("vipSubSelectIndustry")) {
              this.selectedIndustryArr = JSON.parse(sessionStorage.getItem("vipSubSelectIndustry"));
          }
          if (sessionStorage.getItem("vipSubSelectTime")) {
              this.timeSelect = JSON.parse(sessionStorage.getItem("vipSubSelectTime"));
          }
          //是否试用界面
          if (sessionStorage.getItem("vipSubisTrial")) this.vipSubisTrial = true;
      } catch (e) {
          console.log(e);
          this.selectObj = {};
      }
  },
  inintPage: function () {//初始化省份城市选项
      $(".select-area-box ul li:not('.index')").each(function () {
          var text = $(this).find(".province").text().trim()
          var data = null
          chinaMapJSON.some(function (v) {
              data = v
              return v.name.indexOf(text) !== -1
          })
          var box = $(this).find('div.tab_content')
          var html = AreaChoose.createMoreCity(data.city)
          box.html(html)
      })
  },
  createMoreCity: function (arr) {
      var tempHtml = arr.map(function (v) {
          return '<button class="city">' + v.name + '</button>'
      }).join('')
      return tempHtml
  },
  showSelected: function (canClick) { //回显已选择
      let ran = this.selectObj;
      for (var province in ran) {
          let citys = ran[province]
          if (citys.length > 0) {//地市
              this.selectCity(citys, canClick)
          } else {//省份
              this.selectProvince(province, canClick)
          }
      }
  },
  selectProvince: function (province, canClick) { //设置选中省份 province 省份
      $($('.tab .province')).each(function (index, dom) {
          if (province == $.trim($(dom).text())) {
              if (province != "全国") {
                  $(".checkbox.other").attr("checked", false).parents('.all-country').removeClass('active'); //取消全国选中
              } else {
                $(".checkbox.other").attr("checked", true).parents('.all-country').addClass('active');
              }
              $(dom).children('.checkbox').attr({"checked": true, "disabled": !canClick});//选中此省份
              $(dom).parents().siblings('.tab_content').find(".city").addClass("active").attr({"disabled": !canClick});
          }
      })
  },
  selectCity: function (citys, canClick) { //设置选中城市
      citys.forEach(v => {
          $($('.tab_content .city')).each(function (index, dom) {
              if (v == $(dom).text()) {
                  $(".checkbox.other").attr("checked", false).parents('.all-country').removeClass('active'); //取消全国选中
                  $(dom).addClass('active').attr('disabled', !canClick).parents().siblings('.tab')
                      .addClass('selected').children('.province').children('.checkbox').attr({
                      "checked": true
                  }).addClass('opt');
              }
          })
      })
  },
  getResult: function (changeCity, isFirst) {   /* 选中结果 */
      //如果选中所有，则转为全国
      if ($(".city").length == $(".city.active").length) {
          $(".checkbox.other").trigger("click");
          $(".checkbox").removeClass("opt");
          return
      }
      var tmpSelect = {};
      $('.result_name').empty()
      var data = []; //定义一个总数组
      var cityArr = []; //定义一个选中城市数组
      var val = $('.other').parents('.province').text().trim();
      if ($('.other').is(':checked')) {
          data = [{name: val, children: []}] //全国
          //$(".tips_d_text").slideUp();
      }
      $(".tab_content").find(".city.active:not('[disabled]')").each(function () {
          var length = $(this).parent('.tab_content').find('.city').length; //省份下城市的length
          var activeLeng = $(this).parent('.tab_content').find('.city.active').length; //省份下选中城市的length
          let arr = [];
          // 判断省份下的城市是否等于选中的城市长度,相等就是全部选中
          if (length == activeLeng) {
              // data.push($(this).parent('.tab_content').siblings('.tab:not(.whole)').children('.province').text().trim())
              let province = $(this).parent('.tab_content').siblings('.tab:not(.whole)').children('.province').text().trim();
              data.push({
                  name: province,
                  children: []
              })
          } else {
              let province = $(this).parent('.tab_content').siblings('.tab:not(.whole)').children('.province').text().trim();
              let city = $(this).html()
              arr.push({name: city, parent: province})
              for (let i = 0; i < arr.length; i++) {
                  let obj = {};
                  obj.name = arr[i].name;
                  obj.parent = arr[i].parent;
                  cityArr.push(obj)
              }
              data.push({
                  name: province,
                  children: cityArr
              })
          }
      })
      //数组对象去重
      let obj = {};
      data = data.reduce((cur, next) => {
          obj[next.name] ? "" : obj[next.name] = true && cur.push(next);
          return cur
      }, [])
      // 数组筛选
      let result = data.map(v => {
          let filterArr = v.children.filter(s => {
              return s.parent === v.name
          })
          return {
              name: v.name,
              children: filterArr
          }
      })
      var html = '';
      var selectProvince = 0;
      var selectCityMax = 0;

      for (var i = 0; i < result.length; i++) {
          let children = result[i].children;
          if (children.length > 0) {
              // 判断每个省份下选中的城市长度，当大于等于4的时候 弹出"选择全省更划算的弹窗"
              let childrenArr = [];
              //判断操作城市省份下城市的数量
              if (result[i].name === $.trim(changeCity)) {
                  selectCityMax = children.length;
              }
              html += `${result[i].name}(`
              for (var j = 0; j < children.length; j++) {
                  childrenArr.push(children[j].name)
                  if (j != children.length - 1) {
                      html += `${children[j].name}、`
                  } else {
                      html += `${children[j].name}`
                  }
              }
              if (i != result.length - 1) {
                  html += `)、`
              } else {
                  html += `)`
              }
              tmpSelect[result[i].name] = childrenArr;//
          } else {
              selectProvince++

              if (i != result.length - 1) {
                  html += `${result[i].name}、`
              } else {
                  html += `${result[i].name}`
              }
              tmpSelect[result[i].name] = [];//
          }
      }

      //提示
      /*if (!this.vipSubisTrial) {
          if (selectCityMax > 2) {
              $('.tips_btn .tips_d_text').text("已选择" + selectCityMax + "个市，建议购买“全省”").slideDown();
          } else {
              if (selectProvince > 9 && !isFirst) {
                  $('.tips_btn .tips_d_text').text("已选择" + selectProvince + "个省，建议购买“全国”").slideDown()
              } else {
                  $(".tips_d_text").slideUp();
              }
          }
      }*/
      this.selectObj = tmpSelect;
      // console.log("this.selectObj:", tmpSelect)
      // $('.result_name').append(html)
      AreaChoose.isOpen()
      // console.log(result)
      this.initAlreadyBuy(result)
      if (result.length > 0) { //已选择
          $('.reset-btn').removeAttr("disabled");
          $('.save-btn').removeAttr("disabled");
          AreaChoose.flushPrice(); //刷新价格
      } else {
          $('.save-btn').attr("disabled", "disabled");
          AreaChoose.flushPrice(-1); //刷新价格
      }
  },
  submitArea: function () {
      let addCity = $('.result_name').text(); //新增的城市
      sessionStorage.setItem("vipSubSelectArea", JSON.stringify(AreaChoose.selectObj));
      history.go(-1);
  },
  isAllSelected: function () {
      var _f = true
      $($('.tab_content .city')).each(function (index, dom) {
          if ($(dom).hasClass('active')) {
              _f = false
              $('.other').prop('checked', false);
          }
      })
      // 如果循环结束仍为true说明 没有全部都被选中
      if (_f) {
          $('.other').prop('checked', true);
      }
  },
  isOpen: function () {
      let pHeight = $('.result_text').height()
      let minHeight = $('.result_text').css('min-height')
      let rows = Math.round(Math.round(pHeight) / parseFloat(minHeight));
      // console.log("高度：" + pHeight, "最小高度" + minHeight, "行数：" + rows)
      if (rows == 1) {
          $('.packup').hide()
          $('.detail').hide()
      } else if (rows == 2) {
          console.log($('.result_name').html().trim().length)
          let length = $('.result_name').html().trim().length;
          if (length >= 50) {
              $('.detail').show()
              $('.packup').hide()
          } else {
              $('.detail').hide()
              $('.packup').hide()
          }

      } else {
          $('.packup').show()
          $('.detail').hide()
      }
  },
  inintClick: function () {
      $('.detail').click(function () {
          $('.result_text').removeClass('line_two')
          $(".result").css("padding-bottom", "0.3rem")
          $(this).hide();
          $('.packup').show()
      })
      $('.packup').click(function () {
          $(".result").css("padding-bottom", "0.2rem")
          $('.result_text').addClass('line_two')
          $(this).hide();
          $('.detail').show()
      })
      $("body").on('click', '.slide a', function () {
          var s = $(this).html()
          if (s == '#') {
              return;
          }
          document.querySelector('#' + s).scrollIntoView({block: 'center'});
      })
      $(".select-area-box .tab:not(.municipality)").on('click', function (event) {
          if (AreaChoose.checkAnimatedRuning()) {
              return
          }
          if ($(this).next('.tab_content:not(:animated)').css("display") == "block") {
              $(this).children().children('i').css({
                  "display": "inline-block",
                  "transform": "rotate(0)"
              })
          } else {
              $(this).children().children('i').css({
                  "display": "inline-block",
                  "transform": "rotate(-180deg)"
              })
          }
          $(this).toggleClass('selected').next('.tab_content:not(:animated)').stop(true, true).slideToggle()
          $(this).parent().siblings().children('.tab').removeClass('selected');

      })
      $('.checkbox').click(function (e) {
          e.stopPropagation();
      })
      $('.tab .checkbox').on('click', function () {
          if ($(this).hasClass("other")) {//点击全国
              $(".province input").prop('checked', false);
              $(".city").removeClass('active');
              $(this).prop('checked', true).parents('.all-country').addClass('active');
              $(".checkbox").removeClass("opt");
          } else {
              $(".checkbox.other").prop('checked', false).parents('.all-country').removeClass('active');
              if (!$(this).is(':checked')) {
                  if ($(this).hasClass("opt")) {//判断当前是否是半选
                      $(this).prop("checked", true).removeClass("opt");
                      $(this).parent().parent().siblings('.tab_content').children('.city').addClass('active');
                  } else {
                      $(this).parent().parent().siblings('.tab_content').children('.city').removeClass('active');
                      if ($(".province .checkbox:checked").length == 0) {//若没有省份被选中 则选中全国
                          //$(".checkbox.other").prop('checked', true);
                          $(".checkbox").removeClass("opt");
                      }
                  }
              } else {
                  $(this).parent().parent().siblings('.tab_content').children('.city').addClass('active');
              }
          }
          AreaChoose.getResult()
      })

      //执行已购买城市函操作dom函数
      $('.tab_content').on('click', '.city', function () {
          $(".checkbox.other").prop('checked', false).parents('.all-country').removeClass('active');;
          //AreaChoose.showSelected(false)
          $(this).toggleClass('active')
          var isActive = $(this).parent().find('.city.active').length
          if (isActive) {
              var input = $(this).parents('li').find('input.checkbox')
              window.input = input
              input.prop('checked', true)
              if (isActive != $(this).parent().find('.city').length) {//是否全选
                  $(this).parent('div').siblings('.tab').find('.province .checkbox').addClass('opt');
              } else {
                  $(this).parent('div').siblings('.tab').find('.province .checkbox').removeClass('opt');
              }
          } else {
              $(this).parent('div').siblings('.tab').children().children('.checkbox').prop(
                  'checked', false).removeClass('opt');
          }
          //AreaChoose.isAllSelected()
          AreaChoose.getResult($(this).parent('div').siblings('.tab').find('.province').text()) //出入选择的省份
      })

      /*$('.other').on('change', function () { //选择全国
          AreaChoose.reset();
      })*/

      $('.save-btn').click(function () {  // 提交
          AreaChoose.submitArea();
      })
      $('.reset-btn').click(function () {  //重置
          AreaChoose.reset();
      })
  },
  reset: function () {
      $('.tab_content').slideUp(500)
      $('.tab span i').css({
          "display": "inline-block",
          "transform": "rotate(0)"
      })
      $('.tab').removeClass('selected').children('.province').find(
          'input').prop({
          'checked': false,
          "disabled": false
      });
      $('.tab_content').find('.city').removeClass('active').attr({
          "disabled": false,
          "checked": false
      })
      $('.all-country').removeClass('active')
      $('input').removeClass('opt')
      AreaChoose.getResult()
  },
  flushPrice: function (flag) {
      if (!this.vipSubisTrial) {
          $('.tips_d_money').css("display", "block");
          var price = getsubVipOrderPrice(this.selectObj, this.selectedIndustryArr, this.timeSelect);
          $('.tips_d_money').text('￥' + price);
      }
      if (flag === -1 || getParam('header') == 'upgrade') {
          $('.tips_d_money').css("display", "none");
      }
  },
  animatedRuning: false,
  checkAnimatedRuning: function () {
      if (AreaChoose.animatedRuning) {
          return true
      }
      AreaChoose.animatedRuning = true;
      setTimeout(function () {
          AreaChoose.animatedRuning = false;
      }, 500);
      return false
  },
  // 根据数据进行求总数 
  initAlreadyBuy: function(arr) {
    var pArr = [];
    var hpArr = [];
    var cArr = [];
    var dunhao = '';
    var html= '';
    arr.forEach(function(item){
      if(item.name == '全国'){
        $('.result_name').text('全国')
        // html = '全国'
        // console.log(html)
      } else {
        if (item.children.length == 0 || item.children.length > 2){
          pArr.push(item.name)
        } else {
          hpArr.push(item.name);
          item.children.forEach(function(s,j){
            cArr.push(s)
          })
        }
      }
      // console.log(pArr,cArr,hpArr)
      if (pArr.length > 0 && cArr.length > 0){
        dunhao = '、'
      }
      var text = {
        p: pArr.length > 0 ? pArr.length + '个省' : '',
        c: cArr.length > 0 ? dunhao + cArr.length + '个市' : '',
        hp: hpArr.length >= 2  ? '(分布在' + hpArr.length+ '个省内)' : ''
      };
      html = text.p + text.c + text.hp
    })
    $('.result_name').append(html)
  }
};

$(function () {
  AreaChoose.isOpen();
  AreaChoose.inintData(); //初始化 已选择和已购买数据
  AreaChoose.inintPage(); //初始化城市数据

  //AreaChoose.getNationwide();//默认选中全国
  AreaChoose.showSelected(true);//回显已选择
  /* 判断已购买的城市 在不在 全部城市里面，在，将按钮置灰，不可点击 */

  AreaChoose.getResult("", true);
  AreaChoose.inintClick();
  // 升级  解绑下拉选择城市事件
  $(".select-area-box .tab:not(.municipality)").unbind('click')
  $('.tab_content').unbind('click')
})