menduner/src/views/login/components/passwordPage.vue

<template>
  <v-form ref="passwordForm" @submit.prevent>
    <v-text-field
      v-model="loginData.phone"
      :counter="isCounter ? 30 : 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>
        <span class="d-flex">
          <v-icon icon="mdi-cellphone" size="24" color="#818181"></v-icon>
          <span class="d-flex" id="menu-activator">
            <span class="phone-number">{{ currentArea }}</span>
            <v-icon size="20">mdi-chevron-down</v-icon>
          </span>
          <v-menu activator="#menu-activator">
            <v-list>
              <v-list-item v-for="(item, index) in items" :key="index" :value="index" @click="handleChangeCurrentArea(item)">
                <v-list-item-title>{{ item.label }}</v-list-item-title>
              </v-list-item>
            </v-list>
          </v-menu>
        </span>
      </template> -->
    </v-text-field>
    <v-text-field
      v-model="loginData.password"
      :placeholder="$t('login.enterPassword')" 
      variant="outlined" 
      density="compact"
      color="primary"
      prepend-inner-icon="mdi-lock-outline" 
      :append-inner-icon="passwordType ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
      :type="passwordType ? 'text' : 'password'"
      @click:append-inner="passwordType = !passwordType"
      :rules="[v=> !!v || $t('login.enterPassword'), validPassword]"
      @keyup.enter="handleEnter"
    ></v-text-field>
  </v-form>
</template>

<script setup name="passwordPage">
import { ref, reactive, computed } from 'vue'
defineOptions({ name: 'password-form' })
import { checkEmail } from '@/utils/validate'
import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()

const props = defineProps({ phoneDisabled: Boolean, placeholder: String, validEmail: Boolean, isCounter: Boolean })
const passwordType = ref(false)
const emits = defineEmits(['handleEnter'])

const phoneRules = ref([]) // 区分企业邮箱和手机号2种方式登录校验

if (props.validEmail) {
  // 邮箱效验
  phoneRules.value = [
    value => {
      if (value) return true
      return props.placeholder ? props.placeholder : '请输入企业邮箱'
    },
    value => {
      if (checkEmail(value)) return true
      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')
    }
  ]
}

// 手机号区域
// const currentArea = ref('0086')
// const items = [
//   { label: '中国大陆-0086', value: '0086' }
// ]
// const handleChangeCurrentArea = (e) => {
//   currentArea.value = e.value
// }

// 密码效验
const regex = /^.{8,}$/
const validPassword = computed(() => {
  return regex.test(loginData.password) || '请输入至少8位数的密码'
})

const loginUserPhone = localStorage.getItem('loginUserPhone') || ''
const loginData = reactive({
  phone: loginUserPhone, // 13229740092
  password: '' // 1111
})

// 设置默认账号密码便于开发快捷登录
if (window.location.hostname === 'localhost' || window.location.hostname === '192.168.3.152') {
  loginData.phone = props.validEmail ? 
    '1687284007@qq.com' : '13229740092'
  loginData.password = 'Citu123456'
}

const passwordForm = ref()

const handleEnter = () => {
  emits('handleEnter')
}
defineExpose({
  loginData,
  passwordForm
})
</script>