fix bug

src/features/WelcomePage/PhoneVerifyForDD.vue

@@ -2,23 +2,26 @@
 import { DOMAIN } from "@/constants/constants";
 import { httpApp } from "@/plugins/axiosApp";
 import { store } from "@/store/store";
-import { onMounted, onUnmounted } from "vue";
+import { onUnmounted } from "vue";
 import { showLogout } from "@/utils/utils";
 
+defineProps<{ modelValue: boolean }>();
+const emit = defineEmits<{ (e: "update:modelValue", value: boolean): void }>();
+
 let phoneModal = $ref(false);
 let code = $ref("");
 let interval = $ref(-1);
 let remainTime = $ref(0);
 let btnText = "发送验证码";
 
-onMounted(() => {
-  if (
-    ["cugr.ecs.qmth.com.cn", "test.cugr.qmth.com.cn"].includes(DOMAIN) &&
-    !localStorage.getItem("phoneVerified")
-  ) {
-    phoneModal = true;
-  }
-});
+if (
+  ["cugr.ecs.qmth.com.cn", "test.cugr.qmth.com.cn"].includes(DOMAIN) &&
+  !localStorage.getItem("phoneVerified")
+) {
+  phoneModal = true;
+} else {
+  emit("update:modelValue", true);
+}
 onUnmounted(() => clearInterval(interval));
 
 async function getCode() {
@@ -65,6 +68,7 @@ async function verify() {
     );
     phoneModal = false;
     localStorage.setItem("phoneVerified", "true");
+    emit("update:modelValue", true);
   } catch (error) {
     $message.error("验证手机号接口失败，请重试！", {
       duration: 15,

src/features/WelcomePage/PrivacyDialog.vue

@@ -4,6 +4,9 @@ import { useTimers } from "@/setups/useTimers";
 import { store } from "@/store/store";
 import { showLogout } from "@/utils/utils";
 
+defineProps<{ modelValue: boolean }>();
+const emit = defineEmits<{ (e: "update:modelValue", value: boolean): void }>();
+
 const { addInterval } = useTimers();
 let showPrivacyModal = $ref(true);
 let remainTime = $ref(0);
@@ -20,6 +23,9 @@ if (privacyReadVersionUserId !== PRIVACY_READ_VERSION_NUMBER) {
       remainTime--;
     }
   }, 1000);
+} else {
+  emit("update:modelValue", true);
+  showPrivacyModal = false;
 }
 
 function agreeTerms() {
@@ -33,7 +39,9 @@ function agreeTerms() {
     PRIVACY_READ_VERSION_NUMBER
   );
   showPrivacyModal = false;
+  emit("update:modelValue", true);
 }
+
 function disagreeTerms() {
   logger({
     cnl: ["server"],
@@ -161,9 +169,6 @@ function disagreeTerms() {
 </template>
 
 <style scoped>
-.home {
-  margin: 20px;
-}
 .privacy-content {
   font-size: 14px;
   width: 100%;

src/features/WelcomePage/WelcomePage.vue

@@ -1,16 +1,47 @@
 <script setup lang="ts">
 import router from "@/router";
 import { store } from "@/store/store";
+import { onUnmounted, watch } from "vue";
 import PhoneVerifyForDD from "./PhoneVerifyForDD.vue";
 import PrivacyDialog from "./PrivacyDialog.vue";
 
+let phonePassed = $ref(false);
+let privacyPassed = $ref(false);
+
+let autoCloseModal = $ref(10);
+let interval = -1;
+
 function goOnlineExam() {
   void router.push({ name: "OnlineExam" });
 }
+
+function modalMounted() {
+  interval = window.setInterval(() => autoCloseModal--, 1000);
+}
+
+watch(
+  () => autoCloseModal,
+  () => {
+    if (autoCloseModal < 0) {
+      goOnlineExam();
+    }
+  }
+);
+
+onUnmounted(() => clearInterval(interval));
 </script>
 
 <template>
-  <n-modal :show="true" preset="card" title="欢迎" style="width: 400px">
+  <PrivacyDialog v-model="privacyPassed" />
+  <PhoneVerifyForDD v-if="privacyPassed" v-model="phonePassed" />
+  <n-modal
+    v-if="privacyPassed && phonePassed"
+    :show="true"
+    preset="card"
+    title="欢迎"
+    style="width: 400px"
+    @vnodeMounted="modalMounted"
+  >
     <div class="welcome-modal tw-mb-6">
       <div class="smile-png" />
       <div class="tw-ml-5">
@@ -27,8 +58,6 @@ function goOnlineExam() {
       确定
     </n-button>
   </n-modal>
-  <PhoneVerifyForDD />
-  <PrivacyDialog />
 </template>
 
 <style scoped>