flip book demo

package.json

@@ -45,6 +45,7 @@
     "echarts": "4.9.0",
     "element-ui": "2.15.0",
     "file-saver": "^2.0.4",
+    "flipbook-vue": "^0.10.4",
     "fuse.js": "6.4.3",
     "highlight.js": "9.18.5",
     "html2canvas": "^1.0.0-rc.7",

src/router/index.js

@@ -777,6 +777,14 @@ export const constantRoutes = [{
         meta: {
           title: '选科名单详情'
         }
+      },
+      {
+        path: '/elective/report/index',
+        component: (resolve) => require(['@/views/elective/report/index'], resolve),
+        name: 'ElectiveReportIndex',
+        meta: {
+          title: '报告示例'
+        }
       }
     ]
   }

src/views/elective/report/index.vue

@@ -1,13 +1,35 @@
 <template>
-
+  <div class="app-container">
+    <flip-book class="flip-class" :pages="images" :click-to-zoom="false"></flip-book>
+  </div>
 </template>
 
 <script>
+import FlipBook from 'flipbook-vue'
+
 export default {
-  name: 'report-index'
+  name: 'report-index',
+  components: { FlipBook },
+  data() {
+    return {
+      images: [null,
+        require('@/assets/images/report_demo/demo_report_a.png'),
+        require('@/assets/images/report_demo/demo_report_b.png'),
+        require('@/assets/images/report_demo/demo_report_c.png'),
+        require('@/assets/images/report_demo/demo_report_d.png'),
+        require('@/assets/images/report_demo/demo_report_e.png'),
+        require('@/assets/images/report_demo/demo_report_f.png')
+      ]
+    }
+  }
 }
 </script>
 
 <style scoped>
-
+.flip-class {
+  width: 100%;
+  height: 550px;
+  background-color: #999999;
+  padding: 20px 0;
+}
 </style>

src/views/system/user/profile/round-select.vue

@@ -37,6 +37,7 @@
     </el-card>
     <el-card shadow="hover" class="mt20">
       <template #header>选科通知</template>
+      <el-button @click="goReportDemo">报告示例</el-button>
     </el-card>
 
     <el-dialog :visible.sync="helpVideo.visible">
@@ -54,6 +55,7 @@ import TestResult from '@/views/elective/test/components/test-result'
 import SelectSubject from '@/views/system/user/profile/components/select-subject'
 import ReportTable from '@/views/system/user/profile/components/report-table'
 import ElectiveGenerationSteps from '@/views/elective/generation/components/elective-generation-steps'
+import TransferMixin from '@/components/mx-transfer-mixin'
 import config from '@/common/mx-config'
 import {
   getStudentElectiveModels,
@@ -63,6 +65,7 @@ import {
 } from '@/api/webApi/elective/selected-subject'
 
 export default {
+  mixins: [TransferMixin],
   provide() {
     return {
       optionalMajors: this.getOptionalMajors,
@@ -198,6 +201,10 @@ export default {
         this.selectObj = res.data['selectResult']
         this.allowSelect = res.data.allowSelect
       })
+    },
+    goReportDemo() {
+      const path = '/elective/report/index'
+      this.transferTo(path)
     }
   }
 }