examwin_web/js/components.js

// 通用数据
let globaldata = {
  // 滚动高度
  scrollheight: 50,
  // body 
  body: document.documentElement || document.body,
  // 省份
  province: ["全国", "北京", "天津", "河北", "山西", "内蒙古", "辽宁", "吉林", "黑龙江", "上海", "江苏", "浙江", "安徽", "福建", "江西", "山东", "河南", "湖北", "湖南", "广东", "海南", "广西", "甘肃", "陕西", "新疆", "青海", "宁夏", "重庆", "四川", "贵州", "云南", "西藏", "台湾", "澳门", "香港", "默认"]
}
// 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');
  },

  //  /**
  //    * 微信分享
  //    * @return {[type]} [description]
  //    */
  weixin: function () {
    var url = window.location.href,
      encodePath = encodeURIComponent(url),
      targetUrl = 'https://api.gaokaozhitongche.com/v1/direct?text=' + encodePath;
    window.open(targetUrl, 'weixin');
  },

  //  /**
  //    * 分享新浪微博
  //    * @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: "#000000",
        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;
  $(window).scroll(function () {
    if (lock) 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;
      $(".comment>.loading").addClass("show")
      setTimeout(function (
      ) {
        $(".comment>.loading").removeClass("show");
        data().then(res => {
          if (res) {
            $(".comment>.nodata").addClass("show");
          }
          lock = res;
        });
      }, 2000)
    }
  })
  // 阅读量问题

  // 评论区
  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 () {
  function province (data) {
    let str = ``;
    data.forEach(item => str += `<li>${item}</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;
      }
      alert("跳转：" + $(this).text())
    })
  })

  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);
})

// 全局添加路径解析
$(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
  }
})
// 页面内通过 .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, 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) {
      let w = this.width / 2,
        h = this.height / 2;
      $("#imglist>div>img").css({ "top": `calc(50vh - ${h}px)`, "left": `calc(50vw - ${w}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;
    scale(0);
    imgshow(-1);
  });
  $(btns[1]).click(function (e) {
    size = 1;
    scale(0);
    imgshow(1);
  })
  let btnss = $("#imglist>div>span>img");
  function scale (num) {
    size += num;
    if (size <= 0) size = 0.5;
    $("#imglist>div>img").css({ "transform": `scale(${size})` })
  }
  $(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()
  });
})