overseas-jsm-mall-front/src/pages/login/index.vue

<template>
  <div class="login-box">
    <div class="form-content">
      <div class="logo-box">
        <Logo />
      </div>
      <a-form
        ref="formRef"
        name="form"
        :model="mainForm"
        :label-col="{ style: {width: '100px'}}"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        @finish="onFinish"
      >
        <a-form-item
          label="账号"
          name="account"
          :rules="[{ required: true, message: '账号不能为空' }]"
        >
          <a-input
            v-model:value="mainForm.account"
            placeholder="请输入账号"
            allowClear
          />
        </a-form-item>
        <a-form-item
          label="密码"
          name="password"
          :rules="[{ required: true, message: '密码不能为空' }]"
        >
          <a-input-password
            v-model:value="mainForm.password"
            placeholder="请输入密码"
            allowClear
          />
        </a-form-item>
        <a-form-item
          label="验证码"
          name="codeValue"
          :rules="[
            { required: true, message: '验证码不能为空' }
          ]"
        >
          <a-input-group compact>
            <a-input
              v-model:value="mainForm.codeValue"
              placeholder="请输入验证码"
              allowClear
              style="width: calc(100% - 128px)"
            />
            <img :src="mainForm.pic" @click="reFetchCode" :style="{width: '128px', height: '32px', cursor: 'pointer'}" />
          </a-input-group>
        </a-form-item>
        <a-form-item label=" " :colon="false">
          <a-button
            type="primary"
            html-type="submit"
            size="large"
            block
            :disabled="mainForm.disabled"
          >登 录</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup lang="js">
import Logo from '@/components/logo/index.vue';
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
import { getCode, userLogin } from '@/api/user';
import { useUserStore } from '@/store/user';
import { setToken } from '@/utils/token';

const router = useRouter();
const userStore = useUserStore();
const formRef = ref(null)
const mainForm = reactive({
  account: '',
  password: '',
  code: '',
  pic: '',
  codeValue: '',
  disabled: false
})

const fetchCode = async () => {
  mainForm.disabled = true
  getCode().then(res => {
    mainForm.code = res.data?.code || '';
    mainForm.pic = 'data:image/jpeg;base64,' + res.data?.pic;
  }).finally(() => {
    mainForm.disabled = false
  })
}

const fetchLogin = async () => {
  mainForm.disabled = true
  const params = {
    userName: mainForm.account,
    password: mainForm.password,
    code: mainForm.code,
    codeValue: mainForm.codeValue,
    clientType: '1'
  }
  userLogin(params).then(res => {
    setToken(res.data.token);
    message.success('登录成功');
    userStore.updateUserInfo(res.data);
    router.back();
  }).catch(() => {
    fetchCode();
  }).finally(() => {
    mainForm.disabled = false
  })
}

const onFinish = () => {
  fetchLogin();
}

const reFetchCode = () => {
  if (mainForm.disabled) return;
  fetchCode();
}

onMounted(() => {
  fetchCode()
})

</script>

<style lang="less" scoped>
.login-box {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f2f2;
  .form-content {
    width: 520px;
    padding: 24px;
    background: #fff;
    border-radius: 10px;
    .logo-box {
      width: 100px;
      height: 100px;
      margin: 0 auto;
      margin-bottom: 20px;
    }
  }
}
</style>