menduner/src/views/recruit/enterprise/register/register.vue

<template>
  <div class="my-5">
    <div :class="isMobile? 'mobileBox' : 'default-width'">
      <v-btn class="my-2" color="primary" variant="text" size="large" @click="router.push('/recruitHome')">{{ `<< 回到首页` }}</v-btn>
    </div>
    <v-card class="pa-5" :class="isMobile? 'mobileBox' : 'default-width'" :elevation="isMobile? '0' : '3'">
      <!-- 标题 -->
      <div class="resume-header">
        <div class="resume-title">{{ $t('enterprise.registeringNewEnterprise') }}</div>
      </div>
      <!-- 表单 -->
      <div class="CtFormClass" :style="{width: isMobile ? '' : '600px'}">
        <CtForm ref="CtFormRef" :items="formItems" style="width: 100%;">
          <template #prepare>
            <v-checkbox
              v-model="isPrepare"
              label="筹建中"
              color="primary"
              class="ml-1"
              style="width: 150px; max-height: 38px;"
              @change="isPrepareChange"
            ></v-checkbox>
          </template>
        </CtForm>
        <!-- 上传照片 -->
        <div style="color: var(--color-999);">
          <span v-if="!isPrepare" class="mr-1" style="color: var(--v-error-base);">*</span>
          <span>上传营业执照</span>
          <!-- <span class="mx-3 defaultLink">查看示例</span> -->
          <span>支持jpg、jpeg、png格式，图片大小不得超过10M</span>
        </div>
        <div class="file-box">
          <Img class="mt-3" :value="licenseUrl" tips="上传图片" @imgClick="showPreview = !showPreview" :showCursor="true" @success="val => licenseUrl = val" @delete="licenseUrl = ''"></Img>
        </div>
        <div class="note mt-10">
          <h4>注意事项:</h4>
          <span>企业名称为对外展示的企业名称，建议填写公司营业执照上的名称，请区分总公司和分公司</span>
          <!-- <div>
            <span>2.若公司已注册，请上传公司委托证明下载模版</span>
            <span class="mx-3 defaultLink">下载模版</span>
          </div> -->
        </div>
      </div>
      <div class="text-center">
        <!-- 提交 -->
        <v-btn
          :loading="loginLoading"
          color="primary" class="white--text my-8" min-width="350"
          @click="handleCommit"
        >
        {{ $t('common.complete') }}
        </v-btn>
      </div>
      <!-- 底部 个人不能绑定企业 要去后端管理员加 -->
      <!-- <div class="text-center">
        <v-btn color="primary" variant="text" @click="router.push({ path: '/recruit/enterprise/register/joiningEnterprise' })">{{ $t('enterprise.joiningEnterprise') }}</v-btn>
      </div> -->
    </v-card>
    <PreviewImg v-if="showPreview" :current="current" :list="[licenseUrl]" @close="showPreview = !showPreview"></PreviewImg>
  </div>
</template>

<script setup>
import CtForm from '@/components/CtForm'
import Snackbar from '@/plugins/snackbar'
import { useI18n } from '@/hooks/web/useI18n'
import { useRouter } from 'vue-router'; const router = useRouter()
import { enterpriseRegisterApply } from '@/api/personal/user'
import { onMounted, ref } from 'vue';
defineOptions({name: 'enterprise-enterpriseRegister-register'})
const { t } = useI18n()
const CtFormRef = ref()

const loginLoading = ref(false)

// 图片预览
const showPreview = ref(false)
const current = ref(0)

// 组件挂载后添加事件监听器  
const isMobile = ref(false)
onMounted(() => {
  const userAgent = navigator.userAgent
  isMobile.value = /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i.test(userAgent)
})

// 是否筹建中
const isPrepare = ref(false)
const isPrepareChange = () => {
  const code = formItems.value.options.find(e => e.key === 'code')
  if (code) {
    code.label = isPrepare.value ? '企业统一社会信用代码' : '企业统一社会信用代码 *'
    code.rules = isPrepare.value ? [] : [v => !!v || '请输入企业统一社会信用代码']
  }
}

const formItems = ref({
  options: [
    {
      type: 'text',
      key: 'name',
      value: '',
      label: '企业名称（需要与营业执照完全一致）*',
      counter: 50,
      rules: [v => !!v || '请输入企业名称']
    },
    {
      slotName: 'prepare',
      type: 'text',
      key: 'code',
      value: '',
      counter: 18,
      label: '企业统一社会信用代码 *',
      rules: [v => !!v || '请输入企业统一社会信用代码']
    },
    {
      type: 'text',
      key: 'contactName',
      value: '',
      label: '联系人姓名 *',
      rules: [v => !!v || '请输入联系人姓名']
    },
    {
      type: 'phoneNumber',
      key: 'phone',
      value: '',
      label: '联系电话 *',
      // flexStyle: 'mr-3',
      // col: 6,
      rules: [v => !!v || '请输入联系电话']
    },
    {
      type: 'text',
      key: 'email',
      value: '',
      label: '联系邮箱 *',
      // col: 6,
      rules: [v => !!v || '请输入联系邮箱']
    },
    {
      type: 'textarea',
      key: 'description',
      value: '',
      clearable: true,
      resize: true,
      counter: 500,
      rows: 2,
      label: '备注/说明 *',
    },
  ]
})

// 上传
let licenseUrl = ref('')

// 提交 企业注册
const handleCommit = async () => {
  const { valid } = await CtFormRef.value.formRef.validate()
  if (!valid) return
  const businessLicenseUrl = licenseUrl.value;
  if (!isPrepare.value && !businessLicenseUrl) return Snackbar.warning('请上传营业执照图片')
  const params = {
    businessLicenseUrl,
    prepare: isPrepare.value,
  }
  formItems.value.options.forEach(e => { params[e.key] = e.value })
  await enterpriseRegisterApply(params)
  Snackbar.success(t('common.submittedSuccessfully'))
  router.push({ path: '/recruit/enterprise/register/inReview' })
}

// 不通过的企业注册申请 重新发起
const info = JSON.parse(localStorage.getItem('userApplyInfo'))
if (info && Object.keys(info).length) {
  licenseUrl.value = info?.businessLicenseUrl
  formItems.value.options.forEach(e => { e.value = info[e.key] })
}

</script>
<style lang="scss" scoped>
.CtFormClass {
  margin: 0 auto;
}
.note {
  color: var(--color-666);
  font-size: 14px;
  line-height: 32px;
}
.file-box {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  width: 100%; /* 设置容器宽度 */
  .file-item {
    height: 80px;
    width: 100px;
    border-radius: 5px;
    margin-right: 8px;
    margin-top: 12px;
    // border: 1px solid rgb(188, 188, 188);
    border: 1px solid rgba(188, 188, 188, 0.5);
  }
  .file-input-box {
    position: relative;
    border: 1px solid rgb(188, 188, 188);
    cursor: pointer;
    .icon {
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: var(--color-999);
    }
  }
  // 验证是否为空
  .verifyAct {
    color: var(--v-error-base);
    border: 1px solid var(--v-error-base);
    .icon { color: var(--v-error-base); }
  }
}
.PrepareBox {
  margin-top: 74px;
  margin-left: 32px;
}
.mobileBox {
  width: 100vw;
  .resume-header {
    margin-bottom: 12px;
  }
}
</style>