2 changed files with 413 additions and 412 deletions
@ -1,259 +1,260 @@ |
|||
<template> |
|||
<view class="nine-content-001"> |
|||
<view class="login"> |
|||
<view class="login-logo"> |
|||
<image class="login-logo-image" lazy-load="true" src="/static/image/ninecloud-white.png"></image> |
|||
</view> |
|||
<view class="login-block"> |
|||
<view class="login-type"> |
|||
<span @click="onNavBarTap(0)" :class="loginType == 0?'login-type-span-alive login-type-span':'login-type-span'"> |
|||
密码登录 |
|||
</span> |
|||
<span @click="onNavBarTap(1)" :class="loginType == 1?'login-type-span-alive login-type-span':'login-type-span'"> |
|||
短信登录 |
|||
</span> |
|||
</view> |
|||
<view class="login-phone"> |
|||
<image class="login-phone-image" src="/static/image/user/login-phone-blue.png"></image> |
|||
<input class="login-phone-input input" :focus="isFocus=='username'" name="phone" placeholder="请输入您的账号/手机号" v-model="userName" @confirm="loginClick"/> |
|||
</view> |
|||
<view class="nine-line-001 mlr30"></view> |
|||
<view v-if="loginType == 0" class="login-phone"> |
|||
<image class="login-phone-image" src="/static/image/user/login-password-blue.png"></image> |
|||
<input class="login-phone-input input" :focus="isFocus=='password'" password placeholder="请输入您的密码" v-model="password" @confirm="loginClick"/> |
|||
</view> |
|||
<view v-if="loginType == 1" class="login-verify"> |
|||
<view class="display-flex-row"> |
|||
<image class="login-verify-image" src="/static/image/user/login-password-blue.png"></image> |
|||
<input class="login-verify-input input" :focus="isFocus=='verify'" placeholder="请输入验证码" v-model="verifyCode" @confirm="loginClick"/> |
|||
</view> |
|||
<view class="nine-btn-verify-001 font-size12 text-nowrap pa10" @click="verifyClick"> |
|||
{{verifyText}} |
|||
</view> |
|||
</view> |
|||
<view class="nine-line-001 mlr30"></view> |
|||
<view class="ma15 mr30 text-right color-blue" @click="forgetClick"> |
|||
忘记密码? |
|||
</view> |
|||
<view class="nine-btn-save-001 ma20" @click="loginClick">登 录</view> |
|||
<!--#ifndef MP-WEIXIN--> |
|||
<view class="text-center ma20">没有账号? |
|||
<span class="ml10 color-blue" @click="registerClick"> |
|||
立即注册 |
|||
</span> |
|||
</view> |
|||
<!--#endif--> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="nine-content-001"> |
|||
<view class="login"> |
|||
<view class="login-logo"> |
|||
<image class="login-logo-image" lazy-load="true" src="/static/image/ninecloud-white.png"></image> |
|||
</view> |
|||
<view class="login-block"> |
|||
<view class="login-type"> |
|||
<span @click="onNavBarTap(0)" :class="loginType == 0?'login-type-span-alive login-type-span':'login-type-span'"> |
|||
密码登录 |
|||
</span> |
|||
<span @click="onNavBarTap(1)" :class="loginType == 1?'login-type-span-alive login-type-span':'login-type-span'"> |
|||
短信登录 |
|||
</span> |
|||
</view> |
|||
<view class="login-phone"> |
|||
<image class="login-phone-image" src="/static/image/user/login-phone-blue.png"></image> |
|||
<input class="login-phone-input input" :focus="isFocus=='username'" name="phone" placeholder="请输入您的账号/手机号" v-model="userName" @confirm="loginClick"/> |
|||
</view> |
|||
<view class="nine-line-001 mlr30"></view> |
|||
<view v-if="loginType == 0" class="login-phone"> |
|||
<image class="login-phone-image" src="/static/image/user/login-password-blue.png"></image> |
|||
<input class="login-phone-input input" :focus="isFocus=='password'" password placeholder="请输入您的密码" v-model="password" @confirm="loginClick"/> |
|||
</view> |
|||
<view v-if="loginType == 1" class="login-verify"> |
|||
<view class="display-flex-row"> |
|||
<image class="login-verify-image" src="/static/image/user/login-password-blue.png"></image> |
|||
<input class="login-verify-input input" :focus="isFocus=='verify'" placeholder="请输入验证码" v-model="verifyCode" @confirm="loginClick"/> |
|||
</view> |
|||
<view class="nine-btn-verify-001 font-size12 text-nowrap pa10" @click="verifyClick"> |
|||
{{verifyText}} |
|||
</view> |
|||
</view> |
|||
<view class="nine-line-001 mlr30"></view> |
|||
<view class="ma15 mr30 text-right color-blue" @click="forgetClick"> |
|||
忘记密码? |
|||
</view> |
|||
<view class="nine-btn-save-001 ma20" @click="loginClick">登 录</view> |
|||
<!--#ifndef MP-WEIXIN--> |
|||
<view class="text-center ma20">没有账号? |
|||
<span class="ml10 color-blue" @click="registerClick"> |
|||
立即注册 |
|||
</span> |
|||
</view> |
|||
<!--#endif--> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import store from '@/store' |
|||
import store from '@/store' |
|||
import socketStore from '@/uni_modules/vrapile-im/store' |
|||
import { getToken } from '@/utils/token' |
|||
export default { |
|||
data() { |
|||
return { |
|||
loginType: 0, |
|||
|
|||
userName: "", |
|||
password: "", |
|||
|
|||
verifyTimer: null, |
|||
verifyCode: "", |
|||
verifyTime: 0, |
|||
verifyText: "发送验证码", |
|||
|
|||
isFocus: "" |
|||
} |
|||
}, |
|||
// onBackPress(e){ |
|||
// return true; |
|||
// }, |
|||
onUnload() { |
|||
if(this.verifyTimer) { |
|||
clearTimeout(this.verifyTimer); |
|||
this.verifyTimer = null; |
|||
this.verifyTime = 0; |
|||
} |
|||
}, |
|||
onShow(){ |
|||
let loginInfo = this.$store.state.user.loginInfo; |
|||
this.loginType = loginInfo.loginType || 0; |
|||
this.userName = loginInfo.userName; |
|||
this.password = loginInfo.password; |
|||
if(!this.userName){ |
|||
this.usernamefocus(); |
|||
}else if(this.loginType == 0){ |
|||
this.passwordfocus(); |
|||
}else{ |
|||
this.verifyfocus(); |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
onNavBarTap (index) { |
|||
this.loginType = index; |
|||
}, |
|||
verifyClick(){ |
|||
if(this.verifyTime != 0){ |
|||
return; |
|||
} |
|||
if(!this.isPhone(this.userName)){ |
|||
this.msg("必须为有效手机号"); |
|||
return; |
|||
} |
|||
|
|||
this.verifyTime = 60; |
|||
this.verifyText = this.verifyTime + " S"; |
|||
this.verifyTimer = setInterval(() => { |
|||
this.timeInterval(); |
|||
}, 1000) |
|||
this.diyApiGet('/captchaSms', {phone: this.userName}).catch(error => { |
|||
if(this.verifyTimer) { |
|||
clearTimeout(this.verifyTimer); |
|||
this.verifyTimer = null; |
|||
this.verifyTime = 0; |
|||
} |
|||
this.verifyText = "发送验证码"; |
|||
}); |
|||
}, |
|||
timeInterval() { |
|||
this.verifyTime--; |
|||
if (this.verifyTime > 0) { |
|||
this.verifyText = this.verifyTime + " S"; |
|||
}else{ |
|||
if(this.verifyTimer) { |
|||
clearInterval(this.verifyTimer); |
|||
this.verifyTimer = null; |
|||
} |
|||
this.verifyText = "发送验证码"; |
|||
} |
|||
}, |
|||
loginClick(){ |
|||
if(!this.userName){ |
|||
this.usernamefocus(); |
|||
return; |
|||
} |
|||
if(this.loginType==0 && !this.password){ |
|||
this.passwordfocus(); |
|||
return; |
|||
} |
|||
if(this.loginType==1 && !this.verifyCode){ |
|||
this.verifyfocus(); |
|||
return; |
|||
} |
|||
this.loading("正在登录..."); |
|||
store.dispatch('Login', { |
|||
loginType: this.loginType, |
|||
userName: this.userName.trim(), |
|||
password: this.password, |
|||
smsCode: this.verifyCode, |
|||
registerFlag: "Y" |
|||
}).then(() => { |
|||
this.loginSuccess() |
|||
}).catch(() => { |
|||
}) |
|||
}, |
|||
loginSuccess() { |
|||
store.dispatch('GetInfo').then(res => { |
|||
socketStore.dispatch('GetChatList', {userId: store.state.user.userInfo.userId}).then(res=>{ |
|||
socketStore.dispatch('ConnSocket', { url: import.meta.env.VITE_APP_SOCKET_URL, token: getToken() }); |
|||
}); |
|||
this.reLaunch('/pages/home/user') |
|||
this.closeLoading() |
|||
}).catch(()=>{ |
|||
this.closeLoading() |
|||
}) |
|||
}, |
|||
registerClick() { |
|||
this.navigateTo('/pages/user/register') |
|||
}, |
|||
forgetClick() { |
|||
// this.navigateTo('/pages/user/forget') |
|||
}, |
|||
usernamefocus() { |
|||
this.isFocus = "username"; |
|||
}, |
|||
passwordfocus() { |
|||
this.isFocus = "password"; |
|||
}, |
|||
verifyfocus() { |
|||
this.isFocus = "verify"; |
|||
} |
|||
} |
|||
} |
|||
export default { |
|||
data() { |
|||
return { |
|||
loginType: 0, |
|||
|
|||
userName: "", |
|||
password: "", |
|||
|
|||
verifyTimer: null, |
|||
verifyCode: "", |
|||
verifyTime: 0, |
|||
verifyText: "发送验证码", |
|||
|
|||
isFocus: "" |
|||
} |
|||
}, |
|||
// onBackPress(e){ |
|||
// return true; |
|||
// }, |
|||
onUnload() { |
|||
if(this.verifyTimer) { |
|||
clearInterval(this.verifyTimer); |
|||
this.verifyTimer = null; |
|||
this.verifyTime = 0; |
|||
} |
|||
}, |
|||
onShow(){ |
|||
let loginInfo = this.$store.state.user.loginInfo; |
|||
this.loginType = loginInfo.loginType || 0; |
|||
this.userName = loginInfo.userName; |
|||
this.password = loginInfo.password; |
|||
if(!this.userName){ |
|||
this.usernamefocus(); |
|||
}else if(this.loginType == 0){ |
|||
this.passwordfocus(); |
|||
}else{ |
|||
this.verifyfocus(); |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
onNavBarTap (index) { |
|||
this.loginType = index; |
|||
}, |
|||
verifyClick(){ |
|||
if(this.verifyTime != 0){ |
|||
return; |
|||
} |
|||
if(!this.isPhone(this.userName)){ |
|||
this.msg("必须为有效手机号"); |
|||
return; |
|||
} |
|||
|
|||
this.verifyTime = 60; |
|||
this.verifyText = this.verifyTime + " S"; |
|||
this.verifyTimer = setInterval(() => { |
|||
this.timeInterval(); |
|||
}, 1000) |
|||
this.diyApiGet('/captchaSms', {phone: this.userName}).catch(error => { |
|||
if(this.verifyTimer) { |
|||
clearInterval(this.verifyTimer); |
|||
this.verifyTimer = null; |
|||
this.verifyTime = 0; |
|||
} |
|||
this.verifyText = "发送验证码"; |
|||
}); |
|||
}, |
|||
timeInterval() { |
|||
this.verifyTime--; |
|||
if (this.verifyTime > 0) { |
|||
this.verifyText = this.verifyTime + " S"; |
|||
}else{ |
|||
if(this.verifyTimer) { |
|||
clearInterval(this.verifyTimer); |
|||
this.verifyTimer = null; |
|||
} |
|||
this.verifyText = "发送验证码"; |
|||
} |
|||
}, |
|||
loginClick(){ |
|||
if(!this.userName){ |
|||
this.usernamefocus(); |
|||
return; |
|||
} |
|||
if(this.loginType==0 && !this.password){ |
|||
this.passwordfocus(); |
|||
return; |
|||
} |
|||
if(this.loginType==1 && !this.verifyCode){ |
|||
this.verifyfocus(); |
|||
return; |
|||
} |
|||
this.loading("正在登录..."); |
|||
store.dispatch('Login', { |
|||
loginType: this.loginType, |
|||
userName: this.userName.trim(), |
|||
password: this.password, |
|||
smsCode: this.verifyCode, |
|||
registerFlag: "Y" |
|||
}).then(() => { |
|||
this.loginSuccess() |
|||
}).catch(() => { |
|||
this.closeLoading() |
|||
}) |
|||
}, |
|||
loginSuccess() { |
|||
store.dispatch('GetInfo').then(res => { |
|||
socketStore.dispatch('GetChatList', {userId: store.state.user.userInfo.userId}).then(res=>{ |
|||
socketStore.dispatch('ConnSocket', { url: import.meta.env.VITE_APP_SOCKET_URL, token: getToken() }); |
|||
}); |
|||
this.reLaunch('/pages/home/user') |
|||
this.closeLoading() |
|||
}).catch(()=>{ |
|||
this.closeLoading() |
|||
}) |
|||
}, |
|||
registerClick() { |
|||
this.navigateTo('/pages/user/register') |
|||
}, |
|||
forgetClick() { |
|||
// this.navigateTo('/pages/user/forget') |
|||
}, |
|||
usernamefocus() { |
|||
this.isFocus = "username"; |
|||
}, |
|||
passwordfocus() { |
|||
this.isFocus = "password"; |
|||
}, |
|||
verifyfocus() { |
|||
this.isFocus = "verify"; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.login{ |
|||
width: 750rpx; |
|||
height: 100vh; |
|||
background-color: #55aaff; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding-bottom: 50rpx; |
|||
} |
|||
.login-logo{ |
|||
width: 650rpx; |
|||
opacity: 0.9; |
|||
} |
|||
.login-logo-image{ |
|||
width: 600rpx; |
|||
height: 160rpx; |
|||
} |
|||
.login-block{ |
|||
width: 630rpx; |
|||
background-color: #FFFFFF; |
|||
border-radius: 10rpx; |
|||
margin: 40rpx 0 150rpx 0; |
|||
padding: 15rpx; |
|||
} |
|||
.login-type{ |
|||
margin: 20rpx; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
} |
|||
.login-type-span{ |
|||
width: 280rpx; |
|||
padding: 15rpx 0; |
|||
font-size: 20px; |
|||
border-radius: 10rpx; |
|||
text-align: center; |
|||
color: gray; |
|||
background-color: #ebf7ff; |
|||
} |
|||
.login-type-span-alive{ |
|||
color: #fff; |
|||
background-color: #55aaff; |
|||
} |
|||
.login-phone{ |
|||
display: flex; |
|||
align-items: center; |
|||
margin: 30rpx; |
|||
padding: 20rpx 20rpx 0 0rpx; |
|||
} |
|||
.login-verify{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin: 30rpx; |
|||
padding-top: 20rpx; |
|||
} |
|||
.login{ |
|||
width: 750rpx; |
|||
height: 100vh; |
|||
background-color: #55aaff; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding-bottom: 50rpx; |
|||
} |
|||
.login-logo{ |
|||
width: 650rpx; |
|||
opacity: 0.9; |
|||
} |
|||
.login-logo-image{ |
|||
width: 600rpx; |
|||
height: 160rpx; |
|||
} |
|||
.login-block{ |
|||
width: 630rpx; |
|||
background-color: #FFFFFF; |
|||
border-radius: 10rpx; |
|||
margin: 40rpx 0 150rpx 0; |
|||
padding: 15rpx; |
|||
} |
|||
.login-type{ |
|||
margin: 20rpx; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
} |
|||
.login-type-span{ |
|||
width: 280rpx; |
|||
padding: 15rpx 0; |
|||
font-size: 20px; |
|||
border-radius: 10rpx; |
|||
text-align: center; |
|||
color: gray; |
|||
background-color: #ebf7ff; |
|||
} |
|||
.login-type-span-alive{ |
|||
color: #fff; |
|||
background-color: #55aaff; |
|||
} |
|||
.login-phone{ |
|||
display: flex; |
|||
align-items: center; |
|||
margin: 30rpx; |
|||
padding: 20rpx 20rpx 0 0rpx; |
|||
} |
|||
.login-verify{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin: 30rpx; |
|||
padding-top: 20rpx; |
|||
} |
|||
|
|||
.login-phone-image, |
|||
.login-verify-image{ |
|||
padding: 10rpx; |
|||
height: 40rpx; |
|||
width: 40rpx; |
|||
} |
|||
.login-phone-input, |
|||
.login-verify-input{ |
|||
padding: 10rpx; |
|||
width: 100%; |
|||
} |
|||
.login-phone-image, |
|||
.login-verify-image{ |
|||
padding: 10rpx; |
|||
height: 40rpx; |
|||
width: 40rpx; |
|||
} |
|||
.login-phone-input, |
|||
.login-verify-input{ |
|||
padding: 10rpx; |
|||
width: 100%; |
|||
} |
|||
|
|||
</style> |
|||
@ -1,173 +1,173 @@ |
|||
<template> |
|||
<view class="nine-content-001"> |
|||
<view class="nine-list-001"> |
|||
<view class="nine-list-001-item"> |
|||
<span>用户账号</span> |
|||
<input class="mt10" placeholder="请输入用户账号" v-model="userName"/> |
|||
</view> |
|||
<view class="nine-list-001-item"> |
|||
<span>用户姓名</span> |
|||
<input class="mt10" placeholder="请输入用户姓名" v-model="nickName"/> |
|||
</view> |
|||
<view class="nine-list-001-item"> |
|||
<span>手机号</span> |
|||
<view class="display-flex-row"> |
|||
<span class="mt10 mr20 color-gray">+86</span> |
|||
<input class="mt10" placeholder="请输入手机号" v-model="phone"/> |
|||
</view> |
|||
</view> |
|||
<view class="nine-list-001-item"> |
|||
<span>登录密码</span> |
|||
<input class="mt10" password placeholder="请输入登录密码" v-model="password"/> |
|||
</view> |
|||
<view class="nine-list-001-item"> |
|||
<span>确认密码</span> |
|||
<input class="mt10" password placeholder="请再次输入登录密码" v-model="password2"/> |
|||
</view> |
|||
<view class="nine-list-001-item"> |
|||
<view class="display-flex-row-between"> |
|||
<span>验证码</span> |
|||
<view class="nine-btn-verify-001 plr10 ptb5" @click="verifyClick"> |
|||
<span>{{verifyText}}</span> |
|||
</view> |
|||
</view> |
|||
<input class="mt10" placeholder="请输入验证码" v-model="verifyCode"/> |
|||
</view> |
|||
<view class="display-flex-row pt20 pb10 justify-content-center"> |
|||
<label class="display-flex-row"> |
|||
<checkbox class="transform-scale07" :value="protocolFlag" :checked="protocolFlag==1" @click="checkBoxClick"/> |
|||
已阅读并同意 |
|||
</label> |
|||
<span class="color-blue" @click="protocolClick">《服务协议》</span> |
|||
</view> |
|||
|
|||
<view class="nine-btn-save-001 ma20" @click="registerClick"> |
|||
注 册 |
|||
</view> |
|||
<view class="text-center">已有账号? |
|||
<span class="ml10 color-blue" @click="loginClick">立即登录</span> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="nine-content-001"> |
|||
<view class="nine-list-001"> |
|||
<view class="nine-list-001-item"> |
|||
<span>用户账号</span> |
|||
<input class="mt10" placeholder="请输入用户账号" v-model="userName"/> |
|||
</view> |
|||
<view class="nine-list-001-item"> |
|||
<span>用户姓名</span> |
|||
<input class="mt10" placeholder="请输入用户姓名" v-model="nickName"/> |
|||
</view> |
|||
<view class="nine-list-001-item"> |
|||
<span>手机号</span> |
|||
<view class="display-flex-row"> |
|||
<span class="mt10 mr20 color-gray">+86</span> |
|||
<input class="mt10" placeholder="请输入手机号" v-model="phone"/> |
|||
</view> |
|||
</view> |
|||
<view class="nine-list-001-item"> |
|||
<span>登录密码</span> |
|||
<input class="mt10" password placeholder="请输入登录密码" v-model="password"/> |
|||
</view> |
|||
<view class="nine-list-001-item"> |
|||
<span>确认密码</span> |
|||
<input class="mt10" password placeholder="请再次输入登录密码" v-model="password2"/> |
|||
</view> |
|||
<view class="nine-list-001-item"> |
|||
<view class="display-flex-row-between"> |
|||
<span>验证码</span> |
|||
<view class="nine-btn-verify-001 plr10 ptb5" @click="verifyClick"> |
|||
<span>{{verifyText}}</span> |
|||
</view> |
|||
</view> |
|||
<input class="mt10" placeholder="请输入验证码" v-model="verifyCode"/> |
|||
</view> |
|||
<view class="display-flex-row pt20 pb10 justify-content-center"> |
|||
<label class="display-flex-row"> |
|||
<checkbox class="transform-scale07" :value="protocolFlag" :checked="protocolFlag==1" @click="checkBoxClick"/> |
|||
已阅读并同意 |
|||
</label> |
|||
<span class="color-blue" @click="protocolClick">《服务协议》</span> |
|||
</view> |
|||
|
|||
<view class="nine-btn-save-001 ma20" @click="registerClick"> |
|||
注 册 |
|||
</view> |
|||
<view class="text-center">已有账号? |
|||
<span class="ml10 color-blue" @click="loginClick">立即登录</span> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import store from "@/store" |
|||
export default { |
|||
data() { |
|||
return { |
|||
userName: "", |
|||
nickName: "", |
|||
phone: "", |
|||
password: "", |
|||
password2: "", |
|||
|
|||
protocolFlag: "0", |
|||
|
|||
verifyTimer: null, |
|||
verifyCode: "", |
|||
verifyTime: 0, |
|||
verifyText: "发送验证码" |
|||
} |
|||
}, |
|||
methods: { |
|||
checkBoxClick(){ |
|||
this.protocolFlag = String(1 - Number(this.protocolFlag)); |
|||
}, |
|||
registerClick(){ |
|||
if(!this.userName){ |
|||
this.msg("用户账号不允许为空"); |
|||
return; |
|||
} |
|||
if(!this.isNumberOrLetter(this.userName)){ |
|||
this.msg("用户账号只能是字母/数字组合"); |
|||
return; |
|||
} |
|||
if(!this.nickName){ |
|||
this.msg("用户姓名不允许为空"); |
|||
return; |
|||
} |
|||
if(!this.phone){ |
|||
this.msg("手机号不允许为空"); |
|||
return; |
|||
} |
|||
if(!this.isPhone(this.phone)){ |
|||
this.msg("必须为有效手机号"); |
|||
return; |
|||
} |
|||
if(!this.verifyCode){ |
|||
this.msg("验证码不允许为空"); |
|||
return; |
|||
} |
|||
if(!this.password){ |
|||
this.msg("登录密码不允许为空"); |
|||
return; |
|||
} |
|||
if(!this.password2){ |
|||
this.msg("确认密码不允许为空"); |
|||
return; |
|||
} |
|||
if(this.password != this.password2){ |
|||
this.msg("两次输入的登录密码不一致"); |
|||
return; |
|||
} |
|||
if(this.protocolFlag == 0){ |
|||
this.msg("请勾选服务协议"); |
|||
return; |
|||
} |
|||
this.diyApi('/appRegister', { |
|||
userType: "app_user", |
|||
userName: this.userName.trim(), |
|||
nickName: this.nickName, |
|||
phone: this.phone, |
|||
password: this.password, |
|||
smsCode: this.verifyCode |
|||
}).then(res => { |
|||
store.commit('SET_LOGIN_INFO', { |
|||
...this.$store.state.user.loginInfo, |
|||
loginType: 0, |
|||
userName: this.userName, |
|||
password: this.password |
|||
}) |
|||
this.msg("注册成功"); |
|||
setTimeout(() => { |
|||
this.navigateToLogin(); |
|||
}, 1500); |
|||
}) |
|||
}, |
|||
loginClick(){ |
|||
this.navigateToLogin(); |
|||
}, |
|||
protocolClick(){ |
|||
// this.navigateTo("/pages/setting/protocol") |
|||
}, |
|||
verifyClick(){ |
|||
if(this.verifyTime == 0){ |
|||
if(!this.phone){ |
|||
this.msg("必须为有效手机号"); |
|||
return; |
|||
} |
|||
this.diyApiGet('/captchaSms', {phone: this.phone}).then(res => { |
|||
this.verifyTime = 60; |
|||
this.verifyText = this.verifyTime + " S"; |
|||
this.verifyTimer = setInterval(() => { |
|||
this.timeInterval(); |
|||
}, 1000) |
|||
}) |
|||
} |
|||
}, |
|||
timeInterval() { |
|||
this.verifyTime--; |
|||
if (this.verifyTime > 0) { |
|||
this.verifyText = this.verifyTime + " S"; |
|||
}else{ |
|||
if(this.verifyTimer) { |
|||
clearInterval(this.verifyTimer); |
|||
this.verifyTimer = null; |
|||
} |
|||
this.verifyText = "发送验证码"; |
|||
} |
|||
}, |
|||
} |
|||
data() { |
|||
return { |
|||
userName: "", |
|||
nickName: "", |
|||
phone: "", |
|||
password: "", |
|||
password2: "", |
|||
|
|||
protocolFlag: "0", |
|||
|
|||
verifyTimer: null, |
|||
verifyCode: "", |
|||
verifyTime: 0, |
|||
verifyText: "发送验证码" |
|||
} |
|||
}, |
|||
methods: { |
|||
checkBoxClick(){ |
|||
this.protocolFlag = String(1 - Number(this.protocolFlag)); |
|||
}, |
|||
registerClick(){ |
|||
if(!this.userName){ |
|||
this.msg("用户账号不允许为空"); |
|||
return; |
|||
} |
|||
if(!this.isNumberOrLetter(this.userName)){ |
|||
this.msg("用户账号只能是字母/数字组合"); |
|||
return; |
|||
} |
|||
if(!this.nickName){ |
|||
this.msg("用户姓名不允许为空"); |
|||
return; |
|||
} |
|||
if(!this.phone){ |
|||
this.msg("手机号不允许为空"); |
|||
return; |
|||
} |
|||
if(!this.isPhone(this.phone)){ |
|||
this.msg("必须为有效手机号"); |
|||
return; |
|||
} |
|||
if(!this.verifyCode){ |
|||
this.msg("验证码不允许为空"); |
|||
return; |
|||
} |
|||
if(!this.password){ |
|||
this.msg("登录密码不允许为空"); |
|||
return; |
|||
} |
|||
if(!this.password2){ |
|||
this.msg("确认密码不允许为空"); |
|||
return; |
|||
} |
|||
if(this.password != this.password2){ |
|||
this.msg("两次输入的登录密码不一致"); |
|||
return; |
|||
} |
|||
if(this.protocolFlag == 0){ |
|||
this.msg("请勾选服务协议"); |
|||
return; |
|||
} |
|||
this.diyApi('/appRegister', { |
|||
userType: "app_user", |
|||
userName: this.userName.trim(), |
|||
nickName: this.nickName, |
|||
phone: this.phone, |
|||
password: this.password, |
|||
smsCode: this.verifyCode |
|||
}).then(res => { |
|||
store.commit('SET_LOGIN_INFO', { |
|||
...this.$store.state.user.loginInfo, |
|||
loginType: 0, |
|||
userName: this.userName, |
|||
password: this.password |
|||
}) |
|||
this.msg("注册成功"); |
|||
setTimeout(() => { |
|||
this.navigateToLogin(); |
|||
}, 1500); |
|||
}) |
|||
}, |
|||
loginClick(){ |
|||
this.navigateToLogin(); |
|||
}, |
|||
protocolClick(){ |
|||
// this.navigateTo("/pages/setting/protocol") |
|||
}, |
|||
verifyClick(){ |
|||
if(this.verifyTime == 0){ |
|||
if(!this.phone){ |
|||
this.msg("必须为有效手机号"); |
|||
return; |
|||
} |
|||
this.diyApiGet('/captchaSms', {phone: this.phone}).then(res => { |
|||
this.verifyTime = 60; |
|||
this.verifyText = this.verifyTime + " S"; |
|||
this.verifyTimer = setInterval(() => { |
|||
this.timeInterval(); |
|||
}, 1000) |
|||
}) |
|||
} |
|||
}, |
|||
timeInterval() { |
|||
this.verifyTime--; |
|||
if (this.verifyTime > 0) { |
|||
this.verifyText = this.verifyTime + " S"; |
|||
}else{ |
|||
if(this.verifyTimer) { |
|||
clearInterval(this.verifyTimer); |
|||
this.verifyTimer = null; |
|||
} |
|||
this.verifyText = "发送验证码"; |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue