From ce5e84197b43dec8c01717b116cb77535ad3c91e Mon Sep 17 00:00:00 2001
From: zhangwei <1504152376@qq.com>
Date: 星期三, 25 六月 2025 16:21:42 +0800
Subject: [PATCH] '登录注册'
---
src/views/login/index.vue | 244 ++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 223 insertions(+), 21 deletions(-)
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 1172b01..15a2618 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -3,7 +3,15 @@
import { useRouter } from "vue-router";
import { message } from "@/utils/message";
import { loginRules } from "./utils/rule";
-import { ref, reactive, toRaw } from "vue";
+import {
+ reactive,
+ computed,
+ ref,
+ onMounted,
+ defineAsyncComponent,
+ onUnmounted,
+ watch
+} from "vue";
import { debounce } from "@pureadmin/utils";
import { useNav } from "@/layout/hooks/useNav";
import { useEventListener } from "@vueuse/core";
@@ -12,13 +20,17 @@
import { useUserStoreHook } from "@/store/modules/user";
import { initRouter, getTopMenu } from "@/router/utils";
import { bg, avatar, logo1 } from "./utils/static";
-import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+// import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
+import { useRoute } from "vue-router";
-import dayIcon from "@/assets/svg/day.svg?component";
-import darkIcon from "@/assets/svg/dark.svg?component";
+const route = useRoute();
+
+// import dayIcon from "@/assets/svg/day.svg?component";
+// import darkIcon from "@/assets/svg/dark.svg?component";
import Lock from "~icons/ri/lock-fill";
import User from "~icons/ri/user-3-fill";
+import { captcha, phoneNumberCode, exRole } from "@/api/register/index.ts";
defineOptions({
name: "Login"
@@ -35,12 +47,114 @@
const { dataTheme, overallStyle, dataThemeChange } = useDataThemeChange();
dataThemeChange(overallStyle.value);
const { title } = useNav();
+// 鑾峰彇楠岃瘉鐮�
+const getCaptcha = async () => {
+ // if (!state.captchaEnabled) return;
-const ruleForm = reactive({
- username: "admin",
- password: "admin123"
+ state.ruleForm.code = "";
+ const res = await captcha();
+ console.log(res);
+
+ state.captchaImage = "data:text/html;base64," + res.result?.img;
+ state.expirySeconds = res.result?.expirySeconds;
+ state.ruleForm.codeId = res.result?.id;
+};
+const state = reactive({
+ isShowPassword: false,
+ ruleForm: {
+ account: "",
+ nickName: "",
+ phone: "",
+ phoneVCode: "",
+ // tenantId: props.tenantInfo.id,
+ code: "",
+ codeId: 0,
+ email: "",
+ exRoleCode: ""
+ },
+ rules: {
+ code: [
+ {
+ required: true,
+ message: "璇疯緭鍏ユ墜鏈洪獙璇佺爜",
+ trigger: "blur"
+ }
+ ],
+ phone: [
+ {
+ required: true,
+ message: "璇疯緭鍏ユ偍鐨勬墜鏈哄彿鐮�",
+ trigger: "blur"
+ }
+ ],
+ exRoleCode: [
+ {
+ required: true,
+ message: "璇烽�夋嫨瑙掕壊",
+ trigger: "blur"
+ }
+ ]
+ // code: [{ required: true, message: t('message.account.placeholder4'), trigger: 'blur' }],
+ },
+ loading: {
+ signIn: false
+ },
+ captchaImage: "",
+ rotateVerifyVisible: false,
+ // rotateVerifyImg: verifyImg,
+ // rotateVerifyImg: themeConfig.value.logoUrl,
+ secondVerEnabled: false,
+ // captchaEnabled: false,
+ isPassRotate: false,
+ capsLockVisible: false,
+ hideTenantForLogin: false,
+ expirySeconds: 60, // 楠岃瘉鐮佽繃鏈熸椂闂�
+ phoneSeconds: 0, // 鎵嬫満楠岃瘉鐮佸�掕鏃�
+ roleList: []
});
+// 楠岃瘉鐮佽繃鏈熻鏃跺櫒
+let timer: any = null;
+let phonetimer: any = null;
+// 椤甸潰鍒濆鍖�
+onMounted(async () => {
+ // 鑻RL甯︽湁Token鍙傛暟锛堢涓夋柟鐧诲綍锛�
+ const accessToken = route.query.token;
+ // if (accessToken) await saveTokenAndInitRoutes(accessToken);
+ // watch(
+ // () => themeConfig.value.isLoaded,
+ // isLoaded => {
+ // if (isLoaded) {
+ // 鑾峰彇鐧诲綍閰嶇疆
+ // state.hideTenantForLogin = themeConfig.value.hideTenantForLogin ?? true;
+ // state.secondVerEnabled = themeConfig.value.secondVer ?? true;
+ // state.captchaEnabled = themeConfig.value.captcha ?? true;
+
+ // 鑾峰彇楠岃瘉鐮�
+ getCaptcha();
+ exRole().then(res => {
+ state.roleList = res.result;
+ });
+ // 娉ㄥ唽楠岃瘉鐮佽繃鏈熻鏃跺櫒
+ // if (state.captchaEnabled) {
+ timer = setInterval(() => {
+ if (state.expirySeconds > 0) state.expirySeconds -= 1;
+ }, 1000);
+
+ // }
+ // }
+ // },
+ // { immediate: true }
+ // );
+});
+// 椤甸潰鍗歌浇
+onUnmounted(() => {
+ // 閿�姣侀獙璇佺爜杩囨湡璁℃椂鍣�
+ clearInterval(timer);
+ timer = null;
+ clearInterval(phonetimer);
+ phonetimer = null;
+});
const onLogin = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
await formEl.validate(valid => {
@@ -48,30 +162,46 @@
loading.value = true;
useUserStoreHook()
.loginByUsername({
- username: ruleForm.username,
- password: ruleForm.password
+ phone: state.ruleForm.phone,
+ code: state.ruleForm.phoneVCode,
+ exRuleCode: state.ruleForm.exRoleCode
})
.then(res => {
- if (res.success) {
+ if (res.code == 200) {
// 鑾峰彇鍚庣璺敱
return initRouter().then(() => {
disabled.value = true;
router
- .push(getTopMenu(true).path)
+ .push(getTopMenu(true)?.path)
.then(() => {
message("鐧诲綍鎴愬姛", { type: "success" });
})
.finally(() => (disabled.value = false));
});
} else {
- message("鐧诲綍澶辫触", { type: "error" });
+ message(res?.message || "鐧诲綍澶辫触", { type: "error" });
}
})
.finally(() => (loading.value = false));
}
});
};
-
+const sendValidationCode = async () => {
+ if (!state.ruleForm.phone) {
+ return message("璇峰厛杈撳叆鎵嬫満鍙�", { type: "warning" });
+ }
+ if (!state.ruleForm.code) {
+ return message("璇峰厛杈撳叆楠岃瘉鐮�", { type: "warning" });
+ }
+ const res = await phoneNumberCode(state.ruleForm);
+ if (res?.code != 200) {
+ return message(res?.message, { type: "warning" });
+ }
+ state.phoneSeconds = 60;
+ phonetimer = setInterval(() => {
+ if (state.phoneSeconds > 0) state.phoneSeconds -= 1;
+ }, 1000);
+};
const immediateDebounce: any = debounce(
formRef => onLogin(formRef),
1000,
@@ -117,32 +247,76 @@
<el-form
ref="ruleFormRef"
- :model="ruleForm"
+ :model="state.ruleForm"
:rules="loginRules"
size="large"
>
+ <Motion :delay="150">
+ <el-form-item prop="exRoleCode">
+ <el-radio-group v-model="state.ruleForm.exRoleCode">
+ <el-radio
+ v-for="item in state.roleList"
+ :key="item.id"
+ :value="item.code"
+ >{{ item.name }}</el-radio
+ >
+ </el-radio-group>
+ </el-form-item>
+ </Motion>
<Motion :delay="100">
<el-form-item
:rules="[
{
required: true,
- message: '璇疯緭鍏ヨ处鍙�',
+ message: '璇疯緭鍏ユ墜鏈哄彿',
trigger: 'blur'
}
]"
- prop="username"
+ prop="phone"
>
<el-input
- v-model="ruleForm.username"
+ v-model="state.ruleForm.phone"
clearable
- placeholder="璐﹀彿"
- :prefix-icon="useRenderIcon(User)"
+ placeholder="鎵嬫満鍙�"
/>
</el-form-item>
</Motion>
<Motion :delay="150">
- <el-form-item prop="password">
+ <el-form-item class="login-animation3" prop="code">
+ <el-col :span="15">
+ <el-input
+ ref="codeRef"
+ v-model="state.ruleForm.code"
+ text
+ maxlength="4"
+ placeholder="璇疯緭鍏ラ獙璇佺爜"
+ clearable
+ autocomplete="off"
+ />
+ </el-col>
+ <el-col :span="1" />
+ <el-col :span="8">
+ <div
+ :class="[
+ state.expirySeconds > 0
+ ? 'login-content-code'
+ : 'login-content-code-expired'
+ ]"
+ @click="getCaptcha"
+ >
+ <img
+ class="login-content-code-img"
+ width="130px"
+ height="38px"
+ :src="state.captchaImage"
+ style="cursor: pointer"
+ />
+ </div>
+ </el-col>
+ </el-form-item>
+
+ <!-- <el-form-item prop="password">
<el-input
v-model="ruleForm.password"
clearable
@@ -150,9 +324,34 @@
placeholder="瀵嗙爜"
:prefix-icon="useRenderIcon(Lock)"
/>
+ </el-form-item> -->
+ </Motion>
+ <Motion :delay="150">
+ <el-form-item prop="phoneVCode">
+ <el-input
+ v-model.number="state.ruleForm.phoneVCode"
+ class="form-input"
+ placeholder="璇疯緭鍏ラ獙璇佺爜"
+ >
+ <template #suffix>
+ <span v-if="state.phoneSeconds == 0" id="suffix-span">
+ <span
+ id="suffix-span-2"
+ ref="spanRef"
+ @click="sendValidationCode(state.ruleForm.phone)"
+ >
+ 鑾峰彇楠岃瘉鐮�
+ </span>
+ </span>
+ <span v-else id="suffix-span">
+ <span id="suffix-span-2" ref="spanRef">
+ {{ state.phoneSeconds }}绉掑悗閲嶆柊鑾峰彇
+ </span>
+ </span>
+ </template>
+ </el-input>
</el-form-item>
</Motion>
-
<Motion :delay="250">
<el-button
class="w-full mt-4!"
@@ -180,4 +379,7 @@
:deep(.el-input-group__append, .el-input-group__prepend) {
padding: 0;
}
+#suffix-span {
+ cursor: pointer;
+}
</style>
--
Gitblit v1.9.1