iot-ui-plus/src/views/login/index.vue

<template>
  <div class="loginContainer">
    <div class="loginCard">
      <el-form ref="loginForm" class="loginForm" :model="loginData" :rules="loginRules">
        <div class="title flex items-center">
          <span class="flex-1 text-center">{{ $t('login.title') }}</span>
          <lang-select />
        </div>

        <el-form-item prop="username">
          <div class="icon">
            <i class="iconfont icon-user"></i>
          </div>
          <el-input
            class="flex-1"
            ref="username"
            name="username"
            size="large"
            v-model="loginData.username"
            :placeholder="$t('login.username')"
          />
        </el-form-item>

        <el-tooltip content="Caps lock is On" placement="right" :disabled="isCapslock === false">
          <el-form-item prop="password">
            <div class="icon">
              <i class="iconfont icon-lock"></i>
            </div>
            <el-input
              class="flex-1"
              name="password"
              type="password"
              size="large"
              v-model="loginData.password"
              :placeholder="$t('login.password')"
              show-password
              @keyup="checkCapslock"
            />
          </el-form-item>
        </el-tooltip>

        <!-- <el-form-item prop="verifyCode">
          <div class="icon">
            <i class="iconfont icon-safe-code"></i>
          </div>
          <el-input
            class="flex-1"
            name="verifyCode"
            size="large"
            v-model="loginData.verifyCode"
            :placeholder="$t('login.verifyCode')"
            auto-complete="off"
            maxlength="6"
            @keyup.enter="loginClick"
          />
          <div class="captcha">
            <img :src="captchaBase64" @click="getCaptcha" />
          </div>
        </el-form-item> -->

        <el-button class="width-100" size="default" type="primary" :loading="loading" @click.prevent="loginClick">
          {{ $t('login.login') }}
        </el-button>
      </el-form>
    </div>
    <div class="copyright">Copyright © 2023 Luenmei {{ $t('login.copyright') }}</div>
  </div>
</template>

<script lang="ts" setup>
import router from '@/router';
import LangSelect from '@/components/LangSelect/index.vue';
import { useUserStore } from '@/store/modules/user';
import { LocationQuery, LocationQueryValue, useRoute } from 'vue-router';
import { getCaptchaApi } from '@/api/auth';
import { LoginData } from '@/api/auth/types';

const userStore = useUserStore();
const route = useRoute();
const loginForm = ref(ElForm);
const loginData = ref<LoginData>({
  username: '',
  password: ''
});

const loginRules = {
  username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
  password: [{ required: true, trigger: 'blur', validator: validatePassword }],
  verifyCode: [{ required: true, trigger: 'blur', message: '请输入验证码' }]
};

const loading = ref(false);
const captchaBase64 = ref();

function validatePassword(rule: any, value: any, callback: any) {
  if (value.length < 6) {
    callback(new Error('密码不能少于6位'));
  } else {
    callback();
  }
}

// 是否大写锁定
const isCapslock = ref(false);

function checkCapslock(e: any) {
  const { key } = e;
  isCapslock.value = key && key.length === 1 && key >= 'A' && key <= 'Z';
}

onMounted(() => {
  // getCaptcha();
});

/**
 * 获取验证码
 */
function getCaptcha() {
  getCaptchaApi().then(({ data }) => {
    const { verifyCodeBase64, verifyCodeKey } = data;
    loginData.value.verifyCodeKey = verifyCodeKey;
    captchaBase64.value = verifyCodeBase64;
  });
}

//登录
function loginClick() {
  loginForm.value.validate((valid: boolean) => {
    if (valid) {
      loading.value = true;
      userStore
        .login(loginData.value)
        .then(() => {
          const query: LocationQuery = route.query;
          const redirect = (query.redirect as LocationQueryValue) ?? '/';
          const otherQueryParams = Object.keys(query).reduce((account: any, current: string) => {
            if (current !== 'redirect') {
              account[current] = query[current];
            }
            return account;
          }, {});
          router.push({ path: redirect, query: otherQueryParams });
        })
        .finally(() => {
          loading.value = false;
          // getCaptcha();
        });
    }
  });
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>