From 35cf8d289a09a6a4a34cf3d73fb41d84969ae4ee Mon Sep 17 00:00:00 2001
From: zhangwei <1504152376@qq.com>
Date: 星期一, 18 八月 2025 17:30:26 +0800
Subject: [PATCH] '注册修改'
---
src/views/login/index.vue | 491 ++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 453 insertions(+), 38 deletions(-)
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 1172b01..53092d3 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,24 +1,40 @@
-<script setup lang="ts">
+<script setup lang="tsx">
import Motion from "./utils/motion";
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,
+ h,
+ onMounted,
+ defineAsyncComponent,
+ onUnmounted,
+ watch
+} from "vue";
import { debounce } from "@pureadmin/utils";
import { useNav } from "@/layout/hooks/useNav";
import { useEventListener } from "@vueuse/core";
import type { FormInstance } from "element-plus";
+import {
+ ElForm,
+ ElFormItem,
+ ElRadioGroup,
+ ElRadio,
+ ElRow,
+ ElTag
+} from "element-plus";
import { useLayout } from "@/layout/hooks/useLayout";
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";
-import Lock from "~icons/ri/lock-fill";
-import User from "~icons/ri/user-3-fill";
+const route = useRoute();
+import { captcha, phoneNumberCode, exRole } from "@/api/register/index";
defineOptions({
name: "Login"
@@ -35,43 +51,330 @@
const { dataTheme, overallStyle, dataThemeChange } = useDataThemeChange();
dataThemeChange(overallStyle.value);
const { title } = useNav();
-
-const ruleForm = reactive({
- username: "admin",
- password: "admin123"
+// 鑾峰彇楠岃瘉鐮�
+const getCaptcha = async () => {
+ // if (!state.captchaEnabled) return;
+ state.ruleForm.code = "";
+ const res = await captcha();
+ state.captchaImage = "data:text/html;base64," + res.result?.img;
+ state.expirySeconds = res.result?.expirySeconds;
+ state.ruleForm.codeId = res.result?.id;
+};
+import {
+ addDialog,
+ closeDialog,
+ updateDialog,
+ closeAllDialog
+} from "@/components/ReDialog";
+const state = reactive({
+ isShowPassword: false,
+ ruleForm: {
+ account: "",
+ nickName: "",
+ phone: "",
+ phoneVCode: "",
+ code: "",
+ codeId: "",
+ 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: [],
+ myEnterpriseList: [],
+ nowRole: {}
});
+// 楠岃瘉鐮佽繃鏈熻鏃跺櫒
+let timer: any = null;
+let phonetimer: any = null;
+// 椤甸潰鍒濆鍖�
+onMounted(async () => {
+ getCaptcha();
+ exRole().then(res => {
+ state.roleList = res.result;
+ const role = route.query;
+ if (role.code) {
+ state.nowRole = state.roleList.find(item => {
+ return item.code == role.code;
+ });
+ } else {
+ state.nowRole = state.roleList[0];
+ }
+ state.ruleForm.exRoleCode = state.nowRole.code;
+ });
+ // 娉ㄥ唽楠岃瘉鐮佽繃鏈熻鏃跺櫒
+ timer = setInterval(() => {
+ if (state.expirySeconds > 0) state.expirySeconds -= 1;
+ }, 1000);
+});
+// 椤甸潰鍗歌浇
+onUnmounted(() => {
+ // 閿�姣侀獙璇佺爜杩囨湡璁℃椂鍣�
+ clearInterval(timer);
+ timer = null;
+ clearInterval(phonetimer);
+ phonetimer = null;
+});
+const openDialog = () => {
+ addDialog({
+ width: "30%",
+ title: "閫夋嫨鐧诲綍鍏徃",
+ contentRenderer: () =>
+ h(ElForm, {
+ ref: ruleFormRef,
+ model: state.ruleForm,
+ rules: loginRules,
+ size: 'large'
+ }, [
+ h(Motion, { delay: 150 }, [
+ h(ElFormItem, {
+ prop: 'exRoleCode',
+ label: '涓讳綋瑙掕壊' // 鍙坊鍔犺〃鍗曢」鏍囩
+ }, [
+ // 鍗曢�夋缁� - 鐖跺鍣ㄦ坊鍔犳牱寮忔帶鍒�
+ h(ElRadioGroup, {
+ modelValue: state.ruleForm.exRoleCode,
+ 'onUpdate:modelValue': (val) => {
+ state.ruleForm.exRoleCode = val
+ },
+ style: {
+ display: 'flex',
+ flexDirection: 'column',
+ gap: '8px' // 鍗曢�夋涔嬮棿鐨勯棿璺�
+ }
+ }, [
+ // 寰幆娓叉煋鍗曢�夋 - 姣忎釜鍗曢�夋鍗曠嫭鍗犱竴琛�
+ state.myEnterpriseList.map(item => h(ElRadio, {
+ key: item.id,
+ value: item.code,
+ style: {
+ display: 'block', // 璁╂瘡涓崟閫夋鍒嗚鏄剧ず
+ padding: '4px 0'
+ }
+ }, item.name),)
+ ]),
+
+ // 绠＄悊鍛樻爣绛� - 鏄剧ず鍦ㄥ崟閫夋鍚庨潰
+
+ ])
+ ])
+ ])
+ // <>
+ // <el-form
+ // ref="ruleFormRef"
+ // 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.myEnterpriseList}
+ // key={item.id}
+ // value={item.code}
+ // >
+ // {item.name}
+ // </el-radio>
+ // </el-radio-group>
+ // </el-form-item>
+ // </Motion>
+ // </el-form>
+ // </>
+ // h(
+ // ElForm,
+ // {
+ // ref: ruleFormRef,
+ // model: state.ruleForm,
+ // rules: loginRules,
+ // size: "large"
+ // },
+ // [
+ // h(Motion, { delay: 150 }, [
+ // h(ElFormItem, { prop: "exRoleCode" }, [
+ // h(
+ // ElRadioGroup,
+ // {
+ // modelValue: state.ruleForm.exRoleCode,
+ // "onUpdate:modelValue": val => {
+ // state.ruleForm.exRoleCode = val;
+ // }
+ // },
+ // [
+ // // 鐢╩ap瀹炵幇v-for寰幆
+ // state.myEnterpriseList.map(item =>
+ // h(ElRow, {}, [
+ // h(
+ // ElRadio,
+ // {
+ // key: item.customerUserID,
+ // value: item.customerUserID
+ // },
+ // item.enterpriseName
+ // ),
+ // item.isManager ? 444 : "" // 鏍囩鍐呭
+ // ])
+ // )
+ // ]
+ // )
+ // ])
+ // ])
+ // ]
+ // ),
+ // jsx 璇硶 锛堟敞鎰忓湪.vue鏂囦欢鍚敤jsx璇硶锛岄渶瑕佸湪script寮�鍚痩ang="tsx"锛�
+ closeCallBack: ({ options, args }) => {
+ // options.props 鏄搷搴斿紡鐨�
+ // const { formInline } = options.props as FormProps;
+ // const text = `濮撳悕锛�${formInline.user} 鍩庡競锛�${formInline.region}`;
+ if (args?.command === "cancel") {
+ // 鎮ㄧ偣鍑讳簡鍙栨秷鎸夐挳
+ // active.value -= 1;
+ } else if (args?.command === "sure") {
+ let obj = {
+ phone: state.ruleForm.phone,
+ code: state.ruleForm.phoneVCode,
+ exRuleCode: state.ruleForm.exRoleCode
+ };
+ useUserStoreHook()
+ .loginByUsername(obj)
+ .then(res => {
+ if (res?.code == 200) {
+ message("娉ㄥ唽鎴愬姛锛�", { type: "success" });
+ router.replace({
+ path: "/RegisterSucess",
+ query: {
+ code: obj.exRoleCode
+ }
+ });
+ } else {
+ message(res?.message, { type: "warning" });
+ }
+ });
+ } else {
+ }
+ }
+ });
+};
const onLogin = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
await formEl.validate(valid => {
if (valid) {
+ let obj = {
+ phone: state.ruleForm.phone,
+ code: state.ruleForm.phoneVCode,
+ exRuleCode: state.ruleForm.exRoleCode
+ };
loading.value = true;
useUserStoreHook()
- .loginByUsername({
- username: ruleForm.username,
- password: ruleForm.password
- })
+ .loginByUsername(obj)
.then(res => {
- if (res.success) {
+ if (res.code == 200) {
// 鑾峰彇鍚庣璺敱
return initRouter().then(() => {
- disabled.value = true;
- router
- .push(getTopMenu(true).path)
- .then(() => {
- message("鐧诲綍鎴愬姛", { type: "success" });
- })
- .finally(() => (disabled.value = false));
+ let obj = res.result;
+ if (obj.theLastLogo) {
+ router
+ .replace({
+ name: "Index"
+ })
+ .then(() => {
+ message("鐧诲綍鎴愬姛", { type: "success" });
+ })
+ .finally(() => (disabled.value = false));
+ } else {
+ state.myEnterpriseList = obj.customerExs;
+ openDialog();
+ }
+ if (res.result.exRoles.length == 0) {
+ disabled.value = true;
+ router
+ .replace({
+ name: "RegisterNav",
+ query: { code: state.ruleForm.exRoleCode }
+ })
+ .then(() => {
+ message("鐧诲綍鎴愬姛", { type: "success" });
+ })
+ .finally(() => (disabled.value = false));
+ } else if (res.result.exRoles.length > 0) {
+ let data = res.result.exRoles.find(item => {
+ return item.code == state.ruleForm.exRoleCode;
+ });
+
+ if (!data) {
+ router.replace({
+ name: "RegisterNav",
+ query: { code: state.ruleForm.exRoleCode }
+ });
+ } else if (data?.hasFlsh) {
+ router.replace("index");
+ } else {
+ router.replace("mine");
+ }
+ }
+ useUserStoreHook().getCusExtendInfo();
});
} 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,
@@ -94,16 +397,16 @@
<img width="400px" :src="logo1" class="logo1" />
</div>
<!-- <img :src="bg" class="wave" /> -->
- <div class="flex-c absolute right-5 top-3">
- <!-- 涓婚 -->
- <el-switch
+ <!-- <div class="flex-c absolute right-5 top-3"> -->
+ <!-- 涓婚 -->
+ <!-- <el-switch
v-model="dataTheme"
inline-prompt
:active-icon="dayIcon"
:inactive-icon="darkIcon"
@change="dataThemeChange"
/>
- </div>
+ </div> -->
<div class="login-container">
<div class="img">
<!-- <component :is="toRaw(illustration)" /> -->
@@ -112,37 +415,81 @@
<div class="login-form">
<!-- <avatar class="avatar" /> -->
<Motion>
- <h2 class="outline-hidden">{{ title }}</h2>
+ <h2 class="logintitle">{{ state.nowRole.name }}鐧诲綍</h2>
</Motion>
<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 +497,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 +552,47 @@
:deep(.el-input-group__append, .el-input-group__prepend) {
padding: 0;
}
+#suffix-span {
+ cursor: pointer;
+}
+.login-content-code {
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ position: relative;
+
+ .login-content-code-img {
+ width: 100%;
+ height: 40px;
+ line-height: 40px;
+ background-color: #ffffff;
+ // /* border: 1px solid rgb(220, 223, 230); */
+ cursor: pointer;
+ transition: all ease 0.2s;
+ border-radius: 4px;
+ user-select: none;
+
+ &:hover {
+ border-color: #c0c4cc;
+ transition: all ease 0.2s;
+ }
+ }
+}
+
+.login-content-code-expired {
+ @extend .login-content-code;
+ &::before {
+ content: "楠岃瘉鐮佸凡杩囨湡";
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ border-radius: 4px;
+ background-color: rgba(0, 0, 0, 0.5);
+ color: #ffffff;
+ text-align: center;
+ line-height: 40px;
+ }
+}
</style>
--
Gitblit v1.9.1