<template>
|
<div class="content">
|
<div class="header">
|
<div class="headimg">
|
<img width="167px" height="44px" src="@/assets/home/logo.png" alt="" />
|
</div>
|
</div>
|
<div class="article">
|
<div class="formDiv">
|
<div class="formheader">
|
<span class="title">请填写已下注册信息</span>
|
<span class="other"
|
>有企业营业执照(含个体工商户)的用户请注册。权益如下：做企业实名认证、参与招投标业务、开通企业门户等</span
|
>
|
</div>
|
<el-divider />
|
<div class="formContent">
|
<el-form
|
ref="ruleFormRef"
|
style="max-width: 600px"
|
:model="state.ruleForm"
|
:rules="state.rules"
|
label-width="auto"
|
size="large"
|
>
|
<el-form-item label="注册身份" prop="exRoleCode">
|
<el-radio-group v-model="state.ruleForm.exRoleCode">
|
<el-radio
|
v-for="item in state.roleList"
|
:key="item.id"
|
:value="item.code"
|
>{{ item.name }}</el-radio
|
>
|
</el-radio-group>
|
</el-form-item>
|
<!-- <el-form-item label="企业名称" prop="name">
|
<el-input
|
v-model="ruleForm.name"
|
placeholder="请输入营业执照上的企业名称"
|
/>
|
</el-form-item>
|
<el-form-item label="用户名" prop="region">
|
<el-input v-model="ruleForm.region" placeholder="请输入用户名" />
|
</el-form-item> -->
|
<el-form-item label="姓名" prop="nickName">
|
<el-input
|
v-model="state.ruleForm.nickName"
|
placeholder="请输入姓名"
|
/>
|
</el-form-item>
|
<el-form-item label="手机号码" prop="phone">
|
<el-input
|
v-model="state.ruleForm.phone"
|
placeholder="请输入您的手机号码"
|
/>
|
</el-form-item>
|
<!-- <el-form-item label="登录密码" prop="password">
|
<el-input
|
v-model="ruleForm.password"
|
placeholder="8-20位数字+大小写字母+特殊字符的组合"
|
/>
|
</el-form-item>
|
<el-form-item label="密码确认" prop="repassword">
|
<el-input
|
v-model="ruleForm.repassword"
|
placeholder="请再次输入您的密码"
|
/>
|
</el-form-item>
|
<el-form-item label="联系人姓名" prop="repassword">
|
<el-input
|
v-model="ruleForm.repassword"
|
placeholder="请输入联系人姓名"
|
/>
|
</el-form-item> -->
|
<el-form-item label="邮箱" prop="email">
|
<el-input
|
v-model="state.ruleForm.email"
|
placeholder="请输入联系邮箱"
|
/>
|
</el-form-item>
|
<el-form-item label="验证码" class="login-animation3" prop="code">
|
<el-col :span="15">
|
<el-input
|
ref="codeRef"
|
v-model="state.ruleForm.code"
|
text
|
maxlength="4"
|
placeholder="请输入验证码"
|
clearable
|
autocomplete="off"
|
/>
|
</el-col>
|
<el-col :span="1" />
|
<el-col :span="8">
|
<div
|
:class="[
|
state.expirySeconds > 0
|
? 'login-content-code'
|
: 'login-content-code-expired'
|
]"
|
@click="getCaptcha"
|
>
|
<img
|
class="login-content-code-img"
|
width="130px"
|
height="38px"
|
:src="state.captchaImage"
|
style="cursor: pointer"
|
/>
|
</div>
|
</el-col>
|
</el-form-item>
|
<el-form-item prop="phoneVCode" label="手机验证码">
|
<el-input
|
v-model.number="state.ruleForm.phoneVCode"
|
class="form-input"
|
placeholder="请输入验证码"
|
>
|
<template #suffix>
|
<span v-if="state.phoneSeconds == 0" id="suffix-span">
|
<span
|
id="suffix-span-2"
|
ref="spanRef"
|
@click="sendValidationCode(state.ruleForm.phone)"
|
>
|
获取验证码
|
</span>
|
</span>
|
<span v-else id="suffix-span">
|
<span id="suffix-span-2" ref="spanRef">
|
{{ state.phoneSeconds }}秒后重新获取
|
</span>
|
</span>
|
</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item label=" ">
|
<el-checkbox v-model="checked1" name="type" />我已阅读并同意
|
<el-link type="primary" :underline="false"
|
>《非政采招标采购交易平台用户协议》</el-link
|
>
|
</el-form-item>
|
<el-form-item label=" ">
|
<el-button type="primary" @click="submitForm(ruleFormRef)">
|
同意并注册
|
</el-button>
|
</el-form-item>
|
<el-form-item label=" ">
|
<span>已有账号？</span>
|
<el-link type="primary" :underline="false">立即登录</el-link>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import {
|
reactive,
|
computed,
|
ref,
|
onMounted,
|
defineAsyncComponent,
|
onUnmounted,
|
watch
|
} from "vue";
|
import type { FormInstance, FormRules } from "element-plus";
|
import {
|
captcha,
|
phoneNumberCode,
|
register,
|
exRole
|
} from "@/api/register/index.ts";
|
import { useRoute, useRouter } from "vue-router";
|
import { message } from "@/utils/message";
|
defineOptions({
|
name: "Register"
|
});
|
|
const route = useRoute();
|
const router = useRouter();
|
const checked1 = ref(false);
|
const state = reactive({
|
isShowPassword: false,
|
ruleForm: {
|
account: "",
|
nickName: "",
|
phone: "",
|
phoneVCode: "",
|
// tenantId: props.tenantInfo.id,
|
code: "",
|
codeId: 0,
|
email: "",
|
exRoleCode: ""
|
},
|
rules: {
|
phoneVCode: [
|
{
|
required: true,
|
message: "请输入手机验证码",
|
trigger: "blur"
|
}
|
],
|
nickName: [
|
{
|
required: true,
|
message: "请输入姓名",
|
trigger: "blur"
|
}
|
],
|
phone: [
|
{
|
required: true,
|
message: "请输入您的手机号码",
|
trigger: "blur"
|
}
|
],
|
exRoleCode: [
|
{
|
required: true,
|
message: "请选择角色",
|
trigger: "blur"
|
}
|
]
|
// code: [{ required: true, message: t('message.account.placeholder4'), trigger: 'blur' }],
|
},
|
loading: {
|
signIn: false
|
},
|
captchaImage: "",
|
rotateVerifyVisible: false,
|
// rotateVerifyImg: verifyImg,
|
// rotateVerifyImg: themeConfig.value.logoUrl,
|
secondVerEnabled: false,
|
// captchaEnabled: false,
|
isPassRotate: false,
|
capsLockVisible: false,
|
hideTenantForLogin: false,
|
expirySeconds: 60, // 验证码过期时间
|
phoneSeconds: 0, // 手机验证码倒计时
|
roleList: []
|
});
|
// 验证码过期计时器
|
let timer: any = null;
|
let phonetimer: any = null;
|
|
// 页面初始化
|
onMounted(async () => {
|
// 若URL带有Token参数（第三方登录）
|
const accessToken = route.query.token;
|
// if (accessToken) await saveTokenAndInitRoutes(accessToken);
|
// watch(
|
// () => themeConfig.value.isLoaded,
|
// isLoaded => {
|
// if (isLoaded) {
|
// 获取登录配置
|
// state.hideTenantForLogin = themeConfig.value.hideTenantForLogin ?? true;
|
// state.secondVerEnabled = themeConfig.value.secondVer ?? true;
|
// state.captchaEnabled = themeConfig.value.captcha ?? true;
|
|
// 获取验证码
|
getCaptcha();
|
exRole().then(res => {
|
state.roleList = res.result;
|
});
|
// 注册验证码过期计时器
|
// if (state.captchaEnabled) {
|
timer = setInterval(() => {
|
if (state.expirySeconds > 0) state.expirySeconds -= 1;
|
}, 1000);
|
|
// }
|
// }
|
// },
|
// { immediate: true }
|
// );
|
|
// 检测大小写按键/CapsLK
|
document.addEventListener("keyup", handleKeyPress);
|
});
|
|
// 页面卸载
|
onUnmounted(() => {
|
// 销毁验证码过期计时器
|
clearInterval(timer);
|
timer = null;
|
clearInterval(phonetimer);
|
phonetimer = null;
|
|
document.removeEventListener("keyup", handleKeyPress);
|
});
|
|
// 检测大小写按键
|
const handleKeyPress = (e: KeyboardEvent) => {
|
if (e.getModifierState != undefined)
|
state.capsLockVisible = e.getModifierState("CapsLock");
|
};
|
// 获取验证码
|
const getCaptcha = async () => {
|
// if (!state.captchaEnabled) return;
|
|
state.ruleForm.code = "";
|
const res = await captcha();
|
console.log(res);
|
|
state.captchaImage = "data:text/html;base64," + res.result?.img;
|
state.expirySeconds = res.result?.expirySeconds;
|
state.ruleForm.codeId = res.result?.id;
|
};
|
const ruleFormRef = ref<FormInstance>();
|
|
const locationOptions = ["Home", "Company", "School"];
|
// 验证码区域文字说明
|
const spanRef = ref();
|
const submitForm = async (formEl: FormInstance | undefined) => {
|
if (!formEl) return;
|
await formEl.validate((valid, fields) => {
|
if (valid) {
|
state.ruleForm.account = state.ruleForm.phone;
|
register(state.ruleForm).then(res => {
|
if (res?.code == 200) {
|
router.replace("/RegisterSucess");
|
return message("注册成功！", { type: "success" });
|
} else {
|
return message(res?.message, { type: "warning" });
|
}
|
});
|
} else if (!checked1.value)
|
return message("请勾选用户协议", { type: "warning" });
|
});
|
};
|
|
const sendValidationCode = async () => {
|
if (!state.ruleForm.phone) {
|
return message("请先输入手机号", { type: "warning" });
|
}
|
if (!state.ruleForm.code) {
|
return message("请先输入验证码", { type: "warning" });
|
}
|
const res = await phoneNumberCode(state.ruleForm);
|
if (res?.code != 200) {
|
return message(res?.message, { type: "warning" });
|
}
|
state.phoneSeconds = 60;
|
phonetimer = setInterval(() => {
|
if (state.phoneSeconds > 0) state.phoneSeconds -= 1;
|
}, 1000);
|
};
|
|
const resetForm = (formEl: FormInstance | undefined) => {
|
if (!formEl) return;
|
formEl.resetFields();
|
};
|
|
const options = Array.from({ length: 10000 }).map((_, idx) => ({
|
value: `${idx + 1}`,
|
label: `${idx + 1}`
|
}));
|
</script>
|
<style scoped>
|
@import url("@/style/login.css");
|
</style>
|
<style lang="scss" scoped>
|
.content {
|
background-color: #f8f8f8;
|
width: 100%;
|
height: 100%;
|
.header {
|
display: flex;
|
align-items: center;
|
height: 80px;
|
width: 100%;
|
margin: 0 auto;
|
background-color: #fff;
|
.headimg {
|
width: 1200px;
|
margin: 0 auto;
|
}
|
}
|
.article {
|
margin: 20px auto;
|
width: 1200px;
|
height: 85%;
|
background: rgb(255, 255, 255);
|
.formDiv {
|
width: 80%;
|
margin: 0 auto;
|
.formheader {
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
padding-top: 30px;
|
}
|
.title {
|
color: rgb(51, 51, 51);
|
font-size: 18px;
|
font-weight: 700;
|
line-height: 16px;
|
letter-spacing: 0%;
|
text-align: left;
|
text-transform: capitalize;
|
}
|
.other {
|
color: rgb(173, 173, 173);
|
font-size: 12px;
|
font-weight: 500;
|
line-height: 16px;
|
letter-spacing: 0%;
|
text-align: left;
|
text-transform: capitalize;
|
}
|
.formContent {
|
display: flex;
|
justify-content: center;
|
}
|
}
|
}
|
}
|
.el-form-item {
|
align-items: center;
|
}
|
#suffix-span {
|
cursor: pointer;
|
}
|
.login-content-code {
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
position: relative;
|
|
.login-content-code-img {
|
width: 100%;
|
height: 40px;
|
line-height: 40px;
|
background-color: #ffffff;
|
border: 1px solid rgb(220, 223, 230);
|
cursor: pointer;
|
transition: all ease 0.2s;
|
border-radius: 4px;
|
user-select: none;
|
|
&:hover {
|
border-color: #c0c4cc;
|
transition: all ease 0.2s;
|
}
|
}
|
}
|
|
.login-content-code-expired {
|
@extend .login-content-code;
|
&::before {
|
content: "验证码已过期";
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
border-radius: 4px;
|
background-color: rgba(0, 0, 0, 0.5);
|
color: #ffffff;
|
text-align: center;
|
line-height: 40px;
|
}
|
}
|
</style>
|
