'-'

zhangwei

2025-07-07 85428f0bf3bbf08d65200cffc38dd1e96af34da6

 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,7 +17,7 @@
          <el-step title="信息登记完成" />
        </el-steps>
      </div>
      <div v-if="active == 0" class="h-[60%]">
      <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"
@@ -25,39 +25,311 @@
          <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>
          <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>
      <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>
      <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>
import { h, ref } from "vue";
<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"
});
let active = ref(0);
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++;
  active.value += 1;
  console.log(active.value + 1);
};
const backStep = () => {
  active.value--;
  active.value -= 1;
};
</script>
<style lang="scss" scoped>
.content {
  background-color: #f8f8f8;
  width: 100%;
  height: 100%;
  // height: 100%;
  .header {
    display: flex;
    align-items: center;