全局通知

src/features/UserLogin/GlobalNotice.vue

@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import { VITE_CONFIG_FILE_SEVER_URL } from "@/constants/constants";
+import { httpApp } from "@/plugins/axiosApp";
+import { onMounted, onUnmounted } from "vue";
+
+let clicked = $ref(false);
+let fetchInterval = -1;
+onMounted(() => {
+  void fetchNotice();
+  fetchInterval = window.setInterval(() => {
+    void fetchNotice();
+  }, 60 * 1000);
+});
+onUnmounted(() => {
+  clearInterval(fetchInterval);
+});
+
+let notice = $ref({
+  title: "",
+  content: "",
+  enable: false,
+});
+
+async function fetchNotice() {
+  const url =
+    VITE_CONFIG_FILE_SEVER_URL +
+    "/sys_notice/org_all.json?" +
+    Date.now() +
+    Math.random();
+  const res = await httpApp.get(url, { withCredentials: false });
+
+  notice = res.data;
+  // notice.title = "停服通知";
+  // notice.content =
+  //   "网考服务计划于 2020-09-20 22:00:00 ~ 2020-09-21 01:00:00 期间停服升级。请合理安排考试时间。";
+}
+
+function clickBtn() {
+  logger({
+    cnl: ["local", "server", "console"],
+    pgn: "GlobalNotice",
+    act: "点击-确定按钮",
+  });
+  clicked = true;
+}
+
+const show = $computed(() => !clicked && notice.enable);
+</script>
+
+<template>
+  <teleport to="body">
+    <div
+      v-if="show"
+      style="position: absolute; top: 0; left: 0; width: 100vw; height: 100vh"
+      class="tw-flex tw-justify-center tw-items-center tw-bg-slate-300 tw-opacity-95"
+    >
+      <div
+        style="
+          width: 600px;
+          border: 1px solid #999;
+          border-radius: 5px;
+          padding: 20px;
+          color: black;
+          text-align: center;
+        "
+      >
+        <div style="font-size: 28px">{{ notice.title }}</div>
+        <div style="font-size: 18px; text-align: left">
+          {{ notice.content.repeat(1) }}
+        </div>
+        <div>
+          <n-button
+            size="large"
+            type="success"
+            class="qm-primary-button"
+            style="margin-top: 30px; width: 160px"
+            long
+            @click="clickBtn"
+          >
+            确定
+          </n-button>
+        </div>
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<style></style>

src/features/UserLogin/UserLogin.vue

@@ -14,6 +14,7 @@ import { onMounted, onUnmounted, watch } from "vue";
 import { Person, LockClosed, CloseCircleOutline } from "@vicons/ionicons5";
 import { FormRules, FormItemInst } from "naive-ui";
 import GeeTest from "./GeeTest.vue";
+import GlobalNotice from "./GlobalNotice.vue";
 
 logger({
   cnl: ["console", "local", "server"],
@@ -21,6 +22,7 @@ logger({
   act: "首次渲染",
 });
 
+//#region service worker通知是否有版本更新
 let newVersionAvailable = $ref(false);
 const checkNewVersionListener = () => {
   newVersionAvailable = true;
@@ -35,6 +37,7 @@ onMounted(() =>
 onUnmounted(() =>
   document.removeEventListener("__newSWAvailable", checkNewVersionListener)
 );
+//#endregion
 
 let isGeeTestEnabled = $ref(false);
 onMounted(async () => {
@@ -46,26 +49,18 @@ onMounted(async () => {
 
 const QECSConfig = store.QECSConfig;
 
-const logoPath = $computed(() => store.QECSConfig.LOGO_FILE_URL || "");
+const logoPath = $computed(() => QECSConfig.LOGO_FILE_URL || "");
 const backgroundUrl = $computed(
   () =>
     `url(${
-      store.QECSConfig.STUDENT_CLIENT_BG_PICTURE_URL ||
+      QECSConfig.STUDENT_CLIENT_BG_PICTURE_URL ||
       "https://cdn.qmth.com.cn/ui/ecs-client-bg.jpg!/progressive/true"
     })`
 );
 const productName = $computed(
-  () => store.QECSConfig.OE_STUDENT_SYS_NAME || "远程教育网络考试"
+  () => QECSConfig.OE_STUDENT_SYS_NAME || "远程教育网络考试"
 );
-const allowLoginType = $computed(() => store.QECSConfig.LOGIN_TYPE ?? []);
-// const isGeeTestEnabled = $computed(() => {
-//   const thisOrg = this.GeeTestConfig[QECSConfig.ROOT_ORG_ID];
-//   const isThisOrgUndefined = thisOrg === undefined;
-//   const allOrg = this.GeeTestConfig["-1"];
-//   return isThisOrgUndefined ? allOrg : thisOrg;
-// });
-
-const domain = DOMAIN;
+const allowLoginType = $computed(() => QECSConfig.LOGIN_TYPE ?? []);
 
 let disableLoginBtn = $computed(
   () => false
@@ -79,6 +74,8 @@ let disableLoginBtn = $computed(
 
 let loginBtnLoading = $ref(false);
 
+//#region form校验
+const domain = DOMAIN;
 type FormModel = {
   accountType: "STUDENT_CODE" | "IDENTITY_NUMBER";
   accountValue: string;
@@ -110,7 +107,9 @@ const fromRules: FormRules = {
 
 let errorInfo = $ref("");
 watch([formValue], () => (errorInfo = ""));
+//#endregion
 
+//#region 极验
 type Captcha = {
   appendTo(sel: string): void;
   onReady(cb: () => void): void;
@@ -131,6 +130,7 @@ watch(
     }
   }
 );
+//#endregion
 
 const router = useRouter();
 
@@ -170,7 +170,7 @@ async function loginForuser() {
     formValue.accountValue,
     formValue.password,
     domain,
-    store.QECSConfig.ROOT_ORG_ID,
+    QECSConfig.ROOT_ORG_ID,
     geeParams
   );
 
@@ -247,7 +247,7 @@ function closeApp() {
         <!-- 加上它，在logo加载失败的时候有用 -->
         <!-- @load="(e: any) => (e.target.style = '')" -->
       </div>
-      <a class="close" @click="closeApp"> 关闭 </a>
+      <a class="close" @click="closeApp">关闭</a>
     </header>
 
     <div class="center" :style="{ backgroundImage: backgroundUrl }">
@@ -256,7 +256,7 @@ function closeApp() {
           <a
             v-if="allowLoginType.includes('STUDENT_CODE')"
             key="STUDENT_CODE"
-            :class="[formValue.accountType === 'STUDENT_CODE' && 'active-type']"
+            :class="{ 'active-type': formValue.accountType === 'STUDENT_CODE' }"
             @click="formValue.accountType = 'STUDENT_CODE'"
           >
             {{ QECSConfig.STUDENT_CODE_LOGIN_ALIAS }}
@@ -264,12 +264,14 @@ function closeApp() {
           <a
             v-if="allowLoginType.includes('IDENTITY_NUMBER')"
             key="IDENTITY_NUMBER"
-            :class="[formValue.accountType !== 'STUDENT_CODE' && 'active-type']"
+            :class="{
+              'active-type': formValue.accountType === 'IDENTITY_NUMBER',
+            }"
             @click="formValue.accountType = 'IDENTITY_NUMBER'"
           >
             {{ QECSConfig.IDENTITY_NUMBER_LOGIN_ALIAS }}
           </a>
-          <a v-if="allowLoginType.length === 0" key="loading"> loading... </a>
+          <a v-if="allowLoginType.length === 0" key="loading">loading...</a>
         </div>
 
         <div class="qm-title-text tw-text-center tw-mt-10">
@@ -341,7 +343,7 @@ function closeApp() {
         版本: {{ VITE_GIT_REPO_VERSION }}
       </div>
     </footer>
-    <!-- <GlobalNotice /> -->
+    <GlobalNotice />
   </div>
 </template>