<template>
|
<div class="login-view">
|
<div class="login-wrap">
|
<div class="login-account">
|
<div class="account-logo">
|
<img src="http://115.29.185.26:5101/userphoto?login=sa" />
|
</div>
|
<article class="ivu-typography ivu-text-center ivu-mt">
|
<h1 class="ivu-typography">Vue Template<!----></h1>
|
<div class="ivu-typography">
|
基于 Vue3.0、VueRouter 和ViewUIPlus的管理系统模板演示
|
<!---->
|
</div>
|
</article>
|
<Form
|
class="account-form"
|
:model="form"
|
:rules="rules"
|
label-position="top"
|
ref="refFormInline"
|
>
|
<div class="ivu-login">
|
<FormItem prop="user">
|
<Input
|
type="text"
|
v-model="form.user"
|
size="large"
|
prefix="ios-person-outline"
|
>
|
</Input>
|
</FormItem>
|
<FormItem prop="password">
|
<Input
|
type="password"
|
v-model="form.password"
|
size="large"
|
prefix="ios-lock-outline"
|
>
|
</Input>
|
</FormItem>
|
<FormItem>
|
<Button type="primary" @click="onSignIn" size="large" long
|
>登录</Button
|
>
|
</FormItem>
|
</div>
|
</Form>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { ref } from "vue";
|
import { login } from "@/api/test";
|
import { Base64 } from "js-base64";
|
import { showError, showSuccess, setToken } from "@/libs/util";
|
export default {
|
name: "LoginView",
|
data() {
|
return {
|
form: {
|
user: "admin",
|
password: "0000",
|
},
|
rules: {
|
user: [
|
{
|
required: true,
|
message: "Please fill in the user name",
|
trigger: "blur",
|
},
|
],
|
password: [
|
{
|
required: true,
|
message: "Please fill in the password.",
|
trigger: "blur",
|
},
|
],
|
},
|
};
|
},
|
methods: {
|
onSignIn() {
|
// 测试用户
|
if (this.form.user == "admin" && this.form.password == "0000") {
|
setToken("uid");
|
this.showSuccess("登录成功");
|
this.$router.push("/");
|
return;
|
}
|
this.refFormInline.validate(async (valid) => {
|
try {
|
if (valid) {
|
let res = await login({
|
user_login: Base64.encode(this.form.user),
|
user_psw: Base64.encode(this.form.password),
|
});
|
setToken(res.session_id);
|
this.showSuccess("登录成功");
|
this.$router.push("/");
|
} else {
|
this.showError("表单验证失败!");
|
}
|
} catch (ex) {
|
this.showError(ex);
|
}
|
});
|
},
|
showError(ex) {
|
showError(this, ex);
|
},
|
showSuccess(tip) {
|
showSuccess(this, tip);
|
},
|
},
|
setup() {
|
const refFormInline = ref(null);
|
return { refFormInline };
|
},
|
};
|
</script>
|
|
<style lang="less">
|
.login-view {
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
background-position: right bottom;
|
background-image: url("../../assets/login_bg.png");
|
background-attachment: fixed;
|
.login-wrap {
|
display: -webkit-box;
|
display: -ms-flexbox;
|
display: flex;
|
-webkit-box-orient: vertical;
|
-webkit-box-direction: normal;
|
-ms-flex-direction: column;
|
flex-direction: column;
|
height: 100vh;
|
overflow: auto;
|
}
|
.login-account {
|
-webkit-box-flex: 1;
|
-ms-flex: 1;
|
flex: 1;
|
padding: 16px 0 0;
|
max-width: 420px;
|
margin: 0 auto;
|
margin-top: 100px;
|
}
|
.account-logo {
|
width: 80px;
|
height: 80px;
|
margin: 0 auto;
|
border: 1px solid #eee;
|
border-radius: 50%;
|
background-color: #fafafc;
|
img {
|
width: 100%;
|
border-style: none;
|
border-radius: 100%;
|
}
|
}
|
.account-form {
|
margin-top: 32px;
|
}
|
.ivu-form-item {
|
margin-bottom: 24px;
|
vertical-align: top;
|
zoom: 1;
|
}
|
.ivu-form-item-content {
|
position: relative;
|
line-height: 32px;
|
font-size: 14px;
|
}
|
}
|
</style>
|
