<template>
|
<div class="page" data-name="login-screen">
|
<div class="top1000">
|
<input type="text" name="username" />
|
<input type="password" name="password" />
|
</div>
|
<div class="page-content" id="vLoginContent">
|
<h3 class="login-title center">蓄电池智能远程运维系统</h3>
|
<!-- 验证码登陆面板 -->
|
<div class="hdw-dialog" v-show="verify.isshow" id="lVerify-dialog">
|
<div class="hdw-dialog-container">
|
<div class="hdw-dialog-bg" v-on:click="hideVertify"></div>
|
<div class="hdw-dialog-content hdw-dialog-width270-125">
|
<div class="hdw-dialog-content-container">
|
<div id="lVerify" ></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="login-form">
|
<div class="form-item">
|
<label for="username" class="label text-color-white">用户名：</label>
|
<div class="form-item-block">
|
<div class="form-item-input">
|
<input type="text" name="username" v-model="userinfo.name" placeholder="请输入用户名">
|
</div>
|
<span class="icon f7-icons color-blue">person</span>
|
</div>
|
</div>
|
<div class="form-item">
|
<label for="username" class="label text-color-white">密码：</label>
|
<div class="form-item-block">
|
<div class="form-item-input">
|
<input type="password" name="password" v-model="userinfo.pwd" placeholder="请输入密码">
|
</div>
|
<span class="icon f7-icons color-blue">lock_fill</span>
|
</div>
|
</div>
|
<div class="form-item" style="font-size: 16px;">
|
<input type="checkbox" name="memory" value="1" v-model="picked" /><span class="text-color-white">记住密码</span>
|
<div class="msg" v-show="msginfo.isshow">${msginfo.msg}</div>
|
</div>
|
<div class="form-item" style="font-size: 16px;">
|
<button class="button button-fill color-white text-color-black" v-on:click="showVertify" style="height: 40px;font-weight: bold;">登陆</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<style scoped>
|
.top1000 {
|
position: fixed;
|
top: -1000px;
|
}
|
.page-content {
|
padding: 16px;
|
background-image: url('./my/images/tieta.jpg');
|
background-size: 100% 100%;
|
}
|
.login-title {
|
color: #fff;
|
}
|
.form-item {
|
margin-bottom: 12px;
|
}
|
.form-item .label{
|
font-weight: bold;
|
}
|
.form-item-block {
|
position: relative;
|
margin-top: 8px;
|
padding: 12px 4px;
|
background-color: #FFFFFF;
|
border-radius: 8px;
|
}
|
.form-item-block .icon {
|
font-size: 20px;
|
}
|
.form-item-block .form-item-input {
|
position: absolute;
|
left: 32px;
|
right: 0;
|
height: 25px;
|
}
|
.form-item-block .form-item-input input {
|
width: 100%;
|
height: 100%;
|
}
|
.text-color-white {
|
color: #FFFFFF;
|
}
|
.button:active {
|
color: #fff;
|
background-color: gray;
|
}
|
.msg {
|
float: right;
|
margin-top: 4px;
|
font-size: 14px;
|
color: #FF0000;
|
}
|
.msg.hide {
|
display: none;
|
}
|
.msg.success {
|
color: blue;
|
}
|
.hdw-dialog {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background-color: none;
|
z-index: 9999;
|
}
|
|
.hdw-dialog.hdw-dialog-hide {
|
display: none;
|
}
|
|
.hdw-dialog .hdw-dialog-container {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
background-color: none;
|
}
|
.hdw-dialog-bg {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background-color: #000000;
|
opacity: .1;
|
z-index: 0;
|
}
|
.hdw-dialog-content {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background-color: #FFFFFF;
|
z-index: 1;
|
}
|
.hdw-dialog-content.hdw-dialog-width500-300 {
|
width: 500px;
|
height: 300px;
|
left: 50%;
|
margin-left: -250px;
|
top: 50%;
|
margin-top: -150px;
|
}
|
.hdw-dialog-content.hdw-dialog-width270-125 {
|
width: 270px;
|
height: 125px;
|
left: 50%;
|
margin-left: -135px;
|
top: 50%;
|
margin-top: -63px;
|
}
|
|
.hdw-dialog-content-container {
|
position: relative;
|
}
|
</style>
|
<script>
|
return {
|
data: function() {
|
return {
|
vContent: ''
|
}
|
},
|
methods: {
|
login: function() {
|
var self = this;
|
var vContent = this.vContent;
|
var user = vContent.userinfo.name;
|
var password = vContent.userinfo.pwd;
|
password = hex_md5(password);
|
var memory = vContent.picked?1:0;
|
// 请求后台
|
$.post(
|
"../LoginAction_login",
|
"uinf.UName="+user+"&uinf.Upassword="+password+"&uinf.UId="+memory,
|
function(data) {
|
data = eval("(" + data.result + ")");
|
console.log(data);
|
if (data.code == 0) {
|
vContent.msginfo.isshow = true;
|
vContent.msginfo.msg = data.msg;
|
} else {
|
//window.locationion.href = "index.html";
|
initAppView();
|
}
|
});
|
}
|
},
|
on: {
|
pageInit: function() {
|
var self = this;
|
// 定义vue监测
|
var vContent = this.vContent = new Vue({
|
el: '#vLoginContent',
|
delimiters: ['${', '}'],
|
data: {
|
userinfo: {
|
name: '',
|
pwd: ''
|
},
|
msginfo: {
|
isshow: false,
|
msg: '未知'
|
},
|
picked: '1',
|
verify: {
|
isshow: false
|
}
|
},
|
methods: {
|
showVertify: function() {
|
var userinfo = this.userinfo;
|
if(userinfo.name.trim() == '') {
|
this.msginfo.isshow = true;
|
this.msginfo.msg = '请输入用户名';
|
}else if(userinfo.pwd.trim() == ''){
|
this.msginfo.isshow = true;
|
this.msginfo.msg = '请输入密码';
|
}else {
|
this.verify.isshow = true;
|
initVerify();
|
}
|
|
},
|
hideVertify: function() {
|
this.verify.isshow = false;
|
}
|
},
|
watch: {
|
userinfo: {
|
handler:function(newValue, oldValue) {
|
this.msginfo.isshow = false;
|
},
|
deep: true
|
}
|
}
|
|
});
|
|
// 初始化验证
|
function initVerify() {
|
// 清空内容
|
$('#lVerify').text('');
|
// 配置拖动验证图像
|
$('#lVerify').pointsVerify({
|
defaultNum : 4, //默认的文字数量
|
checkNum : 2, //校对的文字数量
|
vSpace : 5, //间隔
|
imgName : ['verify2.jpg'],
|
imgSize : {
|
width: '270px',
|
height: '178px',
|
},
|
blockSize : {
|
width: '40px',
|
height: '40px',
|
},
|
barSize : {
|
width : '270px',
|
height : '40px',
|
},
|
ready : function() {
|
|
},
|
success : function() {
|
vContent.verify.isshow = false;
|
self.login(); // 验证用户
|
},
|
error : function() {
|
// alert('验证失败！');
|
}
|
});
|
}
|
}
|
}
|
}
|
</script>
|
