Skip to content

U
uni-starter

一个会的不多的人 / uni-starter
与 Fork 源项目一致

Fork自 DCloud / uni-starter

通知 1
Star 1
Fork 0
U
uni-starter

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 4631d059 编写于 作者: 芊 芊里
浏览文件
操作

login-page登录页面布局

上级 2df5b396
隐藏空白更改
内联 并排
Showing with 1248 addition and 10 deletion
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/common/myStyle.css 0 → 100644
浏览文件 @ 4631d059
.flex{
/* #ifndef APP-VUE */
display: flex;
/* #endif */
}
.w-750{
width: 750rpx;
}
.w-630{
width: 630rpx;
}
.w-400{
width: 400rpx;
}
.w-375{
width: 375rpx;
}
.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: 6rpx;
}
.round-0{
border-radius: 0rpx;
}
.round-1{
border-radius: 10rpx;
}
.p-1{
padding: 10rpx;
}
.p-2{
padding: 20rpx;
}
.p-3{
padding: 30rpx;
}
.p-4{
padding: 40rpx;
}
.p-5{
padding: 50rpx;
}
.px-1{
padding-left: 10rpx;
padding-right: 10rpx;
}
.px-2{
padding-left: 20rpx;
padding-right: 20rpx;
}
.px-3{
padding-left: 30rpx;
padding-right: 30rpx;
}
.px-4{
padding-left: 40rpx;
padding-right: 40rpx;
}
.px-5{
padding-left: 50rpx;
padding-right: 50rpx;
}
.py-1{
padding-top: 10rpx;
padding-bottom: 10rpx;
}
.py-2{
padding-top: 20rpx;
padding-bottom: 20rpx;
}
.py-3{
padding-top: 30rpx;
padding-bottom: 30rpx;
}
.py-4{
padding-top: 40rpx;
padding-bottom: 40rpx;
}
.py-5{
padding-top: 50rpx;
padding-bottom: 50rpx;
}
.pt-1{
padding-top: 10rpx;
}
.pt-2{
padding-top: 20rpx;
}
.pt-5{
padding-top: 50rpx;
}
.m-1{
margin: 10rpx;
}
.m-2{
margin: 20rpx;
}
.m-3{
margin: 30rpx;
}
.m-4{
margin: 40rpx;
}
.m-5{
margin: 50rpx;
}
.mt-2{
margin-top: 20rpx;
}
.mt-5{
margin-top: 50rpx;
}
.mx-1{
margin-left: 10rpx;
margin-right: 10rpx;
}
.mx-2{
margin-left: 20rpx;
margin-right: 20rpx;
}
.mx-3{
margin-left: 30rpx;
margin-right: 30rpx;
}
.mx-4{
margin-left: 40rpx;
margin-right: 40rpx;
}
.mx-5{
margin-left: 50rpx;
margin-right: 50rpx;
}
.my-1{
margin-top: 10rpx;
margin-bottom: 10rpx;
}
.my-2{
margin-top: 20rpx;
margin-bottom: 20rpx;
}
.my-3{
margin-top: 30rpx;
margin-bottom: 30rpx;
}
.my-4{
margin-top: 40rpx;
margin-bottom: 40rpx;
}
.my-5{
margin-top: 50rpx;
margin-bottom: 50rpx;
}
.font-blod{
font-weight: bold;
}
.font-bolder{
font-weight: 900;
}
.font-lighter{
font-weight: 100;
}
.font-normal{
font-weight: normal;
}
.font-20{
font-size: 20rpx;
}
.font-22{
font-size: 22rpx;
}
.font-24{
font-size: 24rpx;
}
.font-26{
font-size: 26rpx;
}
.font-28{
font-size: 28rpx;
}
.font-30{
font-size: 30rpx;
}
.font-32{
font-size: 32rpx;
}
.font-34{
font-size: 34rpx;
}
.font-36{
font-size: 36rpx;
}
.font-40{
font-size: 40rpx;
}
.font-50{
font-size: 50rpx;
}
.font-60{
font-size: 60rpx;
}
.font-100{
font-size: 100rpx;
}
.text-white{
color: #FFFFFF;
}
.text-sub{
color: #8a8f8b;
}
.bg-white{
background-color: #FFFFFF;
}
.hover{
opacity: 0.8;
}
.border-test{
/* #ifdef APP-NVUE */
border-width: 1rpx;
border-color: #DD524D;
/* #endif */
/* #ifndef APP-NVUE */
border: 1rpx 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: 84rpx;
height: 84rpx;
}
.hidden {
opacity: 0;
}
.auth-box {
position: relative;
height: 84rpx;
width: 750rpx;
}
.auth-logo-shadow {
position: absolute;
}
.auth-more {
position: absolute;
width: 84rpx;
height: 84rpx;
border-radius: 45rpx;
border-width: 2rpx;
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: 20rpx;
border-top-right-radius: 20rpx;
}
.login-logo {
width: 42rpx;
height: 42rpx;
}
.auth-item {
border-bottom-width: 1px;
border-bottom-color: #F1F1F1;
height: 125rpx;
}
.cancel-item {
height: 125rpx;
}
.cancel-line {
width: 750rpx;
height: 10rpx;
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: 200rpx;
height: 85rpx;
}
</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
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或