feat: 课件页码跳转

src/components/PDF/PdfController.vue

@@ -1,41 +1,49 @@
 <template>
   <div class="pdf-controller">
-<!--    <icon :class="pageMarked ? 'active' : ''" @click="handleMarkButtonClicked"-->
-<!--          :unicode="pageMarked ? iconMap['mark'] : iconMap['mark_border']" title="收藏本页"/>-->
-<!--    <icon></icon>-->
-    <a :href="src"><icon-button title="上一页">cloud_download</icon-button></a>
+    <!--    <icon :class="pageMarked ? 'active' : ''" @click="handleMarkButtonClicked"-->
+    <!--          :unicode="pageMarked ? iconMap['mark'] : iconMap['mark_border']" title="收藏本页"/>-->
+    <!--    <icon></icon>-->
+    <a :href="src">
+      <icon-button title="上一页">cloud_download</icon-button>
+    </a>
     <div class="spacer"></div>
     <icon-button @click="handlePrevious" title="上一页">navigate_before</icon-button>
-    <icon-button @click="handleScreenShot" title="将本页截图">save_alt</icon-button>
+    <!--    <icon-button @click="handleScreenShot" title="将本页截图"></icon-button>-->
+    <label class="to-page-action">
+      {{currentPage}} / {{totalPages}}
+      <c-input placeholder="to" ref="input" type="number" v-model="toPage" @input="handleToPage"/>
+    </label>
     <icon-button @click="handleNext" title="下一页">navigate_next</icon-button>
     <div class="spacer"></div>
-    <icon-button :theme="showDiscussion ? 'blue' : null" @click="handleDiscussionShowState" title="讨论区">chat_bubble</icon-button>
+    <icon-button :theme="showDiscussion ? 'blue' : null" @click="handleDiscussionShowState" title="讨论区">chat_bubble
+    </icon-button>
   </div>
 </template>
 
 <script>
 import IconButton from '@/components/Basic/IconButton'
-import { NEXT_PAGE, PREVIOUS_PAGE, SET_SCREEN_SHOT, TOGGLE_SHOW_DISCUSSION } from '@/store/types/pdf-types'
+import { NEXT_PAGE, PREVIOUS_PAGE, SET_CURRENT_PAGE, TOGGLE_SHOW_DISCUSSION } from '@/store/types/pdf-types'
 import { mapState } from 'vuex'
+import CInput from '@/components/Basic/CInput'
+import { isEmpty } from '@/utils/types'
 
 export default {
-  components: { IconButton },
+  components: { CInput, IconButton },
   data () {
     return {
-      pageMarked: false
+      pageMarked: false,
+      toPage: ''
     }
   },
   computed: {
     ...mapState({
       showDiscussion: state => state.pdf.showDiscussion,
-      src: state => state.pdf.src
+      src: state => state.pdf.src,
+      totalPages: state => state.pdf.totalPages,
+      currentPage: state => state.pdf.currentPage
     })
   },
   methods: {
-    handleMarkButtonClicked () {
-      this.pageMarked = !this.pageMarked
-      // todo
-    },
     handleDiscussionShowState () {
       this.$store.commit(TOGGLE_SHOW_DISCUSSION)
     },
@@ -45,9 +53,24 @@ export default {
     handleNext () {
       this.$store.commit(NEXT_PAGE)
     },
-    handleScreenShot () {
-      this.$store.commit(SET_SCREEN_SHOT)
+    handleToPage (value) {
+      if (isEmpty(value) || value === '' || value === 0) {
+        return
+      }
+      value = typeof value === typeof '' ? parseInt(value) : value
+      if (value > this.totalPages) {
+        this.$setInfoMessage('超过最大页数，已跳到最后一页')
+        this.$store.commit(SET_CURRENT_PAGE, { currentPage: this.totalPages })
+      } else if (value <= 0) {
+        this.$setInfoMessage('超过最小页数，已跳到第一页')
+        this.$store.commit(SET_CURRENT_PAGE, { currentPage: 1 })
+      } else {
+        this.$store.commit(SET_CURRENT_PAGE, { currentPage: value })
+      }
     }
+    // handleScreenShot () {
+    //   this.$store.commit(SET_SCREEN_SHOT)
+    // }
   }
 }
 </script>
@@ -71,6 +94,16 @@ export default {
   flex: 1;
 }
 
+.to-page-action {
+  color: #7a8a9a;
+
+  .c-input {
+    max-width: 54px;
+    height: 30px;
+    margin-left: 12px;
+  }
+}
+
 @media (max-width: 480px) {
   .spacer {
     max-width: 12px;

src/views/quiz/components/QuizEditor.vue

@@ -129,7 +129,7 @@ export default {
   display: flex;
   width: 100%;
   margin: 0 -24px;
-  align-items: start;
+  align-items: flex-start;
 
   & > div {
     margin: 0 24px;