添加判断防止报错

guoshilong

2023-03-18 3a85d31c1039315667f8fa66ce01be06626ed23f

 src/views/modules/modulesView.vue

@@ -8,6 +8,7 @@
        <el-button size="small" class="button" icon="el-icon-back" @click="backStartPage">回到开始页</el-button>
      </div>
    </div>

    <div class="content-view">
      <!--开始页-->
      <div v-if="currentIndex==1" class="start">
@@ -20,7 +21,7 @@
      </div>

      <!--内容页-->
      <div style="height: 100%;width: 100%"  v-if="currentIndex==2" class="content">
      <div style="height: 100%;width: 100%;background-color: #404040"  v-if="currentIndex==2" class="content">

        <!--flash-->
        <div  v-if="content.type == 1">
@@ -28,7 +29,7 @@
        </div>

        <!--图册-->
        <Flipbook v-if="content.type == 2" class="flipbook"
        <FlipBook v-if="content.type == 2" class="flipbook"
                  :pages="flipConfig.pages"
                  :startPage="flipConfig.pageNum"
                  v-slot="flipbook"
@@ -58,7 +59,7 @@
              @click="flipbook.flipRight"
            />
          </div>
        </Flipbook>
        </FlipBook>

        <!--视频-->
        <iframe v-if="content.type == 3" style="height: 100%;width: 100%" class="view-iframe" :src="iframePath"/>
@@ -72,6 +73,7 @@

<script>
import {getAll} from "@/api/modules/function";
import FlipBook from "flipbook-vue/dist/vue2/flipbook";
import LeftIcon from 'vue-material-design-icons/ChevronLeftCircle'
import RightIcon from 'vue-material-design-icons/ChevronRightCircle'
import PlusIcon from 'vue-material-design-icons/PlusCircle'
@@ -80,7 +82,7 @@
export default {
  name: "modulesView",
  props:['modules'],
  components: {LeftIcon, RightIcon, PlusIcon, MinusIcon},
  components: {FlipBook,LeftIcon, RightIcon, PlusIcon, MinusIcon},
  data() {
    return {
      funList:[],
@@ -91,9 +93,7 @@
      content:{},
      iframePath:"",
      flipConfig: {
        pages: [
          'http://dev.jxpskj.com:9000/multimedia/upload/20230316/4de7aac224ce2a8f4ed8b025740405d4.png'
        ],
        pages: [],
        pagesHiRes: [],
        hasMouse: true,
        pageNum: null,
@@ -116,7 +116,6 @@
      getAll(params).then(res => {
        if (res.data.code == 200) {
          let data = res.data.data
          this.funList = data
          data.forEach(e=>{
            if (e.property == 1){
              this.startPage = e
@@ -135,13 +134,18 @@
      if (data.type == 1) {

      } else if (data.type == 2) {
        // let fileArray = data.fileUrl
        // fileArray.forEach(e => {
        //   this.flipConfig.pages.push(e.value)
        // })
        let fileArray = data.fileUrl
        this.flipConfig.pages = []
        if (fileArray.length>0){
          fileArray.forEach(e => {
            this.flipConfig.pages.push(e.value)
          })
        }
      } else if (data.type == 3) {
        let url = data.fileUrl[0].value
        this.iframePath = 'http://192.168.0.200:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(url))
        if (data.fileUrl.length>0){
          let url = data.fileUrl[0].value
          this.iframePath = 'http://192.168.0.200:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(url))
        }
      }
    },
    backStartPage(){
@@ -170,7 +174,76 @@

.start-button-group {
  position: relative;
  display: flex;
  top: -25%;
  left: 42%;
  justify-content: center;
}
/**
翻页
 */
.flipbook {
  width: 100%;
  height: 100%;
}

.page-num {
  color: white;
}

.action-bar {
  width: 100%;
  height: 30px;
  padding: 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.action-bar .btn {
  font-size: 30px;
  color: #999;
}

.action-bar .btn svg {
  bottom: 0;
}

.action-bar .btn:not(:first-child) {
  margin-left: 10px;
}

.has-mouse .action-bar .btn:hover {
  color: #ccc;
  filter: drop-shadow(1px 1px 5px #000);
  cursor: pointer;
}

.action-bar .btn:active {
  filter: none !important;
}

.action-bar .btn.disabled {
  color: #666;
  pointer-events: none;
}

.action-bar .page-num {
  font-size: 12px;
  margin-left: 10px;
}

.flipbook .viewport {
  width: 90vw !important;
  height: calc(100vh - 800px - 40px) !important;
}

.flipbook .bounding-box {
  box-shadow: 0 0 20px #000;
}

.credit {
  font-size: 12px;
  line-height: 20px;
  margin: 10px;
}
</style>