You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

500 lines
19 KiB
HTML

5 years ago
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>登陆页</title>
<link href="__CSS__/ssg/common.css" rel="stylesheet" type="text/css">
<link href="__CSS__/swiper.min.css" rel="stylesheet" type="text/css">
<script src="__JS__/ssg/flexible.min.js" type="text/javascript"></script>
</head>
<style>
.login-page{
padding-bottom: .4rem;min-height: 100vh;
}
.login-page .header-img{
width: 100%;text-align: center;padding-top: .55rem;
}
.login-page .header-img img{
width:6.7rem;height: 5.35rem;
}
</style>
<style>
.login-page .loginbox {
width: 6.3rem;
height: 6.34rem;
background-color: #fff;
border-radius: .32rem;
margin: .6rem auto 0;
}
.login-page .loginbox .title {
display: flex;
height: 1rem;
width: 100%;
justify-content: space-between;
align-items: center;
}
.login-page .loginbox .title img,
.login-page .loginbox .titleright {
width: .4rem;
height: .4rem;
}
.login-page .loginbox .title img {
padding-left: .22rem;
}
.login-page .loginbox .titleright {
padding-right: .22rem;
}
.login-page .loginbox .title div {
font-size: .4rem;
color: #292929;
}
.login-page .loginbox .formitem {
display: flex;
height: .8rem;
width: 5rem;
margin: auto;
;
justify-content: flex-start;
align-items: center;
border-bottom: 1px solid #292929;
margin: .3rem auto 0;
}
.login-page .loginbox .formitem img {
width: .4rem;
height: .4rem;
margin-right: .1rem;
}
.login-page .loginbox .formitem input {
border: 0px;
height: .8rem;
font-size: .28rem;
text-align: left;
width: 4.5rem;
}
.login-page .loginbox .verify-item{
border: 0px;
}
.login-page .loginbox .verify-item .formitem{
margin-right: .2rem;margin-top: 0px;width: 3.5rem;
}
.login-page .loginbox .verify-item .formitem input{
width:2rem;
}
.login-page .loginbox .verify-item .verify-img{
cursor:pointer;width:1.5rem;height: .7rem;margin-right:0px;
}
.login-page .loginbox .login-btn-group{
display: flex;width:100%;margin:.22rem auto 0;justify-content:center;align-items:center;font-size: .32rem;text-align: center;line-height:1.1rem;color: #fff;
}
.login-page .loginbox .login-btn-group div{
width: 2.9rem;height: 1.4rem;
}
.login-page .loginbox .login-footer{
display: flex;width:100%;justify-content:center;align-items:center;
}
.login-page .loginbox .login-footer img{
width: .3rem;height: .3rem;
}
.login-page .loginbox .login-footer .chatqq{
font-size: .24rem;color:#21B1EB;margin-left: .1rem;
}
.login-page .loginbox .login-btn-group .login-btn-big{
width: 5.6rem;height: 1.4rem;
}
.login-page .loginbox .phonecodebtn{
width:1.8rem;height: .6rem;color: white;background-color:#21B1EB;border-radius: .3rem;line-height: .6rem;font-size: .24rem;text-align: center;
}
.login-page .loginbox .reg-footer{
display: flex;width:100%;justify-content:center;align-items:center;font-size: .24rem;
}
.login-page .loginbox .reg-change{
display: flex;align-items:center;margin-left: .25rem;
}
.login-page .loginbox .reg-change img{
width: .3rem;height: .3rem;
}
.login-page .loginbox .reg-change div{
color:#21B1EB;margin-left: .1rem;
}
</style>
<body>
<div class="login-page" style="background: url('__IMG__/ssg/login/bg.png') no-repeat top center/100% 100%;">
<div class="header-img">
<img src="__IMG__/ssg/home/hader.png">
</div>
<input type="hidden" value="{$promote_id}" id="promote_id" name="promote_id"/>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-no-swiping">
<!--登陆-->
<div class="loginbox">
<div class="title">
<img class="back" src="__IMG__/ssg/login/back.png" >
<div>登陆</div>
<div class="titleright"></div>
</div>
<div class="formitem" style="margin-top: 0px;">
<img src="__IMG__/ssg/login/user.png">
<input id="userAccount" type="text" placeholder="请输入用户名" value="">
</div>
<div class="formitem">
<img src="__IMG__/ssg/login/password.png">
<input id="password" type="password" placeholder="请输入密码" value="">
</div>
<div class="formitem verify-item">
<div class="formitem">
<img src="__IMG__/ssg/login/code.png">
<input id="userCode" type="text" placeholder="请输入验证码" value="">
</div>
<img class="verify-img" id="verifyCode" onclick="GetVerityCode()" src="/mobile.php?s=/Ssg/verify.html">
</div>
<!---按钮-->
<div class="login-btn-group">
<div id="loginbtn" style="background: url('__IMG__/ssg/login/bottonbg.png') no-repeat top center/cover;">
登陆
</div>
<div class="gophonreg" style="background: url('__IMG__/ssg/login/bottonbg.png') no-repeat top center/cover;">
注册
</div>
</div>
<div class="login-footer">
<img src="__IMG__/ssg/login/kf.png">
<div class="chatqq">
联系客服
</div>
</div>
</div>
</div>
<div class="swiper-slide swiper-no-swiping">
<!--手机注册-->
<div class="loginbox">
<div class="title">
<img class="gologin" src="__IMG__/ssg/login/back.png">
<div>手机注册</div>
<div class="titleright"></div>
</div>
<div class="formitem" style="margin-top: 0px;">
<img src="__IMG__/ssg/login/phone.png">
<input id="phoneval" type="text" placeholder="请输入手机号" value="">
</div>
<div class="formitem">
<img src="__IMG__/ssg/login/password.png">
<input id="phonepassword" type="password" placeholder="请输入6-12位自字母组合密码" value="">
</div>
<div class="formitem" style="border: 0px;">
<div class="formitem" style="margin-right: .2rem;margin-top: 0px;width: 3.5rem;">
<img src="__IMG__/ssg/login/code.png">
<input id="phonecode" type="text" placeholder="请输入短信验证码" value="" style="width:2.5rem;">
</div>
<div id="getPhoneCode" class="phonecodebtn">
获取验证码
</div>
</div>
<!---按钮-->
<div id="phonereg" class="login-btn-group">
<div class="login-btn-big" style="background: url('__IMG__/ssg/login/bigbuttonbg.png') no-repeat top center/cover;">
立即注册
</div>
</div>
<div class="reg-footer">
<div>注册即表示同意<a href="{:U('News/protocol')}" style="color:#3CC2EF">《用户协议》</a></div>
<div class="reg-change">
<img src="__IMG__/ssg/login/change.png">
<div class="gouserreg">
切换普通注册
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide swiper-no-swiping">
<!--普通注册-->
<div class="loginbox">
<div class="title">
<img class="gologin" src="__IMG__/ssg/login/back.png">
<div>普通注册</div>
<div class="titleright"></div>
</div>
<div class="formitem" style="margin-top: 0px;">
<img src="__IMG__/ssg/login/user.png">
<input id="regaccount" type="text" placeholder="请输入账号(6-12位字母数字组合)" value="">
</div>
<div class="formitem">
<img src="__IMG__/ssg/login/password.png">
<input id="regpassword" type="password" placeholder="请输入6-12位自字母组合密码" value="">
</div>
<div class="formitem">
<img src="__IMG__/ssg/login/password.png">
<input id="regpassword2" type="password" placeholder="请再次确认输入密码" value="">
</div>
<!---按钮-->
<div class="login-btn-group">
<div id="userreg"
style="background: url('__IMG__/ssg/login/bigbuttonbg.png') no-repeat top center/cover;width: 5.6rem;height: 1.4rem;">
立即注册
</div>
</div>
<div style="display: flex;width:100%;justify-content:center;align-items:center;font-size: .24rem;">
<div>注册即表示同意 <a href="{:U('News/protocol')}" style="color:#3CC2EF">《用户协议》</a></div>
<div style="display: flex;align-items:center;margin-left: .25rem;">
<img src="__IMG__/ssg/login/change.png" style="width: .3rem;height: .3rem;">
<div class="gophonreg" style="color:#21B1EB;margin-left: .1rem;">
切换手机注册
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="__JS__/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="__JS__/swiper.min.js" type="text/javascript"></script>
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container', {
// autoplay: true,//可选选项,自动滑动
// initialSlide :2,
noSwiping : true,
})
var loginLock = false;
function GetVerityCode() {
//刷新验证码
$("#verifyCode").attr("src", "/mobile.php?s=/Ssg/verify.html&id=" + Math.random());
}
$(".gophonreg").on("click",function() {
//去手机注册页
mySwiper.slideTo(1, 350, false);
})
$(".gouserreg").on("click",function() {
//去手机注册页
mySwiper.slideTo(2, 350, false);
})
$(".gologin").on("click",function(){
mySwiper.slideTo(0, 350, false);
})
$(".back").on("click",function(){
window.location.href='{:U("home")}';
})
$(".chatqq").on("click",function(){
window.location.href = 'mqqwpa://im/chat?chat_type=wpa&uin={$app_qq}&version=1&src_type=web&web_src=oicqzone.com';
})
//获取登录密码
//登陆
$("#loginbtn").on("click",function(){
var loginName = $("#userAccount").val();
var loginPass = $("#password").val();
var userCode = $("#userCode").val();
var promoteId = $("#promote_id").val();
if (loginName == "") {
alert("账号不能为空");
return false;
}
if (loginPass == "") {
alert("密码不能为空");
return false;
}
if (userCode == "") {
alert("验证码不能为空");
return false;
}
if (promoteId == "") {
alert("推广员ID不能为空");
return false;
}
jQuery.ajax({
type: 'POST',
url: 'mobile.php?s=/Ssg/do_login.html',
data: {
'Account': loginName,
'Password': (loginPass),
'VerifyCode': userCode,
'promote_id': promoteId,
},
dataType: 'JSON',
xhrFields: {
withCredentials: true
},
async: false,
cache: false,
success: function (result) {
if (result.ErrorCode != 0) {
alert(result.ResultMsg);
GetVerityCode();
} else {
window.location.href = "mobile.php?s=/Ssg/index.html"
}
}
});
})
//倒计时
var codeflag = true;
//手机注册按钮
$("#phonereg").on("click",function(){
var phone = $('#phoneval').val();
var phonepassword = $('#phonepassword').val();
var phonecode = $('#phonecode').val();
var promoteId = $("#promote_id").val();
if(!checkPhone(phone)){
return false;
}
if(phonepassword.length < 6 || phonepassword.length > 15){
alert('密码长度6-15个字符');
return false;
}
var pwdRegex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z]).{8,30}');
if (!pwdRegex.test(phonepassword)) {
alert("您的密码复杂度太低(密码中必须包含字母、数字)!");
return false;
}
if(phonecode == ''){
alert('请输入验证码');
return false;
}
$.ajax({
type: 'POST',
url: 'mobile.php?s=/Ssg/phoneRegister.html',
dataType: 'JSON',
data:{
account:phone,
password:phonepassword,
code:phonecode,
promote_id:promoteId
},
success: function (result) {
console.log(result)
if (result.return_code == 'fail') {
alert(result.return_msg);
} else {
//成功
alert("注册并登陆成功");
window.location.href = "mobile.php?s=/Ssg/index.html"
}
}
})
})
//获取手机验证码
$("#getPhoneCode").on("click",function(){
//获取手机
var phone = $('#phoneval').val();
if(codeflag){
if(checkPhone(phone)){
//获取验证码
$.ajax({
type: 'GET',
url: 'mobile.php?s=/Ssg/sendPhoneCode.html&phone='+phone,
dataType: 'JSON',
success: function (result) {
console.log(result)
if (result.status != 1) {
alert(result.msg);
} else {
countDown();
}
}
})
}
}
})
var i = 60;
function countDown() {
codeflag = false;
i = i - 1;
$("#getPhoneCode").html(i+"秒后重发").css("backgroundColor","#A9A9A9");
if (i == 0) {
$("#getPhoneCode").html("重新发送").css("backgroundColor","#21B1EB");
codeflag = true;
i = 60;
return;
}
setTimeout('countDown()',1000);
}
//普通注册
$("#userreg").on("click",function(){
var account = $('#regaccount').val();
var regpassword = $('#regpassword').val();
var regpassword2 = $("#regpassword2").val();
var promoteId = $("#promote_id").val();
var pwdRegex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z])');
if(account.length < 6 || account.length > 12){
alert('账号必须是6-12位字母数字组合');
return false;
}
if (!pwdRegex.test(account)) {
alert("账号必须是6-12位字母数字组合");
return false;
}
if(regpassword.length < 6 || regpassword.length > 15){
alert('密码长度6-15个字符');
return false;
}
if (!pwdRegex.test(regpassword)) {
alert("您的密码复杂度太低(密码中必须包含字母、数字)!");
return false;
}
if(regpassword != regpassword2){
alert('两次密码不一样');
return false;
}
$.ajax({
type: 'POST',
url: 'mobile.php?s=/Ssg/userRegister.html',
dataType: 'JSON',
data:{
account:account,
password:regpassword,
promote_id:promoteId
},
success: function (result) {
console.log(result)
if (result.return_code == 'fail') {
alert(result.return_msg);
} else {
//成功
alert("注册并登陆成功");
window.location.href = "mobile.php?s=/Ssg/index.html"
}
}
})
})
//验证手机
function checkPhone(phone){
if(!(/^1[3456789]\d{9}$/.test(phone))){
alert("手机号码有误,请重填");
return false;
} else{
return true;
}
}
</script>
</html>