201206030/novel-plus
1
0
Fork 0
mirror of https://github.com/201206030/novel-plus.git synced 2025-07-04 16:26:40 +00:00
Code Issues Packages Releases Wiki Activity

feat: 手机端登录页面适配

Browse Source
This commit is contained in:
xiongxiaoyang
2023-05-13 15:15:42 +08:00
parent dce8a21c0d
commit dabfb9d1e8
4 changed files with 153 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
novel-front/src/main/resources/templates/mobile/user/login.html
View File

@ -5,109 +5,117 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>登录|注册</title>
<div th:include="common/css :: css"></div>
<title>登录</title>
<div th:include="mobile/common/css :: css"></div>
</head>
<body id="read" >
</div>
<body id="read">
<div style="height: 50px;line-height: 50px;text-align: center" class="layui-header header header-doc layui-bg-cyan">
<div style="float: left;margin-left: 10px">
<div style="width:10%;float: left;margin-left: 10px">
<a href="javascript:history.go(-1)">
<i style="font-size: 20px;color: #92B8B1;" class="layui-icon">&#xe65c;</i></a>
<i style="font-size: 20px;color: #fff;" class="layui-icon">&#xe65c;</i></a>
</div>
<b class="layui-icon">登录|注册</b>
<div style="float: right;margin-right: 10px"><a href="/">
<i style="font-size: 20px;color: #92B8B1;" class="layui-icon">&#xe68e;</i>
<b class="layui-icon">登录</b>
<div style="width:10%;float: right;margin-right: 10px"><a href="/">
<i style="font-size: 20px;color: #fff;" class="layui-icon">&#xe68e;</i>
</a>
</div>
</div>
<form style="height: 500px;margin-top: 50px" class="layui-form" action="">
<form lay-filter="loginForm" id="form1" style="height: 500px;padding-right: 20px" class="layui-form" action="">
<input type="hidden" id="bookIdHidden" name="bookId" th:value="${bookId}"/>
<div>
<h3 style="text-align:center; line-height:50px;margin: 20px auto" th:text="'登录'+${application.website.name}"></h3>
</div>
<div class="layui-form-item">
<label class="layui-form-label">登录名</label>
<div class="layui-input-block">
<input type="text" id="loginName" name="loginName" required lay-verify="required" placeholder="请输入登录名" autocomplete="off" class="layui-input">
<label class="layui-form-label">手机号码</label>
<div class="layui-input-inline">
<input name="txtUName" type="text" id="txtUName" placeholder="请输入手机号"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-inline">
<input id="password" type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
<input name="txtPassword" type="password" id="txtPassword" placeholder="请输入密码"
autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">如果登录名不存在，则直接注册！</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">登录|注册</button>
<input id="autoLogin" type="checkbox" title="下次自动登录">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<input type="button" value="登录" id="btnLogin" class="layui-btn" />
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<div th:replace="common/footer :: footer">
<div th:replace="mobile/common/footer :: footer">
</div>
<a name="buttom"></a>
</body>
<div th:replace="common/js :: js"></div>
<script>
$.get("/book/addVisit",{"bookId":$("#bookIdHidden").val()},function(){});
</script>
<script>
//Demo
layui.use('form', function(){
var form = layui.form;
//监听提交
form.on('submit(formDemo)', function(){
$.post("/user/loginOrRegist",{"bookId":$("#bookIdHidden").val(),"loginName":$("#loginName").val(),"password":$("#password").val()},function (data) {
if(data.code == 1 || data.code == 2){
localStorage.setItem("token",data.token);
layer.alert(data.desc);
setTimeout(function () {
var bookId = $("#bookIdHidden").val();
if(bookId){
//加入书架
window.location.href="/book/"+bookId+".html";
}else{
//我的书架
window.location.href="/book/search?token="+data.token;
}
},3000)
}else{
layer.alert(data.desc);
}
});
return false;
});
});
</script>
<script>
function toMyCollect(){
var token = localStorage.getItem("token");
if(token) {
window.location.href = "/book/search?token=" + token;
}else{
window.location.href = "/user/login.html";
}
<div th:replace="mobile/common/js :: js">
</div>
<script type="text/javascript">
$("#form1").css("height",($(window).height() - 130)+"px")
if(localStorage.getItem("autoLogin")==1){
$("#autoLogin").prop("checked",'true');
layui.form.render('checkbox','loginForm');
}else{
$("#autoLogin").removeAttr("checked");
}
$("#btnLogin").click(function () {
var username = $("#txtUName").val();
if(username.isBlank()){
layer.alert("手机号不能为空！");
return;
}
if(!username.isPhone()){
layer.alert("手机号格式不正确！");
return;
}
var password = $("#txtPassword").val();
if(password.isBlank()){
layer.alert("密码不能为空！");
return;
}
$.ajax({
type: "POST",
url: "/user/login",
data: {"username": username, "password": password},
dataType: "json",
success: function (data) {
if (data.code == 200) {
if($("#autoLogin").is(':checked')){
$.cookie('Authorization', data.data.token, { expires: 7 ,path: '/' });
localStorage.setItem("autoLogin","1");
}else {
$.cookie('Authorization', data.data.token,{ path: '/' });
localStorage.setItem("autoLogin","0");
}
var orginUrl = getSearchString("originUrl");
window.location.href = orginUrl == undefined || orginUrl.isBlank() ? "/" : orginUrl;
} else {
layer.alert(data.msg);
}
},
error: function () {
layer.alert('网络异常');
}
})
})
</script>
</html>