vue-insagent-app/pages/register/register.vue

<template>
	<view class="page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="dis j-end a-c">
			<image src="../../static/image/login/3.png" mode=""
				style="height:260px;width: calc(100% - 16px);margin-top: 120px;">
			</image>
		</view>
		<view class="input-data1">
			<u-tabs :list="list" :is-scroll="true" :current="current" @change="change"
				style="background: transparent;margin-bottom: 10px;"></u-tabs>
			<view class="input-data">
				<view class="phone d-flex">
					<image src="../../static/image/login/shoujihao.png" mode="" style="width: 18px;height: 18px;">
					</image>
					<input placeholder="请输入手机号" v-model="phone" maxlength="11" />
				</view>
				<view class="phone d-flex">
					<image src="../../static/image/login/name.png" mode="" style="width: 18px;height: 18px;">
					</image>
					<input placeholder="请输入真实姓名" v-model="name" />
				</view>
				<view class="password d-flex">
					<image src="../../static/image/login/mima.png" mode="" style="width: 18px;height: 18px;">
					</image>
					<input placeholder="请输入密码" v-model="password" :password='isHidePassword' maxlength="15"
						style="padding-right: 200rpx;" />
					<view class=" position-absolute top-0 right-0 d-flex a-center j-center"
						style="width: 200rpx;height: 100%;">
						<image
							:src="isHidePassword?'../../static/image/login/biyan.png':'../../static/image/login/zhengyan.png'"
							@tap="isHidePassword = !isHidePassword" mode="" style="width: 18px;height: 18px;">
					</view>
				</view>
				<view class="code d-flex">
					<image src="../../static/image/login/yanzhengma.png" mode="" style="width: 18px;height: 18px;">
					</image>
					<input placeholder="请输入验证码" v-model="code" maxlength="4" 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 text-color':'yanzhengma2'">
							{{!codetime?'获取验证码':codetime+' s'}}
						</view>
					</view>
				</view>
			</view>
			<view class="mx-3 mt-3" v-if="showRecommend">
				<view class=" mas-title dis j-start a-c">
					<image src="../../static/image/login/1.png" mode=""
						style="width: 18px;height: 18px;margin-right: 10px;">
					</image>
					<text>请确认推荐人信息，注册后，推荐人将不可修改</text>
				</view>
				<view class="recommendInfo">
					<view class="dis a-c j-start">
						<image src="/static/bigLogo.png" style="width: 21px;height: 20px;"></image>
						<text style="color: rgba(35,40,50,0.8);">推荐人姓名：</text>
						<text style="color: #232832;">{{recommendername}}</text>
					</view>
					<view class="dis a-c">
						<text style="color: rgba(35,40,50,0.8);">推荐人会员号：</text>
						<text style="color: #232832;">{{recommenderid}}</text>
					</view>
				</view>
				<button class="my-3 mt-4 d-flex a-center j-center font-weight bg-color" :loading="loading"
					:class="{'bg-hover-color':disabled}" type="primary" @tap="submit" :disabled="disabled"
					style="letter-spacing: 20rpx;">注册</button>
			</view>

		</view>


	</view>
</template>
<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/common/image-tools-base64.js';
	import {
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				list: [{
					name: '出单员注册'
				}],
				current: 0,
				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']),
			change(index) {
				this.current = index;
			},
			// 改变按钮状态
			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,
					"password": this.password,
					"mobile": this.phone,
					"mobileMsg": this.code,
					"referrerId": this.recommenderid,
					"referrerName": this.recommendername,
					"flag": 1,
				});
				// 请求失败处理
				// 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: "none",
						duration: 2000
					});
				}
				// else{
				// 	uni.showToast({ title: '已注册，重复注册', icon:"success",duration:2000 });
				// }
			}

		}
	}
</script>

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

	/deep/ {
		.u-tab-bar {
			background: linear-gradient(90deg, #0052FF 0%, rgba(0, 82, 255, 0) 100%) !important;
			border-radius: 4px 4px 4px 4px;
		}
	}

	.text-color {
		color: #0052FF;
	}

	.bg-color {
		background-color: #0052FF;
		border-radius: 20px;
	}

	.bg-hover-color {
		background-color: #0052FF;
		opacity: 0.65;
		border-radius: 20px;
	}

	.mas-title {
		width: 100%;
		height: 34px;
		background: rgba(0, 82, 255, 0.1);
		border-radius: 6px;
		padding: 6px;
		margin-bottom: 15px;
	}

	.input-data1 {
		position: relative;
		margin-top: -140px;
	}

	.input-data {
		width: calc(100% - 32px);
		height: auto;
		background: #FFFFFF;
		box-shadow: 0px 4px 10px 0px #DAE3F4;
		border-radius: 6px;
		margin: auto;
		padding: 0 10px;
		z-index: 999;
	}





	.page {
		background: #F8FAFE;
		height: 100vh;
		width: 100%;
		position: absolute;
	}

	.phone,
	.password,
	.code {
		position: relative;
		height: 95rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f2f2f2;
	}

	.phone .title,
	.password .title,
	.code .title {
		width: 160upx;
		flex-shrink: 0;
		color: #666;
	}

	.phone input,
	.password input,
	.code input {
		width: 350upx;
		font-size: 28upx;
		margin-left: 13px;
	}

	.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;
		width: 100%;
		height: 72;
		background: #FFFFFF;
		border-radius: 6px;
		border: 1px solid #0052FF;
		padding: 0 10px;

		>view {
			padding: 6px;
			font-size: 13px;
		}

		>view:nth-child(1) {
			border-bottom: 1px solid #f2f2f2;
		}
	}

	.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>