wms-antdvue/.svn/pristine/d3/d33a7c9a9d9d9bd2a84caf4009eefb456d200b27.svn-base

<template>
  <a-form
    ref="formRef"
    :show-label="false"
    :show-require-mark="false"
    size="large"
    :model="formInline"
    :rules="rules"
  >
    <a-form-item name="username">
      <a-input v-model:value="formInline.username" placeholder="请输入登录账号">
        <template #prefix>
            <UserOutlined  style="color: #808695; font-size: 18px"/>
        </template>
      </a-input>

    </a-form-item>
    <a-form-item name="password">
      <a-input-password
        v-model:value="formInline.password"
        show-password
        placeholder="请输入登录密码"
        @keyup.enter="handleSubmit"
      >
        <template #prefix>
            <LockOutlined  style="color: #808695; font-size: 18px"/>
        </template>
      </a-input-password>
    </a-form-item>
    <a-form-item name="code">
      <div style="display: flex">
        <a-input
          @keyup.enter="handleSubmit"
          v-model:value.trim="formInline.code"
          placeholder="验证码"
        >
          <template #prefix>
              <SafetyCertificateOutlined  style="color: #808695; font-size: 18px"/>
          </template>
        </a-input>
        <img style="width: 108px;height:40px;border-radius: 4px;margin-left:8px;border:1px solid #d9d9d9;cursor: pointer" @click="getCaptcha" v-if="captchaImg" :src="captchaImg">
      </div>
    </a-form-item>

    <div class="flex items-center justify-between forget">
      <div class="flex-initial">
        <a-checkbox v-model:value:checked="autoLogin">记住密码</a-checkbox>
      </div>
    </div>

    <a-form-item :show-label="false">
      <a-button
        class="w-full"
        type="primary"
        @click="handleSubmit"
        size="large"
        :loading="loading"
      >
        登录
      </a-button>
    </a-form-item>
  </a-form>
  <div class="flex items-center justify-between">
    <div class="flex items-center">
      <span>其他登录方式</span>
      <GithubOutlined  style="color: #1890ff; font-size: 20px;cursor: pointer;margin:0 10px 0 10px;"/>
      <AlipayCircleOutlined  style="color: #1890ff; font-size: 20px;cursor: pointer;"/>
    </div>
    <div style="cursor: pointer;" @click="goRegister">注册账号</div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useUserStore } from '@/store/modules/user';
  import { message } from 'ant-design-vue';
  import { ResultEnum } from '@/enums/httpEnum';
  import {getInfoCaptcha} from '@/api/system/user';
  import { PageEnum } from '@/enums/pageEnum';
  import {
  UserOutlined,
  LockOutlined,
  SafetyCertificateOutlined,
  GithubOutlined,
  AlipayCircleOutlined
} from '@ant-design/icons-vue';
  const captchaImg=ref('')
  // 动态加载滑块验证码组件

  interface FormState {
    username: string;
    password: string;
    code:string;
    key:string;
  }

  const emit = defineEmits(['backLogin']);
  const formRef = ref();

  const loading = ref(false);
  const autoLogin = ref(true);
  const LOGIN_NAME = PageEnum.BASE_LOGIN_NAME;

  const formInline = reactive({
    username: '',
    password: '',
    code:'',
    key:''
  });

  const rules = {
    username: { required: true, message: '请输入登录账号', trigger: 'blur' },
    password: { required: true, message: '请输入密码', trigger: 'blur' },
    code: { required: true, message: '请输入验证码', trigger: 'blur' }
  };
  const userStore = useUserStore();

  const router = useRouter();
  const route = useRoute();

  const handleSubmit = () => {
    if (!formRef.value) return;
    formRef.value
      .validate()
      .then(async () => {
        loading.value = true;

        const params: FormState = {
          username:formInline.username,
          password:formInline.password,
          code:formInline.code,
          key:formInline.key
        };

        try {
          const { code, msg } = await userStore.login(params);
          if (code == ResultEnum.SUCCESS) {
            const toPath = decodeURIComponent((route.query?.redirect || '/') as string);
            message.success('登录成功，即将进入系统');
            if (route.name === LOGIN_NAME) {
              router.replace('/');
            } else router.replace(toPath);
          } else {
            getCaptcha()
            message.error(msg || '登录失败');
          }
        } finally {
          loading.value = false;
        }

    }).catch((error) => {
        console.log('error', error);
        message.error('请填写完整信息');
      });
  };

  const getCaptcha=async()=>{
    let {key,captcha}= await getInfoCaptcha();
    formInline.key=key
    captchaImg.value=captcha
  }
  const goRegister =()=>{
    emit('backLogin',false);
  }

  getCaptcha()

</script>

<style lang="less" scoped>
  .forget {
    margin-bottom: 16px;
    margin-top: -10px;
  }
</style>
<style lang="less">
input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
    background-color: transparent !important;
    background-image: none;
    transition: background-color 50000s ease-in-out 0s;
    
    }
</style>