smartai2dian0/src/modules/login/FormItem.vue

<template>
  <div class="form-title">
    {{ form_type ? $t('login.registerModel') : $t('login.loginModel') }}
  </div>
  <a-form
    ref="ref_form"
    :model="form"
    :rules="rules"
    :style="{ width: 'calc(100% - 40px)' }"
    layout="validate"
    @submit-success="handleSubmit"
  >
    <a-form-item field="username">
      <a-input v-model="form.username" :placeholder="$t('login.usernameTips')">
        <template #prefix> <icon-user /> </template>
      </a-input>
    </a-form-item>
    <a-form-item v-if="form_type" field="email">
      <a-input v-model="form.email" :placeholder="$t('login.emailTips')">
        <template #prefix> <icon-email /> </template>
      </a-input>
    </a-form-item>
    <a-form-item field="password">
      <a-input-password
        v-model="form.password"
        :placeholder="$t('login.passwordTips')"
        :defaultVisibility="true"
        allow-clear
      >
        <template #prefix>
          <icon-user />
        </template>
      </a-input-password>
    </a-form-item>
    <a-form-item>
      <a-button v-if="!form_type" class="submit-btn" type="primary" html-type="submit" :loading="loading"
        >{{ $t('login.loginBtn') }}
      </a-button>
      <a-button v-if="form_type" class="submit-btn" type="primary" html-type="submit" :loading="loading"
        >{{ $t('login.registerBtn') }}
      </a-button>
    </a-form-item>
  </a-form>
  <div v-if="!form_type" class="tips-register">
    {{ $t('login.noAccount') }} <a class="reg-link" href="#" @click="changeFormType">{{ $t('login.registerBtn') }}</a>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router';
import { useCurrentUserStore } from '../../base/store/use-current-user';
import { getLoginFormRules } from './auth';
import { register, asycData } from '../../apis/login';
import { useI18n } from 'vue-i18n';

const router = useRouter();

const { appContext } = getCurrentInstance();
const userStore = useCurrentUserStore();

const { t } = useI18n();

const $message = appContext.config.globalProperties.$message;
const ref_form = ref();
const form = reactive({
  username: '',
  email: '', // 非必填
  password: ''
});
const rules = getLoginFormRules(t);
/**
 * 表单类型
 * 0：登录
 * 1：注册
 */
const form_type = ref(0);
const loading = ref(false);

const handleSubmit = (data) => {
  loading.value = true;
  if (form_type.value) {
    // 注册
    toRegister();
  } else {
    // 登录
    userStore
      .toLogin({ username: data.username, password: data.password })
      .then(async (res) => {
        $message.success(res);

        // 登录成功后，获取路由列表
        // 阻塞路由的获取，等待用户信息获取成功
        await userStore.getRoutesList();
        // 登录成功后，获取用户权限
        await userStore.getUserInfo();

        router.push({ path: '/' });
      })
      .catch((err) => {
        $message.error(err);
      })
      .finally(() => {
        loading.value = false;
      });
  }
};
const toRegister = () => {
  register({ username: form.username, email: form.email, password: form.password })
    .then((res) => {
      if (res.code == 200) {
        $message.success(res.msg);
        form_type.value = 0;
        ref_form.value.resetFields();
        toAsycData(res.data.userFlag);
      } else {
        $message.error(res.msg);
      }
    })
    .finally(() => {
      loading.value = false;
    });
};
// 注册后同步数据
const toAsycData = async (userFlag) => {
  await asycData(userFlag);
};
const changeFormType = (e) => {
  e.preventDefault();
  ref_form.value.resetFields();
  form_type.value = 1;
};
</script>
<style scoped>
.form-title {
  line-height: 42px;
  font-size: 30px;
  font-weight: 500;
  color: var(--color-neutral-10);
}

.submit-btn {
  width: 100%;
  height: 54px;
  background-color: rgb(var(--arcoblue-6));
  color: var(--color-neutral-1);
  font-size: 20px;
  border-radius: 3px;
}

.submit-btn:hover {
  background-color: rgba(var(--arcoblue-6), 0.8);
  color: var(--color-neutral-1);
}

.tips-register {
  position: absolute;
  right: 20px;
  bottom: 100px;
  font-size: 20px;
  color: var(--color-neutral-4);
}

.reg-link {
  color: rgb(var(--arcoblue-6));
}

.arco-form-item-label-col {
  padding: 0px;
}

.arco-input-wrapper {
  height: 54px;
  background-color: var(--color-bg-1);
  border-color: var(--color-neutral-3);
}

:deep .arco-form-item-label-col > .arco-form-item-label {
  display: none;
}
</style>