<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="ruleForm"
|
:rules="rules"
|
label-width="auto"
|
>
|
<el-form-item label="注册身份" prop="resource">
|
<el-radio-group v-model="ruleForm.resource">
|
<el-radio value="Sponsorship">供应商</el-radio>
|
<el-radio value="Venue">代理机构</el-radio>
|
<el-radio value="cgr">采购人</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="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="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="repassword">
|
<el-input
|
v-model="ruleForm.repassword"
|
placeholder="请输入您的手机号码"
|
/>
|
</el-form-item>
|
<el-form-item prop="validationCode" label="手机验证码">
|
<el-input
|
v-model.number="ruleForm.validationCode"
|
class="form-input"
|
placeholder="请输入验证码"
|
>
|
<template #suffix>
|
<span id="suffix-span">
|
<span
|
id="suffix-span-2"
|
ref="spanRef"
|
@click="sendValidationCode(ruleForm.repassword)"
|
>
|
{{ isSendValidationCode }}
|
</span>
|
</span>
|
</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item prop="repassword" label=" ">
|
<el-checkbox value="Online activities" name="type">
|
我已阅读并同意 《非政采招标采购交易平台用户协议》
|
</el-checkbox>
|
</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-form-item>
|
</el-form>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { reactive, ref } from "vue";
|
import type { FormInstance, FormRules } from "element-plus";
|
|
interface RuleForm {
|
name: string;
|
region: string;
|
count: string;
|
password: string;
|
repassword: string;
|
validationCode: string;
|
date1: string;
|
date2: string;
|
delivery: boolean;
|
location: string;
|
type: string[];
|
resource: string;
|
desc: string;
|
}
|
|
const ruleFormRef = ref<FormInstance>();
|
const ruleForm = reactive<RuleForm>({
|
name: "",
|
region: "",
|
password: "",
|
validationCode: "",
|
repassword: "",
|
count: "",
|
date1: "",
|
date2: "",
|
delivery: false,
|
location: "",
|
type: [],
|
resource: "",
|
desc: ""
|
});
|
|
const locationOptions = ["Home", "Company", "School"];
|
|
const rules = reactive<FormRules<RuleForm>>({
|
name: [
|
{ required: true, message: "Please input Activity name", trigger: "blur" },
|
{ min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" }
|
],
|
region: [
|
{
|
required: true,
|
message: "Please select Activity zone",
|
trigger: "change"
|
}
|
],
|
count: [
|
{
|
required: true,
|
message: "Please select Activity count",
|
trigger: "change"
|
}
|
],
|
date1: [
|
{
|
type: "date",
|
required: true,
|
message: "Please pick a date",
|
trigger: "change"
|
}
|
],
|
date2: [
|
{
|
type: "date",
|
required: true,
|
message: "Please pick a time",
|
trigger: "change"
|
}
|
],
|
location: [
|
{
|
required: true,
|
message: "Please select a location",
|
trigger: "change"
|
}
|
],
|
type: [
|
{
|
type: "array",
|
required: true,
|
message: "Please select at least one activity type",
|
trigger: "change"
|
}
|
],
|
resource: [
|
{
|
required: true,
|
message: "Please select activity resource",
|
trigger: "change"
|
}
|
],
|
desc: [
|
{ required: true, message: "Please input activity form", trigger: "blur" }
|
]
|
});
|
// 验证码区域文字说明
|
const spanRef = ref();
|
const isSendValidationCode = ref<string>("获取验证码");
|
const submitForm = async (formEl: FormInstance | undefined) => {
|
if (!formEl) return;
|
await formEl.validate((valid, fields) => {
|
if (valid) {
|
console.log("submit!");
|
} else {
|
console.log("error submit!", fields);
|
}
|
});
|
};
|
|
const sendValidationCode = () => {};
|
|
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 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;
|
}
|
}
|
}
|
}
|
</style>
|
