Browse Source

隐藏部分按钮

master
zhouhaibin 5 months ago
parent
commit
f4ae17da5c
  1. 226
      src/views/auth/login/LoginForm.vue
  2. 2
      src/views/auth/personal/center/ChangeEmail.vue
  3. 4
      src/views/auth/personal/center/Security.vue

226
src/views/auth/login/LoginForm.vue

@ -1,49 +1,37 @@
<template> <template>
<LoginFormTitle v-show="getShow" class="enter-x" /> <LoginFormTitle v-show="getShow" class="enter-x" />
<a-form <a-form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef" v-show="getShow"
class="p-4 enter-x" @keypress.enter="handleLoginClick()">
:model="formData"
:rules="getFormRules"
ref="formRef"
v-show="getShow"
@keypress.enter="handleLoginClick()"
>
<a-alert v-if="hasError" type="error" :message="errorMessage" :banner="true" /> <a-alert v-if="hasError" type="error" :message="errorMessage" :banner="true" />
<a-form-item name="username" class="enter-x"> <a-form-item name="username" class="enter-x">
<a-input <a-input size="large" v-model:value="formData.username" :placeholder="t('sys.login.userName')"
size="large" class="fix-auto-fill" />
v-model:value="formData.username"
:placeholder="t('sys.login.userName')"
class="fix-auto-fill"
/>
</a-form-item> </a-form-item>
<a-form-item name="password" class="enter-x"> <a-form-item name="password" class="enter-x">
<a-input-password <a-input-password size="large" visibilityToggle v-model:value="formData.password"
size="large" :placeholder="t('sys.login.password')" />
visibilityToggle
v-model:value="formData.password"
:placeholder="t('sys.login.password')"
/>
</a-form-item> </a-form-item>
<a-row class="enter-x"> <a-row class="enter-x">
<a-col :span="12"> <!-- 记住我 -->
<!-- <a-col :span="12">
<a-form-item> <a-form-item>
<!-- 记住我 -->
<a-checkbox v-model:checked="rememberMe" size="small"> <a-checkbox v-model:checked="rememberMe" size="small">
{{ t('sys.login.rememberMe') }} {{ t('sys.login.rememberMe') }}
</a-checkbox> </a-checkbox>
</a-form-item> </a-form-item>
</a-col> </a-col> -->
<a-col :span="12"> <!-- 忘记密码 -->
<!-- <a-col :span="12">
<a-form-item :style="{ 'text-align': 'right' }"> <a-form-item :style="{ 'text-align': 'right' }">
<!-- 忘记密码 -->
<a-button type="link" size="small" @click="setLoginState(LoginStateEnum.RESET_PASSWORD)"> <a-button type="link" size="small" @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">
{{ t('sys.login.forgetPassword') }} {{ t('sys.login.forgetPassword') }}
</a-button> </a-button>
</a-form-item> </a-form-item>
</a-col> </a-col> -->
</a-row> </a-row>
<a-form-item class="enter-x"> <a-form-item class="enter-x">
@ -68,7 +56,7 @@
</a-button> </a-button>
</a-col> --> </a-col> -->
</a-row> </a-row>
<!-- <!--
<a-divider class="enter-x">{{ t('sys.login.otherSignIn') }}</a-divider> <a-divider class="enter-x">{{ t('sys.login.otherSignIn') }}</a-divider>
<div class="flex justify-evenly enter-x" :class="`${prefixCls}-sign-in-way`"> <div class="flex justify-evenly enter-x" :class="`${prefixCls}-sign-in-way`">
@ -83,108 +71,108 @@
</a-form> </a-form>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { reactive, ref, unref, computed } from 'vue'; import { reactive, ref, unref, computed } from 'vue';
import { import {
GithubFilled, GithubFilled,
WechatFilled, WechatFilled,
AlipayCircleFilled, AlipayCircleFilled,
GoogleCircleFilled, GoogleCircleFilled,
TwitterCircleFilled, TwitterCircleFilled,
} from '@ant-design/icons-vue'; } from '@ant-design/icons-vue';
import LoginFormTitle from './LoginFormTitle.vue'; import LoginFormTitle from './LoginFormTitle.vue';
import { useI18n } from '@/hooks/web/useI18n'; import { useI18n } from '@/hooks/web/useI18n';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
import { useUserStore } from '@/store/modules/user'; import { useUserStore } from '@/store/modules/user';
import { LoginStateEnum, useLoginState, useFormRules, useFormValid } from './useLogin'; import { LoginStateEnum, useLoginState, useFormRules, useFormValid } from './useLogin';
import { useDesign } from '@/hooks/web/useDesign'; import { useDesign } from '@/hooks/web/useDesign';
import { useModal } from '@/components/Modal'; import { useModal } from '@/components/Modal';
import { SlideVerifyModal } from '@/components/Verify'; import { SlideVerifyModal } from '@/components/Verify';
import { getByKey } from '@/api/sys/sysConfig'; import { getByKey } from '@/api/sys/sysConfig';
import { HashingFactory } from '@/utils/cipher'; import { HashingFactory } from '@/utils/cipher';
const { t } = useI18n(); const { t } = useI18n();
const { notification } = useMessage(); const { notification } = useMessage();
const { prefixCls } = useDesign('login'); const { prefixCls } = useDesign('login');
const userStore = useUserStore(); const userStore = useUserStore();
const { setLoginState, getLoginState } = useLoginState(); const { setLoginState, getLoginState } = useLoginState();
const { getFormRules } = useFormRules(); const { getFormRules } = useFormRules();
const formRef = ref(); const formRef = ref();
const loading = ref<boolean>(false); const loading = ref<boolean>(false);
const hasError = ref<boolean>(false); const hasError = ref<boolean>(false);
const errorMessage = ref(); const errorMessage = ref();
const rememberMe = ref<boolean>(false); const rememberMe = ref<boolean>(false);
// //
let loginVerificationCode = true; let loginVerificationCode = true;
getByKey('loginVerificationCode').then((res) => { getByKey('loginVerificationCode').then((res) => {
if (res && res.value) { if (res && res.value) {
loginVerificationCode = res.value === 'true'; loginVerificationCode = res.value === 'true';
} }
}); });
const formData = reactive({ const formData = reactive({
username: '', username: '',
password: '', password: '',
}); });
const { validForm } = useFormValid(formRef); const { validForm } = useFormValid(formRef);
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN); const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN);
const [registerModal, { openModal: openVerifyModal }] = useModal(); const [registerModal, { openModal: openVerifyModal }] = useModal();
function handleVerifySuccess(captchaVerification) { function handleVerifySuccess(captchaVerification) {
handleLogin(captchaVerification); handleLogin(captchaVerification);
} }
/** /**
* 点击登录按钮 * 点击登录按钮
*/ */
function handleLoginClick() { function handleLoginClick() {
if (loginVerificationCode) { if (loginVerificationCode) {
// //
openVerifyModal(); openVerifyModal();
} else { } else {
handleLogin(null); handleLogin(null);
}
} }
}
async function handleLogin(captchaVerification: Nullable<string>) {
const data = await validForm(); async function handleLogin(captchaVerification: Nullable<string>) {
if (!data) return; const data = await validForm();
try { if (!data) return;
loading.value = true; try {
const userInfo = await userStore.login({ loading.value = true;
password: HashingFactory.createMD5Hashing().hash(data.password.trim()), const userInfo = await userStore.login({
username: data.username.trim(), password: HashingFactory.createMD5Hashing().hash(data.password.trim()),
rememberMe: rememberMe.value, username: data.username.trim(),
captchaVerification: captchaVerification!, rememberMe: rememberMe.value,
mode: 'none', captchaVerification: captchaVerification!,
mode: 'none',
});
if (userInfo) {
hasError.value = false;
notification.success({
message: t('sys.login.loginSuccessTitle'),
description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.nickname}`,
duration: 3,
}); });
if (userInfo) {
hasError.value = false;
notification.success({
message: t('sys.login.loginSuccessTitle'),
description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.nickname}`,
duration: 3,
});
}
} catch (error: any) {
errorMessage.value = error.response?.data?.errorMessage;
if (errorMessage.value) {
hasError.value = true;
}
} finally {
loading.value = false;
} }
} catch (error: any) {
errorMessage.value = error.response?.data?.errorMessage;
if (errorMessage.value) {
hasError.value = true;
}
} finally {
loading.value = false;
} }
}
</script> </script>
<style> <style>
.ant-alert { .ant-alert {
margin-bottom: 10px; margin-bottom: 10px;
} }
</style> </style>

2
src/views/auth/personal/center/ChangeEmail.vue

@ -39,7 +39,7 @@
changeOkLoading(true); changeOkLoading(true);
const values = await validate(); const values = await validate();
await applicationBindingEmail(values.email); await applicationBindingEmail(values.email);
createMessage.success('邮件发送成功,请前往邮箱激活邮箱'); // createMessage.success('');
await userStore.refreshCurrentUserAction(); await userStore.refreshCurrentUserAction();
closeModal(); closeModal();
} catch (e) { } catch (e) {

4
src/views/auth/personal/center/Security.vue

@ -32,11 +32,11 @@
<Icon :size="26" icon="ant-design:mail-outlined" /> <Icon :size="26" icon="ant-design:mail-outlined" />
</template> </template>
</a-list-item-meta> </a-list-item-meta>
<template #actions> <!-- <template #actions>
<a-button type="link" @click="openChangeEmailModal(true, {})"> <a-button type="link" @click="openChangeEmailModal(true, {})">
{{ data.email ? '修改' : '绑定' }} {{ data.email ? '修改' : '绑定' }}
</a-button> </a-button>
</template> </template> -->
</a-list-item> </a-list-item>
</a-list> </a-list>

Loading…
Cancel
Save