|
@@ -1,6 +1,17 @@
|
|
<template>
|
|
<template>
|
|
<div>
|
|
<div>
|
|
<v-form @submit.prevent ref="phoneForm">
|
|
<v-form @submit.prevent ref="phoneForm">
|
|
|
|
+ <v-text-field
|
|
|
|
+ v-if="props.showEmailInput"
|
|
|
|
+ v-model="loginData.email"
|
|
|
|
+ placeholder="请输入企业邮箱"
|
|
|
|
+ color="primary"
|
|
|
|
+ variant="outlined"
|
|
|
|
+ density="compact"
|
|
|
|
+ validate-on="input"
|
|
|
|
+ prepend-inner-icon="mdi-email"
|
|
|
|
+ :rules="emailRules"
|
|
|
|
+ ></v-text-field>
|
|
<v-text-field v-model="loginData.phone" counter="11" :disabled="props.phoneDisabled" :placeholder="$t('login.mobileNumberPlaceholder')" color="primary" variant="outlined" density="compact" :rules="phoneRules" validate-on="input">
|
|
<v-text-field v-model="loginData.phone" counter="11" :disabled="props.phoneDisabled" :placeholder="$t('login.mobileNumberPlaceholder')" color="primary" variant="outlined" density="compact" :rules="phoneRules" validate-on="input">
|
|
<template v-slot:prepend-inner>
|
|
<template v-slot:prepend-inner>
|
|
<span class="d-flex">
|
|
<span class="d-flex">
|
|
@@ -42,6 +53,7 @@
|
|
defineOptions({ name: 'verification-code' })
|
|
defineOptions({ name: 'verification-code' })
|
|
import { ref, reactive } from 'vue'
|
|
import { ref, reactive } from 'vue'
|
|
import { setCodeTime } from '@/utils/code'
|
|
import { setCodeTime } from '@/utils/code'
|
|
|
|
+import { checkEmail } from '@/utils/validate'
|
|
import { sendSmsCode } from '@/api/common/index'
|
|
import { sendSmsCode } from '@/api/common/index'
|
|
import { useI18n } from '@/hooks/web/useI18n'
|
|
import { useI18n } from '@/hooks/web/useI18n'
|
|
import Snackbar from '@/plugins/snackbar'
|
|
import Snackbar from '@/plugins/snackbar'
|
|
@@ -51,6 +63,10 @@ const { t } = useI18n()
|
|
const props = defineProps({
|
|
const props = defineProps({
|
|
phoneDisabled: Boolean,
|
|
phoneDisabled: Boolean,
|
|
phone: String,
|
|
phone: String,
|
|
|
|
+ showEmailInput: { // 需要输入邮箱
|
|
|
|
+ type: Boolean,
|
|
|
|
+ default: false
|
|
|
|
+ },
|
|
scene: { // 短信验证码scene参数: 30-手机号登陆 31-修改手机 32-修改密码 33-忘记密码
|
|
scene: { // 短信验证码scene参数: 30-手机号登陆 31-修改手机 32-修改密码 33-忘记密码
|
|
type: [Number, String],
|
|
type: [Number, String],
|
|
default: 30
|
|
default: 30
|
|
@@ -78,6 +94,17 @@ const codeValid = ref([
|
|
}
|
|
}
|
|
])
|
|
])
|
|
|
|
|
|
|
|
+const emailRules = ref([
|
|
|
|
+ value => {
|
|
|
|
+ if (value) return true
|
|
|
|
+ return props.placeholder ? props.placeholder : '请输入企业邮箱'
|
|
|
|
+ },
|
|
|
|
+ value => {
|
|
|
|
+ if (checkEmail(value)) return true
|
|
|
|
+ return '请输入正确的企业邮箱'
|
|
|
|
+ }
|
|
|
|
+])
|
|
|
|
+
|
|
// 手机号区域
|
|
// 手机号区域
|
|
// const currentArea = ref('0086')
|
|
// const currentArea = ref('0086')
|
|
// const items = [
|
|
// const items = [
|
|
@@ -135,6 +162,7 @@ const autoTimer = () => {
|
|
autoTimer()
|
|
autoTimer()
|
|
const loginUserPhone = localStorage.getItem('loginUserPhone') || ''
|
|
const loginUserPhone = localStorage.getItem('loginUserPhone') || ''
|
|
const loginData = reactive({
|
|
const loginData = reactive({
|
|
|
|
+ email: '',
|
|
phone: loginUserPhone,
|
|
phone: loginUserPhone,
|
|
code: ''
|
|
code: ''
|
|
})
|
|
})
|
|
@@ -144,7 +172,15 @@ const phoneForm = ref()
|
|
const handleEnter = () => {
|
|
const handleEnter = () => {
|
|
emits('handleEnter')
|
|
emits('handleEnter')
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+const resetPhone = () => {
|
|
|
|
+ loginData.phone = ''
|
|
|
|
+ loginData.code = ''
|
|
|
|
+ count.value = 0
|
|
|
|
+}
|
|
|
|
+
|
|
defineExpose({
|
|
defineExpose({
|
|
|
|
+ resetPhone,
|
|
loginData,
|
|
loginData,
|
|
phoneForm
|
|
phoneForm
|
|
})
|
|
})
|