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