466 lines
14 KiB
Vue
466 lines
14 KiB
Vue
<template>
|
||
<el-form
|
||
ref="ruleFormRef"
|
||
style="max-width: 600px"
|
||
:model="ruleForm"
|
||
status-icon
|
||
:rules="rules"
|
||
label-width="auto"
|
||
class="p-6 m-auto flex flex-col justify-center items-center bg-slate-100/70"
|
||
>
|
||
<el-form-item>
|
||
<el-text class="mx-1 font-bold" style="font-size: 1.25rem">
|
||
北斗应用技术培训报名系统注册
|
||
</el-text>
|
||
</el-form-item>
|
||
<el-form-item class="mx-1 font-bold" label="手机号码" prop="phone">
|
||
<el-input
|
||
clearable
|
||
maxlength="11"
|
||
placeholder="请输入手机号码"
|
||
v-model="ruleForm.phone"
|
||
@input="filter(ruleForm.phone, 'phone')"
|
||
ref="phoneInputRef"
|
||
/>
|
||
</el-form-item>
|
||
<el-text class="mx-1" size="small" type="warning">
|
||
密码格式：密码必须包含数字、大小写字母以及特殊字符（!@#$%^&*），且长度在8-16位之间
|
||
</el-text>
|
||
<el-form-item class="mx-1 font-bold" label="密码" prop="password">
|
||
<el-input
|
||
clearable
|
||
placeholder="请输入密码"
|
||
v-model="ruleForm.password"
|
||
type="password"
|
||
show-password
|
||
maxlength="16"
|
||
autocomplete="off"
|
||
@input="filter(ruleForm.password, 'password')"
|
||
oncut="return false"
|
||
onpaste="return false"
|
||
oncopy="return false"
|
||
ref="passwordInputRef"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item class="mx-1 font-bold" label=" " prop="again">
|
||
<el-input
|
||
clearable
|
||
placeholder="请再次输入密码"
|
||
v-model="ruleForm.again"
|
||
type="password"
|
||
show-password
|
||
maxlength="16"
|
||
autocomplete="off"
|
||
@input="filter(ruleForm.again, 'again')"
|
||
oncut="return false"
|
||
onpaste="return false"
|
||
oncopy="return false"
|
||
ref="againInputRef"
|
||
/>
|
||
</el-form-item>
|
||
<el-text class="mx-1" size="small" type="warning">
|
||
*请认真检查确保您的身份证号码和真实姓名输入正确无误，错误的身份信息将影响考试报名*
|
||
</el-text>
|
||
<el-form-item class="mx-1 font-bold" label="真实姓名" prop="user_name">
|
||
<el-input
|
||
clearable
|
||
minlength="2"
|
||
maxlength="10"
|
||
placeholder="请输入真实姓名"
|
||
v-model="ruleForm.user_name"
|
||
ref="userNameInputRef"
|
||
@input="filter(ruleForm.user_name, 'user_name')"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item class="mx-1 font-bold" label="身份证号" prop="identity_card">
|
||
<el-input
|
||
clearable
|
||
maxlength="18"
|
||
placeholder="请输入身份证号"
|
||
v-model="ruleForm.identity_card"
|
||
ref="identityCardInputRef"
|
||
@input="filter(ruleForm.identity_card, 'identity_card')"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item class="mx-1 font-bold" label="工作单位" prop="workplace">
|
||
<el-input
|
||
clearable
|
||
maxlength="60"
|
||
placeholder="请输入工作单位"
|
||
v-model="ruleForm.workplace"
|
||
ref="workplaceInputRef"
|
||
@input="filter(ruleForm.workplace, 'workplace')"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item class="mx-1 font-bold" label="通讯地址" prop="address">
|
||
<el-input
|
||
clearable
|
||
maxlength="120"
|
||
placeholder="请输入通讯地址"
|
||
v-model="ruleForm.address"
|
||
ref="addressInputRef"
|
||
@input="filter(ruleForm.address, 'address')"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item class="mx-1 font-bold" label="电子邮箱号码" prop="email">
|
||
<el-input
|
||
clearable
|
||
maxlength="60"
|
||
placeholder="请输入电子邮箱号码"
|
||
v-model="ruleForm.email"
|
||
ref="emailInputRef"
|
||
@input="filter(ruleForm.email, 'email')"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item class="mx-1 font-bold" label="推荐人信息" prop="referrers">
|
||
<el-input
|
||
clearable
|
||
maxlength="60"
|
||
placeholder="如有推荐人请填写"
|
||
v-model="ruleForm.referrers"
|
||
ref="referrersInputRef"
|
||
@input="filter(ruleForm.referrers, 'referrers')"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item class="mx-1 font-bold" label="验证码" prop="code">
|
||
<el-input
|
||
clearable
|
||
maxlength="6"
|
||
placeholder="请输入短信验证码"
|
||
v-model="ruleForm.code"
|
||
@input="filter(ruleForm.code, 'code')"
|
||
>
|
||
<template #append>
|
||
<el-button
|
||
:style="
|
||
codeText
|
||
? 'font-weight: bold; color: rgb(34 197 94 / var(--tw-bg-opacity, 1))'
|
||
: 'font-weight: bold; color: rgb(56 189 248 / var(--tw-bg-opacity, 1));'
|
||
"
|
||
type="warning"
|
||
:disabled="timeSwitch"
|
||
@click="sendVerify"
|
||
>
|
||
{{ codeText ? "发送验证码" : `重新发送（${time}秒）` }}
|
||
</el-button>
|
||
</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<div>
|
||
<el-link style="font-weight: bold" type="primary" @click="login">登录</el-link>
|
||
</div>
|
||
<div class="mx-2">
|
||
<el-link style="font-weight: bold" type="primary" @click="resetPassword"
|
||
>忘记密码?</el-link
|
||
>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button
|
||
style="font-weight: bold"
|
||
type="primary"
|
||
@click="submitForm(ruleFormRef)"
|
||
>
|
||
注册
|
||
</el-button>
|
||
<el-button style="font-weight: bold" type="warning" @click="resetForm(ruleFormRef)">
|
||
清除
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, getCurrentInstance } from "vue";
|
||
import { ElMessage } from "element-plus";
|
||
|
||
import $http from "../../api/index";
|
||
import $url from "../../api/url";
|
||
|
||
const { proxy } = getCurrentInstance();
|
||
|
||
const emit = defineEmits(["changePage"]);
|
||
|
||
const ruleFormRef = ref();
|
||
const phoneInputRef = ref(null);
|
||
const passwordInputRef = ref(null);
|
||
const againInputRef = ref(null);
|
||
const userNameInputRef = ref(null);
|
||
const identityCardInputRef = ref(null);
|
||
const workplaceInputRef = ref(null);
|
||
const addressInputRef = ref(null);
|
||
const emailInputRef = ref(null);
|
||
const timeSwitch = ref(false);
|
||
const codeText = ref(true);
|
||
const time = ref(59);
|
||
|
||
const identityCardRegex = /^[1-9](?:\d{5})(?:19|20)?\d{2}(?:0[1-9]|1[0-2])(?:0[1-9]|[12]\d|3[01])\d{3}(?:\d|X|x)$/;
|
||
const phoneRegex = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[0123456789]))\d{8}$/;
|
||
const emailRegex = /^([a-zA-Z0-9]+[|-|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[|-|.]?)*[a-zA-Z0-9]+(.[a-zA-Z]{2,3})+$/;
|
||
const passwordRegex = /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{8,16}$/;
|
||
|
||
const login = () => {
|
||
emit("changePage", "login");
|
||
};
|
||
|
||
const resetPassword = () => {
|
||
emit("changePage", "resetPassword");
|
||
};
|
||
|
||
const timeInterval = () => {
|
||
const tiktok = setInterval(() => {
|
||
if (time.value > 0 && timeSwitch.value) {
|
||
time.value--;
|
||
} else {
|
||
timeSwitch.value = true;
|
||
codeText.value = false;
|
||
time.value = 59;
|
||
}
|
||
}, 1000);
|
||
setTimeout(() => {
|
||
clearInterval(tiktok);
|
||
timeSwitch.value = false;
|
||
codeText.value = true;
|
||
}, 60000);
|
||
};
|
||
|
||
const validateCode = (rule, value, callback) => {
|
||
if (ruleForm.phone == "") {
|
||
callback(new Error("请先输入手机号码"));
|
||
} else if (!phoneRegex.test(ruleForm.phone)) {
|
||
callback(new Error("手机号码格式错误, 请重新输入!"));
|
||
} else if (value === "") {
|
||
callback(new Error("请输入短信验证码"));
|
||
} else {
|
||
const data = {
|
||
phone: proxy.$AES_Encrypt(ruleForm.phone),
|
||
code: proxy.$AES_Encrypt(value),
|
||
};
|
||
$http.post($url.checkCode, data).then((res) => {
|
||
if (res.data.code === 200) {
|
||
callback();
|
||
} else {
|
||
callback(new Error("验证码错误"));
|
||
}
|
||
});
|
||
}
|
||
};
|
||
|
||
const validatePass = (rule, value, callback) => {
|
||
if (value === "") {
|
||
callback(new Error("请输入密码"));
|
||
} else if (!passwordRegex.test(value)) {
|
||
callback(new Error("密码格式不正确，请重新设置！"));
|
||
} else {
|
||
callback();
|
||
}
|
||
};
|
||
|
||
const validateAgain = (rule, value, callback) => {
|
||
if (value === "") {
|
||
callback(new Error("请再次输入密码"));
|
||
} else if (value != ruleForm.password) {
|
||
callback(new Error("两次输入的密码不一致！"));
|
||
} else {
|
||
callback();
|
||
}
|
||
};
|
||
|
||
const validateIdentityCard = (rule, value, callback) => {
|
||
if (value === "") {
|
||
callback(new Error("请输入身份证号"));
|
||
} else if (!identityCardRegex.test(value)) {
|
||
callback(new Error("身份证格式不正确，请重新输入！"));
|
||
} else {
|
||
const data = {
|
||
identity_card: proxy.$AES_Encrypt(value),
|
||
type: proxy.$AES_Encrypt("register"),
|
||
data: proxy.$AES_Encrypt("null"),
|
||
};
|
||
$http.post($url.diffIdentityCard, data).then((res) => {
|
||
if (res.data.code === 200) {
|
||
callback();
|
||
} else {
|
||
callback(new Error("该身份证号已被注册"));
|
||
}
|
||
});
|
||
}
|
||
};
|
||
|
||
const validatePhone = (rule, value, callback) => {
|
||
if (value === "") {
|
||
timeSwitch.value = true;
|
||
codeText.value = true;
|
||
callback(new Error("请输入手机号码"));
|
||
} else if (!phoneRegex.test(value)) {
|
||
timeSwitch.value = true;
|
||
codeText.value = true;
|
||
callback(new Error("手机号码格式错误, 请重新输入!"));
|
||
} else {
|
||
const data = {
|
||
phone: proxy.$AES_Encrypt(value),
|
||
type: proxy.$AES_Encrypt("register"),
|
||
data: proxy.$AES_Encrypt("null"),
|
||
};
|
||
$http.post($url.diffPhone, data).then((res) => {
|
||
if (res.data.code === 200) {
|
||
timeSwitch.value = false;
|
||
callback();
|
||
} else {
|
||
timeSwitch.value = true;
|
||
codeText.value = true;
|
||
callback(new Error("该手机号码已被注册"));
|
||
}
|
||
});
|
||
}
|
||
};
|
||
|
||
const validateEmail = (rule, value, callback) => {
|
||
if (value === "") {
|
||
callback(new Error("请输入电子邮箱号码"));
|
||
} else if (!emailRegex.test(value)) {
|
||
callback(new Error("邮箱格式不正确，请重新输入！"));
|
||
} else {
|
||
const data = {
|
||
email: proxy.$AES_Encrypt(value),
|
||
type: proxy.$AES_Encrypt("register"),
|
||
data: proxy.$AES_Encrypt("null"),
|
||
};
|
||
$http.post($url.diffEmail, data).then((res) => {
|
||
if (res.data.code === 200) {
|
||
callback();
|
||
} else {
|
||
callback(new Error("该电子邮箱号码已被注册"));
|
||
}
|
||
});
|
||
}
|
||
};
|
||
|
||
const sendVerify = () => {
|
||
let inputRef = [
|
||
phoneInputRef,
|
||
passwordInputRef,
|
||
againInputRef,
|
||
userNameInputRef,
|
||
identityCardInputRef,
|
||
workplaceInputRef,
|
||
addressInputRef,
|
||
emailInputRef,
|
||
];
|
||
inputRef.forEach((item) => {
|
||
if (item.value) {
|
||
item.value.focus();
|
||
item.value.blur();
|
||
}
|
||
});
|
||
if (ruleForm.phone != "" && /^1[3-9]\d{9}$/.test(ruleForm.phone) && !timeSwitch.value) {
|
||
timeInterval();
|
||
const data = {
|
||
phone: proxy.$AES_Encrypt(ruleForm.phone),
|
||
};
|
||
$http.post($url.sendSMS, data).then((res) => {
|
||
if (res.data.code === 200) {
|
||
ElMessage({
|
||
message: "发送短信验证码成功！",
|
||
type: "success",
|
||
});
|
||
} else {
|
||
if (res.data.code === 333) {
|
||
ElMessage.error(res.data.msg);
|
||
} else {
|
||
ElMessage.error("发送短信验证码失败！");
|
||
}
|
||
}
|
||
});
|
||
}
|
||
};
|
||
|
||
const ruleForm = reactive({
|
||
code: "",
|
||
password: "",
|
||
again: "",
|
||
user_name: "",
|
||
identity_card: "",
|
||
workplace: "",
|
||
address: "",
|
||
phone: "",
|
||
email: "",
|
||
referrers: "",
|
||
});
|
||
|
||
const rules = reactive({
|
||
code: [{ required: true, validator: validateCode, trigger: "blur" }],
|
||
password: [{ required: true, validator: validatePass, trigger: "blur" }],
|
||
again: [{ validator: validateAgain, trigger: "blur" }],
|
||
user_name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
|
||
identity_card: [{ required: true, validator: validateIdentityCard, trigger: "blur" }],
|
||
workplace: {
|
||
required: true,
|
||
message: "请输入工作单位",
|
||
trigger: "blur",
|
||
},
|
||
address: { required: true, message: "请输入通讯地址", trigger: "blur" },
|
||
phone: [{ required: true, validator: validatePhone, trigger: "blur" }],
|
||
email: [
|
||
{ required: true, validator: validateEmail, trigger: "blur" },
|
||
{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] },
|
||
],
|
||
});
|
||
|
||
const filter = (value, label) => {
|
||
if (label == "phone") {
|
||
ruleForm.phone = value.replace(/\D/g, "");
|
||
} else if (label == "code") {
|
||
ruleForm.code = value.replace(/\D/g, "");
|
||
} else {
|
||
ruleForm[label] = value.replace(/[=\s"'+-]/g, "");
|
||
}
|
||
};
|
||
|
||
const submitForm = (formEl) => {
|
||
if (!formEl) return;
|
||
formEl.validate((valid) => {
|
||
if (valid) {
|
||
let encryptForm = {
|
||
password: proxy.$AES_Encrypt(ruleForm.password),
|
||
user_name: proxy.$AES_Encrypt(ruleForm.user_name),
|
||
identity_card: proxy.$AES_Encrypt(ruleForm.identity_card),
|
||
workplace: proxy.$AES_Encrypt(ruleForm.workplace),
|
||
address: proxy.$AES_Encrypt(ruleForm.address),
|
||
phone: proxy.$AES_Encrypt(ruleForm.phone),
|
||
email: proxy.$AES_Encrypt(ruleForm.email),
|
||
referrers:
|
||
ruleForm.referrers == "" ? null : proxy.$AES_Encrypt(ruleForm.referrers),
|
||
};
|
||
$http.post($url.registered, encryptForm).then((res) => {
|
||
if (res.data.code === 200) {
|
||
ElMessage({
|
||
message: "注册成功！",
|
||
type: "success",
|
||
});
|
||
localStorage.setItem("data", res.data.data);
|
||
localStorage.setItem("loginCode", res.data.loginCode);
|
||
emit("changePage", "login");
|
||
} else {
|
||
if (res.data.code === 333) {
|
||
ElMessage.error(res.data.msg);
|
||
} else {
|
||
ElMessage.error("注册失败！");
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
ElMessage.error("提交失败，请先完善信息！");
|
||
}
|
||
});
|
||
};
|
||
|
||
const resetForm = (formEl) => {
|
||
if (!formEl) return;
|
||
formEl.resetFields();
|
||
};
|
||
</script>
|
||
|
||
<style scoped></style>
|