Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
有来技术
mall-admin
提交
f0318020
M
mall-admin
项目概览
有来技术
/
mall-admin
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
M
mall-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
f0318020
编写于
2月 27, 2022
作者:
郝
郝先瑞
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(login/index.vue): 登录页重构setup和ts、国际化和添加copyright
上级
0f114292
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
186 addition
and
115 deletion
+186
-115
src/views/login/index.vue
src/views/login/index.vue
+186
-115
未找到文件。
src/views/login/index.vue
浏览文件 @
f0318020
<
template
>
<div
class=
"login-container"
>
<el-form
ref=
"loginForm"
:model=
"loginForm"
:rules=
"loginRules"
class=
"login-form"
auto-complete=
"on"
label-position=
"left"
>
<el-form
ref=
"loginFormRef"
:model=
"loginForm"
:rules=
"loginRules"
class=
"login-form"
auto-complete=
"on"
label-position=
"left"
>
<div
class=
"title-container"
>
<h3
class=
"title"
>
有来商城管理系统 Vue3
</h3>
<h3
class=
"title"
>
{{
$t
(
'
login.title
'
)
}}
</h3>
<lang-select
class=
"set-language"
/>
</div>
<el-form-item
prop=
"username"
>
<span
class=
"svg-container"
>
<svg-icon
icon-class=
"user"
/>
<svg-icon
icon-class=
"user"
/>
</span>
<el-input
ref=
"username"
v-model=
"loginForm.username"
placeholder=
"Username
"
:placeholder=
"$t('login.username')
"
name=
"username"
type=
"text"
tabindex=
"1"
...
...
@@ -20,157 +22,216 @@
/>
</el-form-item>
<el-form-item
prop=
"password"
>
<el-tooltip
:disabled=
"capslockTooltipDisabled"
content=
"Caps lock is On"
placement=
"right"
>
<el-form-item
prop=
"password"
>
<span
class=
"svg-container"
>
<svg-icon
icon-class=
"password"
/>
<svg-icon
icon-class=
"password"
/>
</span>
<el-input
:key=
"passwordType"
ref=
"password"
v-model=
"loginForm.password"
:type=
"passwordType"
placeholder=
"Password"
name=
"password"
tabindex=
"2"
auto-complete=
"on"
@
keyup.enter.native=
"handleLogin"
/>
<span
class=
"show-pwd"
@
click=
"showPwd"
>
<svg-icon
:icon-class=
"passwordType === 'password' ? 'eye' : 'eye-open'"
/>
<el-input
:key=
"passwordType"
ref=
"passwordRef"
v-model=
"loginForm.password"
:type=
"passwordType"
placeholder=
"Password"
name=
"password"
tabindex=
"2"
auto-complete=
"on"
@
keyup.native=
"checkCapslock"
@
blur=
"capslockTooltipDisabled = true"
@
keyup.enter.native=
"handleLogin"
/>
<span
class=
"show-pwd"
@
click=
"showPwd"
>
<svg-icon
:icon-class=
"passwordType === 'password' ? 'eye' : 'eye-open'"
/>
</span>
</el-form-item>
</el-form-item>
</el-tooltip>
<el-form-item
prop=
"
validateC
ode"
>
<!-- 验证码 -->
<el-form-item
prop=
"
c
ode"
>
<span
class=
"svg-container"
>
<svg-icon
icon-class=
"validCode"
/>
</span>
<el-input
v-model=
"loginForm.code"
auto-complete=
"off"
placeholder=
"请输入验证码
"
:placeholder=
"$t('login.code')
"
style=
"width: 65%"
@
keyup.enter.native=
"handleLogin"
/>
<div
class=
"captcha"
>
<img
:src=
"
base64Captcha
"
@
click=
"handleCaptchaGenerate"
height=
"38px"
/>
<img
:src=
"
captchaBase64
"
@
click=
"handleCaptchaGenerate"
height=
"38px"
/>
</div>
</el-form-item>
<el-button
size=
"default"
:loading=
"loading"
type=
"primary"
style=
"width:100%;margin-bottom:30px;"
@
click.native.prevent=
"handleLogin"
>
登录
</el-button>
<el-button
size=
"default"
:loading=
"loading"
type=
"primary"
style=
"width:100%;margin-bottom:30px;"
@
click.native.prevent=
"handleLogin"
>
{{
$t
(
'
login.login
'
)
}}
</el-button>
<div
class=
"tips"
>
<span
style=
"margin-right:20px;"
>
用户名
: admin
</span>
<span>
密码
: 123456
</span>
<span
style=
"margin-right:20px;"
>
{{
$t
(
'
login.username
'
)
}}
: admin
</span>
<span>
{{
$t
(
'
login.password
'
)
}}
: 123456
</span>
</div>
</el-form>
<div
class=
"copyright"
>
<p>
{{
$t
(
'
login.copyright
'
)
}}
</p>
<p>
{{
$t
(
'
login.icp
'
)
}}
</p>
</div>
</div>
</
template
>
<
script
>
<
script
setup
lang=
"ts"
>
import
{
nextTick
,
onMounted
,
reactive
,
ref
,
toRefs
,
watch
}
from
"
vue
"
;
// 组件依赖
import
router
from
'
@/router
'
import
{
ElForm
,
ElInput
}
from
"
element-plus
"
;
import
LangSelect
from
'
@/components/LangSelect/index.vue
'
;
import
SvgIcon
from
'
@/components/SvgIcon/index.vue
'
;
import
{
useUserStoreHook
}
from
"
@/store/modules/user
"
;
// API依赖
import
{
getCaptcha
}
from
"
@/api/login
"
;
import
{
useUserStoreHook
}
from
"
@/store/modules/user
"
;
export
default
{
name
:
'
Login
'
,
components
:{
SvgIcon
},
data
()
{
const
validatePassword
=
(
rule
,
value
,
callback
)
=>
{
if
(
value
.
length
<
6
)
{
callback
(
new
Error
(
'
The password can not be less than 6 digits
'
))
}
else
{
callback
()
}
}
return
{
loginForm
:
{
username
:
'
admin
'
,
password
:
'
123456
'
,
code
:
undefined
,
uuid
:
undefined
},
loginRules
:
{
username
:
[{
required
:
true
,
trigger
:
'
blur
'
}],
password
:
[{
required
:
true
,
trigger
:
'
blur
'
,
validator
:
validatePassword
}]
},
loading
:
false
,
passwordType
:
'
password
'
,
redirect
:
undefined
,
base64Captcha
:
undefined
}
import
{
useRoute
}
from
"
vue-router
"
;
const
route
=
useRoute
();
const
loginFormRef
=
ref
(
ElForm
)
const
passwordRef
=
ref
(
ElInput
)
const
state
=
reactive
({
loginForm
:
{
username
:
'
admin
'
,
password
:
'
123456
'
,
code
:
''
,
uuid
:
''
},
created
()
{
// 生成验证码
this
.
handleCaptchaGenerate
()
loginRules
:
{
username
:
[{
required
:
true
,
trigger
:
'
blur
'
}],
password
:
[{
required
:
true
,
trigger
:
'
blur
'
,
validator
:
validatePassword
}]
},
watch
:
{
$route
:
{
handler
:
function
(
route
)
{
this
.
redirect
=
route
.
query
&&
route
.
query
.
redirect
},
immediate
:
true
loading
:
false
,
passwordType
:
'
password
'
,
redirect
:
''
,
captchaBase64
:
''
,
// 大写提示禁用
capslockTooltipDisabled
:
true
,
otherQuery
:
{}
})
function
validatePassword
(
rule
:
any
,
value
:
any
,
callback
:
any
)
{
if
(
value
.
length
<
6
)
{
callback
(
new
Error
(
'
The password can not be less than 6 digits
'
))
}
else
{
callback
()
}
}
const
{
loginForm
,
loginRules
,
loading
,
passwordType
,
redirect
,
captchaBase64
,
capslockTooltipDisabled
}
=
toRefs
(
state
)
function
checkCapslock
(
e
:
any
)
{
const
{
key
}
=
e
state
.
capslockTooltipDisabled
=
key
&&
key
.
length
===
1
&&
(
key
>=
'
A
'
&&
key
<=
'
Z
'
)
}
function
showPwd
()
{
if
(
state
.
passwordType
===
'
password
'
)
{
state
.
passwordType
=
''
}
else
{
state
.
passwordType
=
'
password
'
}
nextTick
(()
=>
{
passwordRef
.
value
.
focus
()
})
}
function
handleLogin
()
{
loginFormRef
.
value
.
validate
((
valid
:
boolean
)
=>
{
if
(
valid
)
{
state
.
loading
=
true
useUserStoreHook
().
login
(
state
.
loginForm
).
then
(()
=>
{
router
.
push
({
path
:
state
.
redirect
||
'
/
'
,
query
:
state
.
otherQuery
})
state
.
loading
=
false
}).
catch
(()
=>
{
state
.
loading
=
false
handleCaptchaGenerate
()
})
}
else
{
return
false
}
},
methods
:
{
showPwd
()
{
if
(
this
.
passwordType
===
'
password
'
)
{
this
.
passwordType
=
''
}
else
{
this
.
passwordType
=
'
password
'
})
}
// 获取验证码
function
handleCaptchaGenerate
()
{
getCaptcha
().
then
(
response
=>
{
const
{
img
,
uuid
}
=
response
.
data
state
.
captchaBase64
=
"
data:image/gif;base64,
"
+
img
state
.
loginForm
.
uuid
=
uuid
;
})
}
watch
(
route
,
()
=>
{
const
query
=
route
.
query
if
(
query
)
{
state
.
redirect
=
query
.
redirect
as
string
state
.
otherQuery
=
getOtherQuery
(
query
)
}
this
.
$nextTick
(()
=>
{
this
.
$refs
.
password
.
focus
()
})
},
handleLogin
()
{
this
.
$refs
.
loginForm
.
validate
(
valid
=>
{
if
(
valid
)
{
this
.
loading
=
true
useUserStoreHook
().
login
(
this
.
loginForm
).
then
(()
=>
{
this
.
$router
.
push
({
path
:
this
.
redirect
||
'
/
'
})
this
.
loading
=
false
}).
catch
(()
=>
{
this
.
loading
=
false
this
.
handleCaptchaGenerate
()
})
}
else
{
console
.
log
(
'
error submit!!
'
)
return
false
}
})
},
// 获取验证码
handleCaptchaGenerate
(){
getCaptcha
().
then
(
response
=>
{
const
{
img
,
uuid
}
=
response
.
data
this
.
base64Captcha
=
"
data:image/gif;base64,
"
+
img
this
.
loginForm
.
uuid
=
uuid
;
})
{
immediate
:
true
}
}
)
function
getOtherQuery
(
query
:
any
)
{
return
Object
.
keys
(
query
).
reduce
((
acc
:
any
,
cur
:
any
)
=>
{
if
(
cur
!==
'
redirect
'
)
{
acc
[
cur
]
=
query
[
cur
]
}
return
acc
},
{})
}
onMounted
(()
=>
{
handleCaptchaGenerate
()
})
</
script
>
<
style
lang=
"scss"
>
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
$bg
:
#283443
;
$light_gray
:
#fff
;
$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
{
.title-container
{
position
:
relative
;
.title
{
font-size
:
26px
;
color
:
$light_gray
;
margin
:
0px
auto
40px
auto
;
text-align
:
center
;
font-weight
:
bold
;
}
.set-language
{
color
:
#fff
;
position
:
absolute
;
top
:
3px
;
font-size
:
18px
;
right
:
0px
;
cursor
:
pointer
;
}
}
.el-input
{
display
:
inline-block
;
height
:
47px
;
...
...
@@ -199,13 +260,22 @@ $cursor: #fff;
border-radius
:
5px
;
color
:
#454545
;
}
.copyright
{
width
:
100%
;
position
:
absolute
;
bottom
:
0
;
font-size
:
12px
;
text-align
:
center
;
color
:
#cccccc
;
}
}
</
style
>
<
style
lang=
"scss"
scoped
>
$bg
:
#2d3a4b
;
$dark_gray
:
#889aa4
;
$light_gray
:
#eee
;
$bg
:
#2d3a4b
;
$dark_gray
:
#889aa4
;
$light_gray
:
#eee
;
.login-container
{
min-height
:
100%
;
...
...
@@ -263,6 +333,7 @@ $light_gray:#eee;
cursor
:
pointer
;
user-select
:
none
;
}
.captcha
{
position
:
absolute
;
right
:
0
;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录