UDI
/
udi-cpt-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

注册界面

Browse Source
master
CTP 2 years ago
parent 9102b70362
commit 66e4271208
2 changed files with 359 additions and 140 deletions
Show Stats Download Patch File Download Diff File

13
src/api/login.js
Unescape Escape View File

@ -71,7 +71,7 @@ export function getCodeSms() {
} }
// 获取注册短信手机验证码 // 获取注册短信手机验证码
export function getCodeImg2(data) { export function getCheckcode(data) {
return request({ return request({
url: "/admin/auth/register/getCheckcode", url: "/admin/auth/register/getCheckcode",
method: "post", method: "post",
@ -79,10 +79,19 @@ export function getCodeImg2(data) {
}); });
} }
//验证验证码 //验证验证码
export function getCodeSms2(data) { export function checkCode(data) {
return request({ return request({
url: "/admin/auth/register/checkCode", url: "/admin/auth/register/checkCode",
method: "post", method: "post",
data, data,
}); });
} }
//注册信息提交(新注册，修改)
export function registerSave(data) {
return request({
url: " /admin/auth/register/save",
method: "post",
data,
});
}

486
src/views/register.vue
Unescape Escape View File

@ -1,110 +1,349 @@
<template> <template>
<div class="register"> <div class="register">
<el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form" label-width="100px" size="mini"> <el-steps
<h3 class="title">用户注册</h3> :active="activeSetp"
finish-status="success"
align-center="center"
<el-form-item prop="mobile"> style="width: 50%; margin-top: 100px"
<span slot="label"> >
<i class="el-icon-edit"></i> <el-step title="手机验证"></el-step>
手机号 <el-step title="用户信息填写"></el-step>
</span> <el-step title="审核"></el-step>
<el-input v-model="registerForm.mobile" style="width: 63%"></el-input> </el-steps>
<el-input <!-- 注册内容 -->
v-model="registerForm.code" <div class="box">
auto-complete="off" <!-- 手机验证表单 -->
placeholder="验证码" <div v-show="activeSetp === 0">
style="width: 23%" <el-form
@keyup.enter.native="handleRegister" label-width="100px"
> <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" /> :model="phoneForm"
</el-input> :rules="rulesPhoneForm"
ref="phoneForm"
</el-form-item> class="phoneForm"
<el-form-item style="width:100%;">
<el-button
:loading="loading"
size="medium"
type="primary"
style="width:85%;"
@click.native.prevent="handleRegister"
> >
<span v-if="!loading">注 册</span> <el-form-item label="手机号码" prop="mobile">
<span v-else>注 册 中...</span> <el-input
</el-button> placeholder="请输入手机号码"
<div > v-model="phoneForm.mobile"
<router-link class="link-type" :to="'/login'">使用已有账户登录</router-link> ></el-input>
</div> </el-form-item>
</el-form-item> <el-form-item label="手机验证码" prop="code">
</el-form> <el-input placeholder="请填写验证码" v-model="phoneForm.code">
<!-- 底部 --> <template slot="append">
<div class="el-register-footer"> <el-button @click="getCheckcode" :disabled="isTimer"
<span>Copyright © 2018-2022 ruoyi.vip All Rights Reserved.</span> ><span>{{ btnTitle }}</span></el-button
>
</template>
</el-input>
</el-form-item>
<el-form-item>
<el-button
type="primary"
class="bntNext"
@click="submitForm('phoneForm')"
>下一步</el-button
>
</el-form-item>
</el-form>
</div>
<!-- 用户信息填写 -->
<div v-show="activeSetp === 1">
<el-form
label-width="135px"
:model="userForm"
:rules="rulesUserForm"
ref="userForm"
class="userForm"
label-position="right"
>
<el-form-item label="手机号码(唯一)" prop="mobile">
<el-input
placeholder="请输入手机号码"
v-model="userForm.mobile"
></el-input>
</el-form-item>
<el-form-item label="企业名称(唯一)" prop="companyName">
<el-input
placeholder="请输入企业名称"
v-model="userForm.companyName"
></el-input>
</el-form-item>
<el-form-item label="社会信用号(唯一)" prop="creditNum">
<el-input
placeholder="请输入企业社会信用号"
v-model="userForm.creditNum"
></el-input>
</el-form-item>
<el-form-item label="企业类型" prop="bussinessStatus">
<el-select
v-model="userForm.bussinessStatus"
placeholder="请选择企业类型"
>
<el-option label="生产企业" value="1"></el-option>
<el-option label="流通企业" value="2"></el-option>
<el-option label="医疗机构" value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item label="法人名称" prop="legalPerson">
<el-input
placeholder="请输入法人名称"
v-model="userForm.legalPerson"
></el-input>
</el-form-item>
<el-form-item label="法人身份证号(唯一) " prop="legalldCard">
<el-input
placeholder="请输入法人身份证号"
v-model="userForm.legalldCard"
></el-input>
</el-form-item>
<el-form-item label="注册地址" prop="registerAddress">
<el-input
placeholder="请输入注册地址"
v-model="userForm.registerAddress"
></el-input>
</el-form-item>
<el-form-item label="联系方式" prop="contactWay">
<el-input
placeholder="请输入联系方式"
v-model="userForm.contactWay"
></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input
placeholder="请输入邮箱"
v-model="userForm.email"
></el-input>
</el-form-item>
<el-form-item label="注册状态" prop="checkStatus">
<el-select disabled v-model="userForm.checkStatus">
<el-option label="未审核" value="0"></el-option>
<el-option label="已审核" value="1"></el-option>
<el-option label="未通过" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="备注" prop="comments">
<el-input v-model="userForm.comments"></el-input>
</el-form-item>
<el-form-item>
<el-button
type="primary"
class="bntNext"
@click="submitUserForm('userForm')"
>下一步</el-button
>
</el-form-item>
</el-form>
</div>
<!-- 审核 -->
<div v-show="activeSetp === 2">
<span>注册状态：</span>
<el-select disabled v-model="checkStatus">
<el-option label="未审核" :value="0"></el-option>
<el-option label="未通过" :value="2"></el-option>
<el-option label="已审核" :value="1"></el-option>
</el-select>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { getCodeImg, register } from "@/api/login"; import { getCheckcode, checkCode, registerSave } from "@/api/login";
export default { export default {
name: "Register", name: "Register",
data() { data() {
//限制输入正确的手机号码格式
const validatePhone = (rule, value, callback) => {
if (/^1[3-9]\d{9}$/.test(value) === false) {
callback(new Error("请输入正确的手机号码"));
} else {
// 校验通过
callback();
}
};
//限制输入正确的邮箱
const validateEmail = (rule, value, callback) => {
if (
/^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(
value
) === false
) {
callback(new Error("请输入正确的邮箱地址"));
} else {
// 校验通过
callback();
}
};
//限制统一信用号
const validatePatt = (rule, value, callback) => {
if (
/^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/.test(
value
) === false
) {
callback(new Error("请输入有效的的社会统一信用号"));
} else {
// 校验通过
callback();
}
};
//限制身份证号码
const validateIdentity = (rule, value, callback) => {
if (/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value) === false) {
callback(new Error("请输入正确的身份证号码"));
} else {
// 校验通过
callback();
}
};
return { return {
codeUrl: "", btnTitle: "获取验证码",
registerForm: { isTimer: false,
username: "", activeSetp: 0,
password: "", phoneForm: {
confirmPassword: "", mobile: "", //手机号码
code: "", code: "", //验证码
uuid: "", },
user_type: "user_register" rulesPhoneForm: {
mobile: [
{ required: true, message: "请输入手机号码", trigger: "blur" },
{ validator: validatePhone, trigger: "blur" },
],
code: [
{ required: true, message: "请输入手机验证码", trigger: "blur" },
],
}, },
registerRules: { userForm: {
code: [{ required: true, trigger: "change", message: "请输入验证码" }] mobile: null, //手机号码
companyName: null, //企业名称
creditNum: null, //社会信用号
bussinessStatus: null, //企业类型
legalPerson: null, //法人名称
legalldCard: null, //法人身份证号
registerAddress: null, //注册地址
contactWay: null, //练习方式
email: null, //邮箱
checkStatus: null, //注册状态
comments: null, //备注
},
checkStatus: 0, //注册状态
rulesUserForm: {
mobile: [
{ required: true, message: "请输入手机号码", trigger: "blur" },
{ validator: validatePhone, trigger: "blur" },
],
companyName: [
{ required: true, message: "请输入企业名称", trigger: "blur" },
],
creditNum: [
{ required: true, message: "请输入社会信用号", trigger: "blur" },
{ validator: validatePatt, trigger: "blur" },
],
bussinessStatus: [
{ required: true, message: "请选择企业类型", trigger: "change" },
],
legalPerson: [
{ required: true, message: "请输入法人名称", trigger: "blur" },
],
legalldCard: [
{ required: true, message: "请输入法人身份证号", trigger: "blur" },
{ validator: validateIdentity, trigger: "blur" },
],
registerAddress: [
{ required: true, message: "请输入注册地址", trigger: "blur" },
],
contactWay: [
{ required: true, message: "请输入联系方式", trigger: "blur" },
{ validator: validatePhone, trigger: "blur" },
],
email: [
{ required: true, message: "请输入邮箱", trigger: "blur" },
{ validator: validateEmail, trigger: "blur" },
],
checkStatus: [
{ required: true, message: "注册状态", trigger: "change" },
],
}, },
loading: false,
captchaEnabled: true
}; };
}, },
created() { created() {},
this.getCode();
},
methods: { methods: {
getCode() { //倒计时
getCodeImg().then(res => { validateBtn() {
this.captchaEnabled = res.data.captchaEnabled === undefined ? true : res.data.captchaEnabled; let time = 60;
if (this.captchaEnabled) { let timer = setInterval(() => {
this.codeUrl = "data:image/gif;base64," + res.data.img; if (time === 0) {
this.registerForm.uuid = res.data.uuid; clearInterval(timer);
this.isTimer = false;
this.btnTitle = "获取验证码";
} else {
this.btnTitle = time + "秒后重试";
this.isTimer = true;
time--;
}
}, 1000);
},
//获取验证码
getCheckcode() {
const data = { mobile: this.phoneForm.mobile };
getCheckcode(data).then((response) => {
if (response.code === 20000) {
this.validateBtn();
this.$message.success("验证码发送成功");
} else {
this.$message.error(response.message);
} }
}); });
}, },
handleRegister() { //手机验证表单提交
this.$refs.registerForm.validate(valid => { submitForm(phoneForm) {
this.$refs[phoneForm].validate((valid) => {
if (valid) { if (valid) {
this.loading = true; //验证验证码
let registerForm = this.registerForm; const data = this.phoneForm;
registerForm.userType = "sys_user" checkCode(data).then((response) => {
register(registerForm).then(res => { console.log("444");
const username = this.registerForm.username; if (response.code === 20000) {
this.$alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", '系统提示', { if (this.activeSetp++ > 2) {
dangerouslyUseHTMLString: true, this.activeSetp = 0;
type: 'success' }
}).then(() => { this.$message.error("提交成功");
this.$router.push("/login"); } else {
}).catch(() => {}); this.$message.error(response.message);
}).catch(() => {
this.loading = false;
if (this.captchaEnabled) {
this.getCode();
} }
}) });
} }
}); });
} /* 方便开发预览 */
} if (this.activeSetp++ > 2) {
this.activeSetp = 0;
}
},
//用户信息填写 表单
submitUserForm(userForm) {
this.$refs[userForm].validate((valid) => {
if (valid) {
const data = this.userForm;
registerSave(data).then((response) => {
if (response.code === 20000) {
if (this.activeSetp++ > 2) {
this.activeSetp = 0;
}
this.$message.error("提交成功");
} else {
this.$message.error(response.message);
}
});
}
});
/* 方便开发预览 */
if (this.activeSetp++ > 2) {
this.activeSetp = 0;
}
},
},
}; };
</script> </script>
@ -112,63 +351,34 @@ export default {
.register { .register {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-content: center;
height: 100%; flex-wrap: wrap;
width: 100%; flex-direction: column;
.box {
background-size: cover; width: 500px;
} margin: 50px 100px;
.title { text-align: center;
margin: 0px auto 30px auto; .phoneForm {
text-align: center; .el-form-item__label {
color: #707070; line-height: 50px;
} }
.el-input__inner {
.register-form { height: 50px;
border-radius: 6px; }
background: #ffffff; .bntNext {
width: 50%; width: 50%;
height: 100%; height: 50px;
padding: 0px 0px 0px 0px; }
.el-input { }
height: 38px; .userForm {
input { .el-select {
height: 38px; width: 100%;
}
.bntNext {
width: 50%;
height: 50px;
}
} }
} }
.input-icon {
height: 39px;
width: 14px;
margin-left: 2px;
}
}
.register-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
}
.register-code {
width: 33%;
height: 38px;
float: right;
img {
cursor: pointer;
vertical-align: middle;
}
}
.el-register-footer {
height: 40px;
line-height: 40px;
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
color: #fff;
font-family: Arial;
font-size: 12px;
letter-spacing: 1px;
}
.register-code-img {
height: 38px;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save