<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="utf-8" />
|
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
|
<meta http-equiv="X-UA-Compatible" content="chrome=1"/>
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
<title name="index">导购后台 - 登录</title>
|
<link rel="stylesheet" type="text/css" href="css/doui.min.css"/>
|
<script src="js/doui.min.js" type="text/javascript" charset="utf-8"></script>
|
<!--自设样式-->
|
<style type="text/css">
|
/*背景最外层框*/
|
.this-bg{ background-image: url(img/loginbg.jpg); background-size: 100% 100%; }
|
/*输入组件外框*/
|
.this-form{ width: 250px; height: 50px; padding: 10px; margin: 10px 0; border: 2px solid white; border-radius: 10px; }
|
/*登录按钮*/
|
.this-sub{ width: 250px; height: 50px; padding: 10px; margin: 10px 0; border-radius: 10px; background-color: white; color: #2C2B09; cursor: pointer; }
|
</style>
|
<script type="text/javascript">
|
doui.importLoad({
|
importArray: [
|
"font/iconfont.css",
|
"js/vue.min.js",
|
"js/requestHost.js"
|
]
|
});
|
</script>
|
</head>
|
|
<body style="display:none;">
|
<div id="allwai" class="winSizeBox fontPC this-bg">
|
|
<div class="main fboxCol Xcenter Ycenter">
|
|
<!--系统名称说明-->
|
<div class="font30 font-white font-weight">返利券后台 - 登录</div>
|
|
<!--登录表单相关-->
|
<div class="fboxCol Xstart Ycenter" style="margin-top:50px;">
|
|
<!--用户名输入-->
|
<div class="this-form fboxRow Xstart Ycenter">
|
<div class="font22 font-white"><i class="fi fi-user"></i></div>
|
<div class="inputShell flex1">
|
<input class="flex1 font16 font-white" type="text" placeholder="输入用户名" v-model="inputThis.username" v-on:keyup.enter="inputThis.subClick()"/>
|
</div>
|
</div>
|
|
<!--密码输入-->
|
<div class="this-form fboxRow Xstart Ycenter">
|
<div class="font22 font-white"><i class="fi fi-lock-ok"></i></div>
|
<div class="inputShell flex1">
|
<input class="font16 font-white" type="password" placeholder="输入密码" v-model="inputThis.pwd" v-on:keyup.enter="inputThis.subClick()"/>
|
</div>
|
</div>
|
|
<!--验证码输入-->
|
<div class="this-form fboxRow Xstart Ycenter" style="padding:5px;">
|
<img class="border-round cursor-pointer click-scale" style="width:80px; height:35px;" v-bind:src="inputThis.yzm_imgSrc" v-on:click="inputThis.imgGet()"/>
|
<div class="inputShell flex1" style="margin-left:10px;">
|
<input class="font16 font-white" type="text" placeholder="输入验证码" v-model="inputThis.yzm" v-on:keyup.enter="inputThis.subClick()"/>
|
</div>
|
</div>
|
|
<!--登录按钮-->
|
<div class="this-sub fboxRow Xcenter Ycenter click-scale" v-on:click="inputThis.subClick()">
|
<div class="font20 font-weight">登录</div>
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
</body
|
|
</html>
|
|
|
<script type="text/javascript">
|
|
// ================================================================================= 页面数据
|
// vue实例化
|
var vm = null;
|
doui.onReady({
|
success: function ()
|
{
|
vm = new Vue({
|
el: "#allwai",
|
// 数据
|
data: {
|
// -------------------------------------------- 输入组件区域
|
inputThis: {
|
username: "", // 用户名
|
pwd: "", // 密码
|
yzm: "", // 验证码
|
yzm_imgSrc: "", // 验证码图片地址
|
// 获取验证码图片地址
|
imgGet: function ()
|
{
|
// 获取最新时间戳
|
var time = new Date().getTime();
|
vm.inputThis.yzm_imgSrc = gethttp() + "/admin/new/api/validate/imgcode?temp=" + time;
|
},
|
// 登录点击
|
subClick: function ()
|
{
|
// 输入信息验证
|
if (!vm.inputThis.username || !vm.inputThis.pwd || !vm.inputThis.yzm)
|
{
|
doui.showToast({ content: "输入不完整" });
|
return false;
|
}
|
// 发送请求
|
doui.showLoading({ content: "登录中" });
|
doui.request({
|
type: "jsonp",
|
url: gethttp() + "/admin/new/api/login/adminLoginJP",
|
data: {
|
username: vm.inputThis.username, // 用户名输入
|
pwd: vm.inputThis.pwd, // 密码输入
|
code: vm.inputThis.yzm, // 验证码输入
|
},
|
fail: function (res) { doui.showToast({ content: res.msg }); },
|
success: function (res)
|
{
|
if (res.code != 0) { doui.hideLoading(); doui.showToast(res.msg); }
|
else
|
{
|
// 操作人员信息
|
var user = {
|
id: res.data.info.id,
|
nickName: res.data.info.name,
|
userName: res.data.info.account,
|
password: "",
|
};
|
// 密码加密
|
doui.Aes({
|
type: "en",
|
str: res.data.info.pwd,
|
success: function (aesThis) { user.password = aesThis; }
|
});
|
|
// 本地保存登录输入（永久保存，以后都不用输入了）
|
doui.localStorageSet({
|
key: "inputInfo",
|
data: user,
|
});
|
|
// 保存cookie
|
doui.cookieSet({
|
key: "adminInfo",
|
data: res.data.info,
|
hour: 8
|
});
|
|
// 取消弹框
|
doui.hideLoading();
|
// 跳到使用页
|
doui.pageToUrl({ url: "home.html" });
|
}
|
}
|
});
|
|
},
|
},
|
},
|
});
|
|
|
// 获取输入记录
|
doui.localStorageGet({
|
key: "inputInfo",
|
success: function (res)
|
{
|
// 用户名获取
|
vm.inputThis.username = res.userName;
|
// 密码解密获取
|
doui.Aes({
|
type: "de",
|
str: res.password,
|
success: function (pass) { vm.inputThis.pwd = pass; }
|
});
|
}
|
});
|
|
|
// 验证码图片
|
vm.inputThis.imgGet();
|
|
|
document.body.style.display = "block";
|
}
|
});
|
|
</script>
|
