lipin/pages/users/register/index.vue

<template>
	<view class="reg" :style="{ 'height': setHeight + 'px' }">
		<view class="title">欢迎注册巴巴礼品网</view>
		<div class="form" v-if="step === 1">
			<form @submit="submit1" report-submit='true'>
				<view class="verify">
					<view class="list">
						<view class="item">
							<input type='number' placeholder='填写手机号码' placeholder-class='placeholder' v-model="phone"></input>
						</view>
						<view class="item acea-row row-between-wrapper">
							<input type='number' placeholder='填写验证码' placeholder-class='placeholder' class="codeIput" v-model="yzm"></input>
							<button class="code font-color" :class="disabled === true ? 'on' : ''" :disabled='disabled' @click="code">
								{{ text }}
							</button>
						</view>
					</view>
					<button form-type="submit" class="confirmBnt">立即注册</button>
				</view>
			</form>
			<view class="login">已有账号，<navigator hover-class="none" url="/pages/users/login/index">立即登录？</navigator></view>
		</div>
		<div class="form2" v-else>
			<view class='avatar acea-row row-center-wrapper row-column' @click='uploadpic'>
				<view v-if='avatar ==""'>
					<text class='iconfont icon-icon25201'></text>
					<view>上传图片</view>
				</view>
				<view v-else>
					<image :src="avatar"></image>
				</view>
			</view>
			<div class="item">
				<div class="acea-row row-middle">
					<input type="text" placeholder="请输入用户昵称" placeholder-class="placeholder" v-model="nickname" required />
				</div>
			</div>
			<div class="item">
				<div class="acea-row row-middle">
					<input type="password" placeholder="请输入密码" placeholder-class="placeholder" v-model="password" required />
				</div>
			</div>
			<div class="item">
				<div class="acea-row row-middle">
					<input type="password" placeholder="再次确认密码" placeholder-class="placeholder" v-model="qrPassword" required />
				</div>
			</div>
			<div class="item">
				<div class="acea-row row-middle">
					<input type="text" placeholder="请输入您的微信号" placeholder-class="placeholder" v-model="weixin_name" required />
				</div>
			</div>
			<button class="btn" @click="submit2">完成注册</button>
			<button class="back" @click="back">返回</button>
			<view class="login">已有账号，<navigator hover-class="none" url="/pages/users/login/index">立即登录？</navigator></view>
		</div>
	</view>
</template>

<script>
	import {
		registerVerify,
		ApiReg1,
		ApiReg2
	} from '@/api/api.js';
	import CryptoJS from "@/libs/CryptoJS";
	import sendVerifyCode from "@/mixins/SendVerifyCode";
	const BACK_URL = "login_back_url";
	export default {
		mixins: [sendVerifyCode],
		data() {
			return {
				setHeight: 0,
				phone:'',
				yzm:'',
				step:1,
				token: '',
				avatar: '',
				nickname: '',
				password: '',
				qrPassword: '',
				weixin_name: ''
			}
		},
		mounted() {
		    let that = this
		    uni.getSystemInfo({
				success: function (res) {
					that.setHeight = res.windowHeight
				}
		    })
		},
		methods: {
			async code() {
				let that = this;
				if (!that.phone) return that.$util.Tips({
					title: '请填写手机号码！'
				});
				if (!(/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.phone))) return that.$util.Tips({
					title: '请输入正确的手机号码！'
				});
				var secret_key = "b1bd7a4b8da3e47ce58e73b9e5f656c4";
				var AES = new CryptoJS.AES(secret_key);
				await registerVerify({
			        mobile: that.phone,
			        token: AES.encrypt(that.phone),
			        time: new Date().getTime()
			    }).then(res => {
					that.$util.Tips({
						title: res.msg
					});
					that.sendCode();
				}).catch(err => {
					return that.$util.Tips({
						title: err
					});
				});
			},
			async submit1() {
				let that = this;
				if (!that.phone) return that.$util.Tips({
					title: '请填写手机号码'
				});
				if (!(/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.phone))) return that.$util.Tips({
					title: '请输入正确的手机号码'
				});
				if (!that.yzm) return that.$util.Tips({
					title: '请填写验证码'
				});
				if (!/^[\w\d]+$/i.test(that.yzm)) return that.$util.Tips({
					title: '请输入正确的验证码'
				});
				ApiReg1({
					mobile: that.phone,
					yzm: that.yzm
				}).then(res => {
					that.token = res.data.token;
					that.step = 2;
				}).catch(res => {
					that.$util.Tips({
						title: res
					});
				});
			},
			uploadpic: function () {
				let that = this;
				that.$util.uploadImageOne('upload/index', function (res) {
					that.avatar = res.data.img;
				});				
			},
			submit2 () {
				let that = this;
				if (!that.nickname) return that.$util.Tips({
					title: '请输入用户昵称'
				});
				if (!that.password) return that.$util.Tips({
					title: '请输入密码'
				});
				if (that.password.length < 6) return that.$util.Tips({
					title: '密码不能少于6位'
				});
				if (!that.qrPassword) return that.$util.Tips({
					title: '请输入确认密码'
				});
				if (that.qrPassword !== that.password) return that.$util.Tips({
					title: '二次密码不相等'
				});
			    ApiReg2({
					token: that.token,
			    	avatar: that.avatar,
			    	nickname: that.nickname,
			    	password: that.password,
			    	qrPassword: that.qrPassword,
			    	weixin_name: that.weixin_name
			    }).then(res => {
			    	that.$store.commit("LOGIN", {
			    		'token': res.data.token,
						'time': 30
			    	});
					that.$store.commit("UPDATE_USERINFO", res.data.user_info);
			    	const backUrl = that.$Cache.get(BACK_URL) || "/pages/index/index";
			    	that.$Cache.clear(BACK_URL);
			    }).catch(err => {
			    	that.$util.Tips({
			    		title: err
			    	});
			    });
			},
			back(){
				this.step = 1;
			}
		}
	}
</script>

<style scoped lang="scss">
	.reg{
		background: #fff;
	}
	.title{
		font-size: 42rpx;
		text-align: center;
		padding-top: 60rpx;
	}
	.verify .phone {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		margin-top: 55rpx;
	}
	
	.verify .list {
		width: 580rpx;
		margin: 53rpx auto 0 auto;
	}
	
	.verify .list .item {
		width: 100%;
		height: 110rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}
	
	.verify .list .item input {
		width: 100%;
		height: 100%;
		font-size: 32rpx;
	}
	
	.verify .list .item .placeholder {
		color: #b9b9bc;
	}
	
	.verify .list .item input.codeIput {
		width: 340rpx;
	}
	
	.verify .list .item .code {
		font-size: 32rpx;
		background-color: #fff;
	}
	
	.verify .list .item .code.on {
		color: #b9b9bc !important;
	}
	
	.verify .confirmBnt {
		font-size: 32rpx;
		width: 580rpx;
		height: 90rpx;
		border-radius: 45rpx;
		color: #fff;
		margin: 92rpx auto 0 auto;
		text-align: center;
		line-height: 90rpx;
		background: #ff5c00;
	}
	.form .login{
		display: flex;
		justify-content: center;
		margin-top: 30rpx;
		navigator{
			color:#ff5c00;
		}
	}
	.form2{
		padding: 40rpx;
		.avatar{
			width:140rpx;
			height:140rpx;
			font-size:22rpx;
			color:#bbb;
			border:1rpx dashed #ddd;
			margin: 20rpx auto;
			text-align: center;
			.iconfont{
				font-size: 50rpx;
			}
			image{
				width:140rpx;
				height:140rpx;
			}
		}
		.item {
		    border-bottom: 1rpx solid #ededed;
		    padding: 45rpx 0 20rpx 0;
			image{
				width:40rpx;
				height:40rpx;
				margin-right: 20rpx;
			}
			input{
				flex-grow: 1;
				font-size: 28rpx;
			}
			.placeholder{
				color:#ccc;
			}
		}
		.btn {
			font-size: 32rpx;
			width: 580rpx;
			height: 85rpx;
			border-radius: 45rpx;
			color: #fff;
			margin: 80rpx auto 0 auto;
			text-align: center;
			line-height: 85rpx;
			background: #ff5c00;
		}
		.back{
			font-size: 32rpx;
			width: 580rpx;
			height: 85rpx;
			border-radius: 45rpx;
			margin: 20rpx auto 0 auto;
			text-align: center;
			line-height: 85rpx;
			border: 1rpx solid #dcdee2;
			color:#515a6e;
		}
		.login{
			display: flex;
			justify-content: center;
			margin-top: 30rpx;
			navigator{
				color:#ff5c00;
			}
		}
	}
</style>