From db2339e341668d14506c114ee88d6d143d4813b0 Mon Sep 17 00:00:00 2001
From: xuyonghao <898441624@qq.com>
Date: 星期三, 27 十一月 2024 15:33:16 +0800
Subject: [PATCH] 图标修改
---
src/views/login/components/login-form.vue | 320 ++++++++++++++++++++++++++++++++++++----------------
1 files changed, 220 insertions(+), 100 deletions(-)
diff --git a/src/views/login/components/login-form.vue b/src/views/login/components/login-form.vue
index 0b874fe..7f5afed 100644
--- a/src/views/login/components/login-form.vue
+++ b/src/views/login/components/login-form.vue
@@ -1,6 +1,6 @@
<template>
<div class="login-form-wrapper">
- <div class="login-form-title">{{ $t("login.form.title") }}</div>
+ <div class="login-form-title">{{ $t('login.form.title') }}</div>
<!-- <div class="login-form-sub-title">{{ $t('login.form.title') }}</div>-->
<div class="login-form-error-msg">{{ errorMessage }}</div>
<a-form
@@ -12,11 +12,11 @@
>
<a-form-item
field="email"
- :rules="[{ required: true, message: '璇疯緭鍏ラ偖绠�' }]"
+ :rules="[{ required: true, message: '璇疯緭鍏ョ敤鎴峰悕' }]"
:validate-trigger="['change', 'blur']"
hide-label
>
- <a-input v-model="userInfo.email" placeholder="璇疯緭鍏ラ偖绠�">
+ <a-input v-model="userInfo.email" placeholder="璇疯緭鍏ョ敤鎴峰悕">
<template #prefix>
<icon-user />
</template>
@@ -40,129 +40,249 @@
</a-form-item>
<a-space :size="16" direction="vertical">
<div class="login-form-password-actions">
- <a-checkbox
+ <!-- <a-checkbox
checked="rememberPassword"
:model-value="loginConfig.rememberPassword"
@change="setRememberPassword as any"
>
- {{ $t("login.form.rememberPassword") }}
- </a-checkbox>
- <a-link>{{ $t("login.form.forgetPassword") }}</a-link>
+ {{ $t('login.form.rememberPassword') }}
+ </a-checkbox> -->
+ <!-- <a-link>{{ $t("login.form.forgetPassword") }}</a-link> -->
</div>
<a-button type="primary" html-type="submit" long :loading="loading">
- {{ $t("login.form.login") }}
+ {{ $t('login.form.login') }}
</a-button>
+ <div class="container">
+ 娌℃湁璐︽埛锛�
+ <button class="register-button" @click="showRegisterModal = true">
+ <span>
+ 娉ㄥ唽
+ </span>
+ </button>
+ </div>
<!-- <a-button type="text" long class="login-form-register-btn">
{{ $t('login.form.register') }}
</a-button> -->
</a-space>
</a-form>
</div>
+ <a-modal
+ v-model:visible="showRegisterModal"
+ title="娉ㄥ唽璐︽埛"
+ @ok="handleRegister()"
+ @cancel="showRegisterModal = false"
+ >
+ <a-form
+ ref="registerForm"
+ :model="registerInfo"
+ class="register-form"
+ layout="vertical"
+ >
+ <a-form-item field="loginName" :rules="[{ required: true, message: '璇疯緭鍏ョ敤鎴峰悕!' }]" hide-label>
+ <a-input v-model="registerInfo.loginName" placeholder="璇疯緭鍏ョ敤鎴峰悕">
+ </a-input>
+ </a-form-item>
+
+ <a-form-item field="email" :rules="[{ required: true, message: '璇疯緭鍏ラ偖绠�!' }]" hide-label>
+ <a-input v-model="registerInfo.email" placeholder="璇疯緭鍏ラ偖绠�">
+ </a-input>
+ </a-form-item>
+
+ <a-form-item field="userName" :rules="[{ required: true, message: '璇疯緭鍏ュ鍚�!' }]" hide-label>
+ <a-input v-model="registerInfo.userName" placeholder="璇疯緭鍏ュ鍚�">
+ </a-input>
+ </a-form-item>
+
+ <a-form-item field="phoneNumber" :rules="[{ required: true, message: '璇疯緭鍏ョ數璇濆彿鐮�!' }]" hide-label>
+ <a-input v-model="registerInfo.phoneNumber" placeholder="璇疯緭鍏ョ數璇濆彿鐮�">
+ </a-input>
+ </a-form-item>
+
+ <a-form-item field="psw" :rules="[{ required: true, message: '璇疯緭鍏ュ瘑鐮�!' }]" hide-label>
+ <a-input-password v-model="registerInfo.psw" placeholder="璇疯緭鍏ュ瘑鐮�">
+ </a-input-password>
+ </a-form-item>
+
+ <a-space direction="vertical" size="large">
+ <a-select :style="{width:'320px'}" placeholder="閫夋嫨Tenant" v-model="registerInfo.selectedTenant" allow-create>
+ <a-option :value="registerInfo.loginName">{{ registerInfo.loginName }}</a-option>
+ <a-option>1</a-option>
+ <a-option>2</a-option>
+ </a-select>
+ </a-space>
+ </a-form>
+ </a-modal>
</template>
<script lang="ts" setup>
-import { reactive, ref } from "vue";
-import { useRouter } from "vue-router";
-import { Message } from "@arco-design/web-vue";
-import { ValidatedError } from "@arco-design/web-vue/es/form/interface";
-import { useI18n } from "vue-i18n";
-import { useStorage } from "@vueuse/core";
-import { useUserStore } from "@/store";
-import useLoading from "@/hooks/loading";
-import type { LoginData } from "@/api/user";
-import { rsaPsw } from "@/utils/ras";
+ import { reactive, ref } from 'vue';
+ import { useRouter } from 'vue-router';
+ import { Message } from '@arco-design/web-vue';
+ import { ValidatedError } from '@arco-design/web-vue/es/form/interface';
+ import { useI18n } from 'vue-i18n';
+ import { useStorage } from '@vueuse/core';
+ import { useUserStore, userModelState } from '@/store';
+ import useLoading from '@/hooks/loading';
+ import type { LoginData } from '@/api/user';
+ import { rsaPsw } from '@/utils/ras';
+ import axios from 'axios';
-const router = useRouter();
-const { t } = useI18n();
-const errorMessage = ref("");
-const { loading, setLoading } = useLoading();
-const userStore = useUserStore();
+ const router = useRouter();
+ const { t } = useI18n();
+ const errorMessage = ref('');
+ const { loading, setLoading } = useLoading();
+ const userStore = useUserStore();
+ const modelStore = userModelState();
-const loginConfig = useStorage("login-config", {
- rememberPassword: true,
- email: "", // 婕旂ず榛樿鍊�
- password: "" // demo default value
-});
-const userInfo = reactive({
- email: "", // 婕旂ず榛樿鍊�
- password: "" // demo default value
-});
+ const loginConfig = useStorage('login-config', {
+ rememberPassword: true,
+ email: '', // 婕旂ず榛樿鍊�
+ password: '', // demo default value
+ });
+ const userInfo = reactive({
+ email: '', // 婕旂ず榛樿鍊�
+ password: '', // demo default value
+ });
-const handleSubmit = async ({
- errors,
- values
- }: {
- errors: Record<string, ValidatedError> | undefined;
- values: Record<string, any>;
-}) => {
- if (loading.value) return;
- if (!errors) {
- setLoading(true);
- try {
- const rsaPassWord = rsaPsw(values.password) as string;
- console.log(values, "鐧诲綍淇℃伅");
- let goto = await userStore.login({
- email: values.email,
- password: rsaPassWord
- } as LoginData);
- const { redirect, ...othersQuery } = router.currentRoute.value.query;
- router.push({
- name: goto,
- query: {
- ...othersQuery
- }
- });
- Message.success(t("鐧诲綍鎴愬姛"));
- const { rememberPassword } = loginConfig.value;
- const { email, password } = values;
- // 瀹為檯鐢熶骇鐜闇�瑕佽繘琛屽姞瀵嗗瓨鍌ㄣ��
- // The actual production environment requires encrypted storage.
- loginConfig.value.email = rememberPassword ? email : "";
- loginConfig.value.password = rememberPassword ? password : "";
- } catch (err) {
- errorMessage.value = (err as Error).message;
- } finally {
- setLoading(false);
+ const handleSubmit = async ({
+ errors,
+ values,
+ }: {
+ errors: Record<string, ValidatedError> | undefined;
+ values: Record<string, any>;
+ }) => {
+ if (loading.value) return;
+ if (!errors) {
+ setLoading(true);
+ try {
+ const rsaPassWord = rsaPsw(values.password) as string;
+ console.log(values, '鐧诲綍淇℃伅');
+ let goto = await userStore.login({
+ email: values.email,
+ password: rsaPassWord,
+ } as LoginData);
+ const { redirect, ...othersQuery } = router.currentRoute.value.query;
+ router.push({
+ name: goto,
+ query: {
+ ...othersQuery,
+ },
+ });
+
+ const url = window.location.origin;
+ localStorage.setItem('httpUrl', url);
+ modelStore.getHrefUrl(url);
+ Message.success(t('鐧诲綍鎴愬姛'));
+ const { rememberPassword } = loginConfig.value;
+ const { email, password } = values;
+ // 瀹為檯鐢熶骇鐜闇�瑕佽繘琛屽姞瀵嗗瓨鍌ㄣ��
+ // The actual production environment requires encrypted storage.
+ loginConfig.value.email = rememberPassword ? email : '';
+ loginConfig.value.password = rememberPassword ? password : '';
+ } catch (err) {
+ errorMessage.value = (err as Error).message;
+ } finally {
+ setLoading(false);
+ }
}
- }
-};
-const setRememberPassword = (value: boolean) => {
- loginConfig.value.rememberPassword = value;
-};
+ };
+ const setRememberPassword = (value: boolean) => {
+ loginConfig.value.rememberPassword = value;
+ };
+
+ const showRegisterModal = ref(false);
+ const registerInfo = reactive({
+ createTime: '',
+ deptName: '',
+ email: '',
+ loginName: '',
+ nickName: '',
+ phoneNumber: '',
+ psw: '',
+ role: '',
+ status: '',
+ userId: '',
+ userName: '',
+ });
+
+ const handleRegister = async () => {
+ const user = {
+ createTime: registerInfo.createTime,
+ deptName: registerInfo.deptName,
+ email: registerInfo.email,
+ loginName: registerInfo.loginName,
+ nickName: registerInfo.nickName,
+ phoneNumber: registerInfo.phoneNumber,
+ psw: registerInfo.psw,
+ role: registerInfo.role,
+ status: registerInfo.status,
+ userId: registerInfo.userId,
+ userName: registerInfo.userName,
+ };
+ try {
+ const response = await axios.post('base/system/sign_in', { user });
+ console.log('娉ㄥ唽鎴愬姛锛�', response.data);
+ showRegisterModal.value = false;
+ } catch (error) {
+ console.error('娉ㄥ唽澶辫触锛�', error);
+ }
+ };
+
</script>
<style lang="less" scoped>
-.login-form {
-&-wrapper {
- width: 320px;
- }
+ .login-form {
+ &-wrapper {
+ width: 320px;
+ }
-&-title {
- color: var(--color-text-1);
- font-weight: 500;
- font-size: 24px;
- line-height: 32px;
- }
+ &-title {
+ color: var(--color-text-1);
+ font-weight: 500;
+ font-size: 24px;
+ line-height: 32px;
+ }
-&-sub-title {
- color: var(--color-text-3);
- font-size: 16px;
- line-height: 24px;
- }
+ &-sub-title {
+ color: var(--color-text-3);
+ font-size: 16px;
+ line-height: 24px;
+ }
-&-error-msg {
- height: 32px;
- color: rgb(var(--red-6));
- line-height: 32px;
- }
+ &-error-msg {
+ height: 32px;
+ color: rgb(var(--red-6));
+ line-height: 32px;
+ }
-&-password-actions {
- display: flex;
- justify-content: space-between;
- }
+ &-password-actions {
+ display: flex;
+ justify-content: space-between;
+ }
-&-register-btn {
- color: var(--color-text-3) !important;
- }
-}
+ &-register-btn {
+ color: var(--color-text-3) !important;
+ }
+ }
+ .container {
+ text-align: right;
+ padding: 1px;
+ }
+ .register-button {
+ display: inline-block;
+ padding: 5px 10px;
+ font-size: 13px;
+ color: #ffffff;
+ background-color: #3573f8;
+ border: none;
+ border-radius: 3px;
+ cursor: pointer;
+ transition: background-color 0.3s;
+ }
+ .register-button:hover {
+ background-color: #63a1ef;
+ }
+ .register-form {
+ width: 100%;
+ }
</style>
--
Gitblit v1.8.0