-

zhangwei

6 天以前 0543f4989353b1ea9e83e3c5e6b14abd56b69167

 src/views/register/registernav.vue

@@ -1,11 +1,11 @@
<template>
  <div class="content">
  <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%] h-[584px] bg-white mx-auto m-12">
    <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>
@@ -17,47 +17,449 @@
          <el-step title="信息登记完成" />
        </el-steps>
      </div>
      <div v-if="active == 0" class="h-[60%]">
      <div v-if="active == 1" class="h-[100%]">
        <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"
          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 == 1" class="h-[60%]">
        <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"
      <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"
        >
          <h3>注册采购供应商应具备以下条件</h3>
        </div>
          <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>
      <div class="mx-auto pt-1 flex justify-center">
        <el-button :disabled="active == 0" @click="backStep">上一步</el-button>
        <el-button type="primary" @click="nextStep">同意下一步</el-button>
      <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>
import { h, ref } from "vue";
<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"
});
let active = ref(0);
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 = () => {
  active.value++;
  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--;
  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%;
  // height: 100%;
  .header {
    display: flex;
    align-items: center;