zhuishuyun
/
zhuishuyun_quickapp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
							<!--
/**
 * Created by PhpStorm.
 * User: z-yang
 * Date: 2019/4/11
 * Time: 15:33
 */

-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel=icon type=image/png href="data:image/png;base64,iVBORw0KGgo=">
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
              />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>微信阅读小管家福利</title>
	<style>
html,
body {
    margin: 0 auto;
  padding: 0;
  max-width: 450px;
  font-size: 100px;
}

html {
    background: #ff3628;
}

p {
    margin: 0;
}

i {
    font-style: normal;
}
a{text-decoration: none}

.container {
    position: relative;
    padding-bottom: .17rem;
}

.container .top_banner {
    font-size: 0;
  position: relative;
}

.container .top_banner img {
    width: 100%;
}

.container .top_banner .u_can_get {
    width: 1.5rem;
  height: 0.3rem;
  font-size: 0.14rem;
  line-height: 0.3rem;
  text-align: center;
  color: #d02a13;
  background: -webkit-gradient(linear, left bottom, left top, from(#ffb72c), to(#fff1af));
            background: linear-gradient(0deg, #ffb72c, #fff1af);
  -webkit-box-shadow: 0px 0.05rem 0.1rem 0px rgba(255, 81, 60, 0.4);
          box-shadow: 0px 0.05rem 0.1rem 0px rgba(255, 81, 60, 0.4);
  border-radius: 0.15rem;
  position: absolute;
  left: 4%;
  top: 48%;
}

.container .top_banner .u_can_get span {
    font-size: 0.17rem;
  font-weight: bold;
}

.container .wrap {
    font-size: 0;
  width: 95%;
  margin: 0 auto;
  padding-bottom: 0.17rem;
  background: -webkit-gradient(linear, left bottom, left top, from(white), to(#fffbe8));
            background: linear-gradient(0deg, white, #fffbe8);
  -webkit-box-shadow: 0px 0px 0.1rem 0px rgba(0, 0, 0, 0.08);
          box-shadow: 0px 0px 0.1rem 0px rgba(0, 0, 0, 0.08);
  border-radius: 2px;
}

.container .wrap img {
    width: 100%;
}

.container .wrap .to_get {
    display:block;
    background: #ffdb5f;
    color: #8a4b18;
    font-size: 0.17rem;
  font-weight: bold;
  width: 85%;
  margin: 0 auto 0.15rem;
  padding: 0.15rem 0;
  text-align: center;
  border-radius: 40px;
}

.container .wrap .get_notice {
    font-size: 0.12rem;
  color: #666;
  text-align: center;
}

.container .wrap .help_wrap {
    background: white;
    border: 1px solid #d6cea5;
  border-radius: 2px;
  width: 90%;
  margin: 0.54rem auto 0;
  padding: 0.16rem 0 0.44rem;
  font-size: 0.13rem;
  color: #666;
}

.container .wrap .help_wrap p {
    padding: 0 0.18rem;
}

.container .wrap .help_wrap .title {
    color: #333;
    font-size: 0.15rem;
  font-weight: bold;
  margin-bottom: 0.15rem;
}

.container .wrap .help_wrap .item {
    line-height: 1.8;
}

.container .wrap .help_wrap .item i {
    color: #ff4930;
    font-size: 0.15rem;
  font-weight: bold;
}
.alert{
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 100;
  left: 0;
  top: 0;
  overflow: hidden;
  background: rgba(0,0,0,.4);
  }
.alert .content{
  width: 80%;
  height: 2rem;
  position: absolute;
  font-size: .11rem;
  left: 50%;
  top: 50%;
  margin-left: -40%;
  margin-top: -40%;
  text-align: center;
  background: #fff;
}
.alert .content .close{
  float: right;
  width: .3rem;
  height: .3rem;
  line-height: .3rem;
  border-radius: 50%;
  border: 0px solid #ccccd9;
  font-size: .2rem;
}

.alert .content p:first-of-type{
  margin-top: .5rem;
  font-size: .33rem;
}
.alert .content p:nth-of-type(2){
  margin-top: .11rem;
  font-size: .11rem;
}
.show{
  display: block;
}
.hide{
  display: none;
}
/*# sourceMappingURL=main.css.map */
	</style>
  </head>

  <body>
    <main class="container">
      <div class="top_banner">
        <img src="https://cdn-novel.iycdm.com/h5/20190411/free_currency_banner.jpg" alt="" />
        <p class="u_can_get"><span>200</span>书币 人人有份</p>
      </div>
      <div class="wrap">
        <img src="https://cdn-novel.iycdm.com/h5/20190411/free_currency_wrap.jpg" alt="" />
          @if($is_get)
              <a class="to_get" href="{{$url}}">马上去看书> ></a>
              <p class="get_notice">领取成功 200书币已经到账</p>
              @else
              <a class="to_get js-get">领取200书币奖励</a>
              <p class="get_notice">领取成功后，会自动发放到您的余额中</p>
          @endif
        <div class="help_wrap">
          <p class="title">阅读小管家给您提供优质阅读体验</p>
          <div class="help_item">
            <p class="item">1.成功添加就送<i>200</i>书币奖励，人人有份；</p>
            <p class="item">2.提供最划算充值优惠，看书更便宜；</p>
            <p class="item">3.找书快人一步，提供任何您想看的书籍哦；</p>
            <p class="item">4.1对1阅读管家优质服务，疑难问题优先解决；</p>
            <p class="item">5.更多福利，您想要，我们就有！</p>
          </div>
        </div>
      </div>
    </main>
    <div class="hide alert">
      <div class="content">
          <a class="close" title="关闭">&times;</a>
          <p>领取成功</p>
          <p>200书币已到账</p>
      </div>
    </div>
  </body>
  <script>
window.onload=function(){
    var d = document;
    var is_get = {{$is_get}};
    var url = "{{$url}}";
        is_get = parseInt(is_get);
    var btn = d.querySelector('.js-get');
    var get_notice = d.querySelector('.get_notice');
    var uid = {{$uid}}
     uid = parseInt(uid);
    if(is_get){
        return ;
    }
    btn.addEventListener("click",function(){
        ajax('POST','/freecurrency',function(){
          show();
          setTimeout(function () {
            get_notice.innerText = '领取成功 200书币已经到账';
            btn.innerText = '马上去看书> >';
            btn.setAttribute("href",url);
          },200);
        })
    });
    close();
    function ajax(method,url,callback){
        var xhr = new XMLHttpRequest();
        xhr.open(method, url, true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send('uid='+uid);
        xhr.onreadystatechange=function(){
        if (xhr.readyState ==4 && xhr.status==200)
        {
          callback();
        }
      }
    }

    function close() {
      d.querySelector('.close').addEventListener('click',function () {
        d.querySelector('.alert').setAttribute("class","hide alert");
      })
    }

  function show() {
    d.querySelector('.alert').setAttribute("class","show alert");
  }

}

  </script>
</html>