feat: 学生题库逻辑初步

src/components/Pagination.vue

@@ -4,7 +4,7 @@
       <c-button :theme="theme" :size="32" :left="12" :right="4" @click="handleChange({ page: page - 1 })">
         <c-icon bold :theme="theme" :size="16">keyboard_arrow_left</c-icon>
       </c-button>
-      <c-button text :theme="theme" @click="handleChange({ page: 1 })" :standout="page === 1">1</c-button>
+      <c-button text :theme="theme" v-if="totalPage !== 1" @click="handleChange({ page: 1 })" :standout="page === 1">1</c-button>
       <c-button :theme="theme" class="hidden-arrow-left" v-if="hasLeftDot" :size="32" :left="4" :right="4"
                 @click="handleChange({ page: page - SHOW_PAGE_NUM })">
         <c-icon :theme="theme" :size="18">skip_previous</c-icon>

src/router/quiz.js

@@ -47,19 +47,6 @@ export default [{
   meta: { roles: ['student'] },
   path: '/student/questions',
   name: 'student-question-table',
-  component: () => import(/* webpackChunkName: "student" */ '@/views/quiz/StudentQuestionTable.vue'),
-  children: [{
-    path: 'completed',
-    name: 'student-question-table-completed',
-    component: () => import(/* webpackChunkName: "student" */ '@/views/quiz/student-question-table-component/CompletedQuestions.vue')
-  }, {
-    path: 'marked',
-    name: 'student-question-table-marked',
-    component: () => import(/* webpackChunkName: "student" */ '@/views/quiz/student-question-table-component/MarkedQuestions.vue')
-  }, {
-    path: 'rated',
-    name: 'student-question-table-rated',
-    component: () => import(/* webpackChunkName: "student" */ '@/views/quiz/student-question-table-component/RatedQuestions.vue')
-  }]
+  component: () => import(/* webpackChunkName: "student" */ '@/views/quiz/StudentQuestionTable.vue')
 }
 ]

src/views/quiz/StudentQuestionTable.vue

@@ -2,84 +2,45 @@
   <div class="student-question-table">
     <back-title>
       我的题库
-      <c-tag theme="green">学生</c-tag>
+      <c-button :left="12" icon="assignment" :theme="getListFunction === getCompletedQuestions ? 'green' : 'normal'"
+                @click="getListFunction = getCompletedQuestions">已完成
+      </c-button>
+      <c-button :left="12" icon="bookmarks" :theme="getListFunction === getRatedQuestions ? 'green' : 'normal'"
+                @click="getListFunction = getRatedQuestions">已收藏
+      </c-button>
+      <c-button :left="12" icon="stars" :theme="getListFunction === getCollectedQuestions ? 'green' : 'normal'"
+                @click="getListFunction = getCollectedQuestions">已评价
+      </c-button>
     </back-title>
-    <div class="questions-router-card">
-      <div class="actions">
-        <router-link :to="{ name: 'student-question-table-completed' }">
-          <icon-button no-bold theme="blue">assignment</icon-button>
-        </router-link>
-        <router-link :to="{ name: 'student-question-table-marked' }">
-          <icon-button no-bold theme="blue">bookmarks</icon-button>
-        </router-link>
-        <router-link :to="{ name: 'student-question-table-rated' }">
-          <icon-button no-bold theme="blue">stars</icon-button>
-        </router-link>
-      </div>
-      <div class="views">
-        <router-view></router-view>
-      </div>
-    </div>
+    <question-table :get-list-function="getListFunction"></question-table>
   </div>
 </template>
 
 <script>
 import BackTitle from '@/components/Basic/BackTitle'
-import CTag from '@/components/Basic/CTag'
-import IconButton from '@/components/Basic/IconButton'
+import QuestionTable from '@/views/quiz/components/QuestionTable'
+import { getCompletedQuestions, getRatedQuestions, getCollectedQuestions } from '@/server/question'
+import CButton from '@/components/Basic/CButton'
 
 export default {
-  components: { IconButton, CTag, BackTitle }
+  components: { CButton, QuestionTable, BackTitle },
+  data () {
+    return {
+      getCompletedQuestions,
+      getRatedQuestions,
+      getCollectedQuestions,
+
+      getListFunction: getCompletedQuestions
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 .student-question-table {
-  background-color: #f8f8f8;
-  box-shadow: 0 0 0 1000px #f8f8f8;
   margin: 0 auto;
   max-width: 1000px;
   padding: 32px 24px 32px 24px;
 }
 
-@media (min-width: 500px) {
-  .questions-router-card {
-    direction: rtl;
-    height: calc(100vh - 192px);
-    border-radius: 16px;
-    background-color: white;
-    box-shadow: 3px 6px 6px rgba(0, 0, 0, .03);
-
-    display: flex;
-
-    .actions {
-      direction: ltr;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-around;
-      align-items: center;
-      width: 60px;
-      background-color: #e0efff;
-      border-radius: 0 16px 16px 0;
-    }
-
-    .views {
-      direction: ltr;
-      flex: 1;
-      padding: 16px 24px;
-      overflow: auto;
-    }
-  }
-}
-
-@media (max-width: 500px) {
-  .actions {
-    display: flex;
-    justify-content: space-evenly;
-    align-items: center;
-    transform: translateY(-16px);
-    background-color: #e0efff;
-    border-radius: 16px;
-  }
-}
 </style>

src/views/quiz/components/QuestionCard.vue

@@ -14,7 +14,10 @@
         <router-link v-if="editable" :to="{ name: 'edit-question', params: { questionId }}">
           <icon-button theme="green" :size="32">edit</icon-button>
         </router-link>
-        <router-link :to="{ name: 'question-detail', params: { questionId }}">
+        <router-link v-if="!studentMode" :to="{ name: 'question-detail', params: { questionId }}">
+          <icon-button no-bold theme="blue" :size="32">more_horiz</icon-button>
+        </router-link>
+        <router-link v-else :to="{ name: 'question-detail', params: { questionId }}">
           <icon-button no-bold theme="blue" :size="32">more_horiz</icon-button>
         </router-link>
       </div>
@@ -53,7 +56,8 @@ export default {
     selectable: {
       type: Boolean,
       default: false
-    }
+    },
+    studentMode: Boolean
   },
   data () {
     return { QuestionKind }

src/views/quiz/components/QuestionTable.vue

@@ -6,6 +6,7 @@
     <div class="question-card-container">
       <template v-for="item in questionList">
         <question-card
+          :student-mode="studentMode"
           v-if="item !== null"
           :key="item.id"
           :editable="ownQuestionIds.indexOf(item.id) !== -1"
@@ -44,6 +45,12 @@ export default {
     showOwn: {
       type: Boolean,
       default: false
+    },
+    // 学生模式补丁，会将教师端操作屏蔽
+    studentMode: Boolean,
+    getListFunction: {
+      type: Function,
+      default: getQuestionList
     }
   },
   model: {
@@ -56,6 +63,9 @@ export default {
   watch: {
     showOwn () {
       this.fetchQuestionList()
+    },
+    getListFunction () {
+      this.fetchQuestionList()
     }
   },
   data () {
@@ -74,7 +84,7 @@ export default {
   },
   mounted () {
     this.fetchQuestionList()
-    this.fetchOwnQuestionIds()
+    this.studentMode && this.fetchOwnQuestionIds()
   },
   methods: {
     fetchQuestionList ({
@@ -88,7 +98,7 @@ export default {
             this.questionList = questions
             this.page = page
           })
-        : getQuestionList({ key: stem, size, page })
+        : this.getListFunction({ key: stem, size, page })
           .then(({ data: questions, page }) => {
             this.questionList = questions
             this.page = page

src/views/quiz/student-question-table-component/CompletedQuestions.vue

@@ -1,13 +1,19 @@
 <template>
   <div>
-    <question-table></question-table>
+    <question-table :get-list-function="getCompletedQuestions"></question-table>
   </div>
 </template>
 
 <script>
 import QuestionTable from '@/views/quiz/components/QuestionTable'
+import { getCompletedQuestions } from '@/server/question'
 export default {
-  components: { QuestionTable }
+  components: { QuestionTable },
+  data () {
+    return {
+      getCompletedQuestions
+    }
+  }
 }
 </script>