udemo-im/pages/user/register.vue

<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>
</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 = "发送验证码";
      }
    },
  }
}
</script>