SpaceOfCheng
/
checkSuccess


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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="//at.alicdn.com/t/font_733225_6fmwc1k362l.css">
  <title>城的空间签到助手</title>
  <style>
    body,
    div,
    p {
      padding: 0;
      margin: 0;
    }

    html,
    body {
      font-family: PingFangSC-Regular;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .changeView {
      width: 100%;
      height: 100%;
    }

    .container {
      width: 100%;
      height: 100%;
      padding-top: 20%;
      background: #fff;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
    }

    .icon_c {
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
    }

    .icon_c div {
      font-size: 1.8rem;
      color: #FF421C;
    }

    .icon_c p:nth-of-type(1) {
      font-size: 16px;
      color: #323B45;
      margin: 0.48rem 0 0.24rem 0;
    }

    .icon_c p:nth-of-type(2) {
      width: 66%;
      font-size: 16px;
      color: #404040;
      text-align: center;
    }

    .check_img {
      width: 4.0533rem;
      height: 4.0533rem;
      margin: 0.72rem 0 0.56rem 0;
    }

    .jcjy_logo {
      width: 2.88rem;
      height: 0.8rem;
      opacity: 0.22;
    }

    .fail {
      padding: 0;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center
    }

    .fail .jcjy_logo {
      position: absolute;
      bottom: 10%;
      left: 50%;
      transform: translateX(-50%);
    }

    .fail .icon_c div {
      color: #ccc;
    }

    .loading {
      width: 100%;
      height: 100%;
      background-color: #fff;
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      z-index: 99999;
      display: block;
    }
    .loader {
      margin: 0 0 2em;
      height: 100px;
      width: 20%;
      text-align: center;
      padding: 1em;
      margin: 0 auto 1em;
      display: inline-block;
      vertical-align: top;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    svg path,
    svg rect {
      fill: #FF6700;
    }
  </style>
</head>

<body>
  <div class="loading">
    <div class="loader">
      <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns-xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xmlSpace="preserve">
        <path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
            s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
            c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"
        />
        <path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
            C22.32,8.481,24.301,9.057,26.013,10.047z">
          <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="0.5s" repeatCount="indefinite"
          />
        </path>
      </svg>
    </div>
  </div>
  <div class="changeView" id="js_changeView">
    <div class="container success" style="display: none;">
      <div class="icon_c">
        <div class="iconfont icon-qunfengzhifuchenggong"></div>
        <p>签到成功!</p>
        <p>扫描下方二维码即可关注城的空间公众号，获取更多服务~</p>
      </div>
      <div class="check_img">
        <img src="https://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/citymini/qrcode_city.jpg" alt="" width="100%" height="100%">
      </div>
      <div class="jcjy_logo">
        <img src="https://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/citymini/miniLogo.png" alt="" width="100%" height="100%">
      </div>
    </div>
    <div class="container fail" style="display: none;">
      <div class="icon_c">
        <div class="iconfont icon-guanbi"></div>
        <p>签到失败！请重新扫码签到~</p>
      </div>
      <div class="jcjy_logo">
        <img src="https://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/citymini/miniLogo.png" alt="" width="100%" height="100%">
      </div>
    </div>
  </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
  
  // cdkj
  // appid = wx947e3c267f20ed46

  var appid = {
    prod: 'wx947e3c267f20ed46',
    dev: 'wx7320287e057bbeee'
  }

  var wxModules = (function () {
    const wxConfig = {
      appid: appid.dev,
      redirect_uri: encodeURIComponent(window.location.href),
      response_type: 'code',
      scope: 'snsapi_base',
      state: '12313'
    }
    const url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + wxConfig.appid +
      '&redirect_uri=' +
      wxConfig.redirect_uri + '&response_type=' + wxConfig.response_type + '&scope=' + wxConfig.scope +
      '&state=' +
      wxConfig.state + '#wechat_redirect';

    // alert(url);
    return {
      wxConfig: wxConfig,
      url: url,
      checkCodeQuery: function (code) {
        return window.location.search.indexOf(code) > -1;
      },
      getSeacrhRequire: function (name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
        var r = window.location.href.split('?')[1]
        if (!r) {
          return
        } else {
          r = window.location.href.split('?')[1].match(reg)
        }
        if (r != null) return unescape(r[2])
        return null
      }
    }
  })()

  $(function () {
	console.log('发起了签到请求')
    
    if (!wxModules.checkCodeQuery('code')) {
        return window.location.assign(wxModules.url);
    };
    
    var $changeView = $('#js_changeView');
    $.ajax({
      method: 'POST',
      url: '/api/guest/MQ/case/checkin',
      data: {
        code: wxModules.getSeacrhRequire('code'),
        tel: wxModules.getSeacrhRequire('tel'),
        fieldId: wxModules.getSeacrhRequire('fieldId')
      }
    }).then(res => {    
      $('.loading').hide();
      if (res.code == 200) {
        $changeView.find('.container').eq(0).show()
      } else {
        $changeView.find('.container').eq(1).show()
      }
    }).catch(error => {
      console.log('------error:', error);
      // alert(JSON.stringify(error.message));
    })
  })
</script>

</html>