Skip to content

W
wechat_lung
Commit d64db105 by hanpeng
Options

-mark- 增加通用登录页面

parent 31e99d76
Showing with 684 additions and 101 deletions
wechat_lung_login/css/formLogin.css 0 → 100644
html,
body {
background: #fff;
margin: 0 auto;
position: relative;
}
.header {
padding-top: 1.22rem;
}
.avatar {
display: block;
width: 1.58rem;
height: 2.10rem;
margin: 0 auto 0.90rem auto;
}
.box-cell {
width: 6.42rem;
height: 0.90rem;
margin: 0.30rem auto;
position: relative;
border-radius: 0.10rem;
background: #f7f7f7;
}
.box-cell:before {
content: '';
display: block;
position: absolute;
width: 0.32rem;
height: 0.40rem;
top: 0.26rem;
left: 0.40rem;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.icon-mobile:before {
background-image: url('../images/login_icon_phone@2x.png');
}
.icon-smsCode:before {
background-image: url('../images/login_icon_validation@2x.png');
}
.box-cell input {
padding: 0.26rem 0.40rem 0.24rem 1.02rem;
height: 0.90rem;
background: #f7f7f7;
color: #222;
border: none;
font-size: 0.28rem;
font-family: PingFangSC-Regular;
line-height: 0.32rem;
}
.box-cell input.mobile {
/* padding-right: 2.60rem; */
width:4rem;
/* 修复部分机型输入手机号后，验证码按钮无法点击 */
}
.box-cell input::-webkit-input-placeholder {
color: #bbb;
}
.getSms {
position: absolute;
top: 0.22rem;
right: 0.40rem;
width: 1.80rem;
height: 0.48rem;
border-radius: 1.18rem;
font-size: 0.28rem;
color: #0FAEBD;
letter-spacing: 0;
line-height: 0.48rem;
padding: 0;
border: none;
}
.scale:active:after {
border: none;
}
.scale:after {
content: '';
position: absolute;
top: 0;
left: 0;
border: 1px solid #51C6D0;
border-radius: 1.18rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}
.login {
display: block;
width: 6.42rem;
height: 0.80rem;
margin: 0.70rem auto 0 auto;
background: #51C6D0;
border-radius: 0.10rem;
color: #fff;
border: none;
}
.text-51c6d0 {
color: #51c6d0;
}
.footer {
width: 100%;
margin-top: 2.36rem;
margin-bottom: 1rem； text-align: center;
}
.footer p {
width: 6.42rem;
margin: 0 auto;
font-size: 0.24rem;
line-height: 0.28rem;
text-align: center;
}
\ No newline at end of file
wechat_lung_login/css/login.css
html,
body {
background: #fff;
margin: 0 auto;
position: relative;
#content {
width: 100%;
}
.header {
padding-top: 1.22rem;
.login_bg_warp {
width: 100%
}
.avatar {
display: block;
width: 1.58rem;
height: 2.10rem;
margin: 0 auto 0.90rem auto;
.login_bg_warp img {
width: 100%
}
.box-cell {
width: 6.42rem;
height: 0.90rem;
margin: 0.30rem auto;
position: relative;
border-radius: 0.10rem;
background: #f7f7f7;
/* input提示颜色 */
input::-webkit-input-placeholder {
color: #8BD3C5;
}
.box-cell:before {
content: '';
display: block;
position: absolute;
width: 0.32rem;
height: 0.40rem;
top: 0.26rem;
left: 0.40rem;
background-repeat: no-repeat;
background-size: 100% 100%;
input:-moz-placeholder {
color: #8BD3C5;
}
.icon-mobile:before {
background-image: url('../images/login_icon_phone@2x.png');
input::-moz-placeholder {
color: #8BD3C5;
}
.icon-smsCode:before {
background-image: url('../images/login_icon_validation@2x.png');
input:-ms-input-placeholder {
color: #8BD3C5;
}
.box-cell input {
padding: 0.26rem 0.40rem 0.24rem 1.02rem;
height: 0.90rem;
background: #f7f7f7;
color: #222;
border: none;
font-size: 0.28rem;
font-family: PingFangSC-Regular;
line-height: 0.32rem;
/* login组件 */
.login_content {
width: 100%;
padding: 4.4rem 0.72rem 0rem 0.72rem;
position: absolute;
top: 0;
}
.box-cell input.mobile {
/* padding-right: 2.60rem; */
width:4rem;
/* 修复部分机型输入手机号后，验证码按钮无法点击 */
.login_content .mobile {
width: 4.06rem;
border: none;
background: transparent;
border-bottom: 0.01rem solid #2CBCA0;
height: 0.8rem;
font-size: 0.32rem;
color: #111111;
float: left;
}
.box-cell input::-webkit-input-placeholder {
color: #bbb;
.login_content .smsCode {
width: 100%;
border: none;
background: transparent;
border-bottom: 0.01rem solid #2CBCA0;
height: 0.8rem;
font-size: 0.32rem;
color: #111111;
display:none;
}
.login{
width:6.06rem;
height:0.88rem;
background: #8BD3C5;
line-height: 0.88rem;
text-align: center;
color:#AEE4DA;
font-size: 0.36rem;
margin-top:0.5rem;
border-radius:0.08rem;
}
.loginOn{
background: #2CBCA0;
color:#FFFFFF;
}
.getSms {
position: absolute;
top: 0.22rem;
right: 0.40rem;
width: 1.80rem;
height: 0.48rem;
border-radius: 1.18rem;
width: 1.68rem;
height: 0.56rem;
line-height: 0.56rem;
text-align: center;
color: #2CBCA0;
font-size: 0.28rem;
color: #0FAEBD;
letter-spacing: 0;
line-height: 0.48rem;
padding: 0;
border: none;
float: left;
border: 0.01rem solid #2CBCA0;
border-radius: 0.04rem;
margin-top: 0.24rem;
margin-left: 0.24rem;
}
.scale:active:after {
.SmsOn {
background: #8BD3C5;
color: #AEE4DA;
border: none;
}
.scale:after {
content: '';
position: absolute;
top: 0;
left: 0;
border: 1px solid #51C6D0;
border-radius: 1.18rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}
.login {
display: block;
width: 6.42rem;
height: 0.80rem;
margin: 0.70rem auto 0 auto;
background: #51C6D0;
border-radius: 0.10rem;
color: #fff;
border: none;
/* 滑块验证 */
._nc .stage1 .slider {
width: 6.04rem;
height: 0.8rem !important;
border-radius: 0.4rem !important;
box-shadow: 0 0 0.03rem #fff !important;
background-color: #9FECD8 !important;
left: 0
}
.text-51c6d0 {
color: #51c6d0;
._nc .stage1 .track div {
border-radius: 0.4rem !important;
color: #fff !important;
}
.footer {
width: 100%;
margin-top: 2.36rem;
margin-bottom: 1rem； text-align: center;
._nc .stage1 .bg-green {
background-color: #37D488 !important;
}
._nc .stage1 .bg-red {
background-color: #78c430 !important;
}
.footer p {
width: 6.42rem;
margin: 0 auto;
font-size: 0.24rem;
line-height: 0.28rem;
._nc .stage1 .icon {
position: absolute;
left: 0.25rem;
top: 0.08rem;
bottom: 0;
margin: auto;
}
._nc .stage1 .button {
position: absolute;
left: 0.02rem;
top: 0.03rem;
width: 1.04rem;
height: 0.75rem;
background-color: #fff;
cursor: pointer;
border-radius: 0.4rem;
}
._nc .stage1 .track div,
._nc .stage1 .label {
line-height: 0.8rem;
height: 0.8rem;
text-align: center;
}
\ No newline at end of file
font-size: 0.32rem;
}
._nc .icon-slide-arrow {
font-size: 0.48rem;
color: #dbdbdb;
}
wechat_lung_login/formLogin.html
......@@ -7,7 +7,7 @@
<title></title>
<link rel="stylesheet" href="https://review-formal.iplusmed.com/Common/css/reset.css" />
<link rel="stylesheet" type="text/css" href="https://review-formal.iplusmed.com/Common/css/mui.min.css" />
<link rel="stylesheet" type="text/css" href="css/login.css" />
<link rel="stylesheet" type="text/css" href="css/formLogin.css" />
<script src="https://review-formal.iplusmed.com/Common/javaScript/calRem.js"></script>
<script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/nch5/index.js?t=2015052012"></script>
<script src="https://review-formal.iplusmed.com/Common/javaScript/require.min.js"></script>
......@@ -217,7 +217,7 @@
bannerHidden: false,
initHidden: false,
callback: function(data) {
$('.icon-smsCode').show();
$('.smsCode').show();
nc.reset()
$('#__nc').hide();
$.ajax({
......
wechat_lung_login/javaScript/login.js 0 → 100644
define(['zepto', 'medtap'], function($, medtapCore) {
var clock = null,
nums = 60;
var login = {
wechatId: medtapCore.getRequest('wechatId'),
doctorId:medtapCore.getRequest('doctorId'),
inviteCode:medtapCore.getRequest('inviteCode'),
agencyId:medtapCore.getRequest('agencyId'),
operationType:medtapCore.getRequest('operationType'),
businessDetail:medtapCore.getRequest('businessDetail'),
channelId:medtapCore.getRequest('channelId'),
init: function() {
$('input').on('change',function(){
if(!$('#mobile').val() || $('#mobile').val().length !== 11){
$('#login').removeClass('loginOn')
}else if(!$('#smsCode').val() || $('#smsCode').val().length !== 4){
$('#login').removeClass('loginOn')
}else{
$('#login').addClass('loginOn');
}
})
},
bind: function() {
$('#getSms').click(function() {
if(!/^1[0-9]{10}$/.test($('#mobile').val())) {
medtapCore.toast({
message:'请输入合法的手机号',
time:1500
});
return;
}else{
$('#__nc').show();
$('.smsCode').hide();
}
});
$('#login').on('click',function() {
if($(this).hasClass('loginOn')){
if(!$('#mobile').val()) {
//medtapCore.winPop('请输入手机号');
medtapCore.toast({
message:'请输入手机号',
time:1500
});
return;
}
if(!/^1[0-9]{10}$/.test($('#mobile').val())) {
//medtapCore.winPop('请输入合法的手机号');
medtapCore.toast({
message:'请输入合法的手机号',
time:1500
});
return;
}
if(!$('#smsCode').val()) {
//medtapCore.winPop('请输入验证码');
medtapCore.toast({
message:'请输入验证码',
time:1500
});
return;
}
if(login.agencyId != ''){ //扫描代理商二维码进来的用户
$.ajax({
url: 'https://testdevgw.medtap.cn/user/loginUserByWechat',
type: 'post',
async: true,
dataType: 'json',
headers: {
'apptype': 'wechat_lung',
'user-os':'wechat'
},
contentType: "application/json",
data: JSON.stringify({
mobile: $('#mobile').val(),
smsCode: $('#smsCode').val(),
wechatId: login.wechatId,
extra:{ //登录附加参数，用于甄别用户渠道来源2019.03调整
agencyId:login.agencyId,
operationType:login.operationType,
businessDetail:login.businessDetail
}
}),
success: function(data) {
if(data.success) {
//medtapCore.winPop('登录/注册成功!');
medtapCore.toast({
message:'登录/注册成功!',
time:1500
});
var token = data.content.token;
localStorage.setItem('wxLungToken',token);
setTimeout(function(){
self.location=document.referrer;
},1000)
} else {
medtapCore.winPop(data.resultDesc);
}
},
error: function(err) {
console.log('err: ' + err);
}
});
}else if(login.inviteCode != ''){ //兼容历史版本使用inviteCode做业务的使用场景
$.ajax({
url: 'https://testdevgw.medtap.cn/user/loginUserByWechat',
type: 'post',
async: true,
dataType: 'json',
headers: {
'apptype': 'wechat_lung',
'user-os':'wechat'
},
contentType: "application/json",
data: JSON.stringify({
mobile: $('#mobile').val(),
smsCode: $('#smsCode').val(),
wechatId: login.wechatId,
extra:{ //登录附加参数，用于甄别用户渠道来源2019.03调整
inviteCode:login.inviteCode,
operationType:login.operationType,
businessDetail:login.businessDetail
}
}),
success: function(data) {
if(data.success) {
medtapCore.toast({
message:'登录/注册成功!',
time:1500
});
var token = data.content.token;
localStorage.setItem('wxLungToken',token);
setTimeout(function(){
self.location=document.referrer;
},1000)
} else {
//medtapCore.winPop(data.resultDesc);
medtapCore.toast({
message:data.resultDesc,
time:1500
});
}
},
error: function(err) {
console.log('err: ' + err);
}
});
}else if(login.doctorId != ''){ //兼容历史版本使用doctorId做业务的使用场景
$.ajax({
url: 'https://testdevgw.medtap.cn/user/loginUserByWechat',
type: 'post',
async: true,
dataType: 'json',
headers: {
'apptype': 'wechat_lung',
'user-os':'wechat'
},
contentType: "application/json",
data: JSON.stringify({
mobile: $('#mobile').val(),
smsCode: $('#smsCode').val(),
wechatId: login.wechatId,
extra:{ //登录附加参数，用于甄别用户渠道来源2019.03调整
doctorId:login.doctorId,
operationType:login.operationType,
businessDetail:login.businessDetail
}
}),
success: function(data) {
if(data.success) {
medtapCore.toast({
message:'登录/注册成功!',
time:1500
});
var token = data.content.token;
localStorage.setItem('wxLungToken',token);
setTimeout(function(){
self.location=document.referrer;
},1000)
} else {
medtapCore.toast({
message:data.resultDesc,
time:1500
});
}
},
error: function(err) {
console.log('err: ' + err);
}
});
}else{
$.ajax({
url: 'https://testdevgw.medtap.cn/user/loginUserByWechat',
type: 'post',
async: true,
dataType: 'json',
headers: {
'apptype': 'wechat_lung',
'user-os':'wechat'
},
contentType: "application/json",
data: JSON.stringify({
mobile: $('#mobile').val(),
smsCode: $('#smsCode').val(),
wechatId: login.wechatId,
extra:{ //登录附加参数，用于甄别用户渠道来源2019.03调整
operationType:login.operationType,
channelId:login.channelId
}
}),
success: function(data) {
if(data.success) {
medtapCore.toast({
message:'登录/注册成功!',
time:1500
});
var token = data.content.token;
localStorage.setItem('wxLungToken',token);
setTimeout(function(){
self.location=document.referrer;
},1000)
} else {
medtapCore.toast({
message:data.resultDesc,
time:1500
});
}
},
error: function(err) {
console.log('err: ' + err);
}
});
}
}else{
}
});
$('.userLicens').click(function() {
});
},
sendCode: function(thisBtn) {
btn = thisBtn;
btn.disabled = true;
btn.innerHTML = nums + 'S';
clock = setInterval(doLoop, 1000);
$(thisBtn).addClass('bg');
function doLoop() {
nums--;
if(nums > 0) {
btn.innerHTML = nums + 'S';
} else {
clearInterval(clock); //清除js定时器
btn.disabled = false;
btn.innerHTML = '获取验证码';
nums = 60; //重置时间
$(thisBtn).removeClass('bg');
}
}
}
};
login.init();
login.bind();
});
\ No newline at end of file
wechat_lung_login/login.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<link rel="stylesheet" type="text/css" href="https://review-formal.iplusmed.com/Common/css/wechat_Reset.min.css" />
<title>登录</title>
<script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/nch5/index.js?t=2015052012"></script>
<link rel="stylesheet" type="text/css" href="css/login.css"/>
<script src="https://review-formal.iplusmed.com/Common/javaScript/calRem.js" type="text/javascript" charset="utf-8"></script>
<script src="https://review-formal.iplusmed.com/Common/javaScript/require.min.js"></script>
<script type="text/javascript">
require.config({
baseUrl: "./",
paths: {
"zepto": "https://review-formal.iplusmed.com/Common/javaScript/zepto.min",
"medtap": "https://review-formal.iplusmed.com/Common/javaScript/medtap_core_wx",
"md5": "https://review-formal.iplusmed.com/Common/javaScript/md5.min"
},
shim: {
"zepto": {
exports: "$"
}
}
});
</script>
</head>
<body>
<div id="content">
<div class="login_bg_warp">
<img src="images/enroll_bg_jpg@2x.png" >
</div>
<ul class="login_content">
<li class="box-cell icon-mobile clearfix">
<input type="tel" class="mobile" placeholder="请输入手机号" id="mobile" name="mobile" onkeyup="value=value.replace(/[^\d]/g,'')" />
<div class="getSms" id="getSms">获取验证码</div>
</li>
<li class="box-cell icon-nc">
<div id="__nc" style="margin-left:auto;margin-right:auto;width:100%;height:0.9rem;margin-top:0.35rem;display:none">
<div id="nc"></div>
</div>
</li>
<li class="box-cell icon-smsCode">
<input class="smsCode" type="tel" placeholder="请输入验证码" id="smsCode" name="smsCode" maxlength="4" />
</li>
<div class="login" id="login">
登录
</div>
</ul>
</div>
</body>
<script type="text/javascript">
var nums = 60;
function sendCode(thisBtn) {
btn = thisBtn;
btn.disabled = true;
btn.innerHTML = nums + 'S';
clock = setInterval(doLoop, 1000);
$(thisBtn).addClass('SmsOn');
function doLoop() {
nums--;
if (nums > 0) {
btn.innerHTML = nums + 'S';
} else {
clearInterval(clock); //清除js定时器
btn.disabled = false;
btn.innerHTML = '获取验证码';
nums = 60; //重置时间
$(thisBtn).removeClass('SmsOn');
}
}
}
function winPop(msg) {
var b = $("body");
b.append("<div class='winPop'>" + msg + "</div>");
var a = setTimeout(function() {
var a = $(".winPop");
a.remove();
clearTimeout(a);
}, 3000);
}
var nc_token = ["FFFF0N0N000000007FD1", (new Date()).getTime(), Math.random()].join(':');
var nc = NoCaptcha.init({
renderTo: '#nc',
appkey: 'FFFF0N0N000000007FD1',
scene: 'nc_message_h5',
token: nc_token,
trans: {
"key1": "code200"
},
elementID: ["usernameID"],
is_Opt: 0,
language: "cn",
timeout: 10000,
retryTimes: 5,
errorTimes: 5,
inline: false,
apimap: {
// 'analyze': '//a.com/nocaptcha/analyze.jsonp',
// 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
},
bannerHidden: false,
initHidden: false,
callback: function(data) {
$('.smsCode').show();
nc.reset();
$('#__nc').hide();
$.ajax({
url: 'https://testdevgw.medtap.cn/user/3.0/sendCode/login',
type: 'post',
async: true,
contentType: "application/json",
headers:{
'apptype': 'wechat_lung',
'user-os':'wechat'
},
data: JSON.stringify({
sessionId: data.csessionid,
sig: data.sig,
ncToken: nc_token,
scene: 'nc_message_h5',
mobile: $('#mobile').val()
}),
success: function(data) {
if (data.success) {
sendCode(document.getElementById('getSms'));
winPop('验证码已发送，请注意查收！');
/* $('.smsCode').show(); */
} else {
winPop(data.resultDesc);
}
},
error: function(err) {
console.log('err: ' + err);
}
});
},
error: function(s) {
}
});
NoCaptcha.setEnabled(true);
nc.reset(); //请务必确保这里调用一次reset()方法
NoCaptcha.upLang('cn', {
'LOADING': "加载中...", //加载
'SLIDER_LABEL': "向右滑动验证", //等待滑动
'CHECK_Y': "验证通过!", //通过
'ERROR_TITLE': "非常抱歉，这出错了...", //拦截
'CHECK_N': "验证未通过", //准备唤醒二次验证
'OVERLAY_INFORM': "经检测你当前操作环境存在风险，请输入验证码", //二次验证
'TIPS_TITLE': "验证码错误，请重新输入" //验证码输错时的提示
});
require(['javaScript/login.js'])
</script>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment