partnerApp/pages/register/register.vue

<template>
	<view class="page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="mx-3 mt-3">
			<!-- 账号密码登录 false代表账号密码登录 -->
			<view class="phone d-flex">
				<view class="title">电话号码</view>
				<input placeholder="请输入手机号" v-model="phone"  maxlength="11"/>
			</view>
			<view class="phone d-flex">
				<view class="title">真实姓名</view>
				<input placeholder="请输入姓名" v-model="name" />
			</view>
			<view class="password d-flex">
				<view class="title">密码</view>
				<input placeholder="请输入密码" v-model="password" :password='isHidePassword' maxlength="15" style="padding-right: 200rpx;" />
				<view class="d-flex a-center j-center yanzhengma"><view style="font-size: 40rpx;" class="icon iconfont" :class="isHidePassword?'icon-buxianshimima':'icon-xianshimima'"  @tap="isHidePassword = !isHidePassword"></view> </view>
			</view>
			
			<view class="code d-flex">
				<view class="title">验证码</view>
				<input placeholder="请输入验证码" v-model="code" maxlength="5" style="padding-right: 200rpx;"/>
				<view class="d-flex a-center j-center login-font-color yanzhengma" @tap="getCheckNum">
					<view class="d-flex a-center j-center" :class="!codetime?'yanzhengma1 main-text-color':'yanzhengma2'">{{!codetime?'获取验证码':codetime+' s'}}</view>
				</view>
			</view>
			
			<!-- 推荐信息 -->
			<template v-if="showRecommend">
				<view class="recommendInfo" >
					<view  class="d-flex">
						<view><image src="/static/bigLogo.png"></image> </view>
						<view>
							<view><span class="text-muted mr-2">推荐人姓名</span> {{recommendername}}</view>
							<view><span class="text-muted mr-2">推荐人会员号</span> {{recommenderid}}</view>
						</view>
					</view>
					<view class="px-3 py-1 d-flex a-center j-center">请确认推荐人信息，注册后，推荐人将不可修改</view>
				</view>
			</template>
			
			<button class="my-3 mt-4 d-flex a-center j-center font-weight main-bg-color" :loading="loading" :class="{'main-bf-hover-color':disabled}" type="primary" @tap="submit" :disabled="disabled" style="letter-spacing: 20rpx;">注册</button>
			
			<view class="d-flex a-center j-center my-3" >
					已有帐号？<view class="main-text-color" @tap="navigate({url:'/pages/login/login'},'reLaunch')">去登录</view>
			</view>
		</view>
		
	</view>
</template>
<script>
	import { pathToBase64,base64ToPath } from '@/common/image-tools-base64.js';
	import {mapMutations} from "vuex"
	export default {
		data() {
			return {
				name:"",
				phone:"",
				password:"",
				code:"",
				isHidePassword:true,
				disabled:true,
				loading:false,
				
				codetime:0,
				showRecommend:false,
				recommendername:"",
				recommenderid:""
			}
		},
		async onLoad(params) {
			// // #ifdef H5
			// document.getElementsByTagName('uni-page-head')[0].style.display = 'none'
			// // #endif
			if(params.id){
				this.recommenderid = params.id;
				// 查询推荐人信息
				let res = await this.$http.get('/user/findById?id='+params.id);
				if((res.code == '200') && (res.data!= null)){
					this.recommendername = res.data.name;
					this.showRecommend = true;
				}else{
					    uni.showToast({ title:res.msg , icon:"success",duration:2000 });
						this.showRecommend = false;
					// if(this.$base.baseUrl.indexOf("test")>-1){
					// 	this.recommenderid="99140109M01D01001";
					// 	this.recommendername = "耿陈杰";
					// 	this.showRecommend = false;
					// }else{
					// 	this.recommenderid="99140109M03D01001";
					// 	this.recommendername = "掌柜老王";
					// 	this.showRecommend = false;
					// }
					
				}
			}
			// else{
			// 	if(this.$base.baseUrl.indexOf("test")>-1){
			// 		this.recommenderid="99140109M01D01001";
			// 		this.recommendername = "耿陈杰";
			// 		this.showRecommend = false;
			// 	}else{
			// 		this.recommenderid="99140109M03D01001";
			// 		this.recommendername = "掌柜老王";
			// 		this.showRecommend = false;
			// 	}
			// }
		},
		watch:{
			name(){
				this.OnBtnChange();
			},
			phone(val){
				this.OnBtnChange();
			},
			password(val){
				this.OnBtnChange();
			},
			code(val){
				this.OnBtnChange();
			}
		},
		methods: {
			...mapMutations(['setUserModules']),	
			// 改变按钮状态
			OnBtnChange(){
				if( this.phone && this.password && this.code && this.name){
					this.disabled=false; return;
				}
				this.disabled=true;
			},
			isPwdRules(){
				let mPattern =  /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/; 
				return mPattern.test(this.password);
			},
			// 获取验证码
			async getCheckNum(){
				uni.hideKeyboard();
				if(this.codetime > 0) return;
				// 验证手机号合法性
				if (!this.phone) {
					return uni.showToast({title: '请输入手机号',icon: 'none'});
				}
				if (!this.$base.phoneRegular.test(this.phone)) {
					return uni.showToast({title: '请输入正确的手机号码',icon: 'none'});
				}
				// 请求服务器，发送验证码
				let res = await this.$http.get('/sendMsg',{phone:this.phone,type:"1"});
				// 请求失败处理
				if (res.code != 200){
					return uni.showToast({ title: res.data.msg, icon:"none" });
				}else{
					uni.showToast({ title: "发送成功", icon:"none" });
				}
				// 发送成功，开启倒计时
				this.codetime=60;
				let timer=setInterval(()=>{
					this.codetime--;
					if(this.codetime < 1){
						clearInterval(timer);
						this.codetime=0;
					}
				},1000);
			},
			
			// 提交注册
			async submit(){
				if (!this.name) {
					return uni.showToast({title: '请输入姓名',icon: 'none'});
				}
				// 验证手机号合法性
				if (!this.$base.phoneRegular.test(this.phone)) {
					return uni.showToast({title: '请输入正确的手机号码',icon: 'none'});
				}
				// 验证密码合法性
				if (!this.$base.passwordRegular.test(this.password)) {
					return uni.showToast({title: '密码须6-15位数字与字母组合',icon: 'none'});
				}
				// 请求服务器，发送验证码
				let res = await this.$http.post('/user/agentRegist',{
				  "name":this.name,
				  "identity":this.identity,
				  "addressnow":this.addressnow,
				  "password": this.password,
				  "mobile": this.phone,
				  "mobileMsg": this.code,
				  "referrerId": this.recommenderid,
				  "referrerName": this.recommendername
				});
				// 请求失败处理
				// var newPhone= "";
				// newPhone = this.phone;
				// this.password="";
				// this.phone="";
				// this.code="";
				// this.name="";
				if((res.code==200) && (!!res.data)){	
					// #ifndef H5
					this.setUserModules({title:"userLoginId",data:res.data})
					uni.showToast({ title: '注册成功', icon:"success",duration:2000 });
					setTimeout(() => {
						return uni.reLaunch({url:"/pages/login/login"})
					}, 2000);
					// #endif
					
					// #ifdef H5
					setTimeout(() => {
						return uni.reLaunch({
							url:"/pages/register/registerSuccess?id="+res.data+'&phone='+ this.phone
						})
					}, 2000);
					// #endif
				}
				else {
					uni.showToast({ 
						title:res.msg , icon:"success",duration:2000 });
				}
				// else{
				// 	uni.showToast({ title: '已注册，重复注册', icon:"success",duration:2000 });
				// }
			}
			
		}
	}
</script>

<style lang="scss" scoped>
@import '@/style/mixin.scss';
.idCardBefore{
	background: rgba($themeColor,0.1) url('/static/image/user/identy2.png') center center no-repeat;
	background-size: auto 70%;
	padding: 10upx;
}
.page{
	background: #F5F5F5;
	height: 100vh;
	width: 100%;
	position: absolute;
}
.phone,.password,.code{
	position: relative;
	height: 90upx;
	display: flex;
	align-items: center;
	background-color: #FFFFFF;
	padding: 0 30upx;
	margin-bottom: 26upx;
}
.phone .title,.password .title,.code .title{
	width: 160upx;
	flex-shrink: 0;
	color: #666;
}
.phone input,.password input,.code input{
	width: 350upx;
	font-size: 28upx;
}
.yanzhengma{
	width: 150upx;
	position: absolute;
	right: 30upx;
}

.yanzhengma1{
	font-size: 26upx;
	background: #FFFFFF;
	border-radius: 10rpx;
	width: 150rpx;
	padding: 5rpx 0;
}
.yanzhengma2{
	background: #FFFFFF;
	font-size: 26upx;
	color: #B2B2B2;
	border-radius: 10rpx;
	width: 150rpx;
	padding: 5rpx 0;
}

.recommendInfo{
	background: #FFFFFF;
}
.recommendInfo>view:nth-of-type(1){
	border-bottom: 1px solid #ddd;
}
.recommendInfo>view:nth-of-type(1)>view:nth-of-type(1){
	width: 150upx;
	height: 150upx;
	border-radius: 50%;
}
.recommendInfo>view:nth-of-type(1)>view:nth-of-type(1)>image{
	width: 100%;
	height: 100%;
}
.recommendInfo>view:nth-of-type(1)>view:nth-of-type(2){
	padding: 20upx;
}
.recommendInfo>view:nth-of-type(1)>view:nth-of-type(2)>view{
	height: 55upx;
}
.recommendInfo>view:nth-of-type(2){
	line-height: 50upx;
}
</style>