<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<meta name="viewport" id="viewportMeta" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
<title>登录</title>
|
<link href="css/mui.min.css" rel="stylesheet" />
|
<script>
|
var initViewport = function(height){
|
var metaEl = document.querySelector("#viewportMeta");
|
var content = "height=" + height + ",width=device-width,initial-scale=1.0,user-scalable=no";
|
metaEl.setAttribute('name', 'viewport');
|
metaEl.setAttribute('content', content);
|
}
|
var realHeight = window.innerWidth > window.innerHeight ? window.innerWidth : window.innerHeight
|
initViewport(realHeight);
|
</script>
|
<style>
|
.login_body{
|
height: 100vh;
|
width: 100vw;
|
padding: 10vh 10vw;
|
background: #245ca7;
|
color: #fff;
|
}
|
.logo{
|
text-align: center;
|
height: 18vh;
|
}
|
.logo img{
|
height: 10vh;
|
margin: auto;
|
}
|
.logo p{
|
margin-top: 1.2vh;
|
font-size: 2vh;
|
color: #FFFFFF;
|
}
|
.form{
|
margin-top: 4vh;
|
height: 40vh;
|
}
|
.form input{
|
padding: 2vh 0 2vh 12vw;
|
height: 6vh;
|
font-size: 2.4vh;
|
color: #333;
|
border-radius: 6px;
|
border: 0px;
|
}
|
.form .yhm input{
|
background: url(./images/ico_yhm.png) no-repeat 2vw center #fff;
|
background-size: 3.2vh auto;
|
margin-bottom: 2vh;
|
}
|
.form .mm input{
|
background: url(./images/ico_mm.png) no-repeat 2vw center #fff;
|
background-size: 3.2vh auto;
|
margin-bottom: 1vh;
|
}
|
.form input:focus,input:hover{
|
box-shadow: none!important;
|
border-bottom: unset;
|
}
|
.mui-input-row .mui-input-password~.mui-icon-eye{
|
font-size: 3.2vh;
|
top: 1.4vh;
|
}
|
.checkbox{
|
height: 4vh;
|
}
|
.checkbox label{
|
font-size: 1.8vh;
|
}
|
.checkbox input{
|
height: 2.2vh;
|
width: 2.2vh;
|
vertical-align: middle;
|
}
|
.form button{
|
width: 100%;
|
margin-top: 3vh;
|
height: 7vh;
|
color: #245ca7;
|
padding: 1.5vh 0;
|
font-size: 3vh;
|
font-weight: 700;
|
border-radius: 6px;
|
margin-bottom: 2vh;
|
}
|
.form button:hover{
|
margin-top: 3vh;
|
height: 7vh;
|
}
|
.xieyi{
|
color: #FFFFFF;
|
font-size: 1.8vh;
|
color: #bbb;
|
}
|
.login_fwq{
|
margin-top: 2vh;
|
height: 16vh;
|
text-align: center;
|
}
|
.login_fwq button{
|
background: #668dc1;
|
color: #eee;
|
border: 0px;
|
border-radius: 3px;
|
height: 6vh;
|
line-height: 6vh;
|
padding: 0 10vw;
|
font-size: 2.2vh;
|
}
|
.login_fwq p{
|
margin: 1vh;
|
font-size: 2vh;
|
color: #ddd;
|
}
|
/*弹出*/
|
.mark{
|
background:rgba(0,0,0,.8);
|
position: fixed;
|
left: 0px;
|
top: 0px;
|
right: 0px;
|
bottom: 0px;
|
z-index: 10000;
|
display: flex;
|
}
|
.mark_layer{
|
align-self: center;
|
background: #fff;
|
width: 75%;
|
margin: auto;
|
border-radius: 5px;
|
overflow:hidden;
|
}
|
.mark_layer .title{
|
background: #245ca7;
|
height: 40px;
|
line-height: 40px;
|
padding: 0 15px;
|
box-sizing: border-box;
|
color: #fff;
|
}
|
.mark_layer .title a{
|
color: #fff;
|
font-weight: normal;
|
line-height: 40px;
|
float: right;
|
font-size: 25px;
|
}
|
.mark_layer .mark_btn button{
|
background: #ff6355;
|
color: #fff;
|
font-size: 18px;
|
width: 100%;
|
height: 45px;
|
}
|
.mark_layer .mark_btn button:hover{
|
opacity: .8;
|
}
|
.fwq_body{
|
display: block;
|
padding: 10px 20px;
|
box-sizing: border-box;
|
}
|
.fwq_body input{
|
border: 0px;
|
border-bottom: 1px #eee solid;
|
width: 100%;
|
height: 44px;
|
line-height: 44px;
|
box-shadow: none;
|
}
|
.fwq_body input:focus,input:hover{
|
box-shadow: none!important;
|
border-bottom: 1px #ff6355 solid;
|
}
|
.mx-3{
|
margin : 0.5rem!important;
|
}
|
</style>
|
</head>
|
<body>
|
<div class="mui-content">
|
<!--主体-->
|
<div class="login_body">
|
<!--logo-->
|
<div class="logo">
|
<img src="./images/logo.png">
|
<p>端牢中国饭碗，共筑全国粮安</p>
|
</div>
|
<!--表单-->
|
<div class="form">
|
<div class="yhm">
|
<input id="username" type="text" class="form-control" placeholder="请输入用户名">
|
</div>
|
<div class="mm mui-input-row">
|
<input id="password" type="password" class="form-control mui-input-password" placeholder="请输入密码">
|
</div>
|
<div class="checkbox">
|
<label>
|
<input type="checkbox" id="checkbox">
|
记住用户名密码
|
</label>
|
</div>
|
<button onclick="login()">登 录</button>
|
<div class="checkbox">
|
<label>
|
<input type="checkbox" id="box">
|
请您阅读并同意
|
</label>
|
<a class="xieyi" onclick="toPrivacy()"> <风正致远粮库协议></a>
|
</div>
|
</div>
|
<!--服务器配置-->
|
<div class="login_fwq">
|
<button onclick="openSetting()">服务器配置</button>
|
<!-- 正式版本 -->
|
<p>服务器IP：<span id="serveIp"></span></p>
|
<p>服务器端口号：<span id="servePort"></span></p>
|
<!-- 义乌版本 -->
|
<!-- <p>服务器IP：<span id="serveIp">218.75.98.90</span></p>
|
<p>服务器端口号：<span id="servePort">8888</span></p> -->
|
</div>
|
</div>
|
<!--弹出-->
|
<div class="mark" id="mark" style="display: none;">
|
<div class="mark_layer">
|
<div class="title">
|
<span>设置IP与端口号</span>
|
<a onclick="closeSetting()" class="close">×</a>
|
</div>
|
<div class="fwq_body">
|
<!-- 正式版本 -->
|
<input type="text" id="ip" value="" placeholder="请输入IP地址">
|
<input type="text" id="port" value="" placeholder="请输入端口号">
|
<!-- 义乌版本 -->
|
<!-- <input type="text" id="ip" value="218.75.98.90" placeholder="请输入IP地址">
|
<input type="text" id="port" value="8888" placeholder="请输入端口号"> -->
|
</div>
|
<div class="mark_btn mx-3 mb-3">
|
<button class="btn btn-block" onclick="closeSetting()">确定</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</body>
|
<script src="./js/mui.min.js"></script>
|
<script src="./js/jquery.min.js"></script>
|
<script type="text/javascript" charset="utf-8">
|
mui.init();
|
var data = {
|
"interfaceId": "5001",
|
"sign": "10001",
|
"outId": "10001",
|
"reqDateTime": new Date(),
|
"data": {
|
"username": '',
|
"password": ''
|
}
|
};
|
|
mui.plusReady(function() {
|
var user = JSON.parse(localStorage.getItem('user'));
|
if (user) {
|
if (user.ip) {
|
$("#ip").val(user.ip);
|
$("#serveIp").html(user.ip);
|
}
|
|
if (user.port) {
|
$("#port").val(user.port);
|
$("#servePort").html(user.port);
|
}
|
|
if (user.check == 1) {
|
$("input[id='checkbox']").attr("checked", true);
|
$("#username").val(user.username);
|
$("#password").val(user.password);
|
}
|
}
|
});
|
//弹出服务器配置窗口
|
function openSetting() {
|
$('#mark').css('display', 'flex');
|
}
|
//关闭弹窗并赋值
|
function closeSetting() {
|
$("#serveIp").html(mui("#ip")[0].value);
|
$("#servePort").html(mui("#port")[0].value);
|
$("#mark").css('display', 'none');
|
}
|
//登陆
|
function login() {
|
|
//ios端判断协议是否选中
|
if (!$("input[id='box']").prop('checked')) {
|
mui.alert("请阅读协议并同意", '提示', ["确定"], function() {}, "div");
|
return;
|
}
|
|
//验证账户密码及ip端口
|
var username = mui("#username")[0].value;
|
if (username == '') {
|
mui.alert("请输入用户名！", '提示', ["确定"], function() {}, "div");
|
return;
|
}
|
|
var password = mui("#password")[0].value;
|
if (password == '') {
|
mui.alert("请输入密码！", '提示', ["确定"], function() {}, "div");
|
return;
|
}
|
|
var serveIp = mui("#ip")[0].value;
|
var servePort = mui("#port")[0].value;
|
if (serveIp == '' || servePort == '') {
|
mui.alert("请配置服务器ip和端口！", '提示', ["确定"], function() {}, "div");
|
return;
|
}
|
|
//转圈等待框
|
var wt = plus.nativeUI.showWaiting();
|
|
//判断是否选中记住用户名和密码，0为未选中，1为选中
|
var check = "0";
|
if ($("input[id='checkbox']").prop('checked')) {
|
check = "1";
|
}
|
//拼接url
|
var url = "http://" + serveIp + ":" + servePort; //正式版本
|
// var url = "http://" + serveIp + ":" + servePort + "/zxlk"; //义乌版本
|
|
//设置请求参
|
data.data.username = username;
|
data.data.password = password;
|
//发送登陆请求
|
mui.ajax(url + "/api-phone/login", {
|
type: "POST",
|
dataType: "json",
|
crossDomain: true,
|
contentType: "application/json;charset=utf-8",
|
data: JSON.stringify(data),
|
success: function(result) {
|
wt.close();
|
//登录成功则进入主页面
|
if (result.code == "0000") {
|
//将登陆信息和ip信息保存
|
var regInfo = {
|
"username": username,
|
"password": password,
|
"ip": serveIp,
|
"port": servePort,
|
"check": check,
|
"url": url,
|
"cname": result.data.cname,
|
"tokenAuth": result.data.tokenAuth
|
};
|
localStorage.setItem('user', JSON.stringify(regInfo));
|
|
//跳转到主页面
|
mui.openWindow({
|
url: 'index.html',
|
id: 'index'
|
})
|
} else {
|
mui.alert(result.msg, '提示', ["确定"], function() {}, "div");
|
}
|
},
|
error: function() {
|
wt.close();
|
mui.alert('系统繁忙，请重新登录！', '提示', ["确定"], function() {}, "div");
|
}
|
})
|
}
|
|
function toPrivacy() {
|
//跳转到隐私页面
|
mui.openWindow({
|
url: 'privacy.html',
|
id: 'privacy'
|
})
|
}
|
</script>
|
</html>
|
