From 6130cd3149efab7867766a850114e1598506ad69 Mon Sep 17 00:00:00 2001
From: valarchie <343928303@qq.com>
Date: Thu, 22 Jun 2023 22:03:16 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BD=BF=E7=94=A8=E7=88=B6?=
 =?UTF-8?q?=E5=AD=90=E7=BB=84=E4=BB=B6=E4=BC=A0=E5=80=BC=E6=9D=A5=E6=8E=A7?=
 =?UTF-8?q?=E5=88=B6=E7=99=BB=E5=BD=95=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                                    |  1 -
 src/store/modules/types.ts                    |  1 -
 src/store/modules/user.ts                     |  8 +---
 src/views/login/components/phone.vue          | 12 +++++-
 src/views/login/components/qrCode.vue         | 15 ++++---
 .../components/{regist.vue => register.vue}   | 12 +++++-
 .../{update.vue => resetPassword.vue}         | 12 +++++-
 src/views/login/index.vue                     | 40 ++++++++-----------
 src/views/login/utils/enums.ts                |  9 +++--
 9 files changed, 64 insertions(+), 46 deletions(-)
 rename src/views/login/components/{regist.vue => register.vue} (96%)
 rename src/views/login/components/{update.vue => resetPassword.vue} (95%)

diff --git a/.gitignore b/.gitignore
index b053323..f387679 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,7 +5,6 @@ dist-ssr
 *.local
 .eslintcache
 report.html
-.idea
 
 yarn.lock
 npm-debug.log*
diff --git a/src/store/modules/types.ts b/src/store/modules/types.ts
index 4d29690..d744e64 100644
--- a/src/store/modules/types.ts
+++ b/src/store/modules/types.ts
@@ -38,5 +38,4 @@ export type setType = {
 export type userType = {
   username?: string;
   roles?: Array<string>;
-  currentPage?: number;
 };
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index 4ee3d8d..978c02f 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -16,9 +16,7 @@ export const useUserStore = defineStore({
     username:
       storageSession().getItem<DataInfo<number>>(sessionKey)?.username ?? "",
     // 页面级别权限
-    roles: storageSession().getItem<DataInfo<number>>(sessionKey)?.roles ?? [],
-    // 判断登录页面显示哪个组件（0：登录（默认）、1：手机登录、2：二维码登录、3：注册、4：忘记密码）
-    currentPage: 0
+    roles: storageSession().getItem<DataInfo<number>>(sessionKey)?.roles ?? []
   }),
   actions: {
     /** 存储用户名 */
@@ -29,10 +27,6 @@ export const useUserStore = defineStore({
     SET_ROLES(roles: Array<string>) {
       this.roles = roles;
     },
-    /** 存储登录页面显示哪个组件 */
-    SET_CURRENTPAGE(value: number) {
-      this.currentPage = value;
-    },
     /** 登入 */
     async loginByUsername(data) {
       return new Promise<UserResult>((resolve, reject) => {
diff --git a/src/views/login/components/phone.vue b/src/views/login/components/phone.vue
index 73944be..2c8fcd3 100644
--- a/src/views/login/components/phone.vue
+++ b/src/views/login/components/phone.vue
@@ -5,10 +5,18 @@ import { message } from "@/utils/message";
 import { phoneRules } from "../utils/rule";
 import type { FormInstance } from "element-plus";
 import { useVerifyCode } from "../utils/verifyCode";
-import { useUserStoreHook } from "@/store/modules/user";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import Iphone from "@iconify-icons/ep/iphone";
 
+defineProps({
+  currentPage: {
+    type: Number,
+    default: 1
+  }
+});
+
+const $pageEmit = defineEmits(["update:currentPage"]);
+
 const loading = ref(false);
 const ruleForm = reactive({
   phone: "",
@@ -36,7 +44,7 @@ const onLogin = async (formEl: FormInstance | undefined) => {
 
 function onBack() {
   useVerifyCode().end();
-  useUserStoreHook().SET_CURRENTPAGE(0);
+  $pageEmit("update:currentPage", 0);
 }
 </script>
 
diff --git a/src/views/login/components/qrCode.vue b/src/views/login/components/qrCode.vue
index f37a1d6..90eb8d1 100644
--- a/src/views/login/components/qrCode.vue
+++ b/src/views/login/components/qrCode.vue
@@ -1,7 +1,15 @@
 <script setup lang="ts">
 import Motion from "../utils/motion";
 import ReQrcode from "@/components/ReQrcode";
-import { useUserStoreHook } from "@/store/modules/user";
+
+defineProps({
+  currentPage: {
+    type: Number,
+    default: 2
+  }
+});
+
+const $pageEmit = defineEmits(["update:currentPage"]);
 </script>
 
 <template>
@@ -12,10 +20,7 @@ import { useUserStoreHook } from "@/store/modules/user";
     </el-divider>
   </Motion>
   <Motion :delay="150">
-    <el-button
-      class="w-full mt-4"
-      @click="useUserStoreHook().SET_CURRENTPAGE(0)"
-    >
+    <el-button class="w-full mt-4" @click="$pageEmit('update:currentPage', 0)">
       {{ "返回" }}
     </el-button>
   </Motion>
diff --git a/src/views/login/components/regist.vue b/src/views/login/components/register.vue
similarity index 96%
rename from src/views/login/components/regist.vue
rename to src/views/login/components/register.vue
index 2edb391..229ac95 100644
--- a/src/views/login/components/regist.vue
+++ b/src/views/login/components/register.vue
@@ -5,12 +5,20 @@ import { message } from "@/utils/message";
 import { updateRules } from "../utils/rule";
 import type { FormInstance } from "element-plus";
 import { useVerifyCode } from "../utils/verifyCode";
-import { useUserStoreHook } from "@/store/modules/user";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import Lock from "@iconify-icons/ri/lock-fill";
 import Iphone from "@iconify-icons/ep/iphone";
 import User from "@iconify-icons/ri/user-3-fill";
 
+defineProps({
+  currentPage: {
+    type: Number,
+    default: 3
+  }
+});
+
+const $pageEmit = defineEmits(["update:currentPage"]);
+
 const checked = ref(false);
 const loading = ref(false);
 const ruleForm = reactive({
@@ -63,7 +71,7 @@ const onUpdate = async (formEl: FormInstance | undefined) => {
 
 function onBack() {
   useVerifyCode().end();
-  useUserStoreHook().SET_CURRENTPAGE(0);
+  $pageEmit("update:currentPage", 0);
 }
 </script>
 
diff --git a/src/views/login/components/update.vue b/src/views/login/components/resetPassword.vue
similarity index 95%
rename from src/views/login/components/update.vue
rename to src/views/login/components/resetPassword.vue
index e9477ff..423592a 100644
--- a/src/views/login/components/update.vue
+++ b/src/views/login/components/resetPassword.vue
@@ -5,11 +5,19 @@ import { message } from "@/utils/message";
 import { updateRules } from "../utils/rule";
 import type { FormInstance } from "element-plus";
 import { useVerifyCode } from "../utils/verifyCode";
-import { useUserStoreHook } from "@/store/modules/user";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import Lock from "@iconify-icons/ri/lock-fill";
 import Iphone from "@iconify-icons/ep/iphone";
 
+defineProps({
+  currentPage: {
+    type: Number,
+    default: 4
+  }
+});
+
+const $pageEmit = defineEmits(["update:currentPage"]);
+
 const loading = ref(false);
 const ruleForm = reactive({
   phone: "",
@@ -55,7 +63,7 @@ const onUpdate = async (formEl: FormInstance | undefined) => {
 
 function onBack() {
   useVerifyCode().end();
-  useUserStoreHook().SET_CURRENTPAGE(0);
+  $pageEmit("update:currentPage", 0);
 }
 </script>
 
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 1ad6f8f..52ec344 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,12 +1,5 @@
 <script setup lang="ts">
-import {
-  ref,
-  toRaw,
-  reactive,
-  computed,
-  onMounted,
-  onBeforeUnmount
-} from "vue";
+import { ref, toRaw, reactive, onMounted, onBeforeUnmount } from "vue";
 import Motion from "./utils/motion";
 import { useRouter } from "vue-router";
 import { message } from "@/utils/message";
@@ -14,8 +7,8 @@ import { loginRules } from "./utils/rule";
 import phone from "./components/phone.vue";
 import TypeIt from "@/components/ReTypeit";
 import qrCode from "./components/qrCode.vue";
-import regist from "./components/regist.vue";
-import update from "./components/update.vue";
+import register from "./components/register.vue";
+import resetPassword from "./components/resetPassword.vue";
 import { useNav } from "@/layout/hooks/useNav";
 import type { FormInstance } from "element-plus";
 import { operates, thirdParty } from "./utils/enums";
@@ -41,9 +34,8 @@ const router = useRouter();
 const loading = ref(false);
 const checked = ref(false);
 const ruleFormRef = ref<FormInstance>();
-const currentPage = computed(() => {
-  return useUserStoreHook().currentPage;
-});
+// 判断登录页面显示哪个组件（0：登录（默认）、1：手机登录、2：二维码登录、3：注册、4：忘记密码）
+const currentPage = ref(0);
 
 const { initStorage } = useLayout();
 initStorage();
@@ -189,11 +181,7 @@ onBeforeUnmount(() => {
                   <el-checkbox v-model="checked">
                     {{ "记住密码" }}
                   </el-checkbox>
-                  <el-button
-                    link
-                    type="primary"
-                    @click="useUserStoreHook().SET_CURRENTPAGE(4)"
-                  >
+                  <el-button link type="primary" @click="currentPage = 4">
                     {{ "忘记密码" }}
                   </el-button>
                 </div>
@@ -217,7 +205,7 @@ onBeforeUnmount(() => {
                     :key="index"
                     class="w-full mt-4"
                     size="default"
-                    @click="useUserStoreHook().SET_CURRENTPAGE(index + 1)"
+                    @click="currentPage = item.page"
                   >
                     {{ item.title }}
                   </el-button>
@@ -247,13 +235,19 @@ onBeforeUnmount(() => {
             </el-form-item>
           </Motion>
           <!-- 手机号登录 -->
-          <phone v-if="currentPage === 1" />
+          <phone v-if="currentPage === 1" v-model:current-page="currentPage" />
           <!-- 二维码登录 -->
-          <qrCode v-if="currentPage === 2" />
+          <qrCode v-if="currentPage === 2" v-model:current-page="currentPage" />
           <!-- 注册 -->
-          <regist v-if="currentPage === 3" />
+          <register
+            v-if="currentPage === 3"
+            v-model:current-page="currentPage"
+          />
           <!-- 忘记密码 -->
-          <update v-if="currentPage === 4" />
+          <resetPassword
+            v-if="currentPage === 4"
+            v-model:current-page="currentPage"
+          />
         </div>
       </div>
     </div>
diff --git a/src/views/login/utils/enums.ts b/src/views/login/utils/enums.ts
index 63d15db..72265ae 100644
--- a/src/views/login/utils/enums.ts
+++ b/src/views/login/utils/enums.ts
@@ -1,12 +1,15 @@
 const operates = [
   {
-    title: "手机登录"
+    title: "手机登录",
+    page: 1
   },
   {
-    title: "二维码登录"
+    title: "二维码登录",
+    page: 2
   },
   {
-    title: "注册"
+    title: "注册",
+    page: 3
   }
 ];