policeSecurity/policeManagement/src/components/login/TelephoneLogin.vue

<template>
  <a-form ref="formRef" :model="loginParams" :rules="loginParamsRule" @finish="login" layout="vertical" size="large" class="login-form">
    <a-form-item name="telephone">
      <a-input v-model:value="loginParams.telephone" placeholder="请输入账号/手机号" :max-length="64" allow-clear />
    </a-form-item>
    <a-form-item name="password">
      <a-input-password v-model:value="loginParams.password" placeholder="请输入密码" :max-length="32" />
    </a-form-item>
    <div class="remember-me">
      <a-checkbox disabled> 记住我 </a-checkbox>
    </div>
    <a-button class="btn" type="primary" html-type="submit">立即登录 </a-button>
  </a-form>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { FormInstance, message, notification } from 'ant-design-vue'
import { Rule } from 'ant-design-vue/es/form'
import { LoginParams } from '@/types/views/login.ts'
import api from '@/axios'
import { CLIENT_TYPE } from '@/config'
import rsaUtil from '@/utils/rsaUtil.ts'
import { TokenInfo } from '@/types/stores/userStore.ts'
import { useUserStore } from '@/stores/modules/userStore.ts'
import { useRouter } from 'vue-router'

const userStore = useUserStore()
const router = useRouter()

const formRef = ref<FormInstance>(null!)
const loginParamsRule: Record<keyof LoginParams, Rule[]> = {
  telephone: [
    { required: true, message: '请输入手机号', trigger: 'change' },
    { len: 11, message: '长度不够', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'change' },
    { min: 6, max: 20, message: '密码长度最小为6最长为20', trigger: 'blur' },
  ],
}
const loginParams = ref<LoginParams>({
  telephone: __APP_ENV.VITE_APP_ENV === 'development' ? '15576404472' : '',
  password: __APP_ENV.VITE_APP_ENV === 'development' ? '123456' : '',
})

/**
 * 登录
 */
const login = async () => {
  //校验表单
  await formRef.value.validate()
  //执行登录逻辑
  const resp = await api.post<TokenInfo>('/login', {
    clientType: CLIENT_TYPE,
    loginParams: {
      telephone: loginParams.value.telephone,
      password: rsaUtil.encryptStr(loginParams.value.password),
    },
  })
  //保存token
  userStore.saveTokenInfo(resp.data as TokenInfo)
  //跳转页面
  router.push('/index').then(() => {
    notification.success({
      message: '登录成功',
      duration: 2,
      description: '欢迎来到本系统!',
      placement: 'topRight',
    })
  })
}
</script>

<style lang="scss" scoped>
.login-form {
  box-sizing: border-box;
  padding: 0 5px;
  margin-top: 16px;

  :deep(.ant-input-group-addon) {
    padding: 0;
    overflow: hidden;
  }

  .ant-form-item {
    margin-bottom: 20px;
  }

  .remember-me {
    display: flex;
    justify-content: space-between;
  }

  .btn {
    border-radius: 4px;
    box-shadow: 0 0 0 1px #05f, 0 2px 1px rgba(0, 0, 0, 0.15);
    font-size: 14px;
    font-weight: 500;
    height: 40px;
    line-height: 22px;
    margin: 20px 0 12px;
    width: 100%;
  }
}
</style>