menduner/src/views/common/loginDialog.vue

<!-- 快速登录/注册 -->
<template>
  <CtDialog
    :visible="openDialog"
    :widthType="2"
    :footer="false"
    titleClass="text-h6"
    title="快速登录"
    @close="openDialog = false"
  >
    <div class="my-5">
      <phoneFrom ref="phoneRef" @handleEnter="handleLogin"></phoneFrom>
      <v-btn :loading="loginLoading" color="primary" class="white--text mt-5" min-width="350" @click="handleLogin">
        {{ $t('login.loginOrRegister') }}
      </v-btn>
      <div class="text-center color-666 font-size-14 mt-3">未注册的手机号，验证后自动注册账号</div>
    </div>
  </CtDialog>
</template>

<script setup>
defineOptions({name: 'dialog-login-common-page'})
import phoneFrom from '@/components/VerificationCode'
import { useUserStore } from '@/store/user'; const userStore = useUserStore()
import { nextTick, ref } from 'vue'

const emit = defineEmits(['loginSuccess'])

const props = defineProps({
  // 是否需要退出后再登录，切换账号时使用
  hasLogout: {
    type: Boolean,
    default: false
  }
})

const openDialog = ref(false)
nextTick(() => {
  openDialog.value = true
})

// 验证码登录
const phoneRef = ref()
const loginLoading = ref(false)

const handleLogin = async () => {
  const { valid } = await phoneRef.value.phoneForm.validate()
  if (!valid) return
  if (props.hasLogout) {
    await userStore.userLogout(1)
  }
  loginLoading.value = true
  try {
    const params = { ...phoneRef.value.loginData, autoRegister: true } // autoRegister: 是否自动注册
    await userStore.handleSmsLogin(params)
    emit('loginSuccess')
  } catch (error) {
    console.error('error', error)
  }
}
</script>

<style lang="scss" scoped>
</style>