<template>
|
<div class="content pb-6">
|
<div class="header">
|
<div class="headimg">
|
<img width="167px" height="44px" src="@/assets/home/logo.png" alt="" />
|
</div>
|
</div>
|
<div class="center w-[70%] bg-white mx-auto m-12">
|
<div class="flex items-center p-5 pl-6">
|
<img src="@/assets/home/xian.png" alt="" />
|
<span style="margin-left: 5px">注册向导</span>
|
</div>
|
<div class="w-[95%] border-1 border-[#E5E5E5] mx-auto pt-5 pb-2">
|
<el-steps style="max-width: 100%" :active="active" align-center>
|
<el-step title="阅读注册协议" />
|
<el-step title="填写基本信息" />
|
<el-step title="信息登记完成" />
|
</el-steps>
|
</div>
|
<div v-if="active == 1" class="h-[50%]">
|
<div class="text-center pt-5 pb-1.5">注册条款</div>
|
<div
|
class="w-[95%] h-[82%] border-1 border-[#E5E5E5] mx-auto p-2 overflow-y-auto"
|
>
|
<h3>注册采购供应商应具备以下条件</h3>
|
</div>
|
</div>
|
<div v-else-if="active == 2" class="flex justify-center mt-5">
|
<el-form
|
ref="ruleFormRef"
|
style="width: 95%"
|
:model="state.ruleForm"
|
:rules="state.rules"
|
label-width="auto"
|
>
|
<el-row>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
<el-form-item label="企业类型">
|
<el-select v-model="state.type" placeholder="请选择" clearable>
|
<el-option label="成立" value="Valid" />
|
<el-option label="驳回" value="Rejected" />
|
<el-option label="其它" value="Other" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row><div class="baseclass">基本资料</div></el-row>
|
<el-row>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
<el-form-item label="交易主体">
|
<el-input
|
v-model="state.ruleForm.nickName"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
<el-form-item label="营业执照">
|
<el-upload>
|
<el-button type="primary">上传</el-button>
|
</el-upload>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
<el-form-item label="企业名称">
|
<el-input
|
v-model="state.ruleForm.nickName"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item label="统一社会信用代码">
|
<el-input
|
v-model="state.ruleForm.nickName"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item label="注册资金">
|
<el-input
|
v-model="state.ruleForm.nickName"
|
placeholder="请输入"
|
>
|
<template #append>万元</template></el-input
|
>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
|
<el-form-item label="法定代表人">
|
<el-input
|
v-model="state.ruleForm.nickName"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
|
<el-form-item label="住所地">
|
<el-input
|
v-model="state.ruleForm.nickName"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item label="联系电话">
|
<el-input
|
v-model="state.ruleForm.nickName"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item label="成立时间">
|
<el-input
|
v-model="state.ruleForm.nickName"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item label="主营业务">
|
<el-input
|
v-model="state.ruleForm.nickName"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item label="邮箱">
|
<el-input
|
v-model="state.ruleForm.nickName"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
<el-form-item label="法定代表人">
|
<el-upload>
|
<el-button type="primary">上传身份证</el-button>
|
</el-upload>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item label="姓名">
|
<el-input
|
v-model="state.ruleForm.nickName"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item label="身份证">
|
<el-input
|
v-model="state.ruleForm.nickName"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item label="联系电话">
|
<el-input
|
v-model="state.ruleForm.nickName"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
<el-form-item label="业务经办人">
|
<el-upload>
|
<el-button type="primary">上传身份证</el-button>
|
</el-upload>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item label="姓名">
|
<el-input
|
v-model="state.ruleForm.nickName"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item label="身份证">
|
<el-input
|
v-model="state.ruleForm.nickName"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item label="联系电话">
|
<el-input
|
v-model="state.ruleForm.nickName"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item label="开户行">
|
<el-input
|
v-model="state.ruleForm.nickName"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
|
<el-form-item label="银行账号">
|
<el-input
|
v-model="state.ruleForm.nickName"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
<div class="mx-auto pt-2 pb-5 flex justify-center">
|
<el-button :disabled="active == 1" @click="backStep">上一步</el-button>
|
<el-button type="primary" @click="nextStep"
|
><span v-if="active == 1">同意</span>下一步</el-button
|
>
|
</div>
|
</div>
|
</div>
|
<ReDialog />
|
</template>
|
<script setup lang="ts">
|
import { h, ref, reactive } from "vue";
|
import type { FormInstance, FormRules } from "element-plus";
|
import { ReDialog } from "@/components/ReDialog";
|
|
defineOptions({
|
name: "RegisterNav"
|
});
|
const ruleFormRef = ref<FormInstance>();
|
const state = reactive({
|
isShowPassword: false,
|
ruleForm: {
|
account: "",
|
nickName: "",
|
phone: "",
|
phoneVCode: "",
|
// tenantId: props.tenantInfo.id,
|
code: "",
|
codeId: 0,
|
email: "",
|
exRoleCode: ""
|
},
|
type: "",
|
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 active = ref(1);
|
const nextStep = () => {
|
active.value += 1;
|
console.log(active.value + 1);
|
};
|
const backStep = () => {
|
active.value -= 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;
|
}
|
}
|
:deep .el-step__icon {
|
font-size: 12px;
|
height: 20px;
|
width: 20px;
|
}
|
}
|
:deep .el-step__title {
|
font-size: 12px;
|
}
|
</style>
|
