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

<template>
  <div class="login-box py-5">
    <v-card class="pa-5" :class="isMobile? 'mobileBox' : 'default-width'" :elevation="isMobile? '0' : '3'">
      <!-- 标题 -->
      <div class="mt-3" v-if="!isMobile">
        <v-btn v-if="pageType !== 'noLoginToRegister'" color="primary" variant="text" @click="router.push('/recruitHome')">{{ `<< 回到首页` }}</v-btn>
        <div v-else style="height: 30px;"></div>
      </div>
      <!-- 表单 -->
      <div class="CtFormClass" :style="{width: isMobile ? '' : '600px'}">
        <div v-if="failureReason" class="mb-8" style="color: red;">
          <span class="mr-5">《审核不通过》</span>
          <span>原因：{{ failureReason }}</span>
        </div>
        <!-- 标题 -->
        <div class="mb-10" :class="isMobile ? 'mt-0': 'mt-n8'" style="font-size: 22px; font-weight: bold; text-align: center;">{{ $t('enterprise.registeringNewEnterprise') }}</div>
        <CtForm ref="CtFormRef" :items="formItems" style="width: 100%;">
          <template #businessLicense>
            <!-- 上传照片 -->
            <div class="d-flex flex-column mb-6">
              <div style="color: var(--color-999);">
                <span v-if="!prepareValue" class="mr-1" style="color: var(--v-error-base);">*</span>
                <span>上传营业执照</span>
                <span>支持jpg、jpeg、png格式，图片大小不得超过10M</span>
              </div>
              <div class="file-box">
                <Img 
                  class="mt-3" 
                  tips="上传图片" 
                  :value="licenseUrl" 
                  :showSnackbar="false" 
                  @imgClick="showPreview = !showPreview" 
                  :showCursor="true" 
                  @success="handleUploadImg" 
                  @delete="handleDeleteImg"
                ></Img>
              </div>
            </div>
          </template>
        </CtForm>
        <div class="note">
          <h4>注意事项:</h4>
          <span>企业名称为对外展示的企业名称，建议填写公司营业执照上的名称，请区分总公司和分公司</span>
        </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>
    </v-card>
    <PreviewImg v-if="showPreview" :current="current" :list="[licenseUrl]" @close="showPreview = !showPreview"></PreviewImg>

    <Loading :visible="loading"></Loading>
  </div>
</template>

<script setup>
defineOptions({name: 'enterprise-enterpriseRegister-register'})
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, computed } from 'vue';
import { checkEmail } from '@/utils/validate'
import { getBusinessLicenseOCR } from '@/api/common'

const { t } = useI18n()
const CtFormRef = ref()
const loginLoading = ref(false)

// 图片预览
const loading = ref(false)
const showPreview = ref(false)
const current = ref(0)
const email = localStorage.getItem('loginAccount') || ''

// 组件挂载后添加事件监听器
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)
})


import { useRoute } from 'vue-router'; const route = useRoute()
const pageType = route?.query?.type || '' // type: noLoginToRegister:->登录页注册企业

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

const handleSecondConfirm = () => {
  const obj = formItems.value.options.find(e => e.key === 'passwordConfirm')
  obj.type = obj.type === 'password' ? 'text' : 'password'
  obj.appendInnerIcon = obj.type === 'password' ? 'mdi-eye-off-outline' : 'mdi-eye-outline'
}

const handlePassword = () => {
  const obj = formItems.value.options.find(e => e.key === 'password')
  obj.type = obj.type === 'password' ? 'text' : 'password'
  obj.appendInnerIcon = obj.type === 'password' ? 'mdi-eye-off-outline' : 'mdi-eye-outline'
}

const formItems = ref({
  options: [
    {
      type: 'ifRadio',
      key: 'prepare',
      value: false,
      label: '是否筹建中 *',
      width: 100,
      items: [
        { label: '是', value: true },
        { label: '否', value: false }
      ],
      change: isPrepareChange
    },
    {
      slotName: 'businessLicense'
    },
    {
      type: 'text',
      key: 'name',
      value: '',
      label: '企业名称（需要与营业执照完全一致）*',
      counter: 50,
      rules: [v => !!v || '请输入企业名称']
    },
    {
      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: '联系电话 *',
      rules: [v => !!v || '请输入联系电话']
    },
    {
      type: 'text',
      key: 'email',
      value: email ? email : '',
      label: '企业邮箱 *',
      rules: [
        value => {
          if (value) return true
          return '请输入企业邮箱'
        },
        value => {
          if (checkEmail(value)) return true
          return '请输入正确的企业邮箱'
        }
      ]
    },
    {
      type: 'password',
      key: 'password',
      value: '',
      appendInnerIcon: 'mdi-eye-off-outline',
      label: '账户登录密码 *',
      placeholder: '请输入账户登录密码',
      appendInnerClick: handlePassword,
      rules: [
        value => {
          if (value) return true
          return '请输入账户登录密码'
        },
        value => {
          if (/^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]).{8,16}$/.test(value)) return true
          return '请输入8-16位数由数字、大小写字母组成的密码'
        }
      ]
    },
    {
      type: 'password',
      key: 'passwordConfirm',
      value: '',
      appendInnerIcon: 'mdi-eye-off-outline',
      label: '请再次输入账户登录密码 *',
      placeholder: '请再次输入账户登录密码',
      appendInnerClick: handleSecondConfirm,
      rules: [
        value => {
          if (value) return true
          return '请再次输入密码'
        },
        value => {
          if (value === formItems.value.options.find(e => e.key === 'password').value) return true
          return '两次输入密码不一致'
        }
      ]
    },
    {
      type: 'textarea',
      key: 'description',
      value: '',
      clearable: true,
      resize: true,
      counter: 500,
      rows: 2,
      label: '备注/说明',
    },
  ]
})

// 是否筹建中
const prepareValue = computed(() => {
  return formItems.value.options.find(e => e.key === 'prepare').value
})

// 识别营业执照图片
const business = ref({})
const getOcr = async () => {
  loading.value = true
  try {
    const data = await getBusinessLicenseOCR(licenseUrl.value)
    if (data && Object.keys(data).length) {
      formItems.value.options.find(e => e.key === 'code').value = data.code
      formItems.value.options.find(e => e.key === 'name').value = data.name
      business.value = data
    }
  } finally {
    loading.value = false
  }
}

// 上传
let licenseUrl = ref('')
const handleUploadImg = (url) => {
  licenseUrl.value = url
  if (licenseUrl.value) getOcr()
}

const handleDeleteImg = () => {
  licenseUrl.value = ''
  business.value = {}
  formItems.value.options.find(e => e.key === 'code').value = ''
  formItems.value.options.find(e => e.key === 'name').value = ''
}

// 提交 企业注册
const handleCommit = async () => {
  const { valid } = await CtFormRef.value.formRef.validate()
  if (!valid) return

  const businessLicenseUrl = licenseUrl.value;
  if (!prepareValue.value && !businessLicenseUrl) return Snackbar.warning('请上传营业执照图片')
  const params = {
    businessLicenseUrl,
    prepare: prepareValue.value,
  }
  formItems.value.options.forEach(e => { params[e.key] = e.value })
  if (business.value && Object.keys(business.value).length) params.ocr = business.value

  await enterpriseRegisterApply(params)
  localStorage.removeItem('loginAccount')
  Snackbar.success(t('common.submittedSuccessfully'))
  router.push({ path: '/recruit/entRegister/inReview' })
}

// 不通过的企业注册申请 重新发起
const failureReason = ref('')
const info = JSON.parse(localStorage.getItem('userApplyInfo'))
// 审核不通过的数据回显
if (info && Object.keys(info).length && info.status === '2') {
  failureReason.value = info?.reason || ''
  licenseUrl.value = info?.businessLicenseUrl
  // prepareValue.value = info?.prepare || false
  formItems.value.options.forEach(e => {
    if (e.key === 'passwordConfirm') e.value = info.password
    else e.value = info[e.key]
  })
  isPrepareChange()
}

</script>

<style lang="scss" scoped>
.CtFormClass {
  margin: 0 auto;
}
.note {
  color: var(--color-666);
  font-size: 14px;
  line-height: 32px;
}
.login-box {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url('https://www.mendunerhr.com/images/userfiles/92d7e4a755e2428b94aab3636d5047f3/images/recruitment/adImages/2018/11/1920x940.jpg');
  background-size: cover;
}
.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: calc(100vw - 16px);
  margin: 0 auto;
  .resume-header {
    margin-bottom: 12px;
  }
}
</style>