zhuishuyun
/
zhuishuyun_quickapp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="user-scalable=no" />
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,viewport-fit=cover" />
  <script src="//cdn-novel.iycdm.com/static/jquery-3.4.1.min.js" type="text/javascript"></script>
</head>

<body>
<style>
  html,
  body,
  p,
  div,
  section {
    margin: 0;
    padding: 0;
  }

  img {
    width: 100%;
    -webkit-tap-highlight-color: transparent;
  }

  a {
    color: currentColor;
    -webkit-tap-highlight-color: transparent;
  }

  .application-content {
    padding: 12px;
    max-width: 100%;
    transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .application-content .content-wrap {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }

  .content-card {
    border-radius: 5px;
    max-width: 100%;
    outline: none;
    text-decoration: none;
    transition-property: box-shadow, opacity;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    padding: 16px;
    font-size: 14px;
    line-height: 20px;
  }

  .card-text {
    text-align: center;
  }

  .card-text .wechat-title {
    color: red;
    font-weight: 700;
    margin-bottom: 16px;
    font-size: 18px;
  }

  .card-text .wechat-name {
    color: teal;
    font-weight: 700;
    font-size: 24px;
    line-height: 40px;
    margin-bottom: 16px;
  }

  .card-text .wechat-step {
    color: #000;
    font-weight: 900;
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 16px;
  }

  .card-text .copy-text {
    height: 28px;
    min-width: 50px;
    padding: 0 12px;
    color: #009688;
    caret-color: #009688;
    border: 1px solid #009688;
    background-color: #fff;
    border-radius: 5px;
    font-size: 20px;
    margin: 0 auto 16px;
    display: block;
  }

  .card-text .copy-button {
    height: 36px;
    min-width: 64px;
    padding: 0 16px;
    background-color: #ff5252;
    border-radius: 5px;
    border: 1px solid #ff5252;
    color: #fff;
    font-size: 20px;
    line-height: 36px;
    display: block;
    margin: 0 auto 16px;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }

  .toast-wrap {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: 5px 10px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 4px;
  }

  .hw-guide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
  }

  .hw-guide img {
    width: 100%;
  }

  .hw-guide .btn-know {
    width: 180px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: none;
    outline: none;
    background: linear-gradient(0deg,
    rgba(255, 210, 0, 1),
    rgba(255, 239, 75, 1));
    border-radius: 10px;
    text-align: center;
    font-size: 14px;
    font-family: PingFang-SC-Bold;
    font-weight: bold;
    color: rgba(255, 93, 123, 1);
    position: absolute;
    top: 62%;
    left: 50%;
    margin-left: -90px;
  }

  .open-gif {
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .open-gif .open-conetent {
    width: 53vw;
    position: absolute;
    height: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: #f7f5eb;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
  }

  .open-gif .open-conetent img {
    width: 36%;
    display: inline-block;
    margin-top: 12%;
  }

  .open-gif .open-conetent p {
    margin-top: 8%;
    font-size: 14px;
  }
  .error-tips{
    font-size:16px;
    color:#fd555d;
    margin-top:40px;
    text-align:center;

  }
</style>
<div class="application-wrap">
  <main class="application-content">
    <div class="content-wrap" style="display: none;">
    <!-- <div class="content-card">
          <div class="card-text">
            <p class="wechat-title">请认准官方唯一认证公众号:</p>
            <p class="wechat-name">{{$gzh_name}}</p>
            <p class="wechat-step">
              打开微信 → 右上角+号 → 添加朋友 → 公众号
            </p>
            <button class="copy-text" type="button">
              {{$gzh_code}}
            </button>
            <button type="button" class="copy-button" id="copy" data-clipboard-text="">
              一键复制公众号
            </button>
            <img src="https://cdn-novel.iycdm.com/quickapp/static/1.gif" />
          </div>
        </div> -->
      <div class="error-tips">对不起，暂时无法唤醒快应用!</div>
    </div>
  </main>
  <div class="hw-guide">
    <img src="https://cdn-novel.iycdm.com/quickapp/static/guide.jpg " />
    <div class="btn-know">知道了</div>
  </div>
  <div class="open-gif">
    <div class="open-conetent">
      <img src="https://cdn-novel.iycdm.com/quickapp/static/gidf.gif" />
      <p>正在打开快应用...</p>
    </div>
  </div>
  <p class="toast-wrap" style="display: none"></p>
</div>
<script type="text/javascript" src="https://cdn-novel.iycdm.com/quickapp/static/clipboard.js" async="async">
</script>
<script type="text/javascript" src="https://statres.quickapp.cn/quickapp/js/routerinline.min.js"></script>
<script type="text/javascript">
  //获取url参数
  function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = decodeURIComponent(window.location.search)
            .substr(1)
            .match(reg);
    if (r != null) return unescape(r[2]);
    return null;
  }
  //生成三位随机数
  function ranMath() {
    return Math.random().toString(36).substr(2, 3).toUpperCase();
  }
  //没有打开快应用注册h5事件及其方法
  var wePage = {
    showToast: function (text) {
      $(".toast-wrap")
              .text(text)
              .show();
      setTimeout(function () {
        $(".toast-wrap").hide();
      }, 2000);
    },
    lisen: function () {
      var _self = this;
      $(".copy-button").on("click", function () {
        var clip = new ClipboardJS("#copy");
        clip.on("success", function (e) {
          _self.showToast("复制成功");
        });

        clip.on("error", function (e) {
          _self.showToast("复制失败");
        });
      });
      var code = '{{$gzh_code}}' + '/' + ranMath();
      $('.copy-text').text(code);
      $('.copy-button').attr('data-clipboard-text', code);
    },
    init: function () {
      this.lisen();
    }
  };
  //全局变量
  var glob = {
    ua: window.navigator.userAgent.toLocaleLowerCase(),
    isHuaWei: /huawei|honor/.test(window.navigator.userAgent.toLowerCase()),
    isOpenApp: false,
    obAvailable: false //机型是否支持快应用
  };

  //快应用配置
  var QYY = {
    isWx: /micromessenger/.test(glob.ua), //是否微信环境
    isIos: /iphone|ipod|ipad/.test(glob.ua), //是否是ios
    entry: "views/Reader", //拉起快应用阅读器页面
    packName: "{{ package }}", //快应用包名
    bid: "{{$hash_bid}}", //书籍id
    cid: "{{$cid}}", //章节id
    send_order_id: "{{$send_order_id}}",//派单ID
  };
  //判断机型是否支持快应用
  try {
    channelReady(function (bAvailable) {
      glob.obAvailable = bAvailable;
    });
  } catch (e) {
    glob.obAvailable = false;
  }
  //显示公众号落地页
  function showH5Page() {
    wePage.init();
    var time = QYY.isIos ? 0 : 5000;
    setTimeout(function () {
      $(".content-wrap").show();
      showPop(false);
    }, time);
  }
  //是否显示拉起快应用弹窗
  function showPop(show) {
    if (show) {
      $(".open-gif").show();
    } else {
      $(".open-gif").hide();
    }
  }
  //打开快应用逻辑
  function openQyy() {
    var parmas = {
      bid: QYY.bid,
      chapter_id: QYY.cid,
      send_order_id: QYY.send_order_id
    };
    try {
      //尝试直接拉起
      appRouter(QYY.packName, "/" + QYY.entry, parmas);
    } catch (e) {
      //唤醒失败 尝试url sheme唤醒
      routerAHap(parmas);
    }
  }
  //URL唤醒快应用
  function routerAHap(data) {
    var parmas = $.param(data);
    var ohapa = document.createElement("a");
    ohapa.href = "hap://app/" + QYY.packName + "/" + QYY.entry + "?" + parmas;
    ohapa.setAttribute(
            "style",
            "position: absolute;left: -1000rem;height: 1rem;width: 1rem;overflow: hidden"
    );
    document.body.appendChild(ohapa);
    ohapa.click();
  }
  //初始化
  function startDeep() {
    showH5Page();
    !QYY.isIos && openQyy();
  }
  //华为h5流程
  var hwPage = {
    init: function () {
      this.lisen();
      $(".hw-guide").css("height", $(".hw-guide").width() * 1.778);
      $(".hw-guide").show();
    },
    lisen: function () {
      $(".btn-know").on("click", function () {
        $(".hw-guide").hide();
        showPop(true);
        startDeep();
      });
    }
  };
  $(function () {
    //页面流程开始
    //处理弹出框的高度
    $(".open-conetent").height($(".open-conetent").width() * 0.75);
    //华为手机显示提示页
    if (glob.isHuaWei) {
      setTimeout(function () {
        hwPage.init();
        showPop(false);
      }, 3000);
    } else {
      startDeep();
    }
  });
</script>
</body>

</html>