menduner/src/views/register/person.vue

<template>
  <div class="box" :style="{'background-image': 'url(' + webContent.loginBgUrl + ')'}">
    <navBar v-if="!isMobile" :showLoginBtn="false" class="navBar"></navBar>
    <div class="content pa-10">
      <div class="content-title text-center mt-4">{{ isLogin ? '请输入您申请企业账号时填入的手机号进行效验' : '请输入手机号码进行注册认证'}}</div>
      <div class="mt-10">
        <phoneFrom ref="phoneRef" openVerify @handleEnter="handleRegister" :phone="phone"></phoneFrom>
      </div>
      <div v-if="!isMobile" class="font-size-14 text-end">
        <span class="tips color-primary cursor-pointer" @click="router.push(isSchool ? '/flameLogin' : '/login')">已有账号？去登录</span>
      </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">
        <v-icon v-if="isAgree" size="25" color="primary" class="mr-1" @click="isAgree = !isAgree">mdi-check-circle</v-icon>
        <v-icon v-else size="25" color="grey" class="mr-1" @click="isAgree = !isAgree">mdi-circle-outline</v-icon>
        点击注册即代表您同意
        <span class="color" style="cursor: pointer;" @click="windowOpen('/userAgreement')"> [{{ $t('login.userAgreement') }}] </span>和
        <span class="color" style="cursor: pointer;" @click="windowOpen('/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 { checkCompanyEmail } from '@/utils/validate'
import navBar from '@/layout/personal/navBar.vue'
import { webContentStore } from '@/store/webContent'

const webContent = webContentStore()
const isMobile = ref(false)
onMounted(async () => {
  await webContent.getSystemWebContent()
  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
  },
  isSchool: {
    type: Boolean,
    default: false
  }
})

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

// 注册
const handleRegister = async () => {
  const { valid } = await phoneRef.value.phoneForm.validate()
  if (!valid) return
  if (!props.isCompany && !isAgree.value) return Snackbar.warning('请阅读并勾选底部协议')
  loading.value = true
  try {
    await userStore.handleSmsLogin({ 
      ...phoneRef.value.loginData,
      autoRegister: true,
      chooseRole: props.isCompany || props.isSchool ? false : true,
      schoolRegister: props.isSchool
    })
    // autoRegister 自动注册登录

    if (props.isSchool) localStorage.setItem('schoolLoginAccount', JSON.stringify({ phone: phoneRef.value.loginData.phone }))

    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) {
    phoneRef.value && phoneRef.value.clearCaptcha()
    loading.value = false
  } finally {
    loading.value = false
  }
}

const windowOpen = (url) => {
  // router.push(url)
  if (url) window.open(url)
}
</script>

<style scoped lang="scss">
.color {
  color: var(--v-primary-base); 
}
.navBar {
  position: absolute;
  top: 0;
}
.box {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content {
  width: 450px;
  height: 450px;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  &-title {
    color: #4c4c4c;
    font-size: 24px;
  }
}
.login-tips {
  width: 100%;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tips:hover {
  border-bottom: 1px solid var(--v-primary-base);
}
</style>