2 changed files with 413 additions and 412 deletions
@ -1,259 +1,260 @@ |
|||||
<template> |
<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> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import store from '@/store' |
|
||||
|
import store from '@/store' |
||||
import socketStore from '@/uni_modules/vrapile-im/store' |
import socketStore from '@/uni_modules/vrapile-im/store' |
||||
import { getToken } from '@/utils/token' |
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> |
</script> |
||||
|
|
||||
<style scoped> |
<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> |
</style> |
||||
@ -1,173 +1,173 @@ |
|||||
<template> |
<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> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import store from "@/store" |
import store from "@/store" |
||||
export default { |
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> |
</script> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue