<template>
|
<div class="login-container">
|
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
|
|
<div class="title-container">
|
<h3 class="title">”项目名称“</h3>
|
</div>
|
|
<el-form-item prop="username">
|
<span class="svg-container">
|
<svg-icon icon-class="user" />
|
</span>
|
<el-input
|
ref="username"
|
v-model="loginForm.username"
|
placeholder="请输入账号"
|
name="username"
|
type="text"
|
tabindex="1"
|
autocomplete="on"
|
maxlength="20"
|
@keyup.enter.native="handleLogin"
|
/>
|
</el-form-item>
|
|
<el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
|
<el-form-item prop="password">
|
<span class="svg-container">
|
<svg-icon icon-class="password" />
|
</span>
|
<el-input
|
:key="passwordType"
|
ref="password"
|
v-model="loginForm.password"
|
:type="passwordType"
|
placeholder="请输入密码"
|
name="password"
|
tabindex="2"
|
autocomplete="on"
|
maxlength="20"
|
@keyup.native="checkCapslock"
|
@blur="capsTooltip = false"
|
@keyup.enter.native="handleLogin"
|
/>
|
<span class="show-pwd" @click="showPwd">
|
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
|
</span>
|
</el-form-item>
|
</el-tooltip>
|
|
<el-form-item prop="safecode">
|
<span class="svg-container">
|
<svg-icon icon-class="safecode" />
|
</span>
|
<el-input
|
ref="safecode"
|
v-model="loginForm.safecode"
|
style="width: 60%"
|
placeholder="请输入验证码"
|
name="safecode"
|
type="text"
|
tabindex="3"
|
maxlength="10"
|
autocomplete="off"
|
@keyup.enter.native="handleLogin"
|
/>
|
<el-image
|
class="safecode-img"
|
:src="safecodeImg"
|
fit="fill"
|
@click="getSafeCodeImg"
|
>
|
<div slot="error" class="image-slot">
|
<i class="el-icon-picture-outline" />
|
</div>
|
</el-image>
|
</el-form-item>
|
|
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button>
|
</el-form>
|
</div>
|
</template>
|
|
<script>
|
import { setToken, setUserData } from '@/utils/auth' // get token from session
|
|
export default {
|
name: 'Login',
|
components: {},
|
data() {
|
const validateUsername = (rule, value, callback) => {
|
if (!value) {
|
callback(new Error('请输入账号'))
|
} else {
|
callback()
|
}
|
}
|
const validatePassword = (rule, value, callback) => {
|
if (value.length < 5) {
|
callback(new Error('账号不能少于5位'))
|
} else {
|
callback()
|
}
|
}
|
const validateSafecode = (rule, value, callback) => {
|
if (!value) {
|
callback(new Error('请输入验证码'))
|
} else {
|
callback()
|
}
|
}
|
return {
|
loginForm: {
|
username: '',
|
password: '',
|
safecode: '',
|
checkedId: ''
|
},
|
loginRules: {
|
username: [{ required: true, trigger: 'blur', validator: validateUsername }],
|
password: [{ required: true, trigger: 'blur', validator: validatePassword }],
|
safecode: [{ required: true, trigger: 'blur', validator: validateSafecode }]
|
},
|
passwordType: 'password',
|
capsTooltip: false,
|
loading: false,
|
showDialog: false,
|
redirect: undefined,
|
otherQuery: {},
|
safecodeImg: ''
|
}
|
},
|
watch: {
|
$route: {
|
handler: function(route) {
|
const query = route.query
|
if (query) {
|
this.redirect = query.redirect
|
this.otherQuery = this.getOtherQuery(query)
|
}
|
},
|
immediate: true
|
}
|
},
|
mounted() {
|
this.init()
|
},
|
methods: {
|
init() {
|
var loginData = localStorage.getItem('loginData_XXXX')
|
// 获取保存的账号密码
|
if (loginData) this.loginForm = JSON.parse(loginData)
|
|
if (this.loginForm.username === '') {
|
this.$refs.username.focus()
|
} else if (this.loginForm.password === '') {
|
this.$refs.password.focus()
|
} else if (this.loginForm.safecode === '') {
|
this.$refs.safecode.focus()
|
}
|
|
this.getSafeCodeImg()
|
},
|
checkCapslock(e) {
|
const { key } = e
|
this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
|
},
|
showPwd() {
|
if (this.passwordType === 'password') {
|
this.passwordType = ''
|
} else {
|
this.passwordType = 'password'
|
}
|
this.$nextTick(() => {
|
this.$refs.password.focus()
|
})
|
},
|
// 获取验证码图
|
getSafeCodeImg() {
|
var checkedId = this.getCheckedId()
|
this.postFN({
|
url: `admin/create/cheked`,
|
params: { checkedId: checkedId },
|
udData: { noToken: true },
|
mockData: {
|
code: 100,
|
msg: '',
|
data: {
|
imgStr: 'xxxx'
|
}
|
}
|
}, (inf) => {
|
this.safecodeImg = this.perfectSafeCode(inf.imgStr)
|
this.loginForm.checkedId = checkedId
|
})
|
},
|
// 补全验证码
|
perfectSafeCode(img) {
|
if (!img) return
|
return `data:image/jpeg;base64,${img}`
|
},
|
// 登录
|
handleLogin() {
|
this.$refs.loginForm.validate(valid => {
|
if (valid) {
|
const { username, password, safecode, checkedId } = this.loginForm
|
const params = {
|
account: username.trim(),
|
password: password.trim(),
|
checkedId: checkedId,
|
checkedCode: safecode.trim()
|
}
|
this.loading = true
|
this.postFN({
|
url: 'admin/login',
|
params: params,
|
udData: { noToken: true },
|
mockData: {
|
code: 100,
|
msg: '',
|
data: {
|
adminToken: 'mockdAmintoken', // 登录凭证
|
name: '潘多拉的臭嘴', // 用户名称
|
// arr: ['sys_admin_see'], // 权限列表
|
arr: ['sys_admin_see', 'sys_admin_add', 'sys_admin_edit', 'sys_admin_del', 'sys_admin_role_see', 'sys_admin_role_add', 'sys_admin_role_edit', 'sys_admin_role_del', 'corp_user_schedule_see', 'corp_user_schedule_add', 'corp_user_schedule_edit', 'corp_user_schedule_del', 'user_mp_banner_see', 'user_mp_banner_add', 'user_mp_banner_edit', 'user_mp_banner_del', 'shop_see', 'shop_add', 'shop_edit', 'shop_del', 'shop_device', 'corp_user_see', 'corp_user_add', 'corp_user_edit', 'corp_user_del', 'change_assistant_see', 'ser_pro_material_see', 'service_project_see', 'service_project_add', 'service_project_edit', 'service_project_del', 'service_topic_see', 'service_topic_add', 'service_topic_edit', 'service_topic_del', 'service_project_order_see', 'service_project_order_edit', 'goods_type_see', 'goods_type_add', 'goods_type_edit', 'goods_type_del', 'goods_see', 'goods_add', 'goods_edit', 'goods_del', 'goods_inventory', 'goods_order_see', 'goods_order_edit', 'goods_index_banner_see', 'goods_index_banner_add', 'goods_index_banner_edit', 'goods_index_banner_del', 'user_see', 'user_edit', 'user_cash_see', 'user_cash_edit', 'distribute_relate', 'distribute_order', 'document_edit', 'operation_see',
|
'coupon_see', 'coupon_add', 'coupon_edit', 'coupon_del', 'activity_see', 'activity_add', 'activity_edit', 'activity_del', 'banner_see', 'banner_add', 'banner_edit', 'banner_del', 'sys_text_explain_edit'
|
]
|
}
|
}
|
}, (inf) => {
|
// 保存登录凭证
|
setToken(inf.adminToken)
|
|
// 保存账号密码
|
var loginData = JSON.stringify({
|
username: this.loginForm.username.trim(),
|
password: this.loginForm.password.trim()
|
})
|
localStorage.setItem('loginData_XXXX', loginData)
|
|
// 保存用户数据
|
setUserData(inf)
|
|
this.loading = false
|
|
// 登录成功跳转页面
|
this.$messageSuc('登录成功')
|
setTimeout(() => {
|
this.$router.push({ path: this.redirect || '/activity/index', query: this.otherQuery })
|
}, 1000)
|
}, (res) => {
|
this.loading = false
|
this.$messageError(res.msg)
|
})
|
} else {
|
console.log('表单验证失败')
|
return false
|
}
|
})
|
},
|
getOtherQuery(query) {
|
return Object.keys(query).reduce((acc, cur) => {
|
if (cur !== 'redirect') {
|
acc[cur] = query[cur]
|
}
|
return acc
|
}, {})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
/* 修复input 背景不协调 和光标变色 */
|
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
|
|
$bg:#283443;
|
$light_gray:#fff;
|
$cursor: #fff;
|
|
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
|
.login-container .el-input input {
|
color: $cursor;
|
}
|
}
|
|
/* reset element-ui css */
|
.login-container {
|
// 背景 ↓↓↓↓↓↓↓↓↓↓
|
// background: url(../../assets/imgs/loginBg.jpg) no-repeat;
|
// background-size: cover;
|
// 背景 ↑↑↑↑↑↑↑↑↑↑
|
background-color: $bg;
|
.el-input {
|
display: inline-block;
|
height: 47px;
|
width: 85%;
|
|
input {
|
background: transparent;
|
border: 0px;
|
-webkit-appearance: none;
|
border-radius: 0px;
|
padding: 12px 5px 12px 15px;
|
color: $light_gray;
|
height: 47px;
|
caret-color: $cursor;
|
|
&:-webkit-autofill {
|
box-shadow: 0 0 0px 1000px $bg inset !important;
|
-webkit-text-fill-color: $cursor !important;
|
}
|
}
|
|
}
|
|
.el-form-item {
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
background: rgba(0, 0, 0, 0.1);
|
border-radius: 5px;
|
color: #454545;
|
}
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
$bg:#2d3a4b;
|
$dark_gray:#889aa4;
|
$light_gray:#eee;
|
|
.login-container {
|
min-height: 100%;
|
width: 100%;
|
// background-color: $bg;
|
overflow: hidden;
|
|
.login-form {
|
position: relative;
|
width: 520px;
|
max-width: 100%;
|
padding: 35px 35px 0;
|
margin: 0 auto;
|
margin-top: 160px;
|
overflow: hidden;
|
// 背景 ↓↓↓↓↓↓↓↓↓↓
|
// background-color: $bg;
|
// opacity: .96;
|
// border-radius: 10px;
|
// box-shadow: 0px 20px 60px rgba(0,0,0,0.4), 0px 0px 150px rgba(0,0,0,0.4);
|
// 背景 ↑↑↑↑↑↑↑↑↑↑
|
}
|
|
.tips {
|
font-size: 14px;
|
color: #fff;
|
margin-bottom: 10px;
|
|
span {
|
&:first-of-type {
|
margin-right: 16px;
|
}
|
}
|
}
|
|
.svg-container {
|
padding: 6px 5px 6px 15px;
|
color: $dark_gray;
|
vertical-align: middle;
|
width: 30px;
|
display: inline-block;
|
}
|
|
.title-container {
|
position: relative;
|
|
.title {
|
font-size: 26px;
|
color: $light_gray;
|
margin: 0px auto 40px auto;
|
text-align: center;
|
font-weight: bold;
|
}
|
}
|
|
.show-pwd {
|
position: absolute;
|
right: 10px;
|
top: 7px;
|
font-size: 16px;
|
color: $dark_gray;
|
cursor: pointer;
|
user-select: none;
|
}
|
|
.safecode-img{
|
width: 100px;
|
height: 80%;
|
position: absolute;
|
right: 10px;
|
top: 50%;
|
transform: translateY(-50%);
|
font-size: 30px;
|
text-align: right;
|
color: #999;
|
cursor: pointer;
|
}
|
|
.thirdparty-button {
|
position: absolute;
|
right: 0;
|
bottom: 6px;
|
}
|
|
@media only screen and (max-width: 470px) {
|
.thirdparty-button {
|
display: none;
|
}
|
}
|
}
|
</style>
|
