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
0
Merge Requests
0
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
8ac38a9f
Commit
8ac38a9f
authored
Nov 07, 2023
by
qinjianhui
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'master' of
http://47.99.244.21:9999/zhangjie/offical_web
parents
8bdf3b1f
31f7bfbb
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
423 additions
and
117 deletions
+423
-117
package-lock.json
+81
-81
src/plugins/element.js
+2
-1
src/views/login.vue
+222
-30
src/views/register.vue
+118
-5
No files found.
package-lock.json
View file @
8ac38a9f
...
...
@@ -2269,87 +2269,6 @@
"webpack-chain"
:
"^6.4.0"
,
"webpack-dev-server"
:
"^3.11.0"
,
"webpack-merge"
:
"^4.2.2"
},
"dependencies"
:
{
"ansi-styles"
:
{
"version"
:
"4.3.0"
,
"resolved"
:
"https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz"
,
"integrity"
:
"sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="
,
"dev"
:
true
,
"optional"
:
true
,
"requires"
:
{
"color-convert"
:
"^2.0.1"
}
},
"chalk"
:
{
"version"
:
"4.1.2"
,
"resolved"
:
"https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz"
,
"integrity"
:
"sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="
,
"dev"
:
true
,
"optional"
:
true
,
"requires"
:
{
"ansi-styles"
:
"^4.1.0"
,
"supports-color"
:
"^7.1.0"
}
},
"color-convert"
:
{
"version"
:
"2.0.1"
,
"resolved"
:
"https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz"
,
"integrity"
:
"sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="
,
"dev"
:
true
,
"optional"
:
true
,
"requires"
:
{
"color-name"
:
"~1.1.4"
}
},
"color-name"
:
{
"version"
:
"1.1.4"
,
"resolved"
:
"https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz"
,
"integrity"
:
"sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
,
"dev"
:
true
,
"optional"
:
true
},
"has-flag"
:
{
"version"
:
"4.0.0"
,
"resolved"
:
"https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz"
,
"integrity"
:
"sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
,
"dev"
:
true
,
"optional"
:
true
},
"loader-utils"
:
{
"version"
:
"2.0.4"
,
"resolved"
:
"https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz"
,
"integrity"
:
"sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw=="
,
"dev"
:
true
,
"optional"
:
true
,
"requires"
:
{
"big.js"
:
"^5.2.2"
,
"emojis-list"
:
"^3.0.0"
,
"json5"
:
"^2.1.2"
}
},
"supports-color"
:
{
"version"
:
"7.2.0"
,
"resolved"
:
"https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz"
,
"integrity"
:
"sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="
,
"dev"
:
true
,
"optional"
:
true
,
"requires"
:
{
"has-flag"
:
"^4.0.0"
}
},
"vue-loader-v16"
:
{
"version"
:
"npm:vue-loader@16.8.3"
,
"resolved"
:
"https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz"
,
"integrity"
:
"sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA=="
,
"dev"
:
true
,
"optional"
:
true
,
"requires"
:
{
"chalk"
:
"^4.1.0"
,
"hash-sum"
:
"^2.0.0"
,
"loader-utils"
:
"^2.0.0"
}
}
}
},
"@vue/cli-shared-utils"
:
{
...
...
@@ -13264,6 +13183,87 @@
}
}
},
"vue-loader-v16"
:
{
"version"
:
"npm:vue-loader@16.8.3"
,
"resolved"
:
"https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz"
,
"integrity"
:
"sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA=="
,
"dev"
:
true
,
"optional"
:
true
,
"requires"
:
{
"chalk"
:
"^4.1.0"
,
"hash-sum"
:
"^2.0.0"
,
"loader-utils"
:
"^2.0.0"
},
"dependencies"
:
{
"ansi-styles"
:
{
"version"
:
"4.3.0"
,
"resolved"
:
"https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz"
,
"integrity"
:
"sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="
,
"dev"
:
true
,
"optional"
:
true
,
"requires"
:
{
"color-convert"
:
"^2.0.1"
}
},
"chalk"
:
{
"version"
:
"4.1.2"
,
"resolved"
:
"https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz"
,
"integrity"
:
"sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="
,
"dev"
:
true
,
"optional"
:
true
,
"requires"
:
{
"ansi-styles"
:
"^4.1.0"
,
"supports-color"
:
"^7.1.0"
}
},
"color-convert"
:
{
"version"
:
"2.0.1"
,
"resolved"
:
"https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz"
,
"integrity"
:
"sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="
,
"dev"
:
true
,
"optional"
:
true
,
"requires"
:
{
"color-name"
:
"~1.1.4"
}
},
"color-name"
:
{
"version"
:
"1.1.4"
,
"resolved"
:
"https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz"
,
"integrity"
:
"sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
,
"dev"
:
true
,
"optional"
:
true
},
"has-flag"
:
{
"version"
:
"4.0.0"
,
"resolved"
:
"https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz"
,
"integrity"
:
"sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
,
"dev"
:
true
,
"optional"
:
true
},
"loader-utils"
:
{
"version"
:
"2.0.4"
,
"resolved"
:
"https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz"
,
"integrity"
:
"sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw=="
,
"dev"
:
true
,
"optional"
:
true
,
"requires"
:
{
"big.js"
:
"^5.2.2"
,
"emojis-list"
:
"^3.0.0"
,
"json5"
:
"^2.1.2"
}
},
"supports-color"
:
{
"version"
:
"7.2.0"
,
"resolved"
:
"https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz"
,
"integrity"
:
"sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="
,
"dev"
:
true
,
"optional"
:
true
,
"requires"
:
{
"has-flag"
:
"^4.0.0"
}
}
}
},
"vue-navigation"
:
{
"version"
:
"1.1.4"
,
"resolved"
:
"https://registry.npmjs.org/vue-navigation/-/vue-navigation-1.1.4.tgz"
,
...
...
src/plugins/element.js
View file @
8ac38a9f
...
...
@@ -57,6 +57,7 @@ import {
CascaderPanel
,
Tag
,
Scrollbar
,
RadioButton
,
}
from
'element-ui'
Vue
.
prototype
.
$ELEMENT
=
{
size
:
'mini'
}
...
...
@@ -91,7 +92,7 @@ Vue.use(Container)
Vue
.
use
(
ButtonGroup
)
Vue
.
use
(
Tag
)
Vue
.
use
(
Scrollbar
)
Vue
.
use
(
RadioButton
)
Vue
.
use
(
Cascader
)
Vue
.
prototype
.
$alert
=
MessageBox
.
alert
Vue
.
prototype
.
$message
=
(
message
)
=>
...
...
src/views/login.vue
View file @
8ac38a9f
...
...
@@ -12,35 +12,30 @@
</div>
<div
:class=
"$isMobile ? 'login-mobile' : ''"
>
<div
:class=
"$isMobile ? 'login-content-mobile' : 'login_content'"
>
<h2
style=
"
text-align: center;
font-weight: 400;
color: #4a4c6d;
margin-bottom: 40px;
"
>
欢迎登录
</h2>
<el-radio-group
v-model=
"labelPosition"
class=
"radioGroup"
size=
"small"
>
<el-radio-button
label=
"passwordLogin"
>
密码登录
</el-radio-button>
<el-radio-button
label=
"verificationLogin"
>
验证码登录
</el-radio-button>
</el-radio-group>
<el-form
size=
"medium"
:model=
"ruleForm"
:rules=
"rules"
ref=
"ruleForm"
class=
"login_form"
>
<el-form-item
prop=
"email"
>
<el-form-item
v-if=
"labelPosition==='passwordLogin'"
prop=
"email"
>
<el-input
prefix-icon=
"el-icon-message"
style=
"background: #fff"
v-model=
"ruleForm.email"
placeholder=
"
Email
"
></el-input>
placeholder=
"
请输入手机号或者邮箱
"
></el-input>
</el-form-item>
<el-form-item
prop=
"password"
style=
"margin-bottom: 20px"
>
<el-form-item
v-if=
"labelPosition==='passwordLogin'"
prop=
"password"
style=
"margin-bottom: 20px"
>
<el-input
:type=
"showPwd ? 'text' : 'password'"
prefix-icon=
"el-icon-lock"
style=
"background: #fff"
v-model=
"ruleForm.password"
placeholder=
"
Password
"
placeholder=
"
请输入密码
"
@
keyup
.
enter
.
native=
"submitForm"
>
<i
@
click=
"showPwd = !showPwd"
...
...
@@ -48,6 +43,52 @@
:class=
"
{ eyes: true, open: !showPwd, close: showPwd }">
</i>
</el-input>
</el-form-item>
<el-form-item
v-if=
"labelPosition==='verificationLogin'"
prop=
"phone"
>
<el-input
prefix-icon=
"el-icon-phone"
style=
"background: #fff"
v-model=
"ruleForm.phone"
placeholder=
"请输入手机号"
></el-input>
</el-form-item>
<el-form-item
v-if=
"labelPosition==='verificationLogin'"
prop=
"verifyKey"
label=
""
>
<div
style=
"display: flex; gap: 20px; margin-bottom: -10px;"
>
<div
style=
"flex: 1"
>
<el-input
v-model=
"ruleForm.verifyKey"
prefix-icon=
"el-icon-postcard"
placeholder=
"请输入验证码,区分大小写"
>
</el-input>
</div>
<div
@
click=
"getVerifycode"
>
<img
style=
"width: 100px; height: 80%"
:src=
"VerifyUrl"
>
</img>
</div>
</div>
</el-form-item>
<el-form-item
v-if=
"labelPosition==='verificationLogin'"
prop=
"code"
label=
""
>
<div
style=
"display: flex; gap: 20px"
>
<div
style=
"flex: 1"
>
<el-input
v-model=
"ruleForm.code"
prefix-icon=
"el-icon-message"
placeholder=
"请输入短信验证码"
></el-input>
</div>
<div>
<el-button
class=
"get-code-button"
style=
"width: 112px"
:disabled=
"getCodeDisabled"
:class=
"getCodeDisabled ? 'disabled' : 'code-btn'"
@
click=
"verPhonecode"
>
{{
codeCountDown
===
0
?
'获取验证码'
:
`${codeCountDown
}
秒`
}}
<
/el-button
>
<
/div
>
<
/div
>
<
/el-form-item
>
<
div
class
=
"forget-password"
>
<
span
style
=
"cursor: pointer"
@
click
=
"forgetPassword"
>
忘记密码
?
...
...
@@ -71,9 +112,10 @@
<
div
class
=
"forget-title"
>
忘记密码
<
/div
>
<
el
-
form
size
=
"medium"
:
model
=
"forgetForm"
ref
=
"forgetForm"
>
<
el
-
form
-
item
v
-
if
=
"labelPosition==='passwordLogin'"
prop
=
"email"
label
=
""
:rules=
"[
{ required: true, message: '请输入邮箱', type: 'email' }]">
:
rules
=
"[{ required: true, message: '请输入邮箱
地址
', type: 'email'
}
]"
>
<
el
-
input
v
-
model
=
"forgetForm.email"
prefix
-
icon
=
"el-icon-postcard"
...
...
@@ -81,6 +123,7 @@
placeholder
=
"请输入邮箱"
><
/el-input
>
<
/el-form-item
>
<
el
-
form
-
item
v
-
if
=
"labelPosition==='passwordLogin'"
prop
=
"code"
label
=
""
:
rules
=
"[{ required: true, message: '请输入验证码'
}
]"
>
...
...
@@ -106,6 +149,63 @@
<
/div
>
<
/el-form-item
>
<
el
-
form
-
item
v
-
if
=
"labelPosition==='verificationLogin'"
prop
=
"phone"
:
rules
=
"[{ required: true, message: '请输入手机号'
}
]"
>
<
el
-
input
prefix
-
icon
=
"el-icon-phone"
style
=
"background: #fff"
v
-
model
=
"forgetForm.phone"
placeholder
=
"请输入手机号"
><
/el-input
>
<
/el-form-item
>
<
el
-
form
-
item
v
-
if
=
"labelPosition==='verificationLogin'"
prop
=
"verifyKey"
label
=
""
:
rules
=
"[{ required: true, message: '请输入验证码'
}
]"
>
<
div
style
=
"display: flex; gap: 20px; margin-bottom: -10px;"
>
<
div
style
=
"flex: 1"
>
<
el
-
input
v
-
model
=
"forgetForm.verifyKey"
prefix
-
icon
=
"el-icon-postcard"
placeholder
=
"请输入验证码,区分大小写"
>
<
/el-input
>
<
/div
>
<
div
@
click
=
"getVerifycode"
>
<
img
style
=
"width: 100px; height: 80%"
:
src
=
"VerifyUrl"
>
<
/img
>
<
/div
>
<
/div
>
<
/el-form-item
>
<
el
-
form
-
item
v
-
if
=
"labelPosition==='verificationLogin'"
prop
=
"code"
label
=
""
:
rules
=
"[{ required: true, message: '请输入短信验证码'
}
]"
>
<
div
style
=
"display: flex; gap: 20px"
>
<
div
style
=
"flex: 1"
>
<
el
-
input
v
-
model
=
"forgetForm.code"
prefix
-
icon
=
"el-icon-message"
placeholder
=
"请输入短信验证码"
><
/el-input
>
<
/div
>
<
div
>
<
el
-
button
class
=
"get-code-button"
style
=
"width: 112px"
:
disabled
=
"getCodeDisabled"
:
class
=
"getCodeDisabled ? 'disabled' : 'code-btn'"
@
click
=
"forgetPhonecode"
>
{{
codeCountDown
===
0
?
'获取验证码'
:
`${codeCountDown
}
秒`
}}
<
/el-button
>
<
/div
>
<
/div
>
<
/el-form-item
>
<
el
-
form
-
item
prop
=
"password"
:
rules
=
"[{ required: true, message: '请输入新密码'
}
]"
>
<
el
-
input
...
...
@@ -188,6 +288,8 @@ export default {
callback
()
}
}
,
VerifyUrl
:
''
,
labelPosition
:
'passwordLogin'
,
isShowModal
:
false
,
ruleForm
:
{
password
:
''
,
...
...
@@ -197,15 +299,18 @@ export default {
codeCountDown
:
0
,
forgetForm
:
{
}
,
rules
:
{
email
:
[
{
required
:
true
,
message
:
'请输入邮箱'
,
trigger
:
'blur'
}
,
email
:
[{
required
:
true
,
message
:
'请输入邮箱或手机号'
,
trigger
:
'blur'
}
],
password
:
[{
required
:
true
,
message
:
'请输入密码'
,
trigger
:
'blur'
}
],
phone
:
[
{
required
:
true
,
message
:
'请输入手机号'
,
trigger
:
'blur'
}
,
{
type
:
'email'
,
message
:
'请输入正确的邮箱地址'
,
pattern
:
/^1
[
3,4,5,6,7,8,9
][
0-9
]
{9
}
$/
,
message
:
"请输入正确手机号码"
,
trigger
:
[
'blur'
,
'change'
],
}
,
}
],
password
:
[{
required
:
true
,
message
:
'请输入密码'
,
trigger
:
'blur'
}
],
code
:
[{
required
:
true
,
message
:
'请输入验证码'
,
trigger
:
'blur'
}
],
verifyKey
:
[{
required
:
true
,
message
:
'请输入验证码'
,
trigger
:
'blur'
}
],
}
,
showPwd
:
false
,
showNewPwd
:
false
,
...
...
@@ -217,6 +322,9 @@ export default {
return
this
.
codeCountDown
>
0
}
,
}
,
mounted
(){
this
.
getVerifycode
()
}
,
methods
:
{
...
mapMutations
([
'setUserInfo'
]),
async
verCode
()
{
...
...
@@ -245,7 +353,66 @@ export default {
console
.
error
(
e
)
}
}
,
async
verPhonecode
(){
try
{
await
new
Promise
((
resolve
,
reject
)
=>
{
this
.
$refs
.
ruleForm
.
validateField
(
'phone'
,
(
m
)
=>
{
m
?
reject
()
:
resolve
()
}
)
}
)
}
catch
{
return
}
try
{
const
res
=
await
post
(
'business/user/phonecode'
,
{
account
:
this
.
ruleForm
.
phone
,
verifyKey
:
this
.
verifyKeyTime
,
verifyCode
:
this
.
ruleForm
.
verifyKey
}
)
this
.
codeCountDown
=
60
this
.
timer
=
setInterval
(()
=>
{
this
.
codeCountDown
--
if
(
this
.
codeCountDown
<=
0
)
{
clearInterval
(
this
.
timer
)
}
}
,
1000
)
this
.
$message
.
success
(
res
.
message
)
}
catch
(
e
)
{
this
.
getVerifycode
()
console
.
error
(
e
)
}
}
,
async
forgetPhonecode
(){
try
{
await
new
Promise
((
resolve
,
reject
)
=>
{
this
.
$refs
.
forgetForm
.
validateField
(
'phone'
,
(
m
)
=>
{
m
?
reject
()
:
resolve
()
}
)
}
)
}
catch
{
return
}
try
{
const
res
=
await
post
(
'business/user/phonecode'
,
{
account
:
this
.
forgetForm
.
phone
,
verifyKey
:
this
.
verifyKeyTime
,
verifyCode
:
this
.
forgetForm
.
verifyKey
}
)
this
.
codeCountDown
=
60
this
.
timer
=
setInterval
(()
=>
{
this
.
codeCountDown
--
if
(
this
.
codeCountDown
<=
0
)
{
clearInterval
(
this
.
timer
)
}
}
,
1000
)
this
.
$message
.
success
(
res
.
message
)
}
catch
(
e
)
{
this
.
getVerifycode
()
console
.
error
(
e
)
}
}
,
forgetPassword
()
{
this
.
getVerifycode
()
this
.
isShowModal
=
true
this
.
forgetForm
=
{
}
this
.
codeCountDown
=
0
...
...
@@ -267,8 +434,8 @@ export default {
const
passwordHash
=
hash
.
hex
()
post
(
'business/user/restPassword'
,
{
password
:
passwordHash
,
email
:
this
.
forgetForm
.
email
,
code
:
this
.
forgetForm
.
code
,
account
:
this
.
forgetForm
.
email
?
this
.
forgetForm
.
email
:
this
.
forgetForm
.
phone
,
code
:
this
.
forgetForm
.
code
}
).
then
((
res
)
=>
{
if
(
res
.
code
===
200
)
{
this
.
$message
.
success
(
'密码修改成功'
)
...
...
@@ -283,15 +450,24 @@ export default {
e
.
preventDefault
()
this
.
$refs
.
ruleForm
.
validate
((
valid
)
=>
{
if
(
valid
)
{
const
hash
=
md5
.
create
()
hash
.
update
(
this
.
ruleForm
.
password
)
const
passwordHash
=
hash
.
hex
()
let
parmes
=
{
}
if
(
this
.
ruleForm
.
password
){
const
hash
=
md5
.
create
()
hash
.
update
(
this
.
ruleForm
.
password
)
const
passwordHash
=
hash
.
hex
()
parmes
=
{
account
:
this
.
ruleForm
.
email
?
this
.
ruleForm
.
email
:
this
.
ruleForm
.
phone
,
password
:
passwordHash
,
}
}
else
{
parmes
=
{
account
:
this
.
ruleForm
.
email
?
this
.
ruleForm
.
email
:
this
.
ruleForm
.
phone
,
code
:
this
.
ruleForm
.
code
}
}
let
url
=
`business/user/login`
post
(
url
,
{
email
:
this
.
ruleForm
.
email
,
password
:
passwordHash
}
).
then
((
res
)
=>
{
post
(
url
,
parmes
).
then
((
res
)
=>
{
if
(
res
.
code
===
200
)
{
localStorage
.
setItem
(
'userInfo'
,
JSON
.
stringify
(
res
.
data
))
this
.
setUserInfo
(
JSON
.
parse
(
JSON
.
stringify
(
res
.
data
)))
...
...
@@ -302,6 +478,16 @@ export default {
}
}
)
}
,
getVerifycode
(){
this
.
verifyKeyTime
=
new
Date
().
getTime
();
get
(
'business/user/verifycode'
,{
verifyKey
:
this
.
verifyKeyTime
}
).
then
((
res
)
=>
{
if
(
res
.
code
===
200
){
this
.
VerifyUrl
=
res
.
message
}
}
)
}
}
,
}
<
/script
>
...
...
@@ -476,6 +662,12 @@ export default {
.
login
-
page
::
v
-
deep
.
el
-
input__inner
::
-
ms
-
clear
{
display
:
none
;
}
.
radioGroup
{
display
:
flex
;
justify
-
content
:
center
;
align
-
items
:
center
;
margin
-
bottom
:
20
px
;
}
@
media
screen
and
(
max
-
width
:
1100
px
)
{
.
login
-
page
{
...
...
src/views/register.vue
View file @
8ac38a9f
...
...
@@ -13,25 +13,29 @@
<h2
style=
"text-align: center; font-weight: 400; color: #4a4c6d"
>
用户注册
</h2>
<el-radio-group
v-model=
"labelPosition"
class=
"radioGroup"
size=
"small"
@
change=
"clickChange"
>
<el-radio-button
label=
"mailbox"
>
邮箱注册
</el-radio-button>
<el-radio-button
label=
"phone"
>
手机号注册
</el-radio-button>
</el-radio-group>
<el-form
size=
"medium"
:model=
"registerForm"
:rules=
"rules"
ref=
"registerForm"
class=
"login_form"
>
<el-form-item
prop=
"email"
label=
""
>
<el-form-item
v-if=
"labelPosition==='mailbox'"
prop=
"email"
label=
""
>
<el-input
v-model=
"registerForm.email"
prefix-icon=
"el-icon-postcard"
placeholder=
"请输入邮箱"
></el-input>
</el-form-item>
<el-form-item
prop=
"code"
label=
""
>
<el-form-item
v-if=
"labelPosition==='mailbox'"
prop=
"code"
label=
""
>
<div
style=
"display: flex; gap: 20px"
>
<div
style=
"flex: 1"
>
<el-input
v-model=
"registerForm.code"
prefix-icon=
"el-icon-message"
placeholder=
"请输入验证码"
></el-input>
placeholder=
"请输入
邮箱
验证码"
></el-input>
</div>
<div>
<el-button
...
...
@@ -47,6 +51,51 @@
<
/div
>
<
/div
>
<
/el-form-item
>
<
el
-
form
-
item
v
-
if
=
"labelPosition==='phone'"
prop
=
"phone"
label
=
""
>
<
el
-
input
v
-
model
=
"registerForm.phone"
prefix
-
icon
=
"el-icon-phone"
placeholder
=
"请输入手机号"
><
/el-input
>
<
/el-form-item
>
<
el
-
form
-
item
v
-
if
=
"labelPosition==='phone'"
prop
=
"verifyKey"
label
=
""
>
<
div
style
=
"display: flex; gap: 20px; margin-bottom: -10px;"
>
<
div
style
=
"flex: 1"
>
<
el
-
input
v
-
model
=
"registerForm.verifyKey"
prefix
-
icon
=
"el-icon-postcard"
placeholder
=
"请输入验证码,区分大小写"
>
<
/el-input
>
<
/div
>
<
div
@
click
=
"getVerifycode"
>
<
img
style
=
"width: 100px; height: 80%"
:
src
=
"VerifyUrl"
>
<
/img
>
<
/div
>
<
/div
>
<
/el-form-item
>
<
el
-
form
-
item
v
-
if
=
"labelPosition==='phone'"
prop
=
"code"
label
=
""
>
<
div
style
=
"display: flex; gap: 20px"
>
<
div
style
=
"flex: 1"
>
<
el
-
input
v
-
model
=
"registerForm.code"
prefix
-
icon
=
"el-icon-message"
placeholder
=
"请输入短信验证码"
><
/el-input
>
<
/div
>
<
div
>
<
el
-
button
class
=
"get-code-button"
style
=
"width: 112px"
:
disabled
=
"getCodeDisabled"
:
class
=
"getCodeDisabled ? 'disabled' : 'code-btn'"
@
click
=
"verPhonecode"
>
{{
codeCountDown
===
0
?
'获取验证码'
:
`${codeCountDown
}
秒`
}}
<
/el-button
>
<
/div
>
<
/div
>
<
/el-form-item
>
<
el
-
form
-
item
prop
=
"password"
label
=
""
>
<
el
-
input
type
=
"password"
...
...
@@ -121,6 +170,9 @@ export default {
}
}
return
{
VerifyUrl
:
''
,
verifyKeyTime
:
''
,
labelPosition
:
'mailbox'
,
registerForm
:
{
}
,
isRead
:
false
,
agreeAnimate
:
false
,
...
...
@@ -134,7 +186,16 @@ export default {
trigger
:
[
'blur'
,
'change'
],
}
,
],
phone
:
[
{
required
:
true
,
message
:
'请输入手机号'
,
trigger
:
'blur'
}
,
{
pattern
:
/^1
[
3,4,5,6,7,8,9
][
0-9
]
{9
}
$/
,
message
:
"请输入正确手机号码"
,
trigger
:
[
'blur'
,
'change'
],
}
],
code
:
[{
required
:
true
,
message
:
'请输入验证码'
,
trigger
:
'blur'
}
],
verifyKey
:
[{
required
:
true
,
message
:
'请输入验证码'
,
trigger
:
'blur'
}
],
password
:
[{
required
:
true
,
message
:
'请输入密码'
,
trigger
:
'blur'
}
],
checkPass
:
[
{
required
:
true
,
message
:
'请再次输入密码'
,
trigger
:
'blur'
}
,
...
...
@@ -153,6 +214,9 @@ export default {
return
this
.
codeCountDown
>
0
}
,
}
,
mounted
(){
this
.
getVerifycode
()
}
,
methods
:
{
async
verCode
()
{
try
{
...
...
@@ -166,7 +230,7 @@ export default {
}
try
{
const
res
=
await
get
(
'business/user/emailcode'
,
{
email
:
this
.
registerForm
.
email
,
email
:
this
.
registerForm
.
email
}
)
this
.
codeCountDown
=
60
this
.
timer
=
setInterval
(()
=>
{
...
...
@@ -180,6 +244,35 @@ export default {
console
.
error
(
e
)
}
}
,
async
verPhonecode
(){
try
{
await
new
Promise
((
resolve
,
reject
)
=>
{
this
.
$refs
.
registerForm
.
validateField
(
'phone'
,
(
m
)
=>
{
m
?
reject
()
:
resolve
()
}
)
}
)
}
catch
{
return
}
try
{
const
res
=
await
post
(
'business/user/phonecode'
,
{
account
:
this
.
registerForm
.
phone
,
verifyKey
:
this
.
verifyKeyTime
,
verifyCode
:
this
.
registerForm
.
verifyKey
}
)
this
.
codeCountDown
=
60
this
.
timer
=
setInterval
(()
=>
{
this
.
codeCountDown
--
if
(
this
.
codeCountDown
<=
0
)
{
clearInterval
(
this
.
timer
)
}
}
,
1000
)
this
.
$message
.
success
(
res
.
message
)
}
catch
(
e
)
{
this
.
getVerifycode
()
console
.
error
(
e
)
}
}
,
onRegister
()
{
this
.
$refs
.
registerForm
.
validate
((
valid
)
=>
{
if
(
valid
)
{
...
...
@@ -190,7 +283,7 @@ export default {
}
,
700
)
return
}
const
{
code
,
companyName
,
email
,
job
,
password
}
=
this
.
registerForm
const
{
code
,
companyName
,
email
,
job
,
password
,
phone
,
verifyKey
}
=
this
.
registerForm
const
hash
=
md5
.
create
()
hash
.
update
(
password
)
...
...
@@ -201,6 +294,7 @@ export default {
email
:
email
,
job
:
job
,
password
:
passwordHash
,
account
:
email
?
email
:
phone
}
).
then
((
res
)
=>
{
this
.
$message
.
success
(
res
.
message
)
if
(
res
.
code
===
200
)
{
...
...
@@ -211,6 +305,19 @@ export default {
}
}
)
}
,
getVerifycode
(){
this
.
verifyKeyTime
=
new
Date
().
getTime
();
get
(
'business/user/verifycode'
,{
verifyKey
:
this
.
verifyKeyTime
}
).
then
((
res
)
=>
{
if
(
res
.
code
===
200
){
this
.
VerifyUrl
=
res
.
message
}
}
)
}
,
clickChange
(
lab
){
this
.
registerForm
=
{
}
}
}
,
}
<
/script
>
...
...
@@ -313,6 +420,12 @@ export default {
top
:
7
%
;
left
:
8
%
;
}
.
radioGroup
{
display
:
flex
;
justify
-
content
:
center
;
align
-
items
:
center
;
margin
-
top
:
10
px
;
}
@
media
screen
and
(
max
-
width
:
1100
px
)
{
.
login_bg
{
...
...
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