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

<template>
  <v-form ref="passwordForm" @submit.prevent>
    <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>
        <span class="d-flex">
          <v-icon icon="mdi-cellphone" size="20"></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'"
      :rules="[v=> !!v || $t('login.enterPassword')]"
      @click:append-inner="passwordType = !passwordType"
      @keyup.enter="handleEnter"
    ></v-text-field>
  </v-form>
</template>

<script setup name="passwordPage">
import { ref, reactive } from 'vue'
defineOptions({ name: 'password-form' })
import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()
const props = defineProps({ phoneDisabled: Boolean })
const passwordType = ref(false)
const emits = defineEmits(['handleEnter'])

const phoneRules = ref([
  value => {
    if (value) return true
    return t('login.mobileNumberPlaceholder')
  },
  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 loginUserPhone = localStorage.getItem('loginUserPhone') || ''
const loginData = reactive({
  phone: loginUserPhone, // 13229740091
  password: '' // 1111
})

// 设置默认账号密码便于开发快捷登录
if (window.location.hostname === 'localhost' || window.location.hostname === '192.168.3.152') {
  loginData.phone = '13229740091'
  loginData.password = 'Citu123'
}

const passwordForm = ref()

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