北斗应用技术培训报名系统
This commit is contained in:
465
src/components/initialService/registered.vue
Normal file
465
src/components/initialService/registered.vue
Normal file
@@ -0,0 +1,465 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user