create identification page

assets/css/person.scss

@@ -68,4 +68,33 @@
 
     }
   }
+
+  &__selections{
+    width: 100%;
+    text-align: center;
+  }
+
+  &__selection{
+    width: 200px;
+  }
+
+  &__tab{
+    margin: 20px;
+
+    &__item{
+      margin-left: 10px;
+      margin-top: 30px;
+      width: 100%;
+    }
+
+    &__input{
+      width: 300px;
+    }
+
+    &__button{
+      width: 120px;
+      margin: 20px auto;
+    }
+  }
+
 }

pages/person/identification.vue

@@ -1,14 +1,131 @@
 <template>
-
+  <div class="main-card__body" v-loading="pageLoading">
+    <h1 class="main-card__title">
+      身份认证
+    </h1>
+    <!--<div class="main-card__selections">-->
+      <!--<el-button type="primary" class="main-card__selection" plain>主要按钮</el-button>-->
+    <!--</div>-->
+    <el-tabs v-model="activeTab" type="card" class="main-card__tab">
+      <el-tab-pane label="教师认证" name="teacher">
+        <div class="main-card__tab__item">
+          当前状态：
+          <el-tag v-if="state === 'unidentified'" type="info">未认证</el-tag>
+          <el-tag v-if="state === 'identifying'">审核中</el-tag>
+          <el-tag v-if="state === 'identified'" type="success">已认证</el-tag>
+        </div>
+        <div class="main-card__tab__item">
+          真实姓名：
+          <el-input v-model="realName" class="main-card__tab__input" maxlength="20" oninput="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,'')"></el-input>
+        </div>
+        <div class="main-card__tab__item">
+          所属单位：
+          <el-select v-model="organization" placeholder="请选择单位" class="main-card__tab__input">
+            <el-option
+              v-for="item in organizations"
+              :key="item"
+              :label="item"
+              :value="item">
+            </el-option>
+          </el-select>
+        </div>
+        <div class="main-card__tab__item" >
+          教师工号：
+          <el-input v-model="jobNumber" class="main-card__tab__input" maxlength="20" oninput="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')"></el-input>
+        </div>
+        <div class="main-card__tab__item">
+          <el-button type="primary" class="main-card__tab__button" :loading="loading" @click="apply">提交审核</el-button>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="学生认证" name="student" disabled></el-tab-pane>
+      <el-tab-pane label="职员认证" name="faculty" disabled></el-tab-pane>
+    </el-tabs>
+  </div>
 </template>
 
 <script>
   export default {
     name: "identification",
     layout: 'person',
+    data(){
+      return{
+        activeTab: 'teacher',
+        realName: '',
+        state: 'unidentified',
+        organizations: [
+          '南京大学',
+          '其他机构'
+        ],
+        organization: '',
+        pageLoading: true,
+        jobNumber: '',
+        loading: false
+      }
+    },
+    mounted(){
+      this.pageLoading = false;
+    },
+    methods:{
+      apply(){
+        this.loading = true;
+        if(this.realName.length === 0){
+          this.$message({
+            showClose: true,
+            message: '真实姓名不得为空',
+            type: 'error'
+          });
+          this.loading = false;
+          return;
+        }
+        if(this.organization.length === 0){
+          this.$message({
+            showClose: true,
+            message: '请选择所属单位',
+            type: 'error'
+          });
+          this.loading = false;
+          return;
+        }
+        if(this.jobNumber.length === 0){
+          this.$message({
+            showClose: true,
+            message: '工号不得为空',
+            type: 'error'
+          });
+          this.loading = false;
+          return;
+        }
+        this.$api.$post('/teacher/apply', {
+          realName: this.realName,
+          jobNumber: this.jobNumber,
+          organization: this.organization
+        }).then((res) =>
+          {
+            if(res.code === 0){
+              this.state = 'identifying';
+              this.$message({
+                showClose: true,
+                message: "提交成功，请耐心等待审核结果",
+                type: 'success'
+              });
+            }else{
+              this.$message({
+                showClose: true,
+                message: res.message,
+                type: 'error'
+              });
+            }
+          }
+        ).catch((e)=>{
+          console.log(e);
+        });
+        this.loading = false;
+      }
+    }
   };
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+  @import '~/assets/css/person.scss';
 </style>
+

pages/person/info.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="main-card__body">
+  <div class="main-card__body" v-loading="pageLoading">
     <h1 class="main-card__title">
       个人信息
     </h1>
@@ -77,11 +77,13 @@
         nameDialogVisible: false,
         emailDialogVisible: false,
         signatureDialogVisible: false,
-        loading: false
+        loading: false,
+        pageLoading: true
       }
     },
     mounted(){
       this.getInfo();
+      this.pageLoading = false;
     },
     methods:{
       getInfo(){