vent-template/src/views/sys/login/LoginForm.vue

<template>
  <div class="login-box">
    <div class="center">
      <!-- <LoginFormTitle v-show="getShow" class="enter-x" /> -->
      <Form
        class="p-4 enter-x"
        :model="formData"
        :rules="getFormRules"
        ref="formRef"
        v-show="getShow"
        @keypress.enter="handleLogin"
        autocomplete="off"
      >
        <FormItem name="account" class="enter-x">
          <div class="input-box">
            <Input size="large" v-model:value="formData.account" :placeholder="t('sys.login.userName')" class="fix-auto-fill" />
          </div>
        </FormItem>
        <FormItem name="password" class="enter-x">
          <div class="input-box">
            <InputPassword size="large" visibilityToggle v-model:value="formData.password" :placeholder="t('sys.login.password')" />
          </div>
        </FormItem>
      </Form>
      <div class="btn-box">
        <div class="btn" @click="handleLogin"> {{ t('sys.login.loginButton') }}</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref, toRaw, unref, computed, onMounted } from 'vue';

  import { Checkbox, Form, Input, Row, Col, Button } from 'ant-design-vue';
  import { createFromIconfontCN } from '@ant-design/icons-vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';

  import { useUserStore } from '/@/store/modules/user';
  import { LoginStateEnum, useLoginState, useFormRules, useFormValid } from './useLogin';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { getCodeInfo } from '/@/api/sys/user';
  //import { onKeyStroke } from '@vueuse/core';

  const ACol = Col;
  const ARow = Row;
  const FormItem = Form.Item;
  const InputPassword = Input.Password;
  const IconFont = createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/font_2316098_umqusozousr.js',
  });
  const { t } = useI18n();
  const { notification, createErrorModal } = useMessage();
  const { prefixCls } = useDesign('login');
  const userStore = useUserStore();

  const { setLoginState, getLoginState } = useLoginState();
  const { getFormRules } = useFormRules();

  const formRef = ref();
  const thirdModalRef = ref();
  const loading = ref(false);
  const rememberMe = ref(false);

  const formData = reactive({
    account: '',
    password: '',
    inputCode: '',
  });
  const randCodeData = reactive({
    randCodeImage: '',
    requestCodeSuccess: false,
    checkKey: null,
  });

  const { validForm } = useFormValid(formRef);

  //onKeyStroke('Enter', handleLogin);

  const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN);

  async function handleLogin() {
    const data = await validForm();
    if (!data) return;
    try {
      loading.value = true;
      const { userInfo } = await userStore.login(
        toRaw({
          password: data.password,
          username: data.account,
          captcha: data.inputCode,
          checkKey: randCodeData.checkKey,
          mode: 'none', //不要默认的错误提示
        })
      );
      if (userInfo) {
        notification.success({
          message: t('sys.login.loginSuccessTitle'),
          description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.realname}`,
          duration: 3,
        });
      }
    } catch (error) {
      // notification.error({
      //   message: t('sys.api.errorTip'),
      //   description: error.message || t('sys.api.networkExceptionMsg'),
      //   duration: 3,
      // });
      loading.value = false;

      //update-begin-author:taoyan date:2022-5-3 for: issues/41 登录页面，当输入验证码错误时，验证码图片要刷新一下，而不是保持旧的验证码图片不变
      handleChangeCheckCode();
      //update-end-author:taoyan date:2022-5-3 for: issues/41 登录页面，当输入验证码错误时，验证码图片要刷新一下，而不是保持旧的验证码图片不变
    }
  }
  function handleChangeCheckCode() {
    formData.inputCode = '';
    //TODO 兼容mock和接口，暂时这样处理
    randCodeData.checkKey = 1629428467008; //new Date().getTime();
    getCodeInfo(randCodeData.checkKey).then((res) => {
      randCodeData.randCodeImage = res;
      randCodeData.requestCodeSuccess = true;
    });
  }

  /**
   * 第三方登录
   * @param type
   */
  function onThirdLogin(type) {
    thirdModalRef.value.onThirdLogin(type);
  }
  //初始化验证码
  onMounted(() => {
    handleChangeCheckCode();
  });
</script>
<style lang="less" scoped>
  @import '/@/design/theme.less';
  @ventSpace: zxm;

  @{theme-green} {
    .login-box {
      --image-input-normal: url('/@/assets/images/themify/green/vent/login/input-normal.png');
      --image-input-down: url('/@/assets/images/themify/green/vent/login/input-down.png');
      --image-btn-bg: url('/@/assets/images/themify/green/vent/login/btn-bg.png');
      --image-btn-bg-hover: url('/@/assets/images/themify/green/vent/login/btn-bg-hover.png');
    }
  }
  @{theme-deepblue} {
    .login-box {
      --image-input-normal: url('/@/assets/images/themify/deepblue/vent/login/input-normal.png');
      --image-input-down: url('/@/assets/images/themify/deepblue/vent/login/input-down.png');
      --image-btn-bg: url('/@/assets/images/themify/deepblue/vent/login/btn-bg.png');
      --image-btn-bg-hover: url('/@/assets/images/themify/deepblue/vent/login/btn-bg-hover.png');
    }
  }

  .login-box {
    --image-input-normal: url('/@/assets/images/vent/login/input-normal.png');
    --image-input-down: url('/@/assets/images/vent/login/input-down.png');
    --image-btn-bg: url('/@/assets/images/vent/login/btn-bg.png');
    --image-btn-bg-hover: url('/@/assets/images/vent/login/btn-bg-hover.png');

    position: relative;
    margin-top: 10px;
    :deep(.@{ventSpace}-form-item) {
      .@{ventSpace}-input-affix-wrapper-focused,
      .@{ventSpace}-form-item-control-input-content,
      .@{ventSpace}-input,
      .@{ventSpace}-input-password {
        color: #fff !important;
        background: #ffffff00 !important;
        border: none !important;
        box-shadow: none !important;
        font-size: 28px !important;
        &:focus,
        &:active,
        &:hover {
          color: #fff !important;
          border: none !important;
          box-shadow: none !important;
        }
      }
      .@{ventSpace}-input-affix-wrapper {
        padding: 0 !important;
      }
    }
    :deep(.@{ventSpace}-input-password) {
      input {
        padding: 4px 11px;
        padding-left: 20px !important;
        margin-left: 20px !important;
        text-align: center;
      }
    }
    :deep(.@{ventSpace}-form-item-control-input-content) {
      display: flex;
      justify-content: center;
    }
    .input-box {
      width: 983px;
      height: 96px;
      border: none !important;
      text-align: center;
      padding-top: 30px !important;

      padding-left: 20px !important;
      background-color: transparent !important;
      background-size: 100% auto;
      background: var(--image-input-normal) !important;
      &:focus,
      &:active {
        background: #ffffff00 !important;
        color: #fff !important;
        border: none !important;
        box-shadow: none !important;
      }
      &:focus {
        background: var(--image-input-down) !important;
      }
      :deep(.@{ventSpace}-input) {
        width: 100%;
        text-align: center;
        &:-webkit-autofill,
        &:-webkit-autofill:hover,
        &:-webkit-autofill:focus,
        &:-webkit-autofill:active {
          -webkit-transition-delay: 99999s;
          -webkit-transition:
            color 99999s ease-out,
            background-color 99999s ease-out;
          color: #fff;
        }
      }
    }

    .btn-box {
      width: 100%;
      position: relative;
      top: 40px;
      left: 0px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      .btn {
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28px;
        padding-top: 20px;
        width: 562px;
        height: 137px;
        background: var(--image-btn-bg);
        background: 100% auto;
        &:active {
          background: var(--image-btn-bg-hover);
        }
      }
    }
  }
</style>