xw_admin/src/views/login/userRegister.vue

<template>
	<common-page title="注册">
		<el-steps :active="stepActive" simple finish-status="success">
		    <el-step title="创建账户" />
			<el-step title="填写信息" />
		    <el-step title="注册完成" />
		</el-steps>
		<el-form v-if="stepActive==0" ref="stepForm_0" :model="form" :rules="rules" label-position="top">
			<el-form-item label="电子邮箱" prop="email">
				<el-input v-model="form.email" placeholder="请输入邮箱地址"></el-input>
			</el-form-item>
			<el-form-item label="手机号" prop="mobile">
				<el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
			</el-form-item>
			<el-form-item label="验证码" prop="verify_code">
				<el-row justify="space-between" style="width: 100%">
					<el-col :span="17">
						<el-form-item>
							<el-input v-model="form.verify_code" placeholder="请输入验证码"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="7" align="right">
						<el-button @click="getYzm" type="primary" :disabled="disabled">获取验证码 <span v-if="disabled"> ({{ time }})</span></el-button>
					</el-col>
				</el-row>
			</el-form-item>
		</el-form>
		<el-form v-if="stepActive==1" ref="stepForm_1" :model="form" :rules="rules" label-position="top">
			<el-form-item label="公司名称" prop="userName">
				<el-input v-model="form.userName" placeholder="请输入真实姓名"></el-input>
			</el-form-item>
			<el-form-item label="客户名称" prop="email">
				<el-input v-model="form.email" placeholder="请输入邮箱地址"></el-input>
			</el-form-item>
		</el-form>
		<div v-if="stepActive==2">
			<el-result icon="success" title="账号注册成功" sub-title="可以使用登录账号以及手机号登录系统">
				<template #extra>
					<p class="activation" @click="goLogin">激活邮箱</p>
				</template>
			</el-result>
		</div>
		<el-form style="text-align: center;">
			<div class="btnBox">
				<el-button class="btn" v-if="stepActive<2" type="primary" @click="next" style="width: 100%;">下一步</el-button>
				<el-button class="btn" v-if="stepActive>0 && stepActive<2" @click="pre" style="width: 100%;">上一步</el-button>
				<el-button class="btn" v-if="stepActive==2" type="primary" @click="save" style="width: 100%;">完成</el-button>
			</div>
		</el-form>
		<el-dialog v-model="showAgree" title="平台服务协议" :width="800" destroy-on-close>
			平台服务协议
			<template #footer>
				<el-button @click="showAgree=false">取消</el-button>
				<el-button type="primary" @click="showAgree=false;form.agree=true;">我已阅读并同意</el-button>
			</template>
		</el-dialog>
	</common-page>
</template>

<script>
	import scPasswordStrength from '@/components/scPasswordStrength';
	import commonPage from './components/commonPage'

	export default {
		components: {
			commonPage,
			scPasswordStrength
		},
		data() {
			return {
				disabled:false,
				time:60,

				stepActive: 0,
				showAgree: false,
				form: {
					email: "",
					mobile:"",
					verify_code:"",

					user: "",
					agree: false,
					userName: "",
					userType: "1",
					open: []
				},
				rules: {
					email: [
						{ required: true, message: '请输入邮箱地址'}
					],
					mobile: [
						{ required: true, message: '请输入手机号'}
					],
					verify_code: [
						{ required: true, message: '请输入验证码'}
					],

					agree: [
						{validator: (rule, value, callback) => {
							if (!value) {
								callback(new Error('请阅读并同意协议'));
							}else{
								callback();
							}
						}}
					],
					userName: [
						{ required: true, message: '请输入真实姓名'}
					],

					userType: [
						{ required: true, message: '请选择账户类型'}
					],
					open: [
						{ required: true, message: '请选择开通类别'}
					]
				}
			}
		},
		mounted() {

		},
		methods: {
			getYzm(){

			},
			pre(){
				this.stepActive -= 1
			},
			next(){
				const formName = `stepForm_${this.stepActive}`
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.stepActive += 1
					}else{
						return false
					}
				})
			},
			save(){
				const formName = `stepForm_${this.stepActive}`
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.stepActive += 1
					}else{
						return false
					}
				})
			},
			goLogin(){
				this.$router.push({
					path: '/login'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.activation{
		color: var(--el-color-primary);
	}
	.btnBox{
		display: flex;align-items: center;
		.btn{
			flex: 1;
		}
	}
</style>