9 changed files with 394 additions and 25 deletions
-
90App.vue
-
8common/http.js
-
23common/mixin.js
-
43common/shared.js
-
3main.js
-
6pages.json
-
3pages/center/index.vue
-
165pages/login/accountLogin.vue
-
78pages/login/index.vue
@ -0,0 +1,43 @@ |
|||
/* |
|||
全局共享实用方法 shared.js |
|||
*/ |
|||
|
|||
// 设置角标, 必须传入下标值，设置值可传可不传，传参时显示，不传时移除角标
|
|||
function setBadge(index = 0, value){ |
|||
if(isRight(value)){ |
|||
uni.setTabBarBadge({ |
|||
index: Number(index), |
|||
text: value > 99 ? '99+' : String(value) |
|||
}) |
|||
}else{ |
|||
uni.removeTabBarBadge({index: Number(index)}); |
|||
} |
|||
} |
|||
|
|||
// 判断对错/是否显示，万能校验
|
|||
function isRight(obj) { |
|||
if (isValueType(obj) === 'string') { |
|||
obj = obj.trim(); |
|||
if (obj === 'null' || obj === 'undefined') { |
|||
return false; |
|||
} |
|||
} else if (isValueType(obj) === 'number' && (isValueType(obj) === "number" && !isNaN(obj)) && obj !== 0) { |
|||
return true; |
|||
} |
|||
for (var key in obj) { |
|||
return true; |
|||
} |
|||
return false; |
|||
} |
|||
|
|||
// 判断一个值所属的类型，返回一个字符串
|
|||
function isValueType(value) { |
|||
let str = Object.prototype.toString.call(value); |
|||
return str.match(/\[object (.*?)\]/)[1].toLowerCase(); |
|||
} |
|||
|
|||
module.exports = { |
|||
setBadge, |
|||
isRight, |
|||
isValueType |
|||
} |
|||
@ -0,0 +1,165 @@ |
|||
<template> |
|||
<view> |
|||
<view class="lf-flex-column lf-row-center logo"> |
|||
<image ></image> |
|||
</view> |
|||
<view class="lf-row-between inpu-box"> |
|||
<u-icon name="phone" size="50"></u-icon> |
|||
<input maxlength="11" v-model="phoneNum" placeholder="请输入手机号" /> |
|||
</view> |
|||
<view class="lf-row-between verif-code" v-if="isCodeLogin"> |
|||
<view class="lf-row-between code-input"> |
|||
<u-icon name="lock" size="50" color="#999999"></u-icon> |
|||
<input maxlength="5" v-model="codeNum" placeholder="验证码" /> |
|||
</view> |
|||
<button class="code-btn" :style="{'background-color': isGetCode ? '#FE9903' : '#999999'}" @click="getCode"> |
|||
{{ isGetCode ? '获取验证码' : codeTimeNum +'s后重新获取' }} |
|||
</button> |
|||
</view> |
|||
<view class="lf-row-between inpu-box lf-m-t-30" v-else> |
|||
<u-icon name="lock" size="50"></u-icon> |
|||
<input maxlength="11" v-model="password" :password="true" placeholder="请输入密码" /> |
|||
</view> |
|||
<view @click="switchLoginType" class="login-type">{{ isCodeLogin ? '使用密码登录' : '使用验证码登录' }}</view> |
|||
<button class="login-btn" @click="login">登录</button> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data(){ |
|||
return { |
|||
phoneNum: '', |
|||
codeNum: '', |
|||
password: '', |
|||
isGetCode: true, |
|||
isCodeLogin: true, |
|||
codeTimeNum: 10, |
|||
codeTime: null |
|||
} |
|||
}, |
|||
onLoad(){ |
|||
|
|||
}, |
|||
onUnload(){ |
|||
if(this.codeTime){ |
|||
clearInterval(this.codeTime); |
|||
this.codeTime = null; |
|||
} |
|||
}, |
|||
methods: { |
|||
// 切换账号和验证码登录 |
|||
switchLoginType(){ |
|||
this.codeNum = ''; |
|||
this.password = ''; |
|||
this.isCodeLogin = !this.isCodeLogin; |
|||
}, |
|||
// 获取验证码 |
|||
getCode(){ |
|||
if(this.isGetCode){ |
|||
console.log("此处请求") |
|||
} |
|||
if(this.codeTimeNum == 10){ |
|||
this.isGetCode = false; |
|||
if(this.codeTime){ |
|||
clearInterval(this.codeTime); |
|||
this.codeTime = null; |
|||
this.codeTimeNum = 10; |
|||
} |
|||
this.codeTime = setInterval(() => { |
|||
this.codeTimeNum = this.codeTimeNum - 1; |
|||
if(this.codeTimeNum < 0){ |
|||
clearInterval(this.codeTime); |
|||
this.codeTime = null; |
|||
this.codeTimeNum = 10; |
|||
this.isGetCode = true; |
|||
} |
|||
}, 1000); |
|||
} |
|||
}, |
|||
// 登录 |
|||
login(){ |
|||
let pages = getCurrentPages(); |
|||
let prevPage = pages[pages.length - 2]; |
|||
|
|||
// prevPage.$vm.isLogin = true; // 上一个页面登录成功 |
|||
// this.$toBack(); // 登录成功 |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped="scoped"> |
|||
.logo{ |
|||
width: 100%; |
|||
height: 220rpx; |
|||
image{ |
|||
width: 160rpx; |
|||
height: 160rpx; |
|||
border-radius: 50%; |
|||
background-color: #EEEEEE; |
|||
} |
|||
} |
|||
.inpu-box{ |
|||
width: 686rpx; |
|||
height: 88rpx; |
|||
border: 2rpx solid #FE9903; |
|||
border-radius: 10rpx; |
|||
color: #FE9903; |
|||
box-sizing: border-box; |
|||
padding: 0 20rpx; |
|||
margin: 0 auto; |
|||
margin-top: 50rpx; |
|||
input{ |
|||
width: 570rpx; |
|||
height: 66rpx; |
|||
font-size: 32rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 0 20rpx; |
|||
} |
|||
} |
|||
.verif-code{ |
|||
width: 686rpx; |
|||
height: 88rpx; |
|||
margin: 0 auto; |
|||
margin-top: 30rpx; |
|||
.code-input{ |
|||
width: 438rpx; |
|||
height: 88rpx; |
|||
border: 2rpx solid #999999; |
|||
border-radius: 10rpx; |
|||
box-sizing: border-box; |
|||
padding: 0 20rpx; |
|||
input{ |
|||
width: 344rpx; |
|||
height: 66rpx; |
|||
padding: 0 20rpx; |
|||
font-size: 32rpx; |
|||
} |
|||
} |
|||
.code-btn{ |
|||
margin: 0; |
|||
width: 228rpx; |
|||
height: 88rpx; |
|||
border-radius: 10rpx; |
|||
color: #FFFFFF; |
|||
font-size: 28rpx; |
|||
line-height: 88rpx; |
|||
} |
|||
} |
|||
.login-type{ |
|||
color: #FE9903; |
|||
text-align: center; |
|||
margin-top: 40rpx; |
|||
} |
|||
.login-btn{ |
|||
width: 686rpx; |
|||
height: 88rpx; |
|||
background-color: #FE9903; |
|||
color: #FFFFFF; |
|||
line-height: 88rpx; |
|||
border-radius: 42rpx; |
|||
margin-top: 100rpx; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue