Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
O
offical_web
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
1
Merge Requests
1
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
zhangjie
offical_web
Commits
7d0e8dcc
Commit
7d0e8dcc
authored
Mar 03, 2023
by
qinjianhui
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 忘记密码页面
parent
b379fec8
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
237 additions
and
31 deletions
+237
-31
src/assets/banner.jpg
+0
-0
src/components/product-intro.vue
+1
-1
src/views/login.vue
+236
-30
No files found.
src/assets/banner.jpg
View file @
7d0e8dcc
This diff is collapsed.
Click to expand it.
src/components/product-intro.vue
View file @
7d0e8dcc
...
...
@@ -529,7 +529,7 @@
</div>
<div
class=
"row-item"
>
<div
class=
"item-text"
>
<span>
一
健
导入
</span>
<span>
一
键
导入
</span>
</div>
<div
class=
"item-des"
>
<span>
一键导入店铺,同步供应
</span>
...
...
src/views/login.vue
View file @
7d0e8dcc
...
...
@@ -2,19 +2,22 @@
<div>
<div
class=
"login_bg"
>
<div
class=
"logo"
>
<a
href=
"/"
>
<span
class=
"logo_text"
>
<img
src=
"../assets/logo.png"
height=
"40px"
/>
</span>
</a>
</div>
<div
class=
"banner_text"
>
<h1>
智能化订单处理
</h1>
<h1
style=
"margin-left: 60px"
>
数字化供采平台
</h1>
<h1
style=
"margin-left: 120px"
>
多维度数据分析
</h1>
<div>
<a
href=
"/"
>
<span
class=
"logo_text"
>
<img
src=
"../assets/logo.png"
height=
"40px"
/>
</span>
</a>
</div>
<div
class=
"banner_text"
>
<div>
智能化订单处理
</div>
<div
style=
"margin-left: 20px"
>
数字化供采平台
</div>
<div
style=
"margin-left: 20px"
>
多维度数据分析
</div>
</div>
</div>
<div
class=
"login_content"
>
<h2
style=
"text-align: center
"
>
登录
</h2>
<h2
style=
"text-align: center
; font-weight: 200"
>
用户
登录
</h2>
<el-form
size=
"medium"
:model=
"ruleForm"
...
...
@@ -28,7 +31,7 @@
v-model=
"ruleForm.email"
placeholder=
"Email"
></el-input>
</el-form-item>
<el-form-item
prop=
"password"
>
<el-form-item
prop=
"password"
style=
"margin-bottom: 10px"
>
<el-input
:type=
"showPwd ? 'text' : 'password'"
prefix-icon=
"el-icon-lock"
...
...
@@ -42,6 +45,11 @@
:class=
"
{ eyes: true, open: !showPwd, close: showPwd }">
</i>
</el-input>
</el-form-item>
<div
class=
"forget-password"
>
<span
style=
"cursor: pointer"
@
click=
"forgetPassword"
>
忘记密码
</span>
</div>
<div
style=
"text-align: center"
>
<button
class=
"login-btn"
@
click=
"submitForm"
>
登录
</button>
</div>
...
...
@@ -52,22 +60,101 @@
</el-form>
</div>
</div>
<div
class=
"modal"
:style=
"isShowModal ? 'display: block' : 'display: none'"
>
<div
class=
"forget-form"
>
<div
class=
"forget-title"
>
忘记密码
</div>
<el-form
size=
"medium"
:model=
"forgetForm"
ref=
"forgetForm"
>
<el-form-item
prop=
"email"
label=
""
:rules=
"[
{ required: true, message: '请输入邮箱' }]">
<el-input
v-model=
"forgetForm.email"
prefix-icon=
"el-icon-postcard"
style=
"background: #fff"
placeholder=
"请输入邮箱"
></el-input>
</el-form-item>
<el-form-item
prop=
"code"
label=
""
:rules=
"[
{ required: true, message: '请输入验证码' }]">
<div
style=
"display: flex; gap: 20px"
>
<div
style=
"flex: 1"
>
<el-input
v-model=
"forgetForm.code"
style=
"background: #fff"
prefix-icon=
"el-icon-message"
placeholder=
"请输入验证码"
></el-input>
</div>
<div>
<el-button
class=
"get-code-button"
:disabled=
"getCodeDisabled"
:class=
"getCodeDisabled ? 'disabled' : 'code-btn'"
@
click=
"verCode"
>
{{
codeCountDown
===
0
?
'获取验证码'
:
`${codeCountDown
}
秒`
}}
<
/el-button
>
<
/div
>
<
/div
>
<
/el-form-item
>
<
el
-
form
-
item
prop
=
"newPassword"
:
rules
=
"[{ required: true, message: '请输入新密码'
}
]"
>
<
el
-
input
v
-
model
=
"forgetForm.newPassword"
placeholder
=
"请输入新密码"
clearable
prefix
-
icon
=
"el-icon-lock"
style
=
"background-color: #fff"
/>
<
/el-form-item
>
<
el
-
form
-
item
prop
=
"confirmNewPassword"
:
rules
=
"[{ required: true, message: '请再次输入新密码'
}
]"
>
<
el
-
input
v
-
model
=
"forgetForm.confirmNewPassword"
placeholder
=
"请再次输入新密码"
clearable
prefix
-
icon
=
"el-icon-lock"
style
=
"background-color: #fff"
/>
<
/el-form-item
>
<
el
-
form
-
item
style
=
"margin-bottom: 10px"
>
<
el
-
button
class
=
"reset-password"
round
@
click
=
"resetPassword"
>
重置密码
<
/el-button
>
<
/el-form-item
>
<
div
style
=
"font-size: 14px"
>
<
span
>
无需重置
<
/span
>
<
span
style
=
"margin-left: 20px; color: #2f97f1; cursor: pointer"
@
click
=
"isShowModal = false"
>
登录
<
/span
>
<
/div
>
<
/el-form
>
<
i
class
=
"el-icon-circle-close"
@
click
=
"isShowModal = false"
><
/i
>
<
/div
>
<
/div
>
<
/div
>
<
/template
>
<
script
>
import
{
post
}
from
'../utils/axios'
import
{
post
,
get
}
from
'../utils/axios'
import
md5
from
'js-md5'
export
default
{
name
:
'login'
,
components
:
{
}
,
data
()
{
return
{
isShowModal
:
false
,
ruleForm
:
{
password
:
''
,
email
:
''
,
checked
:
false
,
}
,
codeCountDown
:
0
,
forgetForm
:
{
}
,
rules
:
{
email
:
[
{
required
:
true
,
message
:
'请输入邮箱'
,
trigger
:
'blur'
}
,
...
...
@@ -82,7 +169,53 @@ export default {
showPwd
:
false
,
}
}
,
computed
:
{
getCodeDisabled
()
{
return
this
.
codeCountDown
>
0
}
,
}
,
methods
:
{
async
verCode
()
{
try
{
await
new
Promise
((
resolve
,
reject
)
=>
{
this
.
$refs
.
forgetForm
.
validateField
(
'email'
,
(
m
)
=>
{
m
?
reject
()
:
resolve
()
}
)
}
)
}
catch
{
return
}
try
{
const
res
=
await
get
(
'business/user/emailcode'
,
{
email
:
this
.
forgetForm
.
email
,
}
)
this
.
codeCountDown
=
60
this
.
timer
=
setInterval
(()
=>
{
this
.
codeCountDown
--
if
(
this
.
codeCountDown
<=
0
)
{
clearInterval
(
this
.
timer
)
}
}
,
1000
)
this
.
$message
.
success
(
res
.
message
)
}
catch
(
e
)
{
console
.
error
(
e
)
}
}
,
forgetPassword
()
{
this
.
isShowModal
=
true
this
.
forgetForm
=
{
}
this
.
$nextTick
(()
=>
{
this
.
$refs
.
forgetForm
.
clearValidate
()
}
)
}
,
// 重置密码
resetPassword
()
{
try
{
this
.
$refs
.
forgetForm
.
validate
()
}
catch
{
return
}
}
,
submitForm
(
e
)
{
e
.
preventDefault
()
this
.
$refs
.
ruleForm
.
validate
((
valid
)
=>
{
...
...
@@ -108,48 +241,121 @@ export default {
}
<
/script
>
<
style
scoped
>
.
reset
-
password
{
width
:
100
%
;
background
-
image
:
linear
-
gradient
(
to
right
,
#
5192
e1
0
%
,
#
23
ced5
51
%
,
#
5192
e1
100
%
);
color
:
#
fff
;
}
.
get
-
code
-
button
:
disabled
:
hover
{
background
-
color
:
#
d0d2d8
;
color
:
#
666
;
}
.
disabled
{
background
-
color
:
#
d0d2d8
;
color
:
#
666
;
margin
-
left
:
10
px
;
}
.
code
-
btn
{
background
:
linear
-
gradient
(
180
deg
,
#
319
af2
0
%
,
#
2386
ee
100
%
);
color
:
#
fff
;
}
.
forget
-
title
{
text
-
align
:
center
;
margin
-
bottom
:
26
px
;
font
-
size
:
26
px
;
font
-
weight
:
400
;
letter
-
spacing
:
2
px
;
}
.
modal
{
position
:
fixed
;
top
:
0
;
left
:
0
;
bottom
:
0
;
right
:
0
;
background
-
color
:
#
252
d40
;
z
-
index
:
3
;
transition
:
all
0.3
s
;
}
.
forget
-
form
{
position
:
fixed
;
width
:
36
%
;
padding
:
50
px
60
px
;
box
-
sizing
:
border
-
box
;
border
-
radius
:
6
px
;
top
:
50
%
;
left
:
50
%
;
background
-
color
:
#
fff
;
transform
:
translate
(
-
50
%
,
-
50
%
);
}
.
forget
-
form
i
{
position
:
fixed
;
top
:
-
30
px
;
right
:
-
28
px
;
font
-
size
:
30
px
;
color
:
#
fff
;
cursor
:
pointer
;
}
.
logo
{
position
:
absolute
;
display
:
flex
;
align
-
items
:
center
;
left
:
4
%
;
top
:
7
%
;
}
.
logo_text
{
display
:
inline
-
block
;
line-height
:
40px
;
margin
:
60px
0
0
80px
;
}
.
banner_text
{
position
:
absolute
;
top
:
30%
;
left
:
10%
;
line-height
:
80px
;
font
-
size
:
28
px
;
color
:
#
fff
;
letter
-
spacing
:
4
px
;
display
:
flex
;
margin
-
left
:
40
px
;
}
.
login_bg
{
width
:
100
%
;
height
:
100
vh
;
position
:
relative
;
image
-
rendering
:
-
webkit
-
optimize
-
contrast
;
background
:
url(../assets/banner.jpg)
center
/
cover
no-repeat
;
background
:
url
(..
/
assets
/
banner
.
jpg
)
left
/
cover
no
-
repeat
;
background
-
color
:
#
b3e2fe
;
background
-
size
:
50
%
auto
;
}
.
login_content
{
padding
:
18
px
;
background
:
rgba
(
255
,
255
,
255
,
0.4
);
padding
:
50
px
;
background
:
rgba
(
255
,
255
,
255
,
1
);
position
:
absolute
;
top
:
50
%
;
left
:
8
0%
;
border-radius
:
6
px
;
transform
:
translate
(
-50%
,
-50%
);
left
:
6
0
%
;
border
-
radius
:
10
px
;
transform
:
translate
Y
(
-
50
%
);
box
-
sizing
:
border
-
box
;
background-position
:
top
right
,
center
;
background-repeat
:
no-repeat
;
background-size
:
528px
auto
,
contain
;
box
-
shadow
:
0
2
px
4
px
rgb
(
0
0
0
/
12
%
),
0
0
6
px
rgb
(
0
0
0
/
4
%
);
}
.
login_form
{
padding
:
40px
;
width
:
3
0
0px
;
padding
:
24
px
0
;
width
:
3
3
0
px
;
border
-
radius
:
6
px
;
}
.
forget
-
password
{
margin
-
bottom
:
16
px
;
text
-
align
:
right
;
font
-
size
:
14
px
;
color
:
#
006
eff
;
}
.
login
-
btn
{
width
:
100
%
;
height
:
38
px
;
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment