地大的短信验证

src/features/OnlineExam/OnlineExamHome.vue

@@ -8,11 +8,14 @@
     <div class="home">
       <ecs-online-list :courses="courses"></ecs-online-list>
     </div>
+
+    <PhoneVerifyForDD />
   </main-layout>
 </template>
 
 <script>
 import EcsOnlineList from "./OnlineExamList.vue";
+import PhoneVerifyForDD from "./PhoneVerifyForDD.vue";
 
 export default {
   name: "OnlineExamHome",
@@ -47,7 +50,8 @@ export default {
     this.courses = res.data;
   },
   components: {
-    "ecs-online-list": EcsOnlineList
+    "ecs-online-list": EcsOnlineList,
+    PhoneVerifyForDD
   }
 };
 </script>

src/features/OnlineExam/PhoneVerifyForDD.vue

@@ -0,0 +1,78 @@
+<template>
+
+  <Modal v-model="phoneModal" :closable="false" :mask-closable="false" title="请验证预留手机号" :footer-hide="true">
+    <div style="display: grid; grid-template-rows: 40px 40px 40px; font-size: 20px">
+
+      <p>预留手机号: &nbsp;&nbsp;{{user.phoneNumber}}</p>
+      <p>输入验证码: &nbsp;&nbsp;<input size="6" v-model="code" placeholder="验证码" type="number" /> &nbsp;&nbsp;
+      </p>
+      <div>
+        <i-button style="margin: 0" class="qm-primary-button" :disabled="remainTime > 0" @click="getCode">{{btnText}} {{remainTime > 0 ? "("+remainTime + "秒)" : ""}}</i-button>&nbsp;&nbsp;
+        <i-button style="margin: 0" class="qm-primary-button" :disabled="!code" @click="verify">验证</i-button>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<script>
+import { mapState as globalMapState } from "vuex";
+
+export default {
+  name: "PhoneVerifyForDD",
+  data() {
+    return {
+      courses: [],
+      phoneModal: false,
+      step: "1",
+      code: "",
+      remainTime: 0,
+      btnText: "发送验证码"
+    };
+  },
+  async mounted() {
+    if (
+      ["cugr.ecs.qmth.com.cn", "ecs-dev.qmth.com.cn"].includes(
+        localStorage.getItem("domain")
+      ) &&
+      !localStorage.getItem("phoneVerified")
+    ) {
+      this.phoneModal = true;
+    }
+  },
+  methods: {
+    async getCode() {
+      await this.$http.post("/api/ecs_oe_student/sms/sendSmsCodeToStudent");
+
+      this.remainTime = 90;
+      let interval = setInterval(() => {
+        this.remainTime--;
+        if (this.remainTime <= 0) {
+          clearInterval(interval);
+        }
+      }, 1000);
+    },
+    async verify() {
+      const res = await this.$http.post(
+        `/api/ecs_oe_student/sms/checkSmsCode?phoneNumber=${
+          this.user.phoneNumber
+        }&code=${this.code}`
+      );
+      if (res.data.success) {
+        this.phoneModal = false;
+        localStorage.setItem("phoneVerified", "true");
+      } else {
+        this.$Message.error(res.data.returnMsg);
+      }
+    }
+  },
+  computed: {
+    ...globalMapState(["user"])
+  }
+};
+</script>
+
+<style scoped>
+.home {
+  margin: 20px;
+}
+</style>