gas-injection/src/views/sys/login/LoginFormDataCenter.vue

<template>
  <div class="login-box">
    <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">
          <div class="img-user" />
          <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">
          <div class="img-pass" />
          <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>
</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;

.login-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 20px;
  margin-top: 8%;
  margin-left: 28%;
  .input-box {
    display: flex;
    flex-direction: row;
    width: 100%;
    background: #165691;
    border: 1px solid #1d7fbd;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: all 0.3s;
    input {
      background: #165691 !important;
      border: none;
      color: #fff;
    }
    .img-user {
      width: 24px;
      height: 24px;
      margin: 0 12px;
      background: url('@/assets/images/vent/loginDataCenter/user.svg') no-repeat center;
      background-size: contain;
      align-self: center;
    }
    .img-pass {
      width: 24px;
      height: 24px;
      margin: 0 12px;
      background: url('@/assets/images/vent/loginDataCenter/password.svg') no-repeat center;
      background-size: contain;
      align-self: center;
    }
    :deep(.zxm-input .zxm-input-lg) {
      background: #165691 !important;
      border: none;
      color: #fff;
    }
    :deep(.zxm-input-affix-wrapper > input.zxm-input) {
      background: #165691 !important;
      border: none;
      color: #fff;
    }
    :deep(.zxm-form-item-has-error :not(.zxm-input-disabled):not(.zxm-input-borderless).zxm-input) {
      background: #165691 !important;
    }
    :deep(.zxm-input-affix-wrapper) {
      background: #165691 !important;
      border: none;
    }
  }
  .btn-box {
    width: 276px;
    height: 40px;
    top: 40px;
    left: 30%;
    cursor: pointer;
    background: #2390fd;
    border-radius: 4px;
    .btn {
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      height: 40px;
    }
  }
}
</style>