|
@@ -1,7 +1,17 @@
|
|
<template>
|
|
<template>
|
|
<v-form ref="passwordForm" @submit.prevent>
|
|
<v-form ref="passwordForm" @submit.prevent>
|
|
- <v-text-field v-model="loginData.phone" :disabled="props.phoneDisabled" :placeholder="placeholder ? placeholder : '请输入手机号码'" color="primary"
|
|
|
|
- variant="outlined" density="compact" :rules="phoneRules" validate-on="input" prepend-inner-icon="mdi-cellphone" >
|
|
|
|
|
|
+ <v-text-field
|
|
|
|
+ v-model="loginData.phone"
|
|
|
|
+ counter="11"
|
|
|
|
+ :disabled="props.phoneDisabled"
|
|
|
|
+ :placeholder="placeholder ? placeholder : '请输入手机号码'"
|
|
|
|
+ color="primary"
|
|
|
|
+ variant="outlined"
|
|
|
|
+ density="compact"
|
|
|
|
+ :rules="phoneRules"
|
|
|
|
+ validate-on="input"
|
|
|
|
+ :prepend-inner-icon="props.validEmail ? 'mdi-email' : 'mdi-cellphone'"
|
|
|
|
+ >
|
|
<!-- <template v-slot:prepend-inner>
|
|
<!-- <template v-slot:prepend-inner>
|
|
<span class="d-flex">
|
|
<span class="d-flex">
|
|
<v-icon icon="mdi-cellphone" size="20"></v-icon>
|
|
<v-icon icon="mdi-cellphone" size="20"></v-icon>
|
|
@@ -28,37 +38,50 @@
|
|
prepend-inner-icon="mdi-lock-outline"
|
|
prepend-inner-icon="mdi-lock-outline"
|
|
:append-inner-icon="passwordType ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
|
|
:append-inner-icon="passwordType ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
|
|
:type="passwordType ? 'text' : 'password'"
|
|
:type="passwordType ? 'text' : 'password'"
|
|
- :rules="[v=> !!v || $t('login.enterPassword')]"
|
|
|
|
@click:append-inner="passwordType = !passwordType"
|
|
@click:append-inner="passwordType = !passwordType"
|
|
|
|
+ :rules="[v=> !!v || $t('login.enterPassword'), validPassword]"
|
|
@keyup.enter="handleEnter"
|
|
@keyup.enter="handleEnter"
|
|
></v-text-field>
|
|
></v-text-field>
|
|
</v-form>
|
|
</v-form>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script setup name="passwordPage">
|
|
<script setup name="passwordPage">
|
|
-import { ref, reactive } from 'vue'
|
|
|
|
|
|
+import { ref, reactive, computed } from 'vue'
|
|
defineOptions({ name: 'password-form' })
|
|
defineOptions({ name: 'password-form' })
|
|
import { checkEmail } from '@/utils/validate'
|
|
import { checkEmail } from '@/utils/validate'
|
|
|
|
+import { useI18n } from '@/hooks/web/useI18n'
|
|
|
|
+const { t } = useI18n()
|
|
|
|
|
|
const props = defineProps({ phoneDisabled: Boolean, placeholder: String, validEmail: Boolean })
|
|
const props = defineProps({ phoneDisabled: Boolean, placeholder: String, validEmail: Boolean })
|
|
const passwordType = ref(false)
|
|
const passwordType = ref(false)
|
|
const emits = defineEmits(['handleEnter'])
|
|
const emits = defineEmits(['handleEnter'])
|
|
|
|
|
|
-const phoneRules = ref([
|
|
|
|
- value => {
|
|
|
|
- if (value) return true
|
|
|
|
- return props.placeholder ? props.placeholder : '请输入手机号码'
|
|
|
|
- }
|
|
|
|
-])
|
|
|
|
|
|
+const phoneRules = ref([]) // 区分企业邮箱和手机号2种方式登录校验
|
|
|
|
|
|
-// 邮箱效验
|
|
|
|
if (props.validEmail) {
|
|
if (props.validEmail) {
|
|
- phoneRules.value.push(
|
|
|
|
|
|
+ // 邮箱效验
|
|
|
|
+ phoneRules.value = [
|
|
|
|
+ value => {
|
|
|
|
+ if (value) return true
|
|
|
|
+ return props.placeholder ? props.placeholder : '请输入企业邮箱'
|
|
|
|
+ },
|
|
value => {
|
|
value => {
|
|
if (checkEmail(value)) return true
|
|
if (checkEmail(value)) return true
|
|
return '请输入正确的企业邮箱'
|
|
return '请输入正确的企业邮箱'
|
|
}
|
|
}
|
|
- )
|
|
|
|
|
|
+ ]
|
|
|
|
+} else {
|
|
|
|
+ // 手机号码效验
|
|
|
|
+ phoneRules.value = [
|
|
|
|
+ value => {
|
|
|
|
+ if (value) return true
|
|
|
|
+ return props.placeholder ? props.placeholder : '请输入手机号码'
|
|
|
|
+ },
|
|
|
|
+ value => {
|
|
|
|
+ if (value?.length <= 11 && /^1[3456789]\d{9}$/.test(value)) return true
|
|
|
|
+ return t('login.correctPhoneNumber')
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
}
|
|
}
|
|
|
|
|
|
// 手机号区域
|
|
// 手机号区域
|
|
@@ -70,6 +93,12 @@ if (props.validEmail) {
|
|
// currentArea.value = e.value
|
|
// currentArea.value = e.value
|
|
// }
|
|
// }
|
|
|
|
|
|
|
|
+// 密码效验
|
|
|
|
+const regex = /^[A-Za-z0-9]{8,}$/
|
|
|
|
+const validPassword = computed(() => {
|
|
|
|
+ return regex.test(loginData.password) || '请输入至少8位数的密码'
|
|
|
|
+})
|
|
|
|
+
|
|
const loginUserPhone = localStorage.getItem('loginUserPhone') || ''
|
|
const loginUserPhone = localStorage.getItem('loginUserPhone') || ''
|
|
const loginData = reactive({
|
|
const loginData = reactive({
|
|
phone: loginUserPhone, // 13229740092
|
|
phone: loginUserPhone, // 13229740092
|