<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-[100%]">
|
<div class="text-center pt-5 pb-1.5">注册条款</div>
|
<div
|
class="w-[95%] h-65 border-1 border-[#E5E5E5] mx-auto p-2 overflow-y-auto"
|
>
|
<h3>注册采购供应商应具备以下条件</h3>
|
<h3>注册采购供应商应具备以下条件</h3>
|
<h3>注册采购供应商应具备以下条件</h3>
|
<h3>注册采购供应商应具备以下条件</h3>
|
<h3>注册采购供应商应具备以下条件</h3>
|
<h3>注册采购供应商应具备以下条件</h3>
|
<h3>注册采购供应商应具备以下条件</h3>
|
<h3>注册采购供应商应具备以下条件</h3>
|
<h3>注册采购供应商应具备以下条件</h3>
|
<h3>注册采购供应商应具备以下条件</h3>
|
<h3>注册采购供应商应具备以下条件</h3>
|
<h3>注册采购供应商应具备以下条件</h3>
|
<h3>注册采购供应商应具备以下条件</h3>
|
<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.ruleForm.enterpriseType"
|
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.transactionName"
|
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
|
:limit="1"
|
:action="`${baseUrlApi('/api/upFile/upBizLicense')}`"
|
:show-file-list="false"
|
:on-success="handleAvatarSuccess"
|
:before-upload="beforeAvatarUpload"
|
>
|
<img
|
v-if="state.ruleForm.businessLicense"
|
:src="state.ruleForm.businessLicense"
|
class="avatar"
|
/>
|
<el-button v-else 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>
|
<template v-else>
|
<el-result title="恭喜您，登记完成！">
|
<template #icon>
|
<img src="@/assets/home/result.png" />
|
</template>
|
<template #extra>
|
<el-button type="primary">确认</el-button>
|
</template>
|
</el-result>
|
</template>
|
<div v-if="active !== 3" 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>
|
</template>
|
<script setup lang="tsx">
|
import { h, ref, reactive } from "vue";
|
import type { FormInstance, FormRules, UploadProps } from "element-plus";
|
import { message } from "@/utils/message";
|
import { baseUrlApi } from "@/api/util";
|
import {
|
addDialog,
|
closeDialog,
|
updateDialog,
|
closeAllDialog
|
} from "@/components/ReDialog";
|
|
defineOptions({
|
name: "RegisterNav"
|
});
|
const ruleFormRef = ref<FormInstance>();
|
const state = reactive({
|
isShowPassword: false,
|
ruleForm: {
|
// 主键（唯一标识）
|
id: null, // integer($int64)，可空
|
// 企业类型（从预设企业类型列表中选择）
|
enterpriseType: null, // string，可空
|
// 交易主体代码（同角色代码，不可空，最小长度为1）
|
transactionCode: "", // string，必填
|
// 交易主体名称
|
transactionName: null, // string，可空
|
// 营业执照文件路径
|
businessLicense: null, // string，可空
|
// 企业名称
|
enterpriseName: null, // string，可空
|
// 统一社会信用代码
|
unifiedSocialCreditCode: null, // string，可空
|
// 注册资金（单位：万元）
|
registeredCapital: null, // number($double)，可空
|
// 法定代表人姓名
|
legalRepresentativeName: null, // string，可空
|
// 法定代表人身份证文件路径
|
legalRepresentativeIdCard: null, // string，可空
|
// 法定代表人身份证号码
|
legalRepresentativeIdNumber: null, // string，可空
|
// 法定代表人联系电话
|
legalRepresentativePhone: null, // string($tel)，可空
|
// 企业住所（下拉选择，暂以字符串接收）
|
residence: null, // string，可空
|
// 企业联系电话
|
enterprisePhone: null, // string($tel)，可空
|
// 企业成立时间（格式示例：2025-07-08 14:56:54）
|
establishmentTime: null, // string($date-time)，可空
|
// 企业主营业务
|
mainBusiness: null, // string，可空
|
// 企业邮箱
|
enterpriseEmail: null, // string，可空
|
// 业务经办人姓名
|
operatorName: null, // string，可空
|
// 业务经办人身份证文件路径或标识（上传后存储信息）
|
operatorIdCard: null, // string，可空
|
// 业务经办人身份证号码
|
operatorIdNumber: null, // string，可空
|
// 业务经办人联系电话
|
operatorPhone: null, // string($tel)，可空
|
// 企业开户行
|
bankName: null, // string，可空
|
// 企业银行账号
|
bankAccount: null // string，可空
|
},
|
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 = () => {
|
if (active.value >= 2) {
|
addDialog({
|
width: "20%",
|
title: "确认信息",
|
contentRenderer: () => (
|
<p>
|
请您认真核对填报的资料是否正确，如因填报错误影响后续投标等操作，平台不承担任何责任，所有后果需要自行承担，请您谨慎填写！
|
</p>
|
), // jsx 语法 （注意在.vue文件启用jsx语法，需要在script开启lang="tsx"）
|
closeCallBack: ({ options, args }) => {
|
// options.props 是响应式的
|
// const { formInline } = options.props as FormProps;
|
// const text = `姓名：${formInline.user} 城市：${formInline.region}`;
|
if (args?.command === "cancel") {
|
// 您点击了取消按钮
|
message(`您点击了取消按钮，当前表单数据为 `);
|
// active.value -= 1;
|
} else if (args?.command === "sure") {
|
active.value += 1;
|
message(`您点击了确定按钮，当前表单数据为 `);
|
} else {
|
message(
|
`您点击了右上角关闭按钮或空白页或按下了esc键，当前表单数据为 `
|
);
|
}
|
}
|
});
|
return;
|
}
|
active.value += 1;
|
};
|
const backStep = () => {
|
active.value -= 1;
|
};
|
const handleAvatarSuccess: UploadProps["onSuccess"] = (
|
response,
|
uploadFile
|
) => {
|
state.ruleForm.businessLicense = URL.createObjectURL(uploadFile.raw!);
|
};
|
|
const beforeAvatarUpload: UploadProps["beforeUpload"] = rawFile => {
|
if (rawFile.type !== "image/jpeg") {
|
message(`请上传jpeg类型的图片`, {
|
type: "error"
|
});
|
return false;
|
} else if (rawFile.size / 1024 / 1024 > 2) {
|
message(`图片大小不能超过 2MB！`, {
|
type: "error"
|
});
|
return false;
|
}
|
return true;
|
};
|
</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>
|
