examwin_web/js/colleges_list.js

$(function () {
  var currentPage = 1, totalPage = 1, _data = { currentPage }, lock = true;
  const globalData = {
    types: [
      {
        name: '院校所在地', key: "location", value: [{ "key": 1, "name": "全部" }, { "key": 2, "name": "北京" }, { "key": 22, "name": "天津" }, { "key": 43, "name": "上海" }, { "key": 64, "name": "重庆" }, { "key": 106, "name": "河北" }, { "key": 291, "name": "山西" }, { "key": 425, "name": "台湾" }, { "key": 433, "name": "辽宁" }, { "key": 550, "name": "吉林" }, { "key": 620, "name": "黑龙江" }, { "key": 766, "name": "江苏" }, { "key": 886, "name": "浙江" }, { "key": 989, "name": "安徽" }, { "key": 1111, "name": "福建" }, { "key": 1206, "name": "江西" }, { "key": 1318, "name": "山东" }, { "key": 1476, "name": "河南" }, { "key": 1655, "name": "湖北" }, { "key": 1776, "name": "湖南" }, { "key": 1914, "name": "广东" }, { "key": 2064, "name": "甘肃" }, { "key": 2167, "name": "四川" }, { "key": 2371, "name": "贵州" }, { "key": 2470, "name": "海南" }, { "key": 2509, "name": "云南" }, { "key": 2657, "name": "青海" }, { "key": 2709, "name": "陕西" }, { "key": 2828, "name": "广西" }, { "key": 2954, "name": "西藏" }, { "key": 3035, "name": "宁夏" }, { "key": 3062, "name": "新疆" }, { "key": 3182, "name": "内蒙古" }, { "key": 3297, "name": "澳门" }, { "key": 3299, "name": "香港" }
        ]
      },
      {
        name: "院校类型",
        key: "category",
        value: [
          { name: "全部", key: 1 },
          { name: "综合", key: 2 },
          { name: "工科", key: 3 },
          { name: "农业", key: 4 },
          { name: "林业", key: 5 },
          { name: "医药", key: 6 },
          { name: "师范", key: 7 },
          { name: "语言", key: 8 },
          { name: "财经", key: 9 },
          { name: "政法", key: 10 },
          { name: "体育", key: 11 },
          { name: "艺术", key: 12 },
          { name: "民族", key: 13 },
        ]
      },
      {
        name: "学历层次", key: "level", value: [
          { name: "全部", key: 1 },
          { name: "本科", key: 2 },
          { name: "高职(专科)", key: 3 }
        ]
      }
    ],
    typeChoose: {
      location: 1,
      category: 1,
      level: 1
    },
    _typeChoose: {}
  }
  var typesDom = globalData.types.map(item => `
  <div class="types-row">
  <div class="types-cell">${item.name}</div>
  <div  data-key=${item.key} class="types-cell">
  ${item.value.map(it => `<a data-key=${it.key}  data-name=${it.name} class="types-item ${globalData["typeChoose"][item.key] == it.key ? "checked" : ''}">${it.name}</a>`).join("")
    }
  </div>
</div>
  `)
  // 请求 
  function init (data) {
    currentPage = 1, totalPage = 1;
    _data = { ...data, currentPage };
    $(".my-loading").html("加载中......");
    requestFunc(_data).then(res => {
      lock = true; $("#loading").hide(); totalPage = res; currentPage++; $(".my-loading").hide();
    });
  }
  // 查询 
  $(".search>.button").click(function () {
    var value = $(this).prev().children("input").val().trim();
    init({ name: value })
  })
  // types 选中
  function checkedFunc (fatherElem, childElem) {
    fatherElem.children().removeClass("checked");
    childElem.addClass('checked');
    init(globalData["_typeChoose"])
  }
  // types 选择
  function typesFunc () {
    var clickDoms = $(".types>.types-row>.types-cell:last-child");
    clickDoms.click(function (e) {
      let that = this, child = e.target;
      function init () {
        let key = $(that).data('key');
        let childKey = $(child).data('key');
        globalData['typeChoose'][key] = childKey;
        globalData['_typeChoose'][key] = $(child).data('name') == "全部" ? '' : $(child).data('name');
        checkedFunc($(that), $(child));
      }
      if (child.className.trim() == "types-item") init();
    })
  }
  // types 下拉
  function slFunc () {
    var clickDoms = $(".types>.types-row>.types-cell:first-child");
    clickDoms.click(function () {
      if ($(window).width() >= 768) return false;
      if ($(this).next()[0].className == "types-cell active") {
        $(this).next().removeClass("active");
        return false;
      }
      $(this).parent().siblings().children(".types-cell:last-child").removeClass("active")
      $(this).next().addClass("active");
      let that = this;
      $(this).parent().mouseleave(function () {
        $(that).next().removeClass("active");
      })
    })
  }
  // 最后执行
  $(document).ready(function () {
    $(".types").append(typesDom.join(""));
    typesFunc();
    slFunc();
  })
  // 上拉加载 
  // 可见区域高度
  var ch = document.documentElement.clientHeight || document.body.clientHeight;
  init();
  $(window).scroll(function () {
    // 滑动区高度
    let sh = document.documentElement.scrollHeight || document.body.scrollHeight;
    // 滑动位置
    let st = document.documentElement.scrollTop || document.body.scrollTop;
    let c = sh * 1 - ch * 1 - st * 1
    if (c == 0 && currentPage <= totalPage && lock) {
      $(".my-loading").html("加载中......").show();
      _data.currentPage = currentPage;
      requestFunc(_data).then(res => { lock = true; $("#loading").hide(); totalPage = res; currentPage++; _data.currentPage = currentPage; $(".my-loading").hide(); })
    }
    if (c == 0 && currentPage > totalPage) {
      $(".my-loading").html("已经没有可以加载的数据了").show();
    }
  })


  // 请求高校列表
  function requestFunc (data) {
    lock = false;
    $("#loading").show()
    return new Promise((resolve, reject) => {
      $.ajax({
        url: "http://192.168.2.45:8033/colleges/list/",
        data: {
          ...data,
          pageSize: 10
        },
        type: "get",
        error: function (error) {
          lock = true;
          $("#loading").hide();
          $(".my-loading").html("加载失败").show();
        },
        success: function (res) {
          let { totalPage, dataList } = res.data;
          let father = document.createDocumentFragment();
          Array.from(dataList).forEach(item => {
            let str = `<a targert="_blank"
            href="http://www.gaokaoapp.net/colleges/${item.id}.html"
            class="item">
            <div class="item-img">
              <img data-original="${item.logo}" src="../imgs/app.png" alt="${item.name}">
            </div>
            <div class="item-desc">
              <p class="item-desc-name">${item.name}</p>
              <p class="item-desc-z">
              <span>院校类型：${item.category}</span>
              <span>学历层次：${item.level}</span>
              <span>院校所在地：${item.location}</span>
              </p>
              <p class="item-desc-desc">学校特色： ${item.characteristics}</p>
            </div>
          </a>
            `;
            $(father).append(str)
          })
          if (data.currentPage == 1) $(".school_list").find(".item").remove();
          $(".school_list>.my-loading").before(father)
          if (data.currentPage == 1 && dataList.length == 0) {
            $(".my-loading").html("暂无数据").show();
            lock = true;
            $("#loading").hide();
            return false;
          }
          $("img").lazyload();
          resolve(totalPage)
        }
      })
    })
  }
})