<!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>