property/user_ui/mine/pages/register.vue

<template>
  <view class="regbox">
	  <image :src="lbg" class="navbg"></image>
	  <image :src="fbg" class="fbg"></image>
	  <view class="wymain">
		  <view class="head">
		  	<view class="htit">你好，</view>
		  	<view class="htit">欢迎注册智慧社区平台</view>
		  	<view class="htxt" @click="getlogin">已有账号？<text>立即登录</text></view>
		  </view>
		    <view class="flex1" style="position: relative;">
		  	  <!-- 手机号登录 -->
		  	  <view class="login-form-content">
		  
		  	  	<view class="input-item">
		  	  		<view class="login_tit">账号</view>
		  	  		<view class="login_box">
		  	  			<!-- <view class="login_boxl">+86</view> -->
		  	  			 <input  v-model="datainfo.username" class="input" type="text" placeholder="请输入登录账号" maxlength="30" />
		  	  		</view>
		  	  	</view>
				<view  class="input-item">
					<view class="login_tit">验证码</view>
					 <view style="display: flex;align-items: center;">
						 <input v-model="duancode" type="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>
		  	  	<view class="input-item" >
		  	  		<view class="login_tit">密码</view>
		  	  		 <view class="login_box">
		  	  			 <uni-easyinput :inputBorder="false" type="password" v-model="datainfo.password" placeholder="请输入密码" />
		  	  		 </view>
		  	  	</view>
				<view class="titico">*密码必须包含数字、大小写字母、特殊符号且大于8位</view>
		  	  	<!-- <view class="input-item flex align-center" style="width: 60%;margin: 0px;margin-bottom: 24rpx;" v-if="captchaEnabled">
		  	  	  <input v-model="tucode" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
		  	  	  <view class="login-code"> 
		  	  	    <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
		  	  	  </view  >
		  	  	</view> -->
		  	  	
		  	    <button v-if="captchaEnabled"  type="primary" class=" rbtn " :class="tucode&&datainfo.username&&datainfo.password?'btn2':'btn'"  @click="getRegisterFn">注册</button>
		  	    <button v-else type="primary" class=" rbtn" :class="datainfo.username&&datainfo.password?'btn2':'btn'"   @click="getRegisterFn">注册</button>
		  	  </view>
		  	  
		  	  <!-- 账号密码登录 -->
		  		<view class="lread" @click="checkflag=!checkflag">
		  			<view class="lreadl">
		  				<image :src="checkimg" v-if="checkflag"></image>
		  				<image :src="pnicon" v-else></image>
		  			</view>
		  			<view class="tit">我已阅读并同意<text @click.stop="handlePrivacy">服务协议、</text><text @click.stop="handlePrivacy">隐私政策</text></view>
		  		</view>
		  		 <!-- <view class="bbcode">版本号：ZXY_YY_1.3</view> -->
		    </view>
	  </view>
	  <loading></loading>
	  <!-- <view class="rtxt" @click="getregister">还没账号？去申请注册</view> -->
  </view>
</template>

<script>
	import {getRegisterFn,sendSmszcOnly} from "@/api/login.js"
	import { getToken } from '@/utils/auth'
  export default {
	  components:{
		  
	  },
	data(){
		return{
			lbg:require('@/static/images/mine/lbg.png'),
			fbg:require('@/static/images/mine/fbg.png'),
			checkimg:require('@/static/images/mine/lcicon.png'),
			rimg:require('@/static/images/mine/rimg.png'),
			pnicon:require('@/static/images/mine/pnicon.png'),
			checkflag:true,
			captchaEnabled: false,
			duancode:'',//短信验证码
			checkeye:false,
			tucode:'',
			codeUrl:'',
			time:'',
			timefalg:'',
			datainfo: {
				username: "",
				code: "",
				password:'',
			},
			timer:""
		}
	},
	
	methods:{
		getlogin(){
			this.$tab.redirectTo(`/mine/pages/tlogin`)
		},
		handlePrivacy(){
			this.$tab.navigateTo(`/pages/agreement`)  
		},
		// 获取短信验证码
		getsendCode(){
			var that=this;
			if (!this.datainfo.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.datainfo.username && !regphone.test(this.datainfo.username)) {
				that.$toast("请输入正确的手机号")
				return
			}
			var params={
				'username':this.datainfo.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)
		},
		getRegisterFn(){
			var that=this;
					var params=this.datainfo;
					// if(!params.nickName){
					// 	this.$toast("请输入用户名")
					// 	return
					// }
					if(!params.phonenumber){
						this.$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}$/;
					if(!regphone.test(params.phonenumber)){
						this.$toast('请输入正确的手机号')
						return
					}
					if(!params.password){
						this.$toast("请输入密码")
						return
					}
					params.userName=params.phonenumber;
					getRegisterFn(params).then(res=>{
						if(res.code==200){
							that.$toast("注册成功")
							setTimeout(function(){
								that.$tab.reLaunch(`/pages/login`)
							},1200)
						}
					})
		},
	},
	
	onLoad: function() {	
    },
  }
</script>

<style lang="scss" scoped>
.navbg{width: 100%;height: 100vh;}
.fbg{width: 100%;height: 750rpx;position: absolute;bottom: 0;left: 0;}
.wymain{z-index: 2;position: relative;padding: 180rpx 60rpx;}
.headimg{width: 136rpx;height: 136rpx;margin:0 auto 36rpx;}
.titico{font-weight: 500;font-size: 24rpx;color: #FF6969;margin-top: 20rpx;}
.head{margin-bottom: 64rpx;
	.htit{font-weight: bold;font-size: 48rpx;color: #0156FE;line-height: 60rpx;}
	.htxt{font-weight: 500;font-size: 24rpx;color: #666666;margin-top: 30rpx;
		text{color: #0156FE;}
	}
}
.mzimg{width: 100rpx;height: 44rpx;margin: 0 auto ;}
.regbox /deep/ .uni-easyinput__content{background-color: transparent !important;}
.regbox /deep/ .uni-easyinput__content-input{font-size: 30rpx !important;padding-left: 0 !important;line-height: 80rpx;height: 80rpx;}
.regbox /deep/ .uni-input-placeholder{font-size: 30rpx !important;padding-left: 0 !important;color: #808080;}
.rtxt{font-size: 30rpx;font-weight: 500;
color: $com-cd3;text-align: center;}
.bbcode{position: absolute;width: 100%;text-align: center;left: 0;bottom: -80rpx;font-size: 24rpx;color: #666666;}
.lread{
	display: flex;align-items: flex-start;justify-content: center;
	.lreadl{padding-top: 4rpx;
		image{width: 22rpx;height: 22rpx;margin-right: 12rpx;}
	}
	.tit{font-size: 26rpx;font-weight: 500;color: #666666;
	text{color:#4888FA;padding: 0 6rpx;font-weight: 500;}
}
}
.tab{
	.tabtit{font-size: 30rpx;font-weight: 500;color: #666666;padding: 0 24rpx;position: relative;
	&.act{color: $com-cd3;font-weight: bold;}
		&::before{content: '';position: absolute;left: 0;top: 50%;margin-top: -10rpx;width: 2rpx;height: 20rpx;background: #DADADA;}
		&:first-child::before{display: none;}
	}
	
}
.rbtn {height: 84rpx;margin: 120rpx 0 24rpx;font-weight: bold;font-size: 28rpx;color: #FFFFFF;line-height: 84rpx;
		&.btn{background: #9a9c9e;color: #ffffff;}
		&.btn2{background: $com-cd3;color: #ffffff;}
      }
.login-form-content {
      margin: 0 auto;
      width: 100%;
		
      .input-item {
        // margin-bottom:48rpx;
        border-bottom: 2rpx solid #CDCDCD;
		padding: 40rpx 0 0rpx;
        .icon {
          font-size: 40rpx;
          margin-left: 10px;
          color: #999;
        }
		.login_tit{
			font-size: 30rpx;
			font-weight: bold;
			color: #343434;margin-bottom: 8rpx;
		}
		.login_box{display: flex;align-items: center;
			.rimgs{width: 18rpx;height: 30rpx;flex: 0 0 auto;margin-left: 20rpx;}
		}
        .input {
          width: 100%;
          font-size: 30rpx;
		  height: 80rpx;
		  line-height: 80rpx;
        }

      }

      
      .login-code {
        height: 38px;
        float: right;
      
        .login-code-img {
          height: 38px;
          position: absolute;
          margin-left: 10px;
          width: 200rpx;
        }
      }
    }
// .image{width: 30rpx;height: 30rpx;margin-right: 14rpx;}
.input_ye image{width: 34rpx;height: 18rpx;}
.codess{font-size: 28rpx;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;}
.login_box{display: flex;align-items: center;}
.login_boxl{width:130rpx;font-size: 34rpx;color: #343434;border-right: 2rpx solid #CDCDCD;}
.login_txt{text-align: right;flex: 0 0 auto; padding:0 24rpx;
	text{font-size: 30rrpx;color:#666666;}
}
.line{width: 2rpx;height: 24rpx;background: #CDCDCD;margin: 0 10rpx;}
.login_jz{display: flex;align-items: center;justify-content: flex-end;flex: 0 0 auto;
	image{width: 30rpx;height: 30rpx;margin-right: 12rpx;}
	view{color: #666666;font-size: 28rpx;}
}
// app
</style>