examwin_web/js/components.js

// 通用数据
let globaldata = {
  // 滚动高度
  scrollheight: 50,
  // body 
  body: document.documentElement || document.body,
  // 省份
  province: [{ "code": "", "codeName": "全国" }, { "code": 1, "codeName": "北京" }, { "code": 21, "codeName": "天津" }, { "code": 42, "codeName": "上海" }, { "code": 63, "codeName": "重庆" }, { "code": 105, "codeName": "河北" }, { "code": 290, "codeName": "山西" }, { "code": 424, "codeName": "台湾" }, { "code": 432, "codeName": "辽宁" }, { "code": 549, "codeName": "吉林" }, { "code": 619, "codeName": "黑龙江" }, { "code": 765, "codeName": "江苏" }, { "code": 885, "codeName": "浙江" }, { "code": 988, "codeName": "安徽" }, { "code": 1110, "codeName": "福建" }, { "code": 1205, "codeName": "江西" }, { "code": 1317, "codeName": "山东" }, { "code": 1475, "codeName": "河南" }, { "code": 1654, "codeName": "湖北" }, { "code": 1775, "codeName": "湖南" }, { "code": 1913, "codeName": "广东" }, { "code": 2063, "codeName": "甘肃" }, { "code": 2166, "codeName": "四川" }, { "code": 2370, "codeName": "贵州" }, { "code": 2469, "codeName": "海南" }, { "code": 2508, "codeName": "云南" }, { "code": 2656, "codeName": "青海" }, { "code": 2708, "codeName": "陕西" }, { "code": 2827, "codeName": "广西" }, { "code": 2953, "codeName": "西藏" }, { "code": 3034, "codeName": "宁夏" }, { "code": 3061, "codeName": "新疆" }, { "code": 3181, "codeName": "内蒙古" }, { "code": 3296, "codeName": "澳门" }, { "code": 3298, "codeName": "香港" }, { "code": '', "codeName": "默认" }],
}
// 全局添加路径解析
$(function () {
  var r = {
    protocol: /([^\/]+:)\/\/(.*)/i,
    host: /(^[^\:\/]+)((?:\/|:|$)?.*)/,
    port: /\:?([^\/]*)(\/?.*)/,
    pathname: /([^\?#]+)(\??[^#]*)(#?.*)/
  };

  function parseUrl (url) {
    var tmp, res = {};
    res["href"] = url;
    for (p in r) {
      tmp = r[p].exec(url);
      res[p] = tmp[1];
      url = tmp[2];
      if (url === "") {
        url = "/";
      }
      if (p === "pathname") {
        res["pathname"] = tmp[1];
        res["search"] = tmp[2];
        res["hash"] = tmp[3];
      }
    }
    let param = res.search.replace('?', '').split("&");
    let params = {};
    param.forEach(item => {
      let arr = item.split("=");
      params[arr[0]] = arr[1]
    })
    res["query"] = params;
    return res;
  };
  window["lxd"] = {
    parseUrl
  }
})
// app 悬浮放大
$(function () {
  $("[data-app='download']").mouseenter(function () {
    $(this).find("div").addClass("show")
  }).mouseleave(function () {
    $(this).find("div").removeClass("show")
  })
})
// 大屏 下拉菜单
$(function () {
  let navitems = $("#nav>.nav-item");
  const move = (that, show) => {
    let lis = $(that).find("li"),
      i = $(that).find("i");
    ul = $(that).find("ul");
    if (lis.length != 0 && show) {
      ul.addClass("show");
      i.removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
      return false;
    }
    if (lis.length != 0 && !show) {
      ul.removeClass("show")
      i.removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
      return false;
    }
    return false;
  }
  for (let i = 0; i < navitems.length; i++) {
    $(navitems[i]).mouseenter(function () {
      let that = this;
      move(that, true)
    }).mouseleave(function () {
      let that = this;
      move(that, false)
    })

  }
}
)
// 监听滚动轴 
$(function () {
  // face显示锁
  let lock = true;
  // top显示锁
  let locktop = false;
  // 滚动高度
  let height = globaldata.scrollheight;
  $("body")[0].onscroll = function () {
    let stop = globaldata.body.scrollTop;
    // console.log(stop)
    // 可是区域宽度；
    if (stop > height && !locktop) {
      $("#top").removeClass("noshow");
      locktop = true;
    }
    if (stop < height && locktop) {
      $("#top").addClass("noshow");
      locktop = false;
    }
    if ($("body")[0].clientWidth < 768) {
      return false;
    }
    if (stop > height && lock) {
      $("#face").addClass("noshow");
      lock = false
      return false;
    }
    if (stop <= height && !lock) {
      $("#face").removeClass("noshow");
      lock = true;
      return false;
    }
  }
})
// 小屏幕 下拉菜单
$(function () {
  // 按钮开关
  let lock = false;
  const open = () => {
    if (!lock) {
      $("#nav-sm").addClass("nav-sm-show").removeClass("nav-sm-noshow");
      globaldata.body.addEventListener('touchmove', e =>
        e.preventDefault()
        , { passive: false })
      lock = true
      return false;
    }
    if (lock) {
      $("#nav-sm").addClass("nav-sm-noshow").removeClass("nav-sm-show");
      globaldata.body.removeEventListener('touchmove', e => e.preventDefault() = true, { passive: false })
      lock = false;
      return false;
    }
  }
  $('#listbutton').click(function () {
    open()
  })
  // 可视区域变化
  window.onresize = () => {
    let appwidth = $("body")[0].clientWidth;
    if (appwidth > 768) {
      $("#nav-sm").removeClass("nav-sm-show");
      lock = false;
      return false;
    } else {
      // face 移动端显示
      try {
        $("#face").removeClass("noshow");
      } catch (err) { }
    }
    // if (lock) {
    //   $("#nav-sm").addClass("nav-sm-show");
    //   return false;
    // }
  }
})
// 分享设置
var shareModel = {
  // /**
  //  * 分享QQ好友
  //  * @param  {[type]} title [分享标题]
  //  * @param  {[type]} url   [分享url链接，默认当前页面链接]
  //  * @param  {[type]} pic   [分享图片]
  //  * @return {[type]}       [description]
  //  */
  shareQQ: function (url, title, pic) {
    var param = {
      url: url || window.location.href,
      desc: '', /*分享理由*/
      title: title || '', /*分享标题(可选)*/
      summary: '',/*分享描述(可选)*/
      pics: pic || '',/*分享图片(可选)*/
      flash: '', /*视频地址(可选)*/
      site: '' /*分享来源 (可选) */
    };
    var s = [];
    for (var i in param) {
      s.push(i + '=' + encodeURIComponent(param[i] || ''));
    }
    var targetUrl = "https://connect.qq.com/widget/shareqq/iframe_index.html?" + s.join('&');
    window.open(targetUrl, 'qq');
  },
  //  /**
  //    * 分享新浪微博
  //    * @param  {[type]} title [分享标题]
  //    * @param  {[type]} url   [分享url链接，默认当前页面]
  //    * @param  {[type]} pic   [分享图片]
  //    * @return {[type]}       [description]
  //    */
  sinaWeiBo: function (title, url, pic) {
    var param = {
      url: url || window.location.href,
      type: '3',
      count: '1', /** 是否显示分享数，1显示(可选)*/
      appkey: '', /** 您申请的应用appkey,显示分享来源(可选)*/
      title: '', /** 分享的文字内容(可选，默认为所在页面的title)*/
      pic: pic || '', /**分享图片的路径(可选)*/
      ralateUid: '', /**关联用户的UID，分享微博会@该用户(可选)*/
      rnd: new Date().valueOf()
    }
    var temp = [];
    for (var p in param) {
      temp.push(p + '=' + encodeURIComponent(param[p] || ''))
    }
    var targetUrl = 'https://service.weibo.com/share/share.php?' + temp.join('&');
    window.open(targetUrl, 'sinaweibo');
  }
};
$(function () {
  $("#share").mouseenter(function () {
    $(this).children("ul").css("width", 'auto')
  }).mouseleave(function () {
    $(this).children("ul").css("width", '0px');
  })
  let lis = $("#share>ul>li");
  for (let i = 0; i < lis.length; i++) {
    if (i == 1) {
      $(lis[i]).click(function () {
        shareModel.shareQQ();
      })
    }
    if (i == 2) {
      var dom = $("<div>");
      dom.attr("id", "qrcode");
      $(dom).appendTo($("#share"));
      var qrcode = new QRCode("qrcode", {
        text: window.location.href,
        width: 100,
        height: 100,
        colorDark: "#03C762",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
      });
      qrcode.clear();
      qrcode.makeCode(window.location.href)
      $("#qrcode").append(
        `<div class="wei"><div>微信扫一扫</div><div>便可将本文分享至朋友圈</div><div>`
      )
      $(lis[i]).mouseenter(function () {
        $("#qrcode").show();
      }).mouseleave(function () {
        $("#qrcode").hide();
      })
    }
    if (i == 3) {
      $(lis[i]).click(function () {
        shareModel.sinaWeiBo();
      })
    }
  }
})
// 按钮锁
$(function () {
  $("#top").click(function () {
    let dom = globaldata.body;
    // let top = document.documentElement.scrollTop || document.body.scrollTop;
    $(dom).animate({ scrollTop: 0 }, 500);
  })
})
// toast 背景事件
$(function () {
  let dom = $("#toast>.toast-content");
  let style = dom.data();
  try {
    let h = style["height"] * 1 / 2;
    let w = style["width"] * 1 / 2;
    style["width"] += "px";
    style["height"] += "px";
    style["top"] = `calc(50vh - ${h}px )`;
    style["left"] = `calc(50vw - ${w}px )`;
    dom.css(style);
  } catch (err) { }
  dom.find("a").click(function () {
    window.location.href = $(this).attr("href")
  })
  $("#toast").click(function (e) {
    if (e.target.id != 'toast') return false
    $(this).removeClass("show");
    Array.prototype.slice.call($(this).find(".show")).forEach(e => {
      $(e).removeClass("show")
    })
  })
})
// 下载app 
$(function () {
  $("#download button").click(
    function () {
      window.location.href = "http://down.gaokaoapp.net";
    }
  )
})
// 评论区 点赞
$(function () {
  // const globaldata = {
  //   // 用户是否登录
  //   user: false,
  //   // 登录弹框
  //   sgin () {
  //     $("#toast").addClass("show").find(".msg").addClass("show").unbind("click").click(function () {
  //       window.location.href = "http://down.gaokaoapp.net"
  //     });
  //   }
  // }
  // 显示区高度
  // let ch = document.documentElement.clientHeight || document.body.clientHeight;
  // 实现评论区加载
  // let lock = false, dom = $("#detail") || false;

  // $(window).scroll(function () {
  //   if (lock && !!dom) return false;
  //   // 滑动区高度
  //   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) {
  //     lock = true;
  //     data();
  //   }
  // })
  // 阅读量问题

  // 评论区
  // function data () {
  //   // 请求 根据请求改变内容 唯一标识 data-userid="1" data-good="false"
  //   let com = `<div class="user" data-good="false" data-userid="1" >
  //   <div class="u-img"><img src="../imgs/qq.png" alt="" class="img"></div>
  //   <div class="u-content">
  //     <div class="u-flex">
  //       <div class="u-name">QQ官方</div>
  //       <div class="u-fabulous" data-gods="1"><span>0</span><i data-gods="1" style="margin-left:5px" class="glyphicon glyphicon-thumbs-up"></i></div>
  //     </div>
  //     <div class="u-detail">
  //       对此，广东警官学院表示，其普通高等教育(全日制)招生工作严格执行教育部的“阳光高考”规定和工作程序，不以任何形式承诺录取，不因任何理由降低标准录取。学校从未委托任何个人、中介组织或招生机构开展提前招生、高职扩招等宣
  //     </div>
  //     <div class="u-flex">
  //       <div class="u-date">2020-12-15</div>
  //       <div data-gods="2"  class="u-report">举报</div>
  //     </div>
  //   </div>
  // </div>`;
  //   return new Promise(resolve => {
  //     $("#detail").append(com);
  //     //评论点赞 登录状态 请求
  //     let lists = $("#detail>.user");
  //     // 模拟无信息加载情况
  //     if (lists.length == 10) {
  //       resolve(true)
  //     }
  //     for (let i = 0; i < lists.length; i++) {
  //       $(lists[i]).unbind("click");
  //       $(lists[i]).click(function (e) {
  //         if (!globaldata.user) {
  //           globaldata.sgin();
  //           return false
  //         }
  //         let userid = $(this).data("userid");
  //         let lock = $(this).data("good");
  //         let gods = e.target.dataset.gods;
  //         if (gods == 1) {
  //           let $i = $(this).find("i");
  //           let $span = $(this).find("span");
  //           let num = $span.text();
  //           if (!lock) {
  //             $i.addClass("color");
  //             $(this).data("good", true);
  //             $span.text(num * 1 + 1);
  //           } else {
  //             $i.removeClass("color");
  //             $(this).data("good", false);
  //             $span.text(num * 1 - 1);
  //           }
  //           return false;
  //         }
  //         if (gods == 2) {
  //           $("#toast").addClass("show").find("#report").addClass("show").data("userid", userid);
  //         }
  //       })
  //     }
  //     resolve(false);
  //   })
  // }
  // 阅读点赞 登录状态 请求
  // $("#read>.good").click(function () {
  //   if (!globaldata.user) {
  //     globaldata.sgin();
  //     return false
  //   }
  //   let $i = $(this).find("i");
  //   let $span = $(this).find("span");
  //   let num = $span.text();
  //   let lock = $i.data("good");
  //   if (!lock) {
  //     $i.addClass("color");
  //     $i.data("good", true);
  //     $span.text(num * 1 + 1);
  //   } else {
  //     $i.removeClass("color");
  //     $i.data("good", false);
  //     $span.text(num * 1 - 1);
  //   }
  // })

})
// 省份
$(function () {
  // 根据路径判断城市
  let area = lxd.parseUrl(window.location.href).query.area || '', i = 0, bool = true;

  do {
    if (area == globaldata["province"][i]["code"]) {
      bool = !bool;
    } else {
      i++;
      i < globaldata["province"].length ? '' : bool = !bool;
    }
  } while (bool)
  i == 36 ? i = 0 : '';
  $(".my-province>span").html(globaldata.province[i]["codeName"]);
  function province (data) {
    let str = ``;
    data.forEach(item => str += `<li data-area=${item.code}>${item.codeName}</li>`);
    str = `<ul >${str}</ul>`;
    return str
  }
  // 底部弹出框
  let lis = $("[data-province='true']").append(province(globaldata.province)).find("li");
  Array.prototype.slice.call(lis).forEach(item => {
    $(item).click(function (e) {
      e.stopPropagation();
      let text = $(this).text();
      if (text == "默认") {
        $(".my-province div[data-province='true']").hide();
        return false;
      }
      let paresurl = lxd.parseUrl(window.location.href), path = paresurl.pathname;
      window.location.href = `${path}?area=${$(e.target).data("area")}`;
    })
  })

  function province_show (e) {
    e.stopPropagation();
    $(".my-province div[data-province='true']").show().unbind("mouseleave").mouseleave(function () { $(this).hide() });
  }
  $(".my-province>span").click(province_show);
  $(".my-province>i").click(province_show);
})

// 页面内通过 .click-dom .click-href 进行业内跳转
$(function () {
  $(".click-dom").click(function () {
    let top = $(".click-href").offset().top;
    $(window).scrollTop(top)
  })
})
// 图片观看轮播
$(function () {
  // 获取图片
  let showimglist = Array.from($('.showimglist img')), imglist = [], imglistdom = $("#imglist")
  i = 0;
  var w, h, width = document.documentElement.clientWidth, height = document.documentElement.clientHeight, size = 1;
  $('.showimglist img').click(function () {
    $("body").css({ "overflow-y": "hidden" })
    i = showimglist.indexOf(this);
    imgshow(0)
    imglistdom.show()
  })
  showimglist.map(item => {
    imglist.push($(item).data("original"));
  })
  function loop (src) {
    $("#imglist>div>img").attr("src", src);
    let newimg = new Image();
    newimg.src = src;
    newimg.onload = function (e) {
      w = this.width;
      h = this.height;
      $("#imglist>div>img").css({ "width": w, "height": h, "top": `calc(50vh - ${h / 2}px)`, "left": `calc(50vw - ${w / 2}px)` })
    }
  }
  let btns = $("#imglist>div>.glyphicon");
  function imgshow (num) {
    i += num;
    if (i < 0) i = imglist.length - 1;
    if (i >= imglist.length) i = 0;
    loop(imglist[i]);
  }
  $(btns[0]).click(function (e) {
    size = 1;
    imgshow(-1);
  });
  $(btns[1]).click(function (e) {
    size = 1;
    imgshow(1);
  })
  let btnss = $("#imglist>div>span>img");
  function scale (num) {
    size += num;
    if (size <= 0) size = 0.5;
    let imgw, imgh;
    imgw = w * size; imgh = h * size;
    let top = imgh / 2, left = imgw / 2;
    imgw > width ? left = `0px` : left = `50vw - ${left}px`;
    imgh > height ? top = `0px` : top = `50vh - ${top}px`;
    $("#imglist>div>img").css({ "width": imgw, "height": imgh, "top": `calc(${top})`, "left": `calc(${left})` })
  }
  $(btnss[0]).click(function (e) {
    scale(0.5);
  });
  $(btnss[1]).click(function (e) {
    scale(-0.5);
  });
  $(btnss[2]).click(function (e) {
    $("body").css({ "overflow-y": "scroll" })
    imglistdom.hide()
  });
})