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

<!-- 注册企业进度 -->
<template>
  <div class="my-5">
    <div v-if="!isMobile">
      <v-btn v-if="query?.noLogin" class="my-2" color="primary" variant="text" size="large" @click="router.push('/login')">{{ `<< 回到登录页` }}</v-btn>
      <v-btn v-else 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 style="margin: 80px auto;" :style="{width: isMobile ? '' : '600px'}">

        <!-- 提交企业注册以后跳转显示页面 -->
        <div v-if="!applyInfo || !(Object.keys(applyInfo).length)" class="d-flex flex-column align-center">
          <svg-icon name="submit" size="300"></svg-icon>
          <div><strong class="color-primary font-size-20">提交成功，</strong>已收到您的企业账号申请，审核时间预计在1~3个工作日内，申请结果会以短信方式通知到您的手机上，请注意查收。</div>
          <div style="width: 100%;">
            <div class="mt-5 mb-1">如有疑问请扫码添加下方企业微信联系我们：</div>
            <div style="width: 150px; height: 150px; margin: auto;">
              <v-img src="https://minio.menduner.com/dev/menduner/contact.png" width="150" height="150"></v-img>
            </div>
            <div class="text-center ml-5">潘青海先生（Peter Pan）</div>
          </div>
        </div>

        <!-- 等待审核 -->
        <div v-else-if="applyInfo.status === '0'">
          <div class="d-flex flex-column align-center">
            <svg-icon name="submit" size="300"></svg-icon>
          </div>
          <div>
            您的企业账号申请<strong class="color-primary font-size-20"> 正在审核中，</strong>审核时间在1~3个工作日内，申请结果会以短信方式通知到您的手机上，请注意查收。
          </div>
          <div class="mt-5">
            <span>提交时间：{{ applyInfo.createTime }}</span>
          </div>
          <div style="width: 100%;">
            <div class="mt-5 mb-1">如有疑问请扫码添加下方企业微信联系我们：</div>
            <div style="width: 150px; height: 150px; margin: auto;">
              <v-img src="https://minio.menduner.com/dev/menduner/contact.png" width="150" height="150"></v-img>
            </div>
            <div class="text-center ml-5">潘青海先生（Peter Pan）</div>
          </div>
        </div>

        <!-- 审核不通过 -->
        <div v-else-if="applyInfo.status === '2'"> 
          <div class="mb-3" style="color: red;">
            您的企业账号注册申请<strong class="color-error font-size-20"> 审核不通过，</strong>
            具体原因如下：{{ applyInfo.reason }}
          </div>
          <div v-if="applyInfo.remark">备注：{{ applyInfo.remark }}</div>
          <div class="mt-5">
            <span>审核时间：{{ applyInfo.updateTime }}</span>
          </div>
          <div class="mt-5">
            <span>提交时间：{{ applyInfo.createTime }}</span>
          </div>
          <div style="width: 100%;">
            <div class="mt-5 mb-1">如有疑问请扫码添加下方企业微信联系我们：</div>
            <div style="width: 150px; height: 150px; margin: auto;">
              <v-img src="https://minio.menduner.com/dev/menduner/contact.png" width="150" height="150"></v-img>
            </div>
            <div class="text-center ml-5">潘青海先生（Peter Pan）</div>
          </div>
        </div>

        <!-- 审核通过（审核通过不会进入此页面） -->
        <div v-else-if="applyInfo.status === '1'">
          <span>审核通过</span>
        </div>
        <div class="text-center">
          <v-btn v-if="!isMobile" class="mt-16 mr-12 buttons" color="primary" to="/recruitHome">{{ $t('common.toHome') }}</v-btn>
          <v-btn v-if="applyInfo.status === '2'" class="mt-16 buttons" color="primary" @click="handleConfirm">{{ $t('common.resubmit') }}</v-btn>
        </div>
      </div>
    </v-card>
  </div>
</template>

<script setup>
defineOptions({name: 'enterprise-enterpriseRegister-inReview'})
import { timesTampChange } from '@/utils/date'
import { getUserRegisterEnterpriseApply } from '@/api/personal/user'
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router'; const router = useRouter()

const applyInfo = ref({})
const query = router.currentRoute.value.query

// 组件挂载后添加事件监听器  
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 getApplyInfo = async () => {
  const data = query?.noLogin ? JSON.parse(localStorage.getItem('entRegisterData')) : await getUserRegisterEnterpriseApply() // 已经有数据说明已经申请过了
  localStorage.setItem('userApplyInfo', JSON.stringify(data))
  const obj = {
    createTime: timesTampChange(data.createTime), // 创建时间
    updateTime: timesTampChange(data.updateTime), // 更新时间
    status: data.status, // 审核状态（0审核中 1审核通过 2审核不通过）） // 审核状态
    reason: data.reason, // 审核原因
    remark: data.remark, // 备注
  }
  applyInfo.value = obj
}
getApplyInfo()

const handleConfirm = () => {
  router.push(query?.noLogin ? '/register/company?type=noLoginToRegister&login=true' : '/recruit/entRegister')
}

</script>
<style lang="scss" scoped>
.mobileBox {
  width: 100vw;
  .resume-header {
    margin-bottom: 12px;
  }
}
</style>