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 {
					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 if (res.code == 500) {
					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>