menduner/src/views/register/person.vue

<template>
  <div class="box">
    <navBar v-if="!isMobile" :showLoginBtn="false" class="navBar"></navBar>
    <div class="content pa-10">
      <div class="content-title text-center mt-4">{{ isLogin ? '请输入您申请企业账号时填入的手机号进行效验' : '请输入手机号码进行注册认证'}}</div>
      <phoneFrom class="mt-10" ref="phoneRef" @handleEnter="handleRegister" :phone="phone"></phoneFrom>
      <div v-if="!isMobile" class="font-size-14 tips color-primary cursor-pointer text-end" @click="router.push('/login')">已有账号？去登录</div>
      <v-btn :loading="loading" color="primary" class="white--text mt-5" min-width="370" @click="handleRegister">{{ isCompany ? '下一步' : '注册' }}</v-btn>
      <div class="login-tips mt-3" v-if="!isCompany">
        点击注册即代表您同意
        <span class="color-primary" style="cursor: pointer;" @click="router.push('/userAgreement')"> [{{ $t('login.userAgreement') }}] </span>和
        <span class="color-primary" style="cursor: pointer;" @click="router.push('/privacyPolicy')">[{{ $t('login.privacyPolicy') }}]</span>
      </div>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'registerPerson'})
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import phoneFrom from '@/components/VerificationCode'
import { useUserStore } from '@/store/user'
import Snackbar from '@/plugins/snackbar'
import { checkEmail } from '@/utils/validate'
import navBar from '@/layout/personal/navBar.vue'

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 emit = defineEmits(['success'])
const props = defineProps({
  isCompany: {
    type: Boolean,
    default: false
  },
  isLogin: {
    type: Boolean,
    default: false
  }
})

const router = useRouter()
const phoneRef = ref()
const loading = ref(false)
const userStore = useUserStore()
const phone = localStorage.getItem('loginAccount') && !checkEmail(localStorage.getItem('loginAccount')) ? localStorage.getItem('loginAccount') : ''

// 注册
const handleRegister = async () => {
  const { valid } = await phoneRef.value.phoneForm.validate()
  if (!valid) return
  loading.value = true
  try {
    // isLogin：企业注册申请被驳回后，再次提交时需先登录个人账号
    // props.isLogin ? await userStore.handleSmsLogin({ ...phoneRef.value.loginData, autoRegister: true }) : await userStore.handleUserRegister({ ...phoneRef.value.loginData })
    await userStore.handleSmsLogin({ ...phoneRef.value.loginData, autoRegister: true }) // 自动注册登录
    Snackbar.success(props.isCompany ? '手机号验证成功' : '注册成功')
    if (!props.isCompany) {
      localStorage.setItem('simpleCompleteDialogHaveBeenShow', true) // 个人登录简易基本信息填写弹窗open-status
      router.push({ path: '/recruitHome' })
      localStorage.removeItem('loginAccount')
    } else emit('success')
  } catch (err) {
    loading.value = false
  } finally {
    loading.value = false
  }
}
</script>

<style scoped lang="scss">
.navBar {
  position: absolute;
  top: 0;
}
.box {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url('https://minio.menduner.com/dev/menduner/login-banner.png');
  background-size: cover;
}
.content {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 450px;
  height: 400px;
  background-color: #fff;
  border-radius: 10px;
  &-title {
    color: #4c4c4c;
    font-size: 24px;
  }
}
.login-tips {
  width: 100%;
  font-size: 14px;
  text-align: center;
}
.tips:hover {
  text-decoration: underline;
}
</style>