项目优化

src/components/CourseList.vue

 <template>
   <div>
-    <div style="margin-bottom: 20px">
-      <el-button type="primary" @click="getCourseList('learn-time')">最近学习<i class="el-icon-caret-bottom el-icon--right"></i></el-button>
-      <el-button type="primary" @click="getCourseList('updated_time')">最近更新<i class="el-icon-caret-bottom el-icon--right"></i></el-button>
+    <div style="" class="course-top">
+      <el-button type="primary" @click="getCourseList('learn-time')"
+        >最近学习<i class="el-icon-caret-bottom el-icon--right"></i
+      ></el-button>
+      <el-button type="primary" @click="getCourseList('updated_time')"
+        >最近更新<i class="el-icon-caret-bottom el-icon--right"></i
+      ></el-button>
+      <div class="coursr-top-text">
+        你的课程有效期为：{{ $store.state.user.student_info.expiration_time }}，请在有效期内完成学习及考试
+      </div>
     </div>
     <app-container>
       <div class="course-list" element-loading-text="加载中..." v-loading="!loaded">
@@ -46,6 +53,9 @@ export default {
       })
     }
   },
+  mounted() {
+    console.log(this.$store.state.user.student_info.expiration_time, '00000')
+  },
   methods: {
     getCourseList(value = '') {
       api
@@ -67,3 +77,14 @@ export default {
   }
 }
 </script>
+<style lang="scss" scoped>
+.course-top {
+  display: flex;
+  align-items: flex-end;
+  margin-bottom: 20px;
+  .coursr-top-text {
+    margin-left: 20px;
+    font-size: 28px;
+  }
+}
+</style>

src/modules/cert/views/Index.vue

 <template>
   <app-container>
-    <el-empty :description="msg" v-if="!data.length"></el-empty>
-    <div class="cert" v-else>
+    <el-empty :description="msg" v-if="expirationMonth === 12 && !data.length"></el-empty>
+    <div v-if="expirationMonth === 3 && !data.length" style="position: relative">
+      <el-empty description="您已考试通过，请扫描下方二维码获取证书"></el-empty>
+      <img
+        src="https://webapp-pub.ezijing.com/project/fd/u171.png"
+        alt=""
+        style="position: absolute; top: 350px; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px"
+      />
+    </div>
+    <div class="cert" v-if="data.length">
       <el-button type="primary" @click="downImg">证书下载</el-button>
       <div class="img">
         <img :src="item.url" :key="index" alt="" v-for="(item, index) in data" />
@@ -18,6 +26,11 @@ export default {
       msg: ''
     }
   },
+  computed: {
+    expirationMonth() {
+      return parseInt(this.$store.state.user.student_info.expiration_month)
+    }
+  },
   mounted() {
     api.getCert().then(response => {
       console.log(response)

src/modules/course/learn/views/Index.vue

@@ -23,7 +23,11 @@ export default {
         this.$message.error('暂无权限')
         return
       }
+      // if (new Date(this.$store.state.user.student_info.expiration_time).getTime() < new Date().getTime()) {
+      //   this.$message.warning('您的课程已到期')
+      // } else {
       this.$router.push({ name: 'courseLearnItem', query: { id: data.course_id } })
+      // }
     },
     // 搜索
     handleSearch() {}

src/modules/exam/exam/views/Exam.vue

 <template>
   <div>
+    {{ $route.query.personal_name }}
+    {{ $route.query.id_number }}
     <exam-card
       :title="$route.query.title || '考试'"
       :hasMark="hasMark"
@@ -43,7 +45,9 @@ export default {
     getTopic() {
       const param = {
         paper_id: this.examId,
-        is_create: 1
+        is_create: 1,
+        personal_name: this.$route.query.personal_name,
+        id_number: this.$route.query.id_number
       }
       // const params = this.$route.query.is_create ? { ...param, is_create: 1 } : param
       api.getExamQuestion(param).then(response => {

src/modules/exam/exam/views/Index.vue

@@ -60,6 +60,21 @@
         <el-button :disabled="!isRead" type="primary" @click="goPage">{{ noticeText }}</el-button>
       </span>
     </el-dialog>
+    <!-- 校验个人信息弹框 -->
+    <el-dialog :visible.sync="infoVisible" width="30%">
+      <el-form ref="form" :model="form" label-width="80px">
+        <el-form-item label="姓名:">
+          <el-input v-model="form.personal_name"></el-input>
+        </el-form-item>
+        <el-form-item label="身份证号:">
+          <el-input v-model="form.id_number"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="onSubmit">提交</el-button>
+        <div style="margin-top: 10px; color: #c01540">请准确填写姓名及身份证号码信息，结业证书信息将以此为准</div>
+      </span>
+    </el-dialog>
   </app-container>
 </template>
 
@@ -74,7 +89,12 @@ export default {
       noticeText: '我已阅读，开始考试（20秒）',
       isRead: false,
       curExamId: '',
-      curExamTitle: ''
+      curExamTitle: '',
+      infoVisible: false,
+      form: {
+        personal_name: '',
+        id_number: ''
+      }
     }
   },
   mounted() {
@@ -90,14 +110,25 @@ export default {
         }
       })
     },
+    onSubmit() {
+      if (this.form.personal_name === '' || this.form.id_number === '') {
+        this.$message.warning('请完整写姓名及身份证号码信息，才能开始考试')
+        return false
+      } else {
+        this.$router.push({
+          path: '/exam/exam/exam',
+          query: {
+            id: this.curExamId,
+            title: this.curExamTitle,
+            personal_name: this.form.personal_name,
+            id_number: this.form.id_number
+          }
+        })
+      }
+    },
     goPage() {
-      this.$router.push({
-        path: '/exam/exam/exam',
-        query: {
-          id: this.curExamId,
-          title: this.curExamTitle
-        }
-      })
+      this.dialogVisible = false
+      this.infoVisible = true
     },
     // 重新考试
     reStartExam(data) {

src/modules/exam/exam/views/Result.vue

@@ -7,8 +7,23 @@
           {{ data.sheet.created_time }}
         </span>
       </div>
+      <div v-if="expirationMonth === 3" style="position: relative">
+        <el-empty description="您已考试通过，请扫描下方二维码获取证书"></el-empty>
+        <img
+          src="https://webapp-pub.ezijing.com/project/fd/u171.png"
+          alt=""
+          style="
+            position: absolute;
+            top: 350px;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 200px;
+            height: 200px;
+          "
+        />
+      </div>
       <div class="chart-box">
-        <div class="chart-item" v-if="Object.keys(datas.data).length">
+        <div class="chart-item" v-if="expirationMonth === 12 && Object.keys(datas.data).length">
           <div class="chart-title">成绩</div>
           <chart :accuracy="score" :accuracScore="totalScore">
             <template v-slot:tips>
@@ -17,12 +32,13 @@
           </chart>
         </div>
       </div>
-      <p class="new__text">{{ resultText }}</p>
+      <p class="new__text" v-if="expirationMonth === 12">{{ resultText }}</p>
     </div>
   </div>
 </template>
 <script>
 import chart from '@/components/exam/result/pieChart.vue'
+
 import * as api from '../api.js'
 export default {
   components: {
@@ -61,6 +77,9 @@ export default {
     },
     setStyle() {
       return `width: ${100 * this.percent}%`
+    },
+    expirationMonth() {
+      return parseInt(this.$store.state.user.student_info.expiration_month)
     }
   },
   methods: {
@@ -90,9 +109,9 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.new__text{
+.new__text {
   text-align: center;
-  padding:30px;
+  padding: 30px;
   font-size: 22px;
 }
 .result-box {