rongzidanbao-ui/pages/register.vue

<template>
  <view class="normal-login-container regbox" style="padding-top: 120rpx;">
    <!-- <view class="logo-content align-center justify-center flex">
      <image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
      </image>
      <text class="title">若依移动端注册</text>
    </view> -->
	<view>
		<image :src="headimg" class="headimg flex0"></image>
		<view class="headtit">注册</view>
	</view>
	
    <view class="login-form-content">
      <view class="input-item flex align-center">
        <view class="iconfont icon-user icon"></view>
        <input v-model="registerForm.username" class="input" type="text" placeholder="请输入手机号" maxlength="30" />
      </view>
      <view class="input-item flex align-center">
        <view class="iconfont icon-password icon"></view>
		<uni-easyinput type="password" placeholderStyle="font-size: 28rpx;color: grey;" :inputBorder="false" v-model="registerForm.password" placeholder="请输入密码"></uni-easyinput>
      </view>
	  
      <view class="input-item flex align-center">
        <view class="iconfont icon-password icon"></view>
		<uni-easyinput type="password" placeholderStyle="font-size: 28rpx;color: grey;" :inputBorder="false" v-model="registerForm.confirmPassword" placeholder="请再次输入您的密码"></uni-easyinput>
      </view>
	  <view  class="input-item flex align-center" >
		<view class="iconfont icon-password icon"></view>
		<input v-model="registerForm.code"  class="input" placeholder="请输入短信验证码" maxlength="20" />
		<view v-if="timefalg" class="codes">重新发送{{time}}s</view>
		<view v-else class="codess" @click="getsendCode">发送验证码</view>
	  </view>
      <view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
        <view class="iconfont icon-code icon"></view>
        <input v-model="registerForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
        <view class="login-code"> 
          <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
        </view>
      </view>
	  <view class="titico">*密码必须包含数字、大小写字母、特殊符号且大于8位</view>
      <view class="action-btn">
		  <button @click="handleRegister()" type="primary" class=" rbtn mb24 mt50 btn2" >注册</button>
        <!-- <button  class="register-btn cu-btn block bg-blue lg round">注册</button> -->
      </view>
    </view>
    <view class="xieyi text-center">
      <text @click="handleUserLogin" class="text-blue">使用已有账号登录</text>
    </view>
  </view>
</template>

<script>
	import * as base64 from "base-64"
  import { getCodeImg, register,sendSmszcOnly,getInfo } from '@/api/login.js'
  export default {
    data() {
      return {
		headimg:require('@/static/logo.png'),
        codeUrl: "",
        captchaEnabled: true,
		timefalg:'',
		tucode:'',
		time:'',
        globalConfig: getApp().globalData.config,
		jzflag:true,
        registerForm: {
          username: "",
          password: "",
          confirmPassword: "",
          code: "",
          uuid: ''
        }
      }
    },
    created() {
      this.getCode()
    },
    methods: {
      // 用户登录
      handleUserLogin() {
        this.$tab.navigateTo(`/pages/login`)
      },
      // 获取图形验证码
      getCode() {
        getCodeImg().then(res => {
          this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
          if (this.captchaEnabled) {
            this.codeUrl = 'data:image/gif;base64,' + res.img
            this.registerForm.uuid = res.uuid
          }
        })
      },
	  // 获取短信验证码
	  getsendCode(){
	  	var that=this;
	  	if (!this.registerForm.username ) {
	  		that.$toast("请输入手机号")
	  		return
	  	}
	  	let regphone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
	  	// 座机号
	  	let reg1=/^(0\d{2,3})-?(\d{7,8})$/
	  	if (this.registerForm.username && !regphone.test(this.registerForm.username)) {
	  		that.$toast("请输入正确的手机号")
	  		return
	  	}
	  	var params={
	  		'username':this.registerForm.username
	  	}
	  		// getSMS();
	  		// return
	  	sendSmszcOnly(params).then(res=>{
	  		if (res.code == 200) {
	  			// 发送验证码
	  			that.$toast("发送成功")
	  			that.time=60;
	  			that.timefalg=true;
	  			that.setTimein()
	  		} else {
	  			that.$toast(res.msg)
	  		}
	  	})
	  },
	  // 验证码倒计时
	  setTimein(){
	  	var that=this;
	  	clearInterval(that.timer)
	  	that.timer=setInterval(()=>{
	  		if(that.time<=1){
	  			that.timefalg=false;
	  			that.time=60;
	  			clearInterval(that.timer)
	  		}
	  		that.time=that.time-1;
	  	},1000)
	  },
      // 注册方法
      async handleRegister() {
		let regphone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
        if (this.registerForm.username === "") {
			this.$toast('请输入您的手机号')
		} else if (this.registerForm.username && !regphone.test(this.registerForm.username)) {
			this.$toast('请输入正确的手机号')
        } else if (this.registerForm.password === "") {
			this.$toast('请输入您的密码')
        } else if (this.registerForm.confirmPassword === "") {
			this.$toast('请再次输入您的密码')
        } else if (this.registerForm.password !== this.registerForm.confirmPassword) {
			this.$toast('两次输入的密码不一致')
        // } else if (this.registerForm.code === "" && this.captchaEnabled) {
        } else if (this.registerForm.code === "") {
			this.$toast('请输入验证码')
        } else {
			this.$toast('注册中，请耐心等待...')
          this.register()
        }
      },
      // 用户注册
      async register() {
		var that=this;
        register(this.registerForm).then(res => {
          this.$modal.closeLoading()
          uni.showModal({
          	title: "系统提示",
          	content: "恭喜你，您的账号 " + this.registerForm.username + " 注册成功！现在登录",
          	success: function (res) {
          		if (res.confirm) {
				that.pwdLogin()	
                // uni.redirectTo({ url: `/pages/login` });
          		}
          	}
          })
        }).catch(() => {
          if (this.captchaEnabled) {
            this.getCode()
          }
        })
      },
	  // 密码登录
	  async pwdLogin() {
	  	var that=this;
		var params={
			username:this.registerForm.username,
			password:this.registerForm.password,
			type:1,//1：账号密码 2：手机登录
		}
	    this.$store.dispatch('Login', params).then((res) => {
	  		if(that.jzflag){
	  			var newObj={
	  				username:params.username,
	  				password:base64.encode(params.password),
	  				captchaEnabled:that.captchaEnabled,
	  			}	
	  			uni.setStorageSync('account', JSON.parse(JSON.stringify(newObj)))
	  		}else{
	  			uni.removeStorageSync('account')
	  		} 	  
	      this.$modal.closeLoading()
	  		  this.$toast('登录成功')
	  		  setTimeout(function(){
	  			  that.registerSuccess()
	  		  },1500)
	      
	    }).catch((error) => {
			
	    })
	  },
      // 注册成功后，处理函数
      registerSuccess(result) {
        // 设置用户信息
        this.$store.dispatch('GetInfo').then(res => {
          this.$tab.reLaunch('/pages/index/index')
        })
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #ffffff;
  }
.headimg{width: 200rpx;height: 200rpx;margin:0 auto 20rpx;}
.headtit{
	font-weight: bold;
	font-size: 40rpx;
	color: #343434;text-align: center;
}
.rbtn {font-size: 30rpx;
	&.btn{background: #9a9c9e;color: #ffffff;}
	&.btn2{background: $com-cd3;color: #ffffff;}
}
.codess{font-size: 30rpx;color: $com-cd3;flex: 0 0 auto;min-width: 200rpx;text-align: center;border-left: 2rpx solid #CDCDCD;}
.codes{background: none;font-size: 28rpx;flex: 0 0 auto;width: 180rpx;text-align: center;border-left: 2rpx solid #CDCDCD;}
.titico{font-weight: 500;font-size: 24rpx;color: #FF6969;}
  .normal-login-container {
    width: 100%;

    .logo-content {
      width: 100%;
      font-size: 21px;
      text-align: center;
      padding-top: 15%;

      image {
        border-radius: 4px;
      }

      .title {
        margin-left: 10px;
      }
    }

    .login-form-content {
      text-align: center;
      margin: 20px auto;
      margin-top: 15%;
      width: 80%;

      .input-item {
        margin: 20px auto;
        background-color: #f5f6f7;
        height: 45px;
        border-radius: 20px;

        .icon {
          font-size: 38rpx;
          margin-left: 10px;
          color: #999;
        }

        .input {
          width: 100%;
          font-size: 14px;
          line-height: 20px;
          text-align: left;
          padding-left: 15px;
        }

      }

      .register-btn {
        margin-top: 40px;
        height: 45px;
      }

      .xieyi {
        color: #333;
        margin-top: 20px;
      }
      
      .login-code {
        height: 38px;
        float: right;
      
        .login-code-img {
          height: 38px;
          position: absolute;
          margin-left: 10px;
          width: 200rpx;
        }
      }
    }
  }

</style>