You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
343 lines
10 KiB
Vue
343 lines
10 KiB
Vue
<template>
|
|
<div class="register">
|
|
<!-- 手机验证表单 -->
|
|
<el-form
|
|
label-width="100px"
|
|
:model="phoneForm"
|
|
:rules="rulesPhoneForm"
|
|
ref="phoneForm"
|
|
class="phoneForm"
|
|
>
|
|
<el-form-item label="手机号码" prop="mobile">
|
|
<el-input
|
|
placeholder="请输入手机号码"
|
|
v-model="phoneForm.mobile"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="手机验证码" prop="code">
|
|
<el-input placeholder="请填写验证码" v-model="phoneForm.code">
|
|
<template slot="append">
|
|
<el-button @click="getCheckcode" :disabled="isTimer"
|
|
><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> -->
|
|
</template>
|
|
|
|
<script>
|
|
import { getCheckcode, checkCode } from "@/api/login";
|
|
|
|
export default {
|
|
name: "Register",
|
|
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 {
|
|
btnTitle: "获取验证码",
|
|
isTimer: false,
|
|
phoneForm: {
|
|
mobile: "", //手机号码
|
|
code: "", //验证码
|
|
},
|
|
rulesPhoneForm: {
|
|
mobile: [
|
|
{ required: true, message: "请输入手机号码", trigger: "blur" },
|
|
{ validator: validatePhone, trigger: "blur" },
|
|
],
|
|
code: [
|
|
{ required: true, message: "请输入手机验证码", trigger: "blur" },
|
|
],
|
|
},
|
|
userForm: {
|
|
mobile: null, //手机号码
|
|
companyName: null, //企业名称
|
|
creditNum: null, //社会信用号
|
|
bussinessStatus: null, //企业类型
|
|
legalPerson: null, //法人名称
|
|
legalldCard: null, //法人身份证号
|
|
registerAddress: null, //注册地址
|
|
contactWay: null, //练习方式
|
|
email: null, //邮箱
|
|
checkStatus: null, //注册状态
|
|
comments: null, //备注
|
|
},
|
|
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" },
|
|
],
|
|
},
|
|
};
|
|
},
|
|
created() {},
|
|
methods: {
|
|
//倒计时
|
|
validateBtn() {
|
|
let time = 60;
|
|
let timer = setInterval(() => {
|
|
if (time === 0) {
|
|
clearInterval(timer);
|
|
this.isTimer = false;
|
|
this.btnTitle = "获取验证码";
|
|
} else {
|
|
this.btnTitle = time + "秒后重试";
|
|
this.isTimer = true;
|
|
time--;
|
|
}
|
|
}, 1000);
|
|
},
|
|
//获取验证码
|
|
getCheckcode() {
|
|
let query = { mobile: this.phoneForm.mobile };
|
|
getCheckcode(query).then((response) => {
|
|
console.log("response", response);
|
|
if (response.code == 20000) {
|
|
this.validateBtn();
|
|
this.$message.success(response.data);
|
|
} else {
|
|
this.$message.error(response.message);
|
|
}
|
|
});
|
|
},
|
|
//手机验证表单提交
|
|
submitForm(phoneForm) {
|
|
this.$refs[phoneForm].validate((valid) => {
|
|
if (valid) {
|
|
//验证验证码
|
|
let query = this.phoneForm;
|
|
checkCode(query).then((response) => {
|
|
console.log("444");
|
|
if (response.code === 20000) {
|
|
this.$router.push("/userInformation");
|
|
this.$message.error("提交成功");
|
|
} else {
|
|
this.$message.error(response.message);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
|
|
//用户信息填写 表单
|
|
/* submitUserForm(userForm) {
|
|
this.$refs[userForm].validate((valid) => {
|
|
if (valid) {
|
|
const data = this.userForm;
|
|
this.$message.error("提交成功,请等待审核");
|
|
registerSave(data).then((response) => {
|
|
if (response.code === 20000) {
|
|
this.$message.error("提交成功,请等待审核");
|
|
} else {
|
|
this.$message.error(response.message);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
} */
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style rel="stylesheet/scss" lang="scss">
|
|
.register {
|
|
display: flex;
|
|
height: 100%;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-content: center;
|
|
.phoneForm {
|
|
.el-form-item__label {
|
|
line-height: 50px;
|
|
}
|
|
.el-input__inner {
|
|
height: 50px;
|
|
}
|
|
.bntNext {
|
|
width: 50%;
|
|
height: 50px;
|
|
}
|
|
}
|
|
.userForm {
|
|
.el-select {
|
|
width: 100%;
|
|
}
|
|
.bntNext {
|
|
width: 50%;
|
|
height: 50px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|