Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
B
beyond-clouds-frontM
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
云深项目组
beyond-clouds-frontM
Commits
5eefda1f
Commit
5eefda1f
authored
Mar 12, 2020
by
高浩杰
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
完成登录、注册、找回密码基础页面
parent
77e52dbe
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
610 additions
and
70 deletions
+610
-70
pages/users/login.vue
+149
-64
pages/users/register.vue
+248
-3
pages/users/reset.vue
+213
-3
No files found.
pages/users/login.vue
View file @
5eefda1f
<
template
>
<yun-slider>
<yun-div
:width-v=
"704"
:padding-v=
"[65,60,0,60]"
:margin-v=
"[0,'auto']"
:extend-style=
"
{boxSizing: 'border-box'}"
:border-r="[8]"
>
<yun-div
:width-v=
"704"
:height-v=
"820"
:padding-v=
"[65,60,72,60]"
:margin-v=
"[0,'auto']"
:extend-style=
"
{boxSizing: 'border-box'}"
:border-r="[8]"
slot="card"
:show-ske=
"false"
:margin-v=
"[0,0,56,0]"
:font-style=
"[32,43,500,'#999','center']"
>
<span
:class=
"
{actived: isPassword}" @click="handleLoginWayOne">密码登录
</span>
<span
:style=
"
{margin: commonReturnFlexedLength(18)}">·
</span>
<span
:class=
"
{actived: !isPassword}" @click="handleLoginWayTwo">短信登录
</span>
</yun-div>
<yun-input
:key=
"inputKey"
:width-v=
"584"
:height-v=
"86"
:border-r=
"[8]"
left-word=
"手机号:"
v-model=
"account"
:validate=
"validate"
></yun-input>
<yun-div
:show-ske=
"false"
v-if=
"isPassword"
>
<yun-input
key=
"loginPassword"
:width-v=
"584"
:height-v=
"86"
:border-r=
"[8,0,0,8]"
left-word=
"密码:"
v-model=
"password"
:validate=
"validatePassword"
:input-type=
"inputType"
></yun-input>
<yun-div
:show-ske=
"false"
:margin-v=
"[0,0,56,0]"
:font-style=
"[32,43,500,'#999','center']"
>
<span>
密码登录
</span>
<span
:style=
"
{margin: commonReturnFlexedLength(18)}">·
</span>
<span>
短信登录
</span>
:width-v=
"56"
:height-v=
"86"
:border-r=
"[8]"
:extend-style=
"
{lineHeight:commonReturnFlexedLength(86),position: 'absolute',top: 0,right: 0}">
<yun-icon
:name=
"iconName"
:size=
"20"
color=
"#999"
@
click
.
native=
"showPassword"
></yun-icon>
</yun-div>
</yun-div>
<yun-div
:show-ske=
"false"
v-else
>
<yun-input
key=
"loginVerificationCode"
:width-v=
"584"
:height-v=
"86"
:border-r=
"[8]"
left-word=
"手机号:"
v-model=
"account"
:validate=
"validate"
:border-r=
"[8,0,0,8]"
left-word=
"验证码:"
v-model=
"VerificationCode"
:validate=
"validateCode"
:input-type=
"inputType"
></yun-input>
<yun-div
:show-ske=
"false"
>
<yun-input
:width-v=
"584"
:height-v=
"86"
:border-r=
"[8,0,0,8]"
left-word=
"密码:"
v-model=
"password"
:validate=
"validatePassword"
:input-type=
"inputType"
></yun-input>
<yun-div
:width-v=
"56"
:height-v=
"86"
:border-r=
"[8]"
bg-color-v=
"#F4F8FA"
:extend-style=
"
{lineHeight:commonReturnFlexedLength(86),position: 'absolute',top: 0,right: 0}">
<yun-icon
:name=
"iconName"
:size=
"10"
color=
"#999"
></yun-icon>
</yun-div>
</yun-div>
<yun-button
:disabled=
"true"
:size=
"[584,86]"
:style=
"
{backgroundColor:commonReturnPrimaryColor(0.2)}">登 录
</yun-button>
<yun-div
:show-ske=
"false"
:margin-v=
"[25,0,0,0]"
:width-v=
"584"
:flex-v=
"['row','space-between','center']"
:font-style=
"[24,24,500,'#999','left']"
:height-v=
"86"
:margin-v=
"[0,30,0,0]"
:border-r=
"[8]"
:font-style=
"[26,35,500,'#75D098','left']"
:extend-style=
"
{lineHeight:commonReturnFlexedLength(86),position: 'absolute',top: 0,right: 0}"
@click.native="sendSms"
>
<yun-div
:flex-v=
"['row','space-between','center']"
>
<input
id=
"automatic"
type=
"checkbox"
v-model=
"isSelect"
>
<label
for=
"automatic"
></label>
<yun-div
:margin-v=
"[0,0,0,16]"
>
下次自动登录
</yun-div>
</yun-div>
<yun-div>
忘记密码
</yun-div>
{{
timing
}}
</yun-div>
</yun-div>
<yun-button
:disabled=
"isClick"
:size=
"[584,86]"
:style=
"
{backgroundColor:commonReturnPrimaryColor(opacity)}">登 录
</yun-button>
<yun-div
:show-ske=
"false"
:margin-v=
"[25,0,0,0]"
:width-v=
"584"
:flex-v=
"['row','space-between','center']"
:font-style=
"[24,24,500,'#999','left']"
>
<yun-div
:flex-v=
"['row','space-between','center']"
>
<input
id=
"automatic"
type=
"checkbox"
v-model=
"isSelect"
>
<label
for=
"automatic"
></label>
<yun-div
:margin-v=
"[0,0,0,16]"
>
下次自动登录
</yun-div>
</yun-div>
<yun-div
@
click
.
native=
"toReset"
>
忘记密码
</yun-div>
</yun-div>
<yun-div
:width-v=
"344"
:flex-v=
"['row','space-between','center']"
:margin-v=
"[69,120,72]"
>
<yun-div
:width-v=
"80"
:height-v=
"80"
:flex-v=
"['row','center','center']"
:border-r=
"['50%']"
bg-color-v=
"#F4F8FA"
>
<yun-img
:ske-w=
"80"
:ske-h=
"80"
:width-v=
"40"
:height-v=
"40"
:src=
"QQ"
></yun-img>
</yun-div>
<yun-div
:width-v=
"344"
:flex-v=
"['row','space-between','center']"
:margin-v=
"[69,120,72]"
>
<yun-div
:width-v=
"80"
:height-v=
"80"
:flex-v=
"['row','center','center']"
:border-r=
"['50%']"
bg-color-v=
"#F4F8FA"
>
<yun-img
:ske-w=
"80"
:ske-h=
"80"
:width-v=
"40"
:height-v=
"40"
:src=
"QQ"
></yun-img>
</yun-div>
<yun-div
:width-v=
"80"
:height-v=
"80"
:flex-v=
"['row','center','center']"
:border-r=
"['50%']"
bg-color-v=
"#F4F8FA"
>
<yun-img
:ske-w=
"80"
:ske-h=
"80"
:width-v=
"40"
:height-v=
"40"
:border-r=
"['50%']"
:src=
"wechat"
></yun-img>
</yun-div>
<yun-div
:width-v=
"80"
:height-v=
"80"
:flex-v=
"['row','center','center']"
:border-r=
"['50%']"
bg-color-v=
"#F4F8FA"
>
<yun-img
:ske-w=
"80"
:ske-h=
"80"
:width-v=
"40"
:height-v=
"40"
:border-r=
"['50%']"
:src=
"dingding"
></yun-img>
</yun-div>
<yun-div
:width-v=
"80"
:height-v=
"80"
:flex-v=
"['row','center','center']"
:border-r=
"['50%']"
bg-color-v=
"#F4F8FA"
>
<yun-img
:ske-w=
"80"
:ske-h=
"80"
:width-v=
"40"
:height-v=
"40"
:border-r=
"['50%']"
:src=
"wechat"
></yun-img>
</yun-div>
<yun-div
:width-v=
"80"
:height-v=
"80"
:flex-v=
"['row','center','center']"
:border-r=
"['50%']"
bg-color-v=
"#F4F8FA"
>
<yun-img
:ske-w=
"80"
:ske-h=
"80"
:width-v=
"40"
:height-v=
"40"
:border-r=
"['50%']"
:src=
"dingding"
></yun-img>
</yun-div>
</yun-div>
</yun-
slider
>
</yun-
div
>
</
template
>
<
script
>
import
commonMixin
from
"../../components/moblie/commonMixin"
;
import
QQ
from
'../../assets/svg/qq.svg'
import
wechat
from
'../../assets/svg/wechat.svg'
import
dingding
from
'../../assets/svg/dingding.svg'
export
default
{
mixins
:[
commonMixin
],
mixins
:
[
commonMixin
],
data
()
{
return
{
QQ
,
...
...
@@ -91,6 +115,7 @@ export default {
dingding
,
account
:
''
,
password
:
''
,
VerificationCode
:
''
,
validate
:
[
{
regex
:
/^1
[
3456789
]\d{9}
$/
,
...
...
@@ -99,13 +124,66 @@ export default {
],
validatePassword
:
[
{
regex
:
/
^
\s
$/g
,
regex
:
/
\S
/
,
alertWord
:
'密码不能为空'
}
],
validateCode
:
[
{
regex
:
/
\S
/
,
alertWord
:
'验证码不能为空'
}
],
iconName
:
'invisible'
,
inputType
:
'password'
,
isSelect
:
false
isSelect
:
false
,
opacity
:
0.2
,
isPassword
:
true
,
timing
:
'发送验证码'
,
inputKey
:
'passwordLogin'
}
},
computed
:
{
isClick
:
function
()
{
if
(
this
.
account
!==
''
&&
(
this
.
password
!==
''
||
this
.
VerificationCode
!==
''
))
{
this
.
opacity
=
1
return
false
}
else
{
this
.
opacity
=
0.2
return
true
}
}
},
methods
:
{
toReset
()
{
this
.
$router
.
push
(
'/users/reset'
)
},
showPassword
()
{
this
.
inputType
=
this
.
inputType
===
'password'
?
'text'
:
'password'
this
.
iconName
=
this
.
iconName
===
'invisible'
?
'visible'
:
'invisible'
},
handleLoginWayOne
()
{
Object
.
assign
(
this
.
$data
,
this
.
$options
.
data
())
this
.
isPassword
=
true
},
handleLoginWayTwo
()
{
Object
.
assign
(
this
.
$data
,
this
.
$options
.
data
())
this
.
isPassword
=
false
this
.
inputKey
=
'codeLogin'
},
sendSms
()
{
if
(
this
.
timing
===
'发送验证码'
)
{
console
.
log
(
'发送验证码'
);
let
time
=
60
;
let
timer
=
setInterval
(()
=>
{
this
.
timing
=
`
${
time
}
秒`
time
--
;
},
1000
);
setTimeout
(()
=>
{
clearInterval
(
timer
)
this
.
timing
=
'发送验证码'
},
60000
)
}
}
}
...
...
@@ -113,6 +191,10 @@ export default {
</
script
>
<
style
lang=
"scss"
scoped
>
.actived
{
color
:
#2F2F2F
!important
;
}
#automatic
+
label
{
display
:
inline-block
;
width
:
24
*$
length
;
...
...
@@ -123,6 +205,7 @@ export default {
border
:
1
*$
length
solid
#999
;
box-sizing
:
border-box
;
}
#automatic
:checked
+
label
::before
{
display
:
block
;
width
:
24
*$
length
;
...
...
@@ -135,9 +218,11 @@ export default {
color
:
#fff
;
@include
border-radius(2*$length);
}
#automatic
:checked
+
label
{
border
:
none
;
}
input
[
type
=
checkbox
]
{
display
:
none
;
}
...
...
pages/users/register.vue
View file @
5eefda1f
<
template
>
<yun-div
:width-v=
"704"
:padding-v=
"[65,60,0,60]"
:margin-v=
"[0,'auto']"
:extend-style=
"
{boxSizing: 'border-box'}"
:border-r="[8]"
>
<yun-div
:show-ske=
"false"
:margin-v=
"[0,0,56,0]"
:font-style=
"[32,43,500,'#999','center']"
>
<span
:class=
"
{actived: isPhone}" @click="handleLoginWayOne">手机号注册
</span>
<span
:style=
"
{margin: commonReturnFlexedLength(18)}">·
</span>
<span
:class=
"
{actived: !isPhone}" @click="handleLoginWayTwo">邮箱号注册
</span>
</yun-div>
<yun-input
v-if=
"isPhone"
key=
"registerPhone"
:width-v=
"584"
:height-v=
"86"
:border-r=
"[8]"
left-word=
"手机号:"
v-model=
"account"
:validate=
"validate"
></yun-input>
<yun-input
v-else
key=
"registerEmail"
:width-v=
"584"
:height-v=
"86"
:border-r=
"[8]"
left-word=
"邮箱号:"
v-model=
"account"
:validate=
"validateEmail"
></yun-input>
<yun-div
:show-ske=
"false"
>
<yun-input
:key=
"inputKey"
:width-v=
"584"
:height-v=
"86"
:border-r=
"[8,0,0,8]"
left-word=
"密码:"
v-model=
"password"
:validate=
"validatePassword"
:input-type=
"inputType"
></yun-input>
<yun-div
:width-v=
"56"
:height-v=
"86"
:border-r=
"[8]"
:extend-style=
"
{lineHeight:commonReturnFlexedLength(86),position: 'absolute',top: 0,right: 0}">
<yun-icon
:name=
"iconName"
:size=
"20"
color=
"#999"
@
click
.
native=
"showPassword"
></yun-icon>
</yun-div>
</yun-div>
<yun-div
:show-ske=
"false"
v-if=
"isPhone"
>
<yun-input
key=
"VerificationCode"
:width-v=
"584"
:height-v=
"86"
:border-r=
"[8,0,0,8]"
left-word=
"验证码:"
v-model=
"VerificationCode"
:validate=
"validateCode"
:input-type=
"inputType"
></yun-input>
<yun-div
:show-ske=
"false"
:height-v=
"86"
:margin-v=
"[0,30,0,0]"
:border-r=
"[8]"
:font-style=
"[26,35,500,'#75D098','left']"
:extend-style=
"
{lineHeight:commonReturnFlexedLength(86),position: 'absolute',top: 0,right: 0}"
@click.native="sendSms"
>
{{
timing
}}
</yun-div>
</yun-div>
<yun-button
:disabled=
"isClick"
:size=
"[584,86]"
:style=
"
{backgroundColor:commonReturnPrimaryColor(opacity)}">
注 册
</yun-button>
<yun-div
:show-ske=
"false"
:margin-v=
"[25,0,0,0]"
:width-v=
"584"
:flex-v=
"['row','space-between','center']"
:font-style=
"[24,24,500,'#999','left']"
>
<yun-div
:flex-v=
"['row','space-between','center']"
>
<input
id=
"automatic"
type=
"checkbox"
v-model=
"isSelect"
>
<label
for=
"automatic"
></label>
<yun-div
:margin-v=
"[0,0,0,16]"
>
我已阅读并同意
<span
style=
"color: #666666"
>
用户协议
</span>
和
<span
style=
"color:#666666;"
>
隐私政策
</span></yun-div>
</yun-div>
<yun-div
@
click
.
native=
"toReset"
>
忘记密码
</yun-div>
</yun-div>
<yun-div
:width-v=
"344"
:flex-v=
"['row','space-between','center']"
:margin-v=
"[69,120,72]"
>
<yun-div
:width-v=
"80"
:height-v=
"80"
:flex-v=
"['row','center','center']"
:border-r=
"['50%']"
bg-color-v=
"#F4F8FA"
>
<yun-img
:ske-w=
"80"
:ske-h=
"80"
:width-v=
"40"
:height-v=
"40"
:src=
"QQ"
></yun-img>
</yun-div>
<yun-div
:width-v=
"80"
:height-v=
"80"
:flex-v=
"['row','center','center']"
:border-r=
"['50%']"
bg-color-v=
"#F4F8FA"
>
<yun-img
:ske-w=
"80"
:ske-h=
"80"
:width-v=
"40"
:height-v=
"40"
:border-r=
"['50%']"
:src=
"wechat"
></yun-img>
</yun-div>
<yun-div
:width-v=
"80"
:height-v=
"80"
:flex-v=
"['row','center','center']"
:border-r=
"['50%']"
bg-color-v=
"#F4F8FA"
>
<yun-img
:ske-w=
"80"
:ske-h=
"80"
:width-v=
"40"
:height-v=
"40"
:border-r=
"['50%']"
:src=
"dingding"
></yun-img>
</yun-div>
</yun-div>
</yun-div>
</
template
>
<
script
>
import
commonMixin
from
"../../components/moblie/commonMixin"
;
import
QQ
from
'../../assets/svg/qq.svg'
import
wechat
from
'../../assets/svg/wechat.svg'
import
dingding
from
'../../assets/svg/dingding.svg'
export
default
{
mixins
:
[
commonMixin
],
data
()
{
return
{
QQ
,
wechat
,
dingding
,
account
:
''
,
password
:
''
,
VerificationCode
:
''
,
validate
:
[
{
regex
:
/^1
[
3456789
]\d{9}
$/
,
alertWord
:
'手机号格式错误'
}
],
validateEmail
:
[
{
regex
:
/^
([
a-zA-Z0-9
]
+
[
_|
\_
|
\.]?)
*
[
a-zA-Z0-9
]
+@
([
a-zA-Z0-9
]
+
[
_|
\_
|
\.]?)
*
[
a-zA-Z0-9
]
+
\.[
a-zA-Z
]{2,3}
$/
,
alertWord
:
'邮箱格式错误'
}
],
validatePassword
:
[
{
regex
:
/^
(?![
0-9
]
+$
)(?![
a-z
]
+$
)(?![
A-Z
]
+$
)(?!([^
(0-9a-zA-Z)
])
+$
)
.
{8,16}
$/
,
alertWord
:
'密码要求长度为8-16位,包含数字和字母'
}
],
validateCode
:
[
{
regex
:
/
\S
/
,
alertWord
:
'验证码不能为空'
}
],
iconName
:
'invisible'
,
inputType
:
'password'
,
isSelect
:
false
,
opacity
:
0.2
,
isPhone
:
true
,
timing
:
'发送验证码'
,
inputKey
:
'registerPhonePassword'
}
},
computed
:
{
isClick
:
function
()
{
if
(
this
.
isPhone
)
{
if
(
this
.
account
!==
''
&&
this
.
password
!==
''
&&
this
.
VerificationCode
!==
''
)
{
this
.
opacity
=
1
return
false
}
else
{
this
.
opacity
=
0.2
return
true
}
}
else
{
if
(
this
.
account
!==
''
&&
this
.
password
!==
''
)
{
this
.
opacity
=
1
return
false
}
else
{
this
.
opacity
=
0.2
return
true
}
}
}
},
methods
:
{
toReset
()
{
this
.
$router
.
push
(
'/users/reset'
)
},
showPassword
()
{
this
.
inputType
=
this
.
inputType
===
'password'
?
'text'
:
'password'
this
.
iconName
=
this
.
iconName
===
'invisible'
?
'visible'
:
'invisible'
},
handleLoginWayOne
()
{
Object
.
assign
(
this
.
$data
,
this
.
$options
.
data
())
this
.
isPhone
=
true
},
handleLoginWayTwo
()
{
Object
.
assign
(
this
.
$data
,
this
.
$options
.
data
())
this
.
isPhone
=
false
this
.
inputKey
=
'registerEmailPassword'
},
sendSms
()
{
if
(
this
.
timing
===
'发送验证码'
)
{
console
.
log
(
'发送验证码'
);
let
time
=
60
;
let
timer
=
setInterval
(()
=>
{
this
.
timing
=
`
${
time
}
秒`
time
--
;
},
1000
);
setTimeout
(()
=>
{
clearInterval
(
timer
)
this
.
timing
=
'发送验证码'
},
60000
)
}
}
}
export
default
{
}
</
script
>
<
style
lang=
"scss"
scoped
>
.actived
{
color
:
#2F2F2F
!important
;
}
#automatic
+
label
{
display
:
inline-block
;
width
:
24
*$
length
;
height
:
24
*$
length
;
cursor
:
pointer
;
background-color
:
#fff
;
@include
border-radius(2*$length);
border
:
1
*$
length
solid
#999
;
box-sizing
:
border-box
;
}
</
script
>
#automatic
:checked
+
label
::before
{
display
:
block
;
width
:
24
*$
length
;
height
:
24
*$
length
;
line-height
:
24
*$
length
;
content
:
"\2713"
;
text-align
:
center
;
font-size
:
12
*$
length
;
background-color
:
#75D098
;
color
:
#fff
;
@include
border-radius(2*$length);
}
#automatic
:checked
+
label
{
border
:
none
;
}
input
[
type
=
checkbox
]
{
display
:
none
;
}
</
style
>
pages/users/reset.vue
View file @
5eefda1f
<
template
>
<yun-div
:width-v=
"704"
:padding-v=
"[65,60,0,60]"
:margin-v=
"[0,'auto']"
:extend-style=
"
{boxSizing: 'border-box'}"
:border-r="[8]"
>
<yun-div
:show-ske=
"false"
:margin-v=
"[0,0,56,0]"
:font-style=
"[32,43,500,'#999','center']"
>
<span
class=
"actived"
>
忘记密码
</span>
</yun-div>
<yun-input
:width-v=
"584"
:height-v=
"86"
:border-r=
"[8]"
left-word=
"手机号:"
v-model=
"account"
:validate=
"validate"
></yun-input>
<yun-div
:show-ske=
"false"
>
<yun-input
:width-v=
"584"
:height-v=
"86"
:border-r=
"[8,0,0,8]"
left-word=
"新密码:"
v-model=
"password"
:validate=
"validatePassword"
:input-type=
"inputType"
></yun-input>
<yun-div
:width-v=
"56"
:height-v=
"86"
:border-r=
"[8]"
:extend-style=
"
{lineHeight:commonReturnFlexedLength(86),position: 'absolute',top: 0,right: 0}">
<yun-icon
:name=
"iconName"
:size=
"20"
color=
"#999"
@
click
.
native=
"showPassword"
></yun-icon>
</yun-div>
</yun-div>
<yun-div
:show-ske=
"false"
>
<yun-input
:width-v=
"584"
:height-v=
"86"
:border-r=
"[8,0,0,8]"
left-word=
"验证码:"
v-model=
"VerificationCode"
:validate=
"validateCode"
:input-type=
"inputType"
></yun-input>
<yun-div
:show-ske=
"false"
:height-v=
"86"
:margin-v=
"[0,30,0,0]"
:border-r=
"[8]"
:font-style=
"[26,35,500,'#75D098','left']"
:extend-style=
"
{lineHeight:commonReturnFlexedLength(86),position: 'absolute',top: 0,right: 0}"
@click.native="sendSms"
>
{{
timing
}}
</yun-div>
</yun-div>
<yun-button
:disabled=
"isClick"
:size=
"[584,86]"
:style=
"
{backgroundColor:commonReturnPrimaryColor(opacity)}">
重置账号
</yun-button>
<yun-div
:show-ske=
"false"
:margin-v=
"[25,0,0,0]"
:width-v=
"584"
:flex-v=
"['row','space-between','']"
:font-style=
"[24,24,500,'#999','left']"
>
<yun-div
:flex-v=
"['row','space-between','']"
>
<input
id=
"automatic"
type=
"checkbox"
v-model=
"isSelect"
>
<label
for=
"automatic"
></label>
<yun-div
:margin-v=
"[0,0,0,16]"
>
我已阅读并同意
<span
style=
"color: #666666"
>
用户协议
</span>
和
<span
style=
"color:#666666;"
>
隐私政策
</span></yun-div>
</yun-div>
<yun-div>
<span
@
click=
"toLogin"
>
登录
</span>
<span>
·
</span>
<span
@
click=
"toRegister"
>
注册
</span>
</yun-div>
</yun-div>
<yun-div
:width-v=
"344"
:flex-v=
"['row','space-between','center']"
:margin-v=
"[69,120,72]"
>
<yun-div
:width-v=
"80"
:height-v=
"80"
:flex-v=
"['row','center','center']"
:border-r=
"['50%']"
bg-color-v=
"#F4F8FA"
>
<yun-img
:ske-w=
"80"
:ske-h=
"80"
:width-v=
"40"
:height-v=
"40"
:src=
"QQ"
></yun-img>
</yun-div>
<yun-div
:width-v=
"80"
:height-v=
"80"
:flex-v=
"['row','center','center']"
:border-r=
"['50%']"
bg-color-v=
"#F4F8FA"
>
<yun-img
:ske-w=
"80"
:ske-h=
"80"
:width-v=
"40"
:height-v=
"40"
:border-r=
"['50%']"
:src=
"wechat"
></yun-img>
</yun-div>
<yun-div
:width-v=
"80"
:height-v=
"80"
:flex-v=
"['row','center','center']"
:border-r=
"['50%']"
bg-color-v=
"#F4F8FA"
>
<yun-img
:ske-w=
"80"
:ske-h=
"80"
:width-v=
"40"
:height-v=
"40"
:border-r=
"['50%']"
:src=
"dingding"
></yun-img>
</yun-div>
</yun-div>
</yun-div>
</
template
>
<
script
>
import
commonMixin
from
"../../components/moblie/commonMixin"
;
import
QQ
from
'../../assets/svg/qq.svg'
import
wechat
from
'../../assets/svg/wechat.svg'
import
dingding
from
'../../assets/svg/dingding.svg'
export
default
{
mixins
:
[
commonMixin
],
data
()
{
return
{
QQ
,
wechat
,
dingding
,
account
:
''
,
password
:
''
,
VerificationCode
:
''
,
validate
:
[
{
regex
:
/^1
[
3456789
]\d{9}
$/
,
alertWord
:
'手机号格式错误'
}
],
validatePassword
:
[
{
regex
:
/^
(?![
0-9
]
+$
)(?![
a-z
]
+$
)(?![
A-Z
]
+$
)(?!([^
(0-9a-zA-Z)
])
+$
)
.
{8,16}
$/
,
alertWord
:
'密码要求长度为8-16位,包含数字和字母'
}
],
validateCode
:
[
{
regex
:
/
\S
/
,
alertWord
:
'验证码不能为空'
}
],
iconName
:
'invisible'
,
inputType
:
'password'
,
isSelect
:
false
,
opacity
:
0.2
,
isPassword
:
true
,
timing
:
'发送验证码'
}
},
computed
:
{
isClick
:
function
()
{
if
(
this
.
account
!==
''
&&
this
.
password
!==
''
&&
this
.
VerificationCode
!==
''
)
{
this
.
opacity
=
1
return
false
}
else
{
this
.
opacity
=
0.2
return
true
}
}
},
methods
:
{
toLogin
()
{
this
.
$router
.
push
(
'/users/login'
)
},
toRegister
()
{
this
.
$router
.
push
(
'/users/register'
)
},
showPassword
()
{
this
.
inputType
=
this
.
inputType
===
'password'
?
'text'
:
'password'
this
.
iconName
=
this
.
iconName
===
'invisible'
?
'visible'
:
'invisible'
},
sendSms
()
{
if
(
this
.
timing
===
'发送验证码'
)
{
console
.
log
(
'发送验证码'
);
let
time
=
60
;
let
timer
=
setInterval
(()
=>
{
this
.
timing
=
`
${
time
}
秒`
time
--
;
},
1000
);
setTimeout
(()
=>
{
clearInterval
(
timer
)
this
.
timing
=
'发送验证码'
},
60000
)
}
}
}
export
default
{
}
</
script
>
<
style
lang=
"scss"
scoped
>
.actived
{
color
:
#2F2F2F
!important
;
}
#automatic
+
label
{
display
:
inline-block
;
width
:
24
*$
length
;
height
:
24
*$
length
;
cursor
:
pointer
;
background-color
:
#fff
;
@include
border-radius(2*$length);
border
:
1
*$
length
solid
#999
;
box-sizing
:
border-box
;
}
</
script
>
#automatic
:checked
+
label
::before
{
display
:
block
;
width
:
24
*$
length
;
height
:
24
*$
length
;
line-height
:
24
*$
length
;
content
:
"\2713"
;
text-align
:
center
;
font-size
:
12
*$
length
;
background-color
:
#75D098
;
color
:
#fff
;
@include
border-radius(2*$length);
}
#automatic
:checked
+
label
{
border
:
none
;
}
input
[
type
=
checkbox
]
{
display
:
none
;
}
</
style
>
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