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

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

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