|
@@ -1,40 +1,59 @@
|
|
|
<template>
|
|
<template>
|
|
|
<view class="page-box login-box">
|
|
<view class="page-box login-box">
|
|
|
<view class="login-form sys-radius-50 sys-background-fff">
|
|
<view class="login-form sys-radius-50 sys-background-fff">
|
|
|
- <view class="from-box animate__animated animate__fadeIn">
|
|
|
|
|
- <view class=" input-img">
|
|
|
|
|
- <button class="head-button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" >
|
|
|
|
|
- <image :src="accountData.head_img" class="head-img"></image>
|
|
|
|
|
- </button>
|
|
|
|
|
- <view class="head-text text-color-666 sys-size-24">点击上传头像</view>
|
|
|
|
|
|
|
+ <view class="from-box ">
|
|
|
|
|
+ <view class="step-item animate__animated animate__fadeIn" v-if="stepNum===1">
|
|
|
|
|
+ <view class=" input-img">
|
|
|
|
|
+ <button class="head-button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" >
|
|
|
|
|
+ <image :src="accountData.head_img" class="head-img"></image>
|
|
|
|
|
+ </button>
|
|
|
|
|
+ <view class="head-text text-color-666 sys-size-24">点击上传头像</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="input-item sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':shakeNum===1}" >
|
|
|
|
|
+ <en-input type="nickname" class="login-input" placeholder="请输入昵称" v-model="accountData.nickname" ></en-input>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="input-item sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':shakeNum===2}">
|
|
|
|
|
+ <en-input type="text" class="login-input" placeholder="请输入姓名" v-model="accountData.name" ></en-input>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="input-item sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':shakeNum===1}" >
|
|
|
|
|
- <en-input type="nickname" class="login-input" placeholder="请输入昵称" v-model="accountData.nickname" ></en-input>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="input-item sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':shakeNum===2}">
|
|
|
|
|
- <en-input type="text" class="login-input" placeholder="请输入姓名" v-model="accountData.name" ></en-input>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="input-item sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':shakeNum===3}" >
|
|
|
|
|
- <en-input type="number" class="login-input" placeholder="请输入手机号" v-model="accountData.phone" ></en-input>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="input-item input-send sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':shakeNum===4}">
|
|
|
|
|
- <en-input type="number" class="login-input" placeholder="请输入验证码" v-model="accountData.code" maxlength="6"></en-input>
|
|
|
|
|
- <view class="login-send text-color-dominant sys-size-28 sys-weight-400" @click="getVerifiedCode" v-if="timeNum<=0">发送验证码</view>
|
|
|
|
|
- <view class="login-send text-color-dominant sys-size-28 sys-weight-400" v-else>{{ timeNum }} s</view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="input-item sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':(shakeNum===5 || shakeNum===7)}" >
|
|
|
|
|
- <en-input type="password" class="login-input" placeholder="请输入密码" v-model="accountData.password" ></en-input>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="input-item sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':(shakeNum===6 || shakeNum===7)}">
|
|
|
|
|
- <en-input type="password" class="login-input" placeholder="请再次输入密码" v-model="accountData.passwordTwo" ></en-input>
|
|
|
|
|
|
|
+ <view class="step-item animate__animated animate__fadeIn" v-else>
|
|
|
|
|
+ <view class="back-set" @click="setStepNum(1)">
|
|
|
|
|
+ <image class="back-img" src="/static/img/login/Vector.png" mode="widthFix"></image>
|
|
|
|
|
+ <view class="back-text text-color-dominant sys-size-30 sys-weight-400">返回上一步</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="input-item sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':shakeNum===3}" >
|
|
|
|
|
+ <en-input type="number" class="login-input" placeholder="请输入手机号" v-model="accountData.phone" ></en-input>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="input-item input-send sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':shakeNum===4}">
|
|
|
|
|
+ <en-input type="number" class="login-input" placeholder="请输入验证码" v-model="accountData.code" maxlength="6"></en-input>
|
|
|
|
|
+ <view class="login-send text-color-dominant sys-size-28 sys-weight-400" @click="getVerifiedCode" v-if="timeNum<=0">发送验证码</view>
|
|
|
|
|
+ <view class="login-send text-color-dominant sys-size-28 sys-weight-400" v-else>{{ timeNum }} s</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="input-item sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':(shakeNum===5 || shakeNum===7)}" >
|
|
|
|
|
+ <en-input type="password" class="login-input" placeholder="请输入密码" v-model="accountData.password" ></en-input>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="input-item sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':(shakeNum===6 || shakeNum===7)}">
|
|
|
|
|
+ <en-input type="password" class="login-input" placeholder="请再次输入密码" v-model="accountData.passwordTwo" ></en-input>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
</view>
|
|
</view>
|
|
|
<agreement v-model="isConsent" ref="agreement"></agreement>
|
|
<agreement v-model="isConsent" ref="agreement"></agreement>
|
|
|
|
|
|
|
|
<view
|
|
<view
|
|
|
|
|
+ v-if="stepNum===1"
|
|
|
|
|
+ class="input-but sys-background-dominant text-color-fff sys-size-30 sys-radius-100 sys-weight-600"
|
|
|
|
|
+ :class="{'sys-selected-but':isRegister,'sys-unselected-but':!isRegister}"
|
|
|
|
|
+ @click="setStepNum(2)"
|
|
|
|
|
+
|
|
|
|
|
+ >下一步</view>
|
|
|
|
|
+ <view
|
|
|
|
|
+ v-else
|
|
|
class="input-but sys-background-dominant text-color-fff sys-size-30 sys-radius-100 sys-weight-600"
|
|
class="input-but sys-background-dominant text-color-fff sys-size-30 sys-radius-100 sys-weight-600"
|
|
|
:class="{'sys-selected-but':isRegister,'sys-unselected-but':!isRegister}"
|
|
:class="{'sys-selected-but':isRegister,'sys-unselected-but':!isRegister}"
|
|
|
@click="register"
|
|
@click="register"
|
|
|
|
|
+
|
|
|
>注册</view>
|
|
>注册</view>
|
|
|
|
|
|
|
|
|
|
|
|
@@ -80,6 +99,7 @@ export default {
|
|
|
isConsent: false,
|
|
isConsent: false,
|
|
|
isRegister: false,
|
|
isRegister: false,
|
|
|
shakeNum: 0,
|
|
shakeNum: 0,
|
|
|
|
|
+ stepNum:1,
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
watch:{
|
|
watch:{
|
|
@@ -94,6 +114,16 @@ export default {
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
methods:{
|
|
methods:{
|
|
|
|
|
+ setStepNum(stepNum){
|
|
|
|
|
+ if(stepNum===2){
|
|
|
|
|
+ if( !this.verifyData(true)){
|
|
|
|
|
+ return false
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ if(this.stepNum!==stepNum){
|
|
|
|
|
+ this.stepNum=stepNum
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
onChooseAvatar(e) {
|
|
onChooseAvatar(e) {
|
|
|
// console.log(e);
|
|
// console.log(e);
|
|
|
txUploadFile(e.detail.avatarUrl).then((res) => {
|
|
txUploadFile(e.detail.avatarUrl).then((res) => {
|
|
@@ -117,63 +147,68 @@ export default {
|
|
|
},
|
|
},
|
|
|
verifyData(type){
|
|
verifyData(type){
|
|
|
let isRegister=true;
|
|
let isRegister=true;
|
|
|
-
|
|
|
|
|
- if(!this.accountData.nickname){
|
|
|
|
|
- isRegister=false
|
|
|
|
|
- if(type){
|
|
|
|
|
- this.shakeNum=1
|
|
|
|
|
- tools.error('请输入昵称');
|
|
|
|
|
- }
|
|
|
|
|
- }else if(!this.accountData.name){
|
|
|
|
|
- isRegister=false
|
|
|
|
|
- if(type){
|
|
|
|
|
- this.shakeNum=2
|
|
|
|
|
- tools.error('请输入姓名');
|
|
|
|
|
- }
|
|
|
|
|
- }else if(!this.accountData.phone){
|
|
|
|
|
- isRegister=false
|
|
|
|
|
- if(type){
|
|
|
|
|
- this.shakeNum=3
|
|
|
|
|
- tools.error('请输入手机号码');
|
|
|
|
|
- }
|
|
|
|
|
- }else if(!this.accountData.password){
|
|
|
|
|
- isRegister=false
|
|
|
|
|
- if(type){
|
|
|
|
|
- this.shakeNum=5
|
|
|
|
|
- tools.error('请输入密码');
|
|
|
|
|
- }
|
|
|
|
|
- }else if(!this.accountData.passwordTwo){
|
|
|
|
|
- isRegister=false
|
|
|
|
|
- if(type){
|
|
|
|
|
- this.shakeNum=6
|
|
|
|
|
- tools.error('请确认密码');
|
|
|
|
|
- }
|
|
|
|
|
- }else if(this.accountData.password!==this.accountData.passwordTwo){
|
|
|
|
|
- isRegister=false
|
|
|
|
|
- if(type){
|
|
|
|
|
- this.shakeNum=7
|
|
|
|
|
- tools.error('密码输入不一致');
|
|
|
|
|
- }
|
|
|
|
|
- }else if(!this.accountData.code){
|
|
|
|
|
- isRegister=false
|
|
|
|
|
- if(type){
|
|
|
|
|
- this.shakeNum=4
|
|
|
|
|
- tools.error('请输入验证码');
|
|
|
|
|
|
|
+ if(this.stepNum===1){
|
|
|
|
|
+ if(!this.accountData.nickname){
|
|
|
|
|
+ isRegister=false
|
|
|
|
|
+ if(type){
|
|
|
|
|
+ this.shakeNum=1
|
|
|
|
|
+ tools.error('请输入昵称');
|
|
|
|
|
+ }
|
|
|
|
|
+ }else if(!this.accountData.name){
|
|
|
|
|
+ isRegister=false
|
|
|
|
|
+ if(type){
|
|
|
|
|
+ this.shakeNum=2
|
|
|
|
|
+ tools.error('请输入姓名');
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
- }else if(!this.isConsent){
|
|
|
|
|
- isRegister=false
|
|
|
|
|
- if(type){
|
|
|
|
|
- this.shakeNum=8
|
|
|
|
|
- tools.error('请阅读并同意协议');
|
|
|
|
|
- this.$refs.agreement.setConsentShake()
|
|
|
|
|
|
|
+ }else {
|
|
|
|
|
+ if(!this.accountData.phone){
|
|
|
|
|
+ isRegister=false
|
|
|
|
|
+ if(type){
|
|
|
|
|
+ this.shakeNum=3
|
|
|
|
|
+ tools.error('请输入手机号码');
|
|
|
|
|
+ }
|
|
|
|
|
+ }else if(!this.accountData.password){
|
|
|
|
|
+ isRegister=false
|
|
|
|
|
+ if(type){
|
|
|
|
|
+ this.shakeNum=5
|
|
|
|
|
+ tools.error('请输入密码');
|
|
|
|
|
+ }
|
|
|
|
|
+ }else if(!this.accountData.passwordTwo){
|
|
|
|
|
+ isRegister=false
|
|
|
|
|
+ if(type){
|
|
|
|
|
+ this.shakeNum=6
|
|
|
|
|
+ tools.error('请确认密码');
|
|
|
|
|
+ }
|
|
|
|
|
+ }else if(this.accountData.password!==this.accountData.passwordTwo){
|
|
|
|
|
+ isRegister=false
|
|
|
|
|
+ if(type){
|
|
|
|
|
+ this.shakeNum=7
|
|
|
|
|
+ tools.error('密码输入不一致');
|
|
|
|
|
+ }
|
|
|
|
|
+ }else if(!this.accountData.code){
|
|
|
|
|
+ isRegister=false
|
|
|
|
|
+ if(type){
|
|
|
|
|
+ this.shakeNum=4
|
|
|
|
|
+ tools.error('请输入验证码');
|
|
|
|
|
+ }
|
|
|
|
|
+ }else if(!this.isConsent){
|
|
|
|
|
+ isRegister=false
|
|
|
|
|
+ if(type){
|
|
|
|
|
+ this.shakeNum=8
|
|
|
|
|
+ tools.error('请阅读并同意协议');
|
|
|
|
|
+ this.$refs.agreement.setConsentShake()
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
if(!isRegister){
|
|
if(!isRegister){
|
|
|
setTimeout(()=>{
|
|
setTimeout(()=>{
|
|
|
if(this.shakeNum>0)this.shakeNum=0
|
|
if(this.shakeNum>0)this.shakeNum=0
|
|
|
},500)
|
|
},500)
|
|
|
}
|
|
}
|
|
|
this.isRegister=isRegister
|
|
this.isRegister=isRegister
|
|
|
|
|
+ return isRegister
|
|
|
|
|
|
|
|
},
|
|
},
|
|
|
register(){
|
|
register(){
|
|
@@ -256,6 +291,18 @@ export default {
|
|
|
border-radius: 50rpx;
|
|
border-radius: 50rpx;
|
|
|
padding: 40rpx 45rpx;
|
|
padding: 40rpx 45rpx;
|
|
|
animation-delay: 0.8s;
|
|
animation-delay: 0.8s;
|
|
|
|
|
+ transition: 0.5s ease;
|
|
|
|
|
+ .back-set{
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ .back-img{
|
|
|
|
|
+ width: 38rpx;
|
|
|
|
|
+ margin-right: 20rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ .back-text{
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
.input-item{
|
|
.input-item{
|
|
|
height: 96rpx;
|
|
height: 96rpx;
|
|
|
padding: 28rpx 40rpx;
|
|
padding: 28rpx 40rpx;
|