hezhiying/pages/register/register.vue

<template>
  <view class="page">
    <view class="logo">
      <image src="../../static/image/logo254.png" mode=""></image>
    </view>
    <!-- 填写区 -->
    <view class="input-info" v-if="!registerContent">
      <view class="info">
        <input type="tel" v-model="form.phone" maxlength="11" placeholder="手机号">
        <view class="more"></view>
      </view>
      <view class="info">
        <input type="tel" v-model="form.code" maxlength="6" placeholder="请输入验证码">
        <view class="more">
          <text class="mo" v-show="!codeSend" @click="getCode">获取验证码</text>
          <text class="mo" v-show="codeSend">{{timeNum}}秒后重试</text>
        </view>
      </view>
	  <view class="btn-info">
	    <view class="btn" :style="iscode?'opacity:1':'opacity:0.4'" @click="iscode?checkCode():''">
	      <text>下一步</text>
	    </view>
	  </view>
	  <view class="operation">
	    <text></text>
	    <text @click="onLogin">已有账号?登录</text>
	  </view>
    </view>
	<view class="input-info" v-if="registerContent">
	  <view class="info">
	    <input type="text" v-model="form.username" maxlength="20" placeholder="用户名">
	    <view class="more"></view>
	  </view>
	  <view class="info">
	     <input :password='!isPassword' maxlength="26" v-model="form.password" placeholder="请输入密码">
	     <view class="more">
	       <text class="iconfont" :class="isPassword?'icon-eye-on':'icon-eye-off'" @click="isPassword = !isPassword"></text>
	     </view>
	   </view>
	  <view class="btn-info">
	     <view class="btn" :style="isRegister?'opacity:1':'opacity:0.4'" @click="isRegister?onRegister():''">
	       <text>注册</text>
	     </view>
	   </view>
	
	</view>
   
	<u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import {smsSend,smsCheck,userRegister} from '@/common/api.js'
import {setToken,setUserInfo,setAgentInfo ,getToken,getUserInfo} from '@/common/auth.js'
export default {
  data() {
    return {
      isPassword: false,
      isRegister: false,
      // 表单
      form:{
        phone: '',
        code: '',
        password: '',
		username:''
      },
	  codeSend:false,
	  timeNum:59,
	  timer:null,
	  iscode:false,
	  registerContent:false,
	  inviteMobile:''
    };
  },
  methods:{
    onLogin(){
      uni.redirectTo({
        url: '/pages/login/login'
      })
    },
	getCode(){
		if(!this.form.phone){
			this.$refs.uToast.show({
				message:'请输入手机号码'
			})
			return;
		}
		smsSend({mobile:this.form.phone}).then(res=>{
			console.log(res)
			if(res.code==1){
				this.codeSend = true;
				this.timer = setInterval(()=>{
					if(this.timeNum>0){
						this.timeNum--;
					}else{
						this.codeSend = false;
						clearInterval(this.timer)
						this.timer = null;
					}
				},1000)
			}
		})
	},
	checkCode(){
		smsCheck({mobile:this.form.phone,captcha:this.form.code}).then(res=>{
			console.log(res)
			if(res.code==1){
				this.registerContent = true;
			}
		})
	},
	
    /**
     * 注册点击
     */
    onRegister(){
		userRegister({username:this.form.username,mobile:this.form.phone,code:this.form.code,password:this.form.password,invite_mobile:this.inviteMobile}).then(res=>{
			console.log(res,"密码")
			if(res.code==1){
				this.$refs.uToast.show({
					message:res.msg
				})
				uni.redirectTo({
				  url: '/pages/login/login'
				})
			}
			
		})
    }
  },
  destroyed() {
  	clearInterval(this.timer)
  	this.timer = null;
  },
  onLoad(options) {
  	if(options.mobile){
		this.inviteMobile = options.mobile
	}
  },
  watch:{
    form:{
      handler(newValue, oldValue) {
		  if(newValue.phone && newValue.code){
			this.iscode = true;
		  }else{
		    this.iscode = false;
		  }
        if(newValue.phone && newValue.code && newValue.password&& newValue.username){
          this.isRegister = true;
        }else{
          this.isRegister = false;
        }
      },
      deep: true
    }
  }
}
</script>

<style scoped lang="scss">
@import 'register.scss';
</style>