Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
lizidun
uni-starter-custom
提交
4631d059
U
uni-starter-custom
项目概览
lizidun
/
uni-starter-custom
该项目与 Fork 源项目分叉
Fork自
DCloud / uni-starter
通知
29
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-starter-custom
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
4631d059
编写于
4月 06, 2021
作者:
芊
芊里
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
login-page登录页面布局
上级
2df5b396
变更
18
隐藏空白更改
内联
并排
Showing
18 changed file
with
1248 addition
and
10 deletion
+1248
-10
pages.json
pages.json
+52
-10
uni_modules/login-page/changelog.md
uni_modules/login-page/changelog.md
+0
-0
uni_modules/login-page/common/myStyle.css
uni_modules/login-page/common/myStyle.css
+267
-0
uni_modules/login-page/components/auth-btn/auth-btn.vue
uni_modules/login-page/components/auth-btn/auth-btn.vue
+131
-0
uni_modules/login-page/components/login-action-sheet/login-action-sheet.vue
...page/components/login-action-sheet/login-action-sheet.vue
+119
-0
uni_modules/login-page/components/login-ikonw/login-ikonw.vue
...modules/login-page/components/login-ikonw/login-ikonw.vue
+78
-0
uni_modules/login-page/components/login-short-code/login-short-code.vue
...gin-page/components/login-short-code/login-short-code.vue
+80
-0
uni_modules/login-page/package.json
uni_modules/login-page/package.json
+76
-0
uni_modules/login-page/pages/index/index.nvue
uni_modules/login-page/pages/index/index.nvue
+79
-0
uni_modules/login-page/pages/index/phone-login.nvue
uni_modules/login-page/pages/index/phone-login.nvue
+122
-0
uni_modules/login-page/pages/index/pwd-login.nvue
uni_modules/login-page/pages/index/pwd-login.nvue
+133
-0
uni_modules/login-page/pages/index/pwd-retrieve.nvue
uni_modules/login-page/pages/index/pwd-retrieve.nvue
+110
-0
uni_modules/login-page/readme.md
uni_modules/login-page/readme.md
+1
-0
uni_modules/login-page/static/login/img/apple.png
uni_modules/login-page/static/login/img/apple.png
+0
-0
uni_modules/login-page/static/login/img/qq.png
uni_modules/login-page/static/login/img/qq.png
+0
-0
uni_modules/login-page/static/login/img/sinaweibo.png
uni_modules/login-page/static/login/img/sinaweibo.png
+0
-0
uni_modules/login-page/static/login/img/univerify.png
uni_modules/login-page/static/login/img/univerify.png
+0
-0
uni_modules/login-page/static/login/img/weixin.png
uni_modules/login-page/static/login/img/weixin.png
+0
-0
未找到文件。
pages.json
浏览文件 @
4631d059
...
...
@@ -42,16 +42,6 @@
"navigationBarBackgroundColor"
:
"#2F85FC"
,
"navigationBarTextStyle"
:
"white"
}
},{
"path"
:
"pages/login/login"
,
"style"
:{
"navigationBarTitleText"
:
"登录"
}
},{
"path"
:
"pages/reg/reg"
,
"style"
:{
"navigationBarTitleText"
:
"注册"
}
},{
"path"
:
"pages/uni-feedback/uni-feedback"
,
"style"
:{
...
...
@@ -122,6 +112,58 @@
"style"
:{
"navigationStyle"
:
"custom"
}
},{
"path"
:
"uni_modules/login-page/pages/index/index"
,
"style"
:{
"navigationBarTitleText"
:
""
,
"navigationBarBackgroundColor"
:
"#FFFFFF"
,
"app-plus"
:{
"titleNView"
:{
"buttons"
:[{
"text"
:
"帮助"
}]
}
}
}
},{
"path"
:
"uni_modules/login-page/pages/index/phone-login"
,
"style"
:{
"navigationBarTitleText"
:
""
,
"navigationBarBackgroundColor"
:
"#FFFFFF"
,
"app-plus"
:{
"titleNView"
:{
"buttons"
:[{
"text"
:
"帮助"
}]
}
}
}
},{
"path"
:
"uni_modules/login-page/pages/index/pwd-login"
,
"style"
:{
"navigationBarTitleText"
:
""
,
"navigationBarBackgroundColor"
:
"#FFFFFF"
,
"app-plus"
:{
"titleNView"
:{
"buttons"
:[{
"text"
:
"帮助"
}]
}
}
}
},{
"path"
:
"uni_modules/login-page/pages/index/pwd-retrieve"
,
"style"
:{
"navigationBarTitleText"
:
""
,
"navigationBarBackgroundColor"
:
"#FFFFFF"
,
"app-plus"
:{
"titleNView"
:{
"buttons"
:[{
"text"
:
"帮助"
}]
}
}
}
}
],
"globalStyle"
:
{
...
...
uni_modules/login-page/changelog.md
0 → 100644
浏览文件 @
4631d059
uni_modules/login-page/common/myStyle.css
0 → 100644
浏览文件 @
4631d059
.flex
{
/* #ifndef APP-VUE */
display
:
flex
;
/* #endif */
}
.w-750
{
width
:
750
rpx
;
}
.w-630
{
width
:
630
rpx
;
}
.w-400
{
width
:
400
rpx
;
}
.w-375
{
width
:
375
rpx
;
}
.flex-1
{
flex
:
1
;
}
.flex-column
{
flex-direction
:
column
;
}
.flex-row
{
flex-direction
:
row
;
}
.flex-wrap
{
flex-wrap
:
wrap
;
}
.flex-nowrap
{
flex-wrap
:
nowrap
;
}
.align-center
{
align-items
:
center
;
}
.align-start
{
align-items
:
flex-start
;
}
.align-end
{
align-items
:
flex-end
;
}
.justify-center
{
justify-content
:
center
;
}
.justify-start
{
justify-content
:
flex-start
;
}
.justify-end
{
justify-content
:
flex-end
;
}
.justify-between
{
justify-content
:
space-between
;
}
.round
{
border-radius
:
6
rpx
;
}
.round-0
{
border-radius
:
0
rpx
;
}
.round-1
{
border-radius
:
10
rpx
;
}
.p-1
{
padding
:
10
rpx
;
}
.p-2
{
padding
:
20
rpx
;
}
.p-3
{
padding
:
30
rpx
;
}
.p-4
{
padding
:
40
rpx
;
}
.p-5
{
padding
:
50
rpx
;
}
.px-1
{
padding-left
:
10
rpx
;
padding-right
:
10
rpx
;
}
.px-2
{
padding-left
:
20
rpx
;
padding-right
:
20
rpx
;
}
.px-3
{
padding-left
:
30
rpx
;
padding-right
:
30
rpx
;
}
.px-4
{
padding-left
:
40
rpx
;
padding-right
:
40
rpx
;
}
.px-5
{
padding-left
:
50
rpx
;
padding-right
:
50
rpx
;
}
.py-1
{
padding-top
:
10
rpx
;
padding-bottom
:
10
rpx
;
}
.py-2
{
padding-top
:
20
rpx
;
padding-bottom
:
20
rpx
;
}
.py-3
{
padding-top
:
30
rpx
;
padding-bottom
:
30
rpx
;
}
.py-4
{
padding-top
:
40
rpx
;
padding-bottom
:
40
rpx
;
}
.py-5
{
padding-top
:
50
rpx
;
padding-bottom
:
50
rpx
;
}
.pt-1
{
padding-top
:
10
rpx
;
}
.pt-2
{
padding-top
:
20
rpx
;
}
.pt-5
{
padding-top
:
50
rpx
;
}
.m-1
{
margin
:
10
rpx
;
}
.m-2
{
margin
:
20
rpx
;
}
.m-3
{
margin
:
30
rpx
;
}
.m-4
{
margin
:
40
rpx
;
}
.m-5
{
margin
:
50
rpx
;
}
.mt-2
{
margin-top
:
20
rpx
;
}
.mt-5
{
margin-top
:
50
rpx
;
}
.mx-1
{
margin-left
:
10
rpx
;
margin-right
:
10
rpx
;
}
.mx-2
{
margin-left
:
20
rpx
;
margin-right
:
20
rpx
;
}
.mx-3
{
margin-left
:
30
rpx
;
margin-right
:
30
rpx
;
}
.mx-4
{
margin-left
:
40
rpx
;
margin-right
:
40
rpx
;
}
.mx-5
{
margin-left
:
50
rpx
;
margin-right
:
50
rpx
;
}
.my-1
{
margin-top
:
10
rpx
;
margin-bottom
:
10
rpx
;
}
.my-2
{
margin-top
:
20
rpx
;
margin-bottom
:
20
rpx
;
}
.my-3
{
margin-top
:
30
rpx
;
margin-bottom
:
30
rpx
;
}
.my-4
{
margin-top
:
40
rpx
;
margin-bottom
:
40
rpx
;
}
.my-5
{
margin-top
:
50
rpx
;
margin-bottom
:
50
rpx
;
}
.font-blod
{
font-weight
:
bold
;
}
.font-bolder
{
font-weight
:
900
;
}
.font-lighter
{
font-weight
:
100
;
}
.font-normal
{
font-weight
:
normal
;
}
.font-20
{
font-size
:
20
rpx
;
}
.font-22
{
font-size
:
22
rpx
;
}
.font-24
{
font-size
:
24
rpx
;
}
.font-26
{
font-size
:
26
rpx
;
}
.font-28
{
font-size
:
28
rpx
;
}
.font-30
{
font-size
:
30
rpx
;
}
.font-32
{
font-size
:
32
rpx
;
}
.font-34
{
font-size
:
34
rpx
;
}
.font-36
{
font-size
:
36
rpx
;
}
.font-40
{
font-size
:
40
rpx
;
}
.font-50
{
font-size
:
50
rpx
;
}
.font-60
{
font-size
:
60
rpx
;
}
.font-100
{
font-size
:
100
rpx
;
}
.text-white
{
color
:
#FFFFFF
;
}
.text-sub
{
color
:
#8a8f8b
;
}
.bg-white
{
background-color
:
#FFFFFF
;
}
.hover
{
opacity
:
0.8
;
}
.border-test
{
/* #ifdef APP-NVUE */
border-width
:
1
rpx
;
border-color
:
#DD524D
;
/* #endif */
/* #ifndef APP-NVUE */
border
:
1
rpx
solid
#DD524D
;
box-sizing
:
border-box
;
/* #endif */
}
\ No newline at end of file
uni_modules/login-page/components/auth-btn/auth-btn.vue
0 → 100644
浏览文件 @
4631d059
<
template
>
<view
class=
"flex flex-row justify-center align-center flex-wrap auth-box"
>
<!--
<image
:src=
"item.image"
v-for=
"(item, index) in providerList"
:key=
"item.value"
@
click=
"clickItem"
class=
"auth-logo hidden"
></image>
-->
<image
ref=
"logo"
:src=
"item.image"
v-for=
"(item, index) in providerList"
:key=
"item.value"
@
click=
"clickItem"
class=
"auth-logo auth-logo-shadow hidden"
></image>
<view
ref=
"more"
class=
"flex justify-center align-center auth-more"
@
click=
"startAnimation"
>
<text
class=
"font-bolder font-50"
>
···
</text>
</view>
</view>
</
template
>
<
script
>
const
animation
=
uni
.
requireNativePlugin
(
'
animation
'
)
export
default
{
name
:
"
auth-btn
"
,
data
()
{
return
{
providerList
:
[],
translateArr
:[
-
147
,
-
49
,
49
,
147
]
};
},
created
()
{
this
.
initProvider
();
this
.
testInit
();
},
methods
:
{
/**
* 测试方法
*/
testInit
()
{
const
filters
=
[
'
apple
'
,
'
weixin
'
,
'
qq
'
,
'
sinaweibo
'
];
this
.
providerList
=
[];
filters
.
forEach
(
curProvider
=>
{
this
.
providerList
.
push
({
value
:
curProvider
,
image
:
'
../../static/login/img/
'
+
curProvider
+
'
.png
'
});
})
},
/**
* 初始化第三方登录
*/
initProvider
()
{
return
const
filters
=
[
'
apple
'
,
'
weixin
'
,
'
qq
'
,
'
sinaweibo
'
];
uni
.
getProvider
({
service
:
'
oauth
'
,
success
:
(
res
)
=>
{
if
(
res
.
provider
&&
res
.
provider
.
length
)
{
if
(
res
.
provider
.
indexOf
(
'
apple
'
)
!==
-
1
)
{
this
.
hasAppleLogin
=
true
;
}
for
(
let
i
=
0
;
i
<
res
.
provider
.
length
;
i
++
)
{
const
curProvider
=
res
.
provider
[
i
];
if
(
~
filters
.
indexOf
(
curProvider
))
{
this
.
providerList
.
push
({
value
:
curProvider
,
image
:
'
/components/auth-btn/img/
'
+
curProvider
+
'
.png
'
});
}
}
this
.
hasProvider
=
true
;
}
},
fail
:
(
err
)
=>
{
console
.
error
(
'
获取服务供应商失败:
'
+
JSON
.
stringify
(
err
));
}
});
},
clickItem
(
item
)
{
this
.
$emit
(
'
login
'
,
item
)
},
// 开始动画
startAnimation
()
{
let
more
=
this
.
$refs
.
more
;
animation
.
transition
(
more
,
{
styles
:
{
opacity
:
'
0
'
},
duration
:
100
,
//ms
timingFunction
:
'
linear
'
,
delay
:
0
//ms
},
()
=>
{});
let
logo
=
this
.
$refs
.
logo
;
logo
.
forEach
((
item
,
index
)
=>
{
animation
.
transition
(
item
,
{
styles
:
{
opacity
:
'
1
'
,
transform
:
`translateX(
${
uni
.
upx2px
(
this
.
translateArr
[
index
])}
px)`
},
duration
:
200
,
//ms
timingFunction
:
'
linear
'
,
delay
:
100
//ms
},
()
=>
{});
})
}
}
}
</
script
>
<
style
>
@import
url("../../common/myStyle.css")
;
.auth-logo
{
width
:
84
rpx
;
height
:
84
rpx
;
}
.hidden
{
opacity
:
0
;
}
.auth-box
{
position
:
relative
;
height
:
84
rpx
;
width
:
750
rpx
;
}
.auth-logo-shadow
{
position
:
absolute
;
}
.auth-more
{
position
:
absolute
;
width
:
84
rpx
;
height
:
84
rpx
;
border-radius
:
45
rpx
;
border-width
:
2
rpx
;
border-color
:
#000000
;
}
</
style
>
uni_modules/login-page/components/login-action-sheet/login-action-sheet.vue
0 → 100644
浏览文件 @
4631d059
<
template
>
<uni-popup
ref=
"actionSheet"
type=
"bottom"
>
<view
class=
"flex w-750 action-sheet-box bg-white"
>
<view
class=
"flex flex-row flex-nowrap align-center justify-center auth-item"
@
click=
"clickItem(item)"
hover-class=
"hover"
v-for=
"(item, index) in providerList"
:key=
"index"
>
<image
:src=
"item.image"
class=
"login-logo"
></image>
<text
class=
"px-1 font-28"
>
{{
providerName
[
item
.
value
]
}}
</text>
</view>
<view
class=
"cancel-line"
></view>
<view
class=
"flex flex-row flex-nowrap align-center justify-center cancel-item"
@
click=
"clickItem(item)"
>
<text
class=
"font-28"
>
取消
</text>
</view>
</view>
</uni-popup>
</
template
>
<
script
>
export
default
{
name
:
"
login-action-sheet
"
,
data
()
{
return
{
providerList
:
[],
providerName
:
{
apple
:
'
苹果登录
'
,
weixin
:
'
微信登录
'
,
qq
:
'
QQ登录
'
,
sinaweibo
:
'
微博登录
'
}
};
},
created
()
{
this
.
initProvider
();
this
.
testInit
();
},
methods
:
{
/**
* 测试方法
*/
testInit
()
{
const
filters
=
[
'
apple
'
,
'
weixin
'
,
'
qq
'
,
'
sinaweibo
'
];
this
.
providerList
=
[];
filters
.
forEach
(
curProvider
=>
{
this
.
providerList
.
push
({
value
:
curProvider
,
image
:
'
../../static/login/img/
'
+
curProvider
+
'
.png
'
});
})
},
/**
* 初始化第三方登录
*/
initProvider
()
{
return
const
filters
=
[
'
apple
'
,
'
weixin
'
,
'
qq
'
,
'
sinaweibo
'
];
uni
.
getProvider
({
service
:
'
oauth
'
,
success
:
(
res
)
=>
{
if
(
res
.
provider
&&
res
.
provider
.
length
)
{
if
(
res
.
provider
.
indexOf
(
'
apple
'
)
!==
-
1
)
{
this
.
hasAppleLogin
=
true
;
}
for
(
let
i
=
0
;
i
<
res
.
provider
.
length
;
i
++
)
{
const
curProvider
=
res
.
provider
[
i
];
if
(
~
filters
.
indexOf
(
curProvider
))
{
this
.
providerList
.
push
({
value
:
curProvider
,
image
:
'
/components/auth-btn/img/
'
+
curProvider
+
'
.png
'
});
}
}
this
.
hasProvider
=
true
;
}
},
fail
:
(
err
)
=>
{
console
.
error
(
'
获取服务供应商失败:
'
+
JSON
.
stringify
(
err
));
}
});
},
clickItem
(
item
)
{
this
.
$refs
.
actionSheet
.
close
();
if
(
item
)
this
.
$emit
(
'
login
'
,
item
);
},
open
()
{
this
.
$refs
.
actionSheet
.
open
();
}
}
}
</
script
>
<
style
>
@import
url("../../common/myStyle.css")
;
.action-sheet-box
{
border-top-left-radius
:
20
rpx
;
border-top-right-radius
:
20
rpx
;
}
.login-logo
{
width
:
42
rpx
;
height
:
42
rpx
;
}
.auth-item
{
border-bottom-width
:
1px
;
border-bottom-color
:
#F1F1F1
;
height
:
125
rpx
;
}
.cancel-item
{
height
:
125
rpx
;
}
.cancel-line
{
width
:
750
rpx
;
height
:
10
rpx
;
background-color
:
#F1F1F1
;
}
</
style
>
uni_modules/login-page/components/login-ikonw/login-ikonw.vue
0 → 100644
浏览文件 @
4631d059
<
template
>
<view
class=
"flex flex-row flex-wrap"
>
<text
class=
"text-sub font-26"
v-for=
"(t, i) in innerText"
:key=
"i"
:class=
"t.to?'link-color':''"
@
click=
"clickLink(t)"
>
{{
t
.
text
||
t
}}
</text>
</view>
</
template
>
<
script
>
/**
* text 政策描述文字
* link 高亮关键字及其链接
*/
export
default
{
name
:
"
login-ikonw
"
,
props
:
{
text
:
{
type
:
String
,
default
:
''
},
link
:
{
type
:
Array
,
default
:
[]
}
},
data
()
{
return
{
};
},
computed
:
{
innerText
()
{
if
(
this
.
link
.
length
==
0
)
return
this
.
text
;
let
textList
=
String
(
this
.
text
);
this
.
link
.
forEach
(
item
=>
{
textList
=
textList
.
replace
(
item
.
text
,
'
$
'
);
});
textList
=
textList
.
split
(
''
);
let
list
=
[],
linkList
=
JSON
.
parse
(
JSON
.
stringify
(
this
.
link
));
textList
.
forEach
((
text
,
tIndex
)
=>
{
if
(
text
==
'
$
'
)
{
let
currLink
=
linkList
.
shift
();
currLink
.
text
.
split
(
''
).
forEach
(
item
=>
{
list
.
push
({
text
:
item
,
to
:
currLink
.
to
});
})
}
else
{
list
.
push
({
text
})
}
});
return
list
;
}
},
methods
:
{
/**
* 点击跳转到协议页面
* @param {Object} link
*/
clickLink
(
link
)
{
uni
.
navigateTo
({
url
:
link
.
to
})
}
}
}
</
script
>
<
style
>
@import
url("../../common/myStyle.css")
;
.link-color
{
color
:
#04498c
;
}
</
style
>
uni_modules/login-page/components/login-short-code/login-short-code.vue
0 → 100644
浏览文件 @
4631d059
<
template
>
<view
class=
"flex justify-center align-center short-code-btn"
hover-class=
"hover"
@
click=
"clickBtn"
>
<text
class=
"font-28"
>
{{
innerText
}}
</text>
</view>
</
template
>
<
script
>
function
debounce
(
func
,
wait
)
{
let
timer
;
wait
=
wait
||
500
;
return
function
()
{
let
context
=
this
;
let
args
=
arguments
;
if
(
timer
)
clearTimeout
(
timer
);
let
callNow
=
!
timer
;
timer
=
setTimeout
(()
=>
{
timer
=
null
;
},
wait
)
if
(
callNow
)
func
.
apply
(
context
,
args
);
}
}
export
default
{
name
:
"
login-short-code
"
,
props
:
{
/**
* 倒计时时长 s
*/
count
:
{
type
:
[
String
,
Number
],
default
:
60
}
},
data
()
{
return
{
reverseNumber
:
0
,
reverseTimer
:
null
};
},
computed
:
{
innerText
()
{
if
(
this
.
reverseNumber
==
0
)
return
'
获取验证码
'
;
return
this
.
reverseNumber
;
}
},
created
()
{
this
.
initClick
();
},
methods
:
{
initClick
()
{
this
.
clickBtn
=
debounce
(()
=>
{
if
(
this
.
reverseNumber
!=
0
)
return
;
this
.
$emit
(
'
getCode
'
,
()
=>
{
this
.
reverseNumber
=
Number
(
this
.
count
);
this
.
getCode
();
});
})
},
getCode
()
{
if
(
this
.
reverseNumber
==
0
)
{
clearTimeout
(
this
.
reverseTimer
);
this
.
reverseTimer
=
null
;
return
;
}
this
.
reverseNumber
--
;
this
.
reverseTimer
=
setTimeout
(()
=>
{
this
.
getCode
();
},
1000
)
}
}
}
</
script
>
<
style
>
@import
url("../../common/myStyle.css")
;
.short-code-btn
{
width
:
200
rpx
;
height
:
85
rpx
;
}
</
style
>
uni_modules/login-page/package.json
0 → 100644
浏览文件 @
4631d059
{
"id"
:
"login-page"
,
"displayName"
:
"login-page"
,
"version"
:
"1.0.0"
,
"description"
:
"login-page"
,
"keywords"
:
[
"login-page"
],
"repository"
:
""
,
"engines"
:
{
"HBuilderX"
:
"^3.1.0"
},
"dcloudext"
:
{
"category"
:
[
"前端页面模板"
,
"前端页面模板"
],
"sale"
:
{
"regular"
:
{
"price"
:
"0.00"
},
"sourcecode"
:
{
"price"
:
"0.00"
}
},
"contact"
:
{
"qq"
:
""
},
"declaration"
:
{
"ads"
:
""
,
"data"
:
""
,
"permissions"
:
""
},
"npmurl"
:
""
},
"uni_modules"
:
{
"dependencies"
:
[],
"encrypt"
:
[],
"platforms"
:
{
"cloud"
:
{
"tcb"
:
"u"
,
"aliyun"
:
"u"
},
"client"
:
{
"App"
:
{
"app-vue"
:
"u"
,
"app-nvue"
:
"u"
},
"H5-mobile"
:
{
"Safari"
:
"u"
,
"Android Browser"
:
"u"
,
"微信浏览器(Android)"
:
"u"
,
"QQ浏览器(Android)"
:
"u"
},
"H5-pc"
:
{
"Chrome"
:
"u"
,
"IE"
:
"u"
,
"Edge"
:
"u"
,
"Firefox"
:
"u"
,
"Safari"
:
"u"
},
"小程序"
:
{
"微信"
:
"u"
,
"阿里"
:
"u"
,
"百度"
:
"u"
,
"字节跳动"
:
"u"
,
"QQ"
:
"u"
},
"快应用"
:
{
"华为"
:
"u"
,
"联盟"
:
"u"
}
}
}
}
}
\ No newline at end of file
uni_modules/login-page/pages/index/index.nvue
0 → 100644
浏览文件 @
4631d059
<template>
<view class="flex flex-column flex-1 w-750 bg-white">
<!-- 登录主体 -->
<view class="flex flex-column flex-1 w-750 justify-center align-center">
<view class="flex justify-center align-center show-phone">
<text class="font-28">登陆后即可展示自己</text>
<text class="font-50">{{phoneNumberShow}}</text>
<text class="font-26 text-sub">认证服务由(某服务商)提供</text>
</view>
<view class="">
<button type="primary" class="w-630 round">本机号码一键登录</button>
<button type="default" class="w-630 round my-2" @click="toOtherPhone">其他手机号码登陆</button>
</view>
<view class="w-400 py-2 justify-center align-center flex">
<login-ikonw :link="link" text="登录即表示同意用户协议和隐私政策以及(某服务商)认证服务条款"></login-ikonw>
</view>
</view>
<!-- 第三方登陆 -->
<view class="py-2">
<auth-btn @login="authLogin"></auth-btn>
</view>
</view>
</template>
<script>
export default {
data() {
return {
phoneNumber:'',
link:[{
text:'用户协议',
to:'/baidu.com'
}, {
text:'隐私政策',
to:'baidu'
}, {
text:'(某服务商)认证服务条款',
to:'baidu'
}]
}
},
onLoad() {
this.phoneNumber = '17731252731';
},
computed:{
// 手机号中间隐藏
phoneNumberShow(){
let phone = this.phoneNumber;
if(phone == '')return '';
return phone.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2');
}
},
methods: {
/**
* @param {Object} auth 第三方登录回调
* value
* image
*/
authLogin(auth){
console.log('auth_', auth);
},
/**
* 其他手机号码登陆
*/
toOtherPhone(){
uni.navigateTo({
url:'./phone-login'
})
}
}
}
</script>
<style>
@import url("../../common/myStyle.css");
.show-phone{
padding-bottom: 120rpx;
}
</style>
uni_modules/login-page/pages/index/phone-login.nvue
0 → 100644
浏览文件 @
4631d059
<template>
<view class="flex flex-column flex-1 w-750 bg-white">
<view class="flex-1 flex flex-column justify-start align-center">
<view class="w-630 flex flex-column">
<!-- 顶部文字 -->
<text class="font-32 font-blod pt-5">登陆后即可展示自己</text>
<login-ikonw class="lgnin-iknow" :link="link" text="登录即表示同意用户协议和隐私政策"></login-ikonw>
<!-- 登录框 (选择手机号所属国家和地区需要另行实现) -->
<view class="phone-input-box round flex flex-row flex-nowrap align-center justify-center">
<picker mode="selector" :range="phoneArea" @change="selectPhoneArea">
<text class="px-2 font-30">{{currenPhoneArea}}</text>
</picker>
<input type="number" class="flex-1 phone-input px-2 font-30" placeholder="请输入手机号"
v-model="phoneNumber" />
</view>
<!-- tip -->
<text class="text-sub font-26 tip-text">未注册的手机号验证通过后蒋自动注册</text>
<!-- 发送按钮 -->
<view class="send-btn-box flex w-630 justify-center align-center round" hover-class="hover"
@click="sendShortMsg" :class="canGetShortMsg?'send-btn-active':''">
<text class="text-white">获取短信验证码</text>
</view>
<!-- 其他登录方式 -->
<view class="w-630 flex flex-row align-center justify-between">
<text class="font-26 login-text" hover-class="hover" @click="toPwdLogin">密码登录</text>
<text class="font-26 login-text" hover-class="hover" @click="openLoginList">其他登录方式</text>
</view>
</view>
</view>
<!-- 登录按钮弹窗 -->
<login-action-sheet ref="loginActionSheet"></login-action-sheet>
</view>
</template>
<script>
export default {
data() {
return {
link: [{
text: '用户协议',
to: '/baidu.com'
}, {
text: '隐私政策',
to: 'baidu'
}],
phoneArea: ['+86', '+87'],
currenPhoneArea: '+86',
phoneNumber: ''
}
},
computed: {
canGetShortMsg() {
let reg = /^1\d{10}$/;
return reg.test(this.phoneNumber);
}
},
methods: {
selectPhoneArea(event) {
this.currenPhoneArea = this.phoneArea[event.detail.value];
},
sendShortMsg() {
if (!this.canGetShortMsg) return;
/**
* 发送验证吗
*/
},
/**
* 去密码登录页
*/
toPwdLogin() {
uni.navigateTo({
url: './pwd-login'
})
},
openLoginList() {
this.$refs.loginActionSheet.open();
}
}
}
</script>
<style>
@import url("../../common/myStyle.css");
.lgnin-iknow {
padding-top: 24rpx;
padding-bottom: 48rpx;
}
.phone-input-box {
height: 85rpx;
background-color: #f9f9f9;
}
.phone-input {
border-left-width: 1px;
border-left-color: #d7d9d8;
}
.tip-text {
padding-top: 20rpx;
padding-bottom: 36rpx;
}
.send-btn-box {
height: 85rpx;
background-color: #d8d8da;
margin-bottom: 50rpx;
}
.send-btn-active {
background-color: #007aff;
}
.login-text {
color: #1c436e;
}
</style>
uni_modules/login-page/pages/index/pwd-login.nvue
0 → 100644
浏览文件 @
4631d059
<template>
<view class="flex flex-column flex-1 w-750 bg-white">
<view class="flex-1 flex flex-column justify-start align-center">
<view class="w-630 flex flex-column">
<!-- 顶部文字 -->
<text class="font-32 font-blod pt-5">手机号密码登录</text>
<!-- 登录框 (选择手机号所属国家和地区需要另行实现) -->
<view class="phone-input-box round flex flex-row flex-nowrap align-center justify-center mt-5">
<picker mode="selector" :range="phoneArea" @change="selectPhoneArea">
<text class="px-2 font-30">{{currenPhoneArea}}</text>
</picker>
<input type="number" class="flex-1 phone-input px-2 font-30" placeholder="请输入手机号"
v-model="phoneNumber" />
</view>
<view class="phone-input-box round flex flex-row flex-nowrap align-center justify-center mt-2">
<input type="password" :password="true" class="flex-1 px-2 font-30" placeholder="请输入密码"
v-model="password" />
</view>
<login-ikonw class="lgnin-iknow" :link="link" text="登录即表示同意用户协议和隐私政策"></login-ikonw>
<!-- 发送按钮 -->
<view class="send-btn-box flex w-630 justify-center align-center round" hover-class="hover"
@click="pwdLogin" :class="canLogin?'send-btn-active':''">
<text class="text-white">登录</text>
</view>
<!-- 忘记密码 -->
<view class="flex flex-row flex-nowrap">
<text class="font-26 text-sub">忘记了?</text>
<text class="font-26 login-text" @click="toRetrievePwd">找回密码</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
phoneNumber: '',
password: '',
link: [{
text: '用户协议',
to: '/baidu.com'
}, {
text: '隐私政策',
to: 'baidu'
}],
phoneArea: ['+86', '+87'],
currenPhoneArea: '+86',
}
},
computed: {
canLogin() {
let reg_phone = /^1\d{10}$/;
let reg_pwd = /^.{6,20}$/;
let isPhone = reg_phone.test(this.phoneNumber);
let isPwd = reg_pwd.test(this.password);
return isPhone && isPwd;
}
},
methods: {
/**
* 页面跳转,找回密码
*/
toRetrievePwd() {
let reg_phone = /^1\d{10}$/;
let isPhone = reg_phone.test(this.phoneNumber);
if (!isPhone) return uni.showToast({
title: '请输入正确的手机号',
icon: 'none'
});
uni.navigateTo({
url: './pwd-retrieve?phoneNumber=' + this.phoneNumber + '&phoneArea=' + this.currenPhoneArea
})
},
/**
* 密码登录
*/
pwdLogin() {
if (!this.canLogin) return;
// 下边是可以登录
},
selectPhoneArea(event) {
this.currenPhoneArea = this.phoneArea[event.detail.value];
},
}
}
</script>
<style>
@import url("../../common/myStyle.css");
.lgnin-iknow {
padding-top: 24rpx;
padding-bottom: 36rpx;
}
.phone-input-box {
height: 85rpx;
background-color: #f9f9f9;
}
.phone-input {
border-left-width: 1px;
border-left-color: #d7d9d8;
}
.tip-text {
padding-top: 20rpx;
padding-bottom: 36rpx;
}
.send-btn-box {
height: 85rpx;
background-color: #d8d8da;
margin-bottom: 50rpx;
}
.send-btn-active {
background-color: #007aff;
}
.login-text {
color: #1c436e;
}
</style>
uni_modules/login-page/pages/index/pwd-retrieve.nvue
0 → 100644
浏览文件 @
4631d059
<template>
<view class="flex flex-column flex-1 w-750 bg-white">
<view class="flex-1 flex flex-column justify-start align-center">
<view class="w-630 flex flex-column">
<!-- 顶部文字 -->
<text class="font-32 font-blod pt-5">手机号密码登录</text>
<login-ikonw class="lgnin-iknow" :text="tipText"></login-ikonw>
<!-- 登录框 (选择手机号所属国家和地区需要另行实现) -->
<view class="phone-input-box round flex flex-row flex-nowrap align-center justify-center">
<input type="number" :maxlength="6" class="flex-1 phone-input px-2 font-30" placeholder="请输入验证码"
v-model="phoneCode" />
<login-short-code @getCode="getCode"></login-short-code>
</view>
<view class="phone-input-box round flex flex-row flex-nowrap align-center justify-center mt-2">
<input type="password" :password="true" class="flex-1 px-2 font-30" placeholder="请输入密码"
v-model="password" />
</view>
<!-- 发送按钮 -->
<view class="send-btn-box flex w-630 justify-center align-center round mt-5" hover-class="hover"
@click="pwdLogin" :class="canSubmit?'send-btn-active':''">
<text class="text-white">完成</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
phoneNumber: '',
phoneCode: '',
password: '',
currenPhoneArea: '',
}
},
computed: {
tipText() {
return `验证码已通过短信发送至${this.currenPhoneArea} ${this.phoneNumber}。密码为6 - 20位`
},
canSubmit() {
let reg_phone = /^1\d{10}$/;
let reg_pwd = /^.{6,20}$/;
let reg_code = /^\d{6}$/;
let isPhone = reg_phone.test(this.phoneNumber);
let isPwd = reg_pwd.test(this.password);
let isCode = reg_code.test(this.phoneCode);
return isPhone && isPwd && isCode;
}
},
onLoad(event) {
if (event) {
this.phoneNumber = event.phoneNumber;
this.currenPhoneArea = '+' + Number(event.phoneArea);
}
},
methods: {
/**
* 获取验证码倒计时
* 倒计时期间不会触发该方法
*/
getCode(done) {
if (this.phoneNumber == '') return uni.showToast({
title: '请填写手机号',
icon: 'none'
});
// 发送成功后开启倒计时
done();
}
}
}
</script>
<style>
@import url("../../common/myStyle.css");
.lgnin-iknow {
padding-top: 24rpx;
padding-bottom: 36rpx;
}
.phone-input-box {
height: 85rpx;
background-color: #f9f9f9;
}
.phone-input {}
.tip-text {
padding-top: 20rpx;
padding-bottom: 36rpx;
}
.send-btn-box {
height: 85rpx;
background-color: #d8d8da;
margin-bottom: 50rpx;
}
.send-btn-active {
background-color: #007aff;
}
.login-text {
color: #1c436e;
}
</style>
uni_modules/login-page/readme.md
0 → 100644
浏览文件 @
4631d059
# login-page
\ No newline at end of file
uni_modules/login-page/static/login/img/apple.png
0 → 100644
浏览文件 @
4631d059
8.4 KB
uni_modules/login-page/static/login/img/qq.png
0 → 100644
浏览文件 @
4631d059
9.2 KB
uni_modules/login-page/static/login/img/sinaweibo.png
0 → 100644
浏览文件 @
4631d059
13.2 KB
uni_modules/login-page/static/login/img/univerify.png
0 → 100644
浏览文件 @
4631d059
226.9 KB
uni_modules/login-page/static/login/img/weixin.png
0 → 100644
浏览文件 @
4631d059
5.2 KB
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录