ppa-frontEnd/src/views/login/index.vue

<template>
  <div class="login">
    <div class="form_warp">
      <div class="header">
        <div class="title">咨询管理系统</div>
        <div class="title2">知识产权资讯采集与管理平台</div>
      </div>
      <div class="form_content">
        <el-form
          ref="ruleFormRef"
          :model="form"
          :rules="rules"
          label-width="auto"
          label-position="top"
        >
          <el-form-item label="用户名" prop="username">
            <el-input
              v-model="form.username"
              clearable
              autocomplete="off"
              @keyup.enter="submitForm(ruleFormRef)"
              placeholder="请输入用户名"
            >
              <template #prepend></template>
            </el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="form.password"
              autocomplete="off"
              :show-password="true"
              @keyup.enter="submitForm(ruleFormRef)"
              placeholder="请输入密码"
            >
              <template #prepend></template>
            </el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="code" class="margin-left_0">
            <div class="code_content">
              <div class="code_input">
                <el-input
                  type="text"
                  maxlength="4"
                  placeholder="请输入验证码"
                  v-model="form.code"
                  clearable
                  autocomplete="off"
                  @keyup.enter="submitForm(ruleFormRef)"
                >
                  <template #prepend></template>
                </el-input>
              </div>
              <div class="login-code">
                <img
                  @click="getCode"
                  class="login-code-img"
                  style="margin-top: 0"
                  :src="captcha"
                  title="点击获取新的验证码"
                />
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="large"
              class="login-submit"
              @click="submitForm(ruleFormRef)"
              :loading="btnLoading"
            >
              <span>登 录</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import cookie from 'js-cookie'
import { permissionApi } from '@/services/permission.ts'

import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'

import { useRouter } from 'vue-router'
const router = useRouter()

interface RuleForm {
  username: string
  password: string
  code: string
  uuid: string
}

const ruleFormRef = ref<FormInstance>()
const form = ref<RuleForm>({
  username: '',
  password: '',
  code: '',
  uuid: '',
})
const rules = reactive<FormRules<RuleForm>>({
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { min: 4, max: 4, message: '长度为4', trigger: 'blur' },
  ],
})
const captcha = ref('')
const btnLoading = ref(false)

const getCode = async () => {
  const response = await permissionApi.getVerifyCode()
  form.value.uuid = response.data.uuid
  captcha.value = response.data.captcha
}

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      btnLoading.value = true
      try {
        const response = await permissionApi.adminLogin(form.value)
        btnLoading.value = false
        if (response.code != 200) {
          ElMessage.error(response.message)
          return
        }
        localStorage.setItem('username', form.value.username)
        localStorage.setItem('password', form.value.password)
        cookie.set('token', response.data.token)
        sessionStorage.clear()
        router.push({
          path: '/news',
        })
      } catch {
        btnLoading.value = false
        getCode()
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}

onMounted(async () => {
  getCode()
  const username = localStorage.getItem('username')
  const password = localStorage.getItem('password')
  if (username) {
    form.value.username = username
  }
  if (password) {
    form.value.password = password
  }
})
</script>

<style scoped>
.login {
  height: 100%;
  width: 100%;
  background: #d3eafc;
  position: relative;
}
.login .form_warp {
  width: 700px;
  height: 480px;
  position: absolute;
  inset: 0;
  margin: auto;
  background: white;
  border-radius: 10px;
}
.login .form_warp .header {
  background: #1f8eea;
  text-align: center;
  color: white;
  padding: 20px;
  border-radius: 10px 10px 0 0;
}
.login .form_warp .header .title {
  font-size: 40px;
}
.login .form_warp .header .title2 {
  font-size: 20px;
  color: rgb(230, 225, 225);
}
.login .form_warp .form_content {
  padding: 15px;
}
.login .form_warp .form_content .code_content {
  width: 100%;
  display: flex;
  align-items: center;
  flex: 1;
}
.login .form_warp .form_content .code_content .code_input {
  width: 100%;
}
.login .form_warp .form_content .login-code {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 0 0 0 10px;
  user-select: none;
  width: 140px;
}
.login .form_warp .form_content .login-code-img {
  margin-top: 2px;
  width: 100px;
  height: 32px;
  border: 1px solid #dcdfe6;
  color: #333;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 5px;
  line-height: 38px;
  text-indent: 5px;
  text-align: center;
  cursor: pointer;
  transition: all ease 0.2s;
  border-radius: 4px;
}
.login .form_warp .form_content .login-code-img:hover {
  border-color: #c0c4cc;
  transition: all ease 0.2s;
}
.login .form_warp .form_content .login-submit {
  width: 100%;
}
</style>