Merge remote-tracking branch 'origin/seec' into seec

src/App.vue

@@ -1,9 +1,9 @@
 <template>
-  <GlobalHeader v-if="this.$route.path!=='/login'"/>
+  <GlobalHeader v-if="globalVisibility"/>
   <div class="main-body">
     <router-view/>
   </div>
-  <GlobalFooter v-if="this.$route.path!=='/login'"/>
+  <GlobalFooter v-if="globalVisibility"/>
 </template>
 
 <script>
@@ -26,6 +26,12 @@ export default {
       return null;
     };
   },
+  computed:{
+    globalVisibility(){
+      const pageRoutes = ["/login", "/completephone"];
+      return pageRoutes.indexOf(this.$route.path) === -1;
+    }
+  }
 };
 </script>
 

src/api/user.js

@@ -50,6 +50,10 @@ function findUserIdByPhone(phone){
   return axios.get(`${prefix}/findIdByPhone/${phone}`);
 }
 
+function completePhone(data){
+  return axios.post(`${prefix}/complete/phone`, data);
+}
+
 const userAPIs = {
   loginAPI,
   registerAPI,
@@ -60,7 +64,8 @@ const userAPIs = {
   saveEmailAPI,
   saveSignatureAPI,
   getNameByUsernameAPI,
-  findUserIdByPhone
+  findUserIdByPhone,
+  completePhone,
 };
 
 export default userAPIs;

src/router/index.js

@@ -19,6 +19,11 @@ const routes = [
     name: "Auth",
     component: () => import("../views/AuthPage/AuthPage.vue"),
   },
+  {
+    path: "/completephone",
+    name: "CompletePhone",
+    component: () => import("../views/AuthPage/CompletePhonePage"),
+  },
   {
     path: "/task",
     name: "Task",
@@ -118,7 +123,7 @@ const router = createRouter({
   routes,
 });
 
-const unauthorizedRoutes = ["Portal", "Auth", "Course", "Test","Project"];
+const unauthorizedRoutes = ["Portal", "Auth", "Course", "Test","Project", "CompletePhone"];
 
 router.beforeEach((to, from, next) => {
   if (unauthorizedRoutes.indexOf(to.name) !== -1) {

src/views/AuthPage/CompletePhonePage.vue

@@ -0,0 +1,41 @@
+<template>
+  <el-tooltip content="前往门户首页" placement="bottom" effect="light" :show-after="1000">
+    <img id="auth-img" alt="err" src="@/assets/seec-logo--horizontal.png" @click="toPortal">
+  </el-tooltip>
+  <div id="auth-card">
+    <complete-phone-card/>
+  </div>
+</template>
+
+<script>
+import CompletePhoneCard from "@/views/AuthPage/components/CompletePhoneCard";
+
+export default {
+  name: "CompletePhonePage",
+  components: {CompletePhoneCard},
+  methods: {
+    toPortal() {
+      this.$router.push("/portal");
+    }
+  },
+};
+</script>
+
+<style scoped>
+#auth-img {
+  position: fixed;
+  top: 28vh;
+  left: 15vw;
+  width: 352px;
+  height: 300px;
+  cursor: pointer;
+}
+
+#auth-card {
+  float: right;
+  position: fixed;
+  top: 20vh;
+  left: 50vw;
+  padding-bottom: 50px;
+}
+</style>

src/views/AuthPage/components/CompletePhoneCard.vue

@@ -0,0 +1,196 @@
+<template>
+  <div id="auth-card-body">
+    <h2 id="auth-card-title">完善手机号</h2>
+    <el-form id="auth-card-form" ref="cardFormRef" :model="cardForm" :rules="cardFormRule" @keyup.enter="onSubmit">
+      <el-form-item class="auth-card-form-item" prop="username">
+        <el-input v-model="cardForm.username" clearable placeholder="请输入用户名或学号">
+          <template #prefix>
+            <el-icon class="el-input__icon">
+              <avatar/>
+            </el-icon>
+          </template>
+        </el-input>
+      </el-form-item>
+
+      <el-form-item class="auth-card-form-item" prop="phone">
+        <el-input v-model="cardForm.phone" autofocus clearable placeholder="请输入手机号">
+          <template #prefix>
+            <el-icon class="el-input__icon">
+              <phone/>
+            </el-icon>
+          </template>
+        </el-input>
+      </el-form-item>
+
+      <div id="auth-card-code-verifier">
+        <el-form-item prop="identifyCode">
+          <el-input v-model="cardForm.identifyCode" placeholder="请输入验证码">
+            <template #prefix>
+              <el-icon class="el-input__icon">
+                <key/>
+              </el-icon>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-button id="auth-card-code-verifier-button" :disabled="cardButtonDisabled" @click="handleSendMessage">
+          {{ cardButtonText }}
+        </el-button>
+      </div>
+
+      <el-form-item class="auth-card-form-item">
+        <el-button id="auth-card-submit-button" type="primary" @click="onSubmit">完善手机号</el-button>
+      </el-form-item>
+
+    </el-form>
+  </div>
+</template>
+
+<script>
+import {Avatar, Phone, Key} from "@element-plus/icons-vue";
+import {ElMessage} from "element-plus";
+
+export default {
+  name: "CompletePhoneCard",
+  components: {
+    Phone,
+    Avatar,
+    Key,
+  },
+  data() {
+    const inputNumberValidator = (rule, value, callback) => {
+      if (!(/(^[1-9]\d*$)/.test(value))) {
+        callback(new Error("请勿输入非数字"));
+      } else {
+        callback();
+      }
+    };
+    const phoneValidator = async (rule, value, callback) => {
+      if (/^(13\d|14\d|15\d|166|18\d|19[6,9]|17\d)\d{8}$/i.test(value) === false) {
+        callback(new Error("请输入正确格式的手机号"));
+      } else {
+        callback();
+      }
+    };
+    const identifyCodeValidator = (rule, value, callback) => {
+      if (value.length !== 6) {
+        this.shakeElem("auth-card-code-verifier");
+        callback(new Error("请正确输入短信验证码"));
+      } else {
+        this.cardVerified = true;
+        callback();
+      }
+    };
+    return {
+      cardButtonDisabled: false,
+      cardButtonText: "获取验证码",
+      cardVerified: false,
+      cardForm: {
+        phone: "",
+        username: "",
+        identifyCode: "",
+      },
+      cardFormRule: {
+        phone: [
+          {required: true, message: "请输入手机号", trigger: "blur"},
+          {
+            validator: phoneValidator,
+            trigger: "blur"
+          },
+          {
+            validator: inputNumberValidator,
+            trigger: "change"
+          }
+        ],
+        username: [
+          {
+            required: true,
+            min: 1,
+            max: 20,
+            message: "请输入正确格式的用户名",
+            trigger: "blur",
+          }
+        ],
+        identifyCode: [
+          {
+            validator: identifyCodeValidator,
+            trigger: "blur",
+          },
+          {
+            validator: inputNumberValidator,
+            trigger: "change",
+          }
+        ]
+      },
+    };
+  },
+  methods: {
+    onSubmit() {
+      this.$refs.cardFormRef.validate(async (valid) => {
+        if (valid) {
+          const res = (await this.$apis.completePhone(this.cardForm)).data;
+          if(!res.code){
+            ElMessage.success(data);
+          }else{
+            ElMessage.error(res);
+          }
+        }
+      });
+    },
+    handleSendMessage() {
+      const thatForm = this.$refs.cardFormRef;
+      thatForm.validateField("phone", v1 => {
+        if (!v1) {
+          this.cardButtonDisabled = true;
+          let time = 60;
+          const myScroll = setInterval(() => {
+            time--;
+            if (time >= 0) {
+              this.cardButtonText = time + "s后可重发";
+            } else {
+              this.cardButtonText = "获取验证码";
+              this.cardButtonDisabled = false;
+              clearTimeout(myScroll);
+              time = 60;
+            }
+          }, 1000);
+          const params = {
+            phone: this.cardForm.phone
+          };
+          this.$apis.sendMessageAPI(params)
+            .then((res) => {
+              if (res.data.code === 0) {
+                this.$message({
+                  showClose: true,
+                  message: "发送成功，请注意查收验证码",
+                  type: "success"
+                });
+              } else {
+                this.$message({
+                  showClose: true,
+                  message: res.data.message,
+                  type: "warning"
+                });
+              }
+            })
+            .catch((e) => {
+              this.$message({
+                showClose: true,
+                message: e,
+                type: "error"
+              });
+            });
+        }
+      });
+    },
+    shakeElem(elemId) {
+      let elem = document.getElementById(elemId);
+      elem.classList.add("shake");
+      setTimeout(() => {
+        elem.classList.remove("shake");
+      }, 800);
+    },
+  }
+};
+</script>
+
+<style scoped src="./AuthCard.css"/>

src/views/CoursePage/tabs/GroupTab.vue

@@ -4,7 +4,7 @@
       <el-button v-if="isCreator" class="tabs-function-button"
                  plain type="primary" :disabled="isRuleExisted"
                  @click="ruleFormDialog=true">
-        {{ isRuleExisted === null ? null : (isRuleExisted ? '已开放组队' : '开放组队') }}
+        {{ isRuleExisted === null ? null : (isRuleExisted ? "已开放组队" : "开放组队") }}
       </el-button>
       <div v-else>
         <el-button v-if="!groupData" class="tabs-function-button"
@@ -23,17 +23,19 @@
         <template #default="scope">
         <span
           :style="groupData && scope.row['groupVO'].id===groupData['groupVO'].id ? 'color: #67C23A':''">
-          {{ scope.row['groupVO'].name }}
+          {{ scope.row["groupVO"].name }}
         </span>
         </template>
       </el-table-column>
       <el-table-column label="组员">
         <template #default="scope">
-          <div v-for="item of scope.row.members" :key="'member'+item.id">
-          <span
-            :style="groupData && scope.row['groupVO'].id===groupData['groupVO'].id ? 'color: #67C23A':''">
-            {{ item.username }}
-          </span>
+          <div style="display:flex;">
+            <div v-for="item of scope.row.members"
+                 :key="'member'+item.id"
+                 style="margin-right: 10px"
+                 :style="groupData && scope.row['groupVO'].id===groupData['groupVO'].id ? 'color: #67C23A':''">
+              {{ item.username }}
+            </div>
           </div>
         </template>
       </el-table-column>
@@ -117,8 +119,9 @@ export default {
         }
       },
       addMemberRule: {
-        phone: [{ required: true, message: "手机号不能为空" },
-          { type: "number",
+        phone: [{required: true, message: "手机号不能为空"},
+          {
+            type: "number",
             message: "手机号格式不正确",
             trigger: "blur",
             transform(value) {
@@ -155,7 +158,7 @@ export default {
     this.init();
   },
   methods: {
-    async init(){
+    async init() {
       const _this = this;
       const ruleRes = (await _this.$apis.findGroupRule(_this.courseId)).data;
       _this.isRuleExisted = !ruleRes.code;
@@ -217,6 +220,7 @@ export default {
               if (res.data.code) {
                 ElMessage.error(res.data.message);
               } else {
+                this.groupData = res.data.data;
                 this.groupTableData.push(res.data.data);
                 this.createGroupDialog = false;
                 this.$refs.createGroupFormRef.resetFields();

src/views/PortalPage/PortalPage.vue

@@ -251,6 +251,8 @@ export default {
     this.exampleCoderTestList = (await this.$apis.getRecommendCoderExams({})).data.data;
 
     if (this.isLogin && this.isStudent) {
+      const res = await this.$apis.getStudentCourses();
+      console.log(res);
       this.myCourseList = (await this.$apis.getStudentCourses()).data.data;
       this.myEvalExamList = (await this.$apis.getStudentEvalExams()).data.data.filter(i => this.state(i) === "RUNNING");
       this.myCoderExamList = (await this.$apis.getStudentCoderExams({})).data.data.res.filter(i => this.state(i) === "RUNNING");