账户管理页面
Caps
6 years ago
parent
f7b69ae7fa
commit
09715125ac
@ -1,149 +1,144 @@
|
||||
<template>
|
||||
<div id="app" class="index" style="width: 100%;height: 100%;text-align: center;">
|
||||
<div class="center">
|
||||
<div style="height: 110px;">
|
||||
<!-- <img src="../../static/img/logo-title.png" style="width: 128px;height: 35px;margin-bottom: 8px;" mode="aspectFit"/>-->
|
||||
<h1 class="ks-font-color" style="font-size: 30px;">门店拓客</h1>
|
||||
</div>
|
||||
<div id="app" class="index" style="width: 100%;height: 100%;text-align: center;">
|
||||
<div class="center">
|
||||
<div style="height: 110px;">
|
||||
<!-- <img src="../../static/img/logo-title.png" style="width: 128px;height: 35px;margin-bottom: 8px;" mode="aspectFit"/>-->
|
||||
<h1 class="ks-font-color" style="font-size: 30px;">门店拓客</h1>
|
||||
</div>
|
||||
|
||||
<Card >
|
||||
<div style="text-align:center">
|
||||
<Form ref="formInline" :model="formInline" :rules="ruleInline">
|
||||
<FormItem prop="user">
|
||||
<i-input type="text" size="large" v-model="formInline.user" placeholder="Username" @on-focus="inputFocus">
|
||||
<Icon type="ios-person-outline" slot="prepend"></Icon>
|
||||
</i-input>
|
||||
<p v-if="showPromptUser" class="font-prompt">{{loginPrompt}}</p>
|
||||
</FormItem>
|
||||
<FormItem prop="password">
|
||||
<i-input type="password" size="large" v-model="formInline.password" placeholder="Password" @on-focus="inputFocus">
|
||||
<Icon type="ios-lock-outline" slot="prepend"></Icon>
|
||||
</i-input>
|
||||
<p v-if="showPrompt" class="font-prompt">{{loginPrompt}}</p>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button size="large" type="primary" :long="true" @click="handleSubmit">登录</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
</Card>
|
||||
<Card>
|
||||
<div style="text-align:center">
|
||||
<Form ref="formInline" :model="formInline" :rules="ruleInline">
|
||||
<FormItem prop="user">
|
||||
<i-input type="text" size="large" v-model="formInline.user" placeholder="Username"
|
||||
@on-focus="inputFocus">
|
||||
<Icon type="ios-person-outline" slot="prepend"></Icon>
|
||||
</i-input>
|
||||
<p v-if="showPromptUser" class="font-prompt">{{loginPrompt}}</p>
|
||||
</FormItem>
|
||||
<FormItem prop="password">
|
||||
<i-input type="password" size="large" v-model="formInline.password" placeholder="Password"
|
||||
@on-focus="inputFocus">
|
||||
<Icon type="ios-lock-outline" slot="prepend"></Icon>
|
||||
</i-input>
|
||||
<p v-if="showPrompt" class="font-prompt">{{loginPrompt}}</p>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button size="large" type="primary" :long="true" @click="handleSubmit">登录</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
<div class="flex-row-center reserve-style">
|
||||
<p>©上海奇硕网络科技有限公司 │ 沪ICP备05013116号-2</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-row-center reserve-style">
|
||||
<p>©上海奇硕网络科技有限公司 │ 沪ICP备05013116号-2</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import http from '../services/login/LoginService'
|
||||
import LoginService from '../services/login/LoginService'
|
||||
|
||||
export default {
|
||||
name: 'Login',
|
||||
data() {
|
||||
return {
|
||||
formInline: {
|
||||
user: '',
|
||||
password: ''
|
||||
},
|
||||
ruleInline: {
|
||||
user: [
|
||||
{required: true, message: '请输入用户名', trigger: 'blur'}
|
||||
],
|
||||
password: [
|
||||
{required: true, message: '请输入密码', trigger: 'blur'},
|
||||
export default {
|
||||
name: 'Login',
|
||||
data() {
|
||||
return {
|
||||
formInline: {
|
||||
user: '',
|
||||
password: ''
|
||||
},
|
||||
ruleInline: {
|
||||
user: [
|
||||
{required: true, message: '请输入用户名', trigger: 'blur'}
|
||||
],
|
||||
password: [
|
||||
{required: true, message: '请输入密码', trigger: 'blur'},
|
||||
|
||||
]
|
||||
]
|
||||
},
|
||||
loginPrompt: '',
|
||||
showPrompt: false,
|
||||
showPromptUser: false
|
||||
}
|
||||
},
|
||||
loginPrompt: '',
|
||||
showPrompt: false,
|
||||
showPromptUser: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 聚焦事件
|
||||
inputFocus: function(){
|
||||
this.showPrompt = false;
|
||||
this.showPromptUser = false;
|
||||
},
|
||||
handleSubmit() {
|
||||
// let username = this.formInline.user;
|
||||
// let password = this.formInline.password;
|
||||
const that = this;
|
||||
|
||||
that.$router.push('/home');
|
||||
|
||||
methods: {
|
||||
// 聚焦事件
|
||||
inputFocus: function () {
|
||||
this.showPrompt = false;
|
||||
this.showPromptUser = false;
|
||||
},
|
||||
handleSubmit() {
|
||||
const that = this;
|
||||
|
||||
// let params = {"username": username, "password": password, "rememberMe": false};
|
||||
// http.login(params, function (res) {
|
||||
// let data = res.data;
|
||||
// if (data.results) {
|
||||
// that.showPrompt = false;
|
||||
// that.showPromptUser = false;
|
||||
// let item = data.results;
|
||||
// sessionStorage.setItem("sessionId", item.sessionId);
|
||||
// that.$Message.success('登录成功');
|
||||
//
|
||||
// that.$store.commit('LOGIN', item);
|
||||
// that.$router.push('/home');
|
||||
// } else {
|
||||
// // that.$Message.error(data.message);
|
||||
// if(data.code == "0003"){
|
||||
// that.showPrompt = true;
|
||||
// that.showPromptUser = false;
|
||||
// that.loginPrompt = data.message;
|
||||
// }else {
|
||||
// that.showPrompt = false;
|
||||
// that.showPromptUser = true;
|
||||
// that.loginPrompt = data.message;
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
}
|
||||
let login = this.formInline.user.trim();
|
||||
let password = this.formInline.password.trim();
|
||||
let request = {
|
||||
login:login,
|
||||
password:password
|
||||
};
|
||||
LoginService.login(request, function (data) {
|
||||
let code = data.data.code;
|
||||
if(code === '0000'){
|
||||
that.$router.push('/home');
|
||||
that.$Message.info("登陆成功");
|
||||
}else if(code === '0004'){
|
||||
that.$Message.info("账号不存在");
|
||||
}else if(code === '0003'){
|
||||
that.$Message.info("密码错误");
|
||||
}else if(code === '1007'){
|
||||
that.$Message.info("没有权限");
|
||||
}else {
|
||||
that.$Message.info("系统繁忙");
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.center {
|
||||
position: fixed;
|
||||
width: 350px;
|
||||
height: 300px;
|
||||
top: 42%;
|
||||
right: 10%;
|
||||
transform: translate(-150px, -130px);
|
||||
}
|
||||
.center {
|
||||
position: fixed;
|
||||
width: 350px;
|
||||
height: 300px;
|
||||
top: 42%;
|
||||
right: 10%;
|
||||
transform: translate(-150px, -130px);
|
||||
}
|
||||
|
||||
.ivu-card-body {
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.ivu-card-body {
|
||||
padding: 22px;
|
||||
}
|
||||
.index {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #fff;
|
||||
background-image: url(http://img.kiisoo.com/gds_login_bg.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.index {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #fff;
|
||||
background-image: url(http://img.kiisoo.com/gds_login_bg.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.font-prompt{
|
||||
color: #FF6633;
|
||||
text-align: left;
|
||||
}
|
||||
.reserve-style{
|
||||
background: #edf5fd;
|
||||
height: 44px;
|
||||
font-size: 11px;
|
||||
color: #596274;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.font-prompt {
|
||||
color: #FF6633;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.reserve-style {
|
||||
background: #edf5fd;
|
||||
height: 44px;
|
||||
font-size: 11px;
|
||||
color: #596274;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue