assess-app/pages/login/register.vue

<template>
  <view class="page-box login-box">
    <view class="login-form sys-radius-50 sys-background-fff">
      <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 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>
      <agreement v-model="isConsent" ref="agreement"></agreement>

      <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="{'sys-selected-but':isRegister,'sys-unselected-but':!isRegister}"
          @click="register"

      >注册</view>


    </view>

    <view class="register-box">
      <view class="register-text sys-weight-400 sys-size-24 text-color-666">已有账号？</view>
      <view class="register-text text-color-dominant sys-size-24 sys-weight-400" @click="goToUrl(1)">去登录</view>
    </view>

  </view>
</template>

<script>
import EnInput from "../../components/en-from/en-input/index.vue";
import tools from "../../service/tools";
import {commonSend} from "../../api/common";
import Agreement from "@/pages/login/model/agreement.vue";
import {register, wxLogin} from "@/api/login";
import txUploadFile from "@/service/txOssSts";

export default {
  components: {Agreement, EnInput},
  onPullDownRefresh() {
    return false
  },
  data() {
    return {
      accountData:{
        'openid':'',
        'phone':'',
        'password':'',
        'passwordTwo':'',
        'code':'',
        'wxCode':'',
        'name':'',
        'nickname':'',
        'head_img':'https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/app-serve/2024-4-17/gvbknkvhub.png?imageMogr2/quality/20',
      },
      timeNum:0,
      timer:null,
      isAJAX:false,
      isConsent: false,
      isRegister: false,
      shakeNum: 0,
      stepNum:1,
    };
  },
  watch:{
    'accountData': {
      handler() {
        this.verifyData(false)
      },
      deep: true
    },
    'isConsent':function () {
      this.verifyData(false)
    }
  },
  methods:{
    setStepNum(stepNum){
      if(stepNum===2){
        if( !this.verifyData(true)){
            return false
        }
      }
      if(this.stepNum!==stepNum){
        this.stepNum=stepNum
      }
    },
    onChooseAvatar(e) {
      // console.log(e);
      txUploadFile(e.detail.avatarUrl).then((res) => {
        console.log('--------------------ok',res)
        if (res.Location) {
          this.accountData.head_img = res.Location;
          tools.hideLoading();
        }else {
          tools.hideLoading();
          tools.error('上传失败')
        }
      }).catch((err) => {
        tools.hideLoading();
      })
      // this.accountData.head_img = e.detail.avatarUrl;
    },
    goToUrl(type){
      uni.reLaunch({
        'url':'/pages/login/index'
      })
    },
    verifyData(type){
      let isRegister=true;
      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.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){
        setTimeout(()=>{
          if(this.shakeNum>0)this.shakeNum=0
        },500)
      }
      this.isRegister=isRegister
      return isRegister

    },
    register(){
      this.verifyData(true)
      if(!this.isRegister){
        return ;
      }
      if(this.isAJAX){
        return
      }
      this.isAJAX = true
      uni.login({
        provider: "weixin",
        success: (loginRes) => {
          this.accountData.wxCode=loginRes.code;
          register(this.accountData).then((res)=>{
            if(res.code===1){
              tools.setLoginData(res.data,false)
              tools.success('注册成功')
              setTimeout(()=>{
                this.isAJAX = false;
                uni.reLaunch({
                  url: '/pages/login/await-audit'
                });
              },1500)
            }else {
              this.isAJAX = false;
              tools.error(res.msg)
            }
          })

        },
        fail: (loginRes) => {
          this.isAJAX = false;
          tools.error("获取授权信息失败");
        },
      });
    },
    getVerifiedCode() {
      if (this.timeNum > 0) {
        return;
      }
      if (this.accountData.phone === '') {
        tools.error("请输入手机号码")
        return;
      }
      let regPhone = /^(?:(?:\+|00)86)?1\d{10}$/;
      if (!regPhone.test(this.accountData.phone)) {
        tools.error("手机号码格式错误")
        return;
      }
      commonSend({
        'phone': this.accountData.phone,
        'send_type': 'register'
      }).then((res) => {
        if (res.code === 1) {
          tools.success(res.msg);
          this.timeNum = 60;
          this.timer = setInterval(() => {
            this.timeNum--;
            if (this.timeNum <= 0) {
              clearInterval(this.timer);
            }
          }, 1000);
        } else {
          tools.error(res.msg);
        }
      })
    },
  }
}
</script>

<style lang="scss">
@import "/static/css/login.css";
.page-box{
  padding-top: 370rpx;
  .login-form{
    margin: 0 30rpx;
    border-radius: 50rpx;
    padding: 40rpx 45rpx;
    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{
      height: 96rpx;
      padding: 28rpx 40rpx;
      box-sizing: border-box;
      margin-top: 30rpx;
      .login-input{
        width: 100%;
      }
    }
    .input-item:first-child{
      margin-top: 0;
    }
    .input-send{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .login-input{
        width:calc(100% - 140rpx) ;
      }
      .login-send{
        width: 140rpx;
        text-align: center;
      }
    }
    .input-but{
      margin-top: 40rpx;
      width: 100%;
      height: 96rpx;
      line-height: 96rpx;
      text-align: center;
    }
    .input-img{
      display: flex;
      flex-direction: column;
      justify-content: center;
      .head-button{
        margin: auto;
        padding: 0;
        height: 90rpx;
        border-radius: 50%;
        .head-img{
          width: 90rpx;
          height: 90rpx;
          border-radius: 50%;
        }
      }

      .head-text{
        margin-top: 10rpx;
        text-align: center;
      }
    }
  }
  .register-box{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60rpx;
    .register-text{
      height: 34rpx;
      line-height: 34rpx;
    }
    .register-text:last-child{
      margin-right: 5rpx;
    }
  }
}


</style>