datang-meeting/大唐会议前台1/pages/index/pdf.vue

<template>
  <view class="box" style="position: relative">
    <image class="logo" src="../../imgs/logo.png" mode="widthFix"></image>
    <view class="box-cent">
      <view class="box-cent1">
        <view class="view-pdf">
          <pdf
            v-for="i in loadedPages"
            :key="i"
            :src="filePdfUrl"
            :page="i"
          ></pdf>
        </view>
      </view>
      <u-modal
        v-if="show"
        :show="show"
        @cancel="show = false"
        :showCancelButton="true"
        content="是否确认退出登录？"
        @confirm="handleOut"
      ></u-modal>
    </view>
    <view class="view-backimg">
      <view class="view-backimg-top"></view>
    </view>
    <view class="avatarobx">
      <view class="name">{{ userName }}</view>
      <image
        @click="handleBack"
        class="avatar"
        src="../../imgs/arrow-left.png"
        mode="widthFix"
      ></image>
      <image
        @click="show = true"
        class="avatar"
        src="../../imgs/out.png"
        mode="widthFix"
      ></image>
    </view>
  </view>
</template>

<script>
import pdf from "vue-pdf";
export default {
  name: "MeetingList",
  props: ["infos"],
  components: {
    pdf,
  },
  data() {
    return {
      filePdfUrl: "",
      userName: uni.getStorageSync("userName"),
      detailsId: "",
      numPages: 0,
      show: false,
      loadedPages: [],
      currentPage: 1,
      loadInterval: null,
      loadCount: 5, // 默认每次加载5页
    };
  },
  created() {
    let routes = getCurrentPages();
    let curParam = routes[routes.length - 1].options;
    this.detailsId = curParam.detailsId;
    this.filePdfUrl = curParam.filePdfUrl;
    this.getNumPages(this.filePdfUrl);
  },
  beforeDestroy() {
    if (this.loadInterval) {
      clearInterval(this.loadInterval);
    }
  },
  methods: {
    getNumPages(url) {
      this.pdfSrc = url;
      this.pdfSrc = pdf.createLoadingTask(this.pdfSrc);
      this.pdfSrc.promise.then((pdf) => {
        this.numPages = pdf.numPages;
        this.startLoadingPages();
      });
    },

    startLoadingPages() {
      this.loadInterval = setInterval(() => {
        if (this.currentPage <= this.numPages) {
          // 每次加载loadCount页
          const endPage = Math.min(
            this.currentPage + this.loadCount - 1,
            this.numPages
          );
          for (let i = this.currentPage; i <= endPage; i++) {
            this.loadedPages.push(i);
          }
          this.currentPage = endPage + 1;
        } else {
          clearInterval(this.loadInterval);
        }
      }, 500);
    },
    handleBack() {
      uni.navigateTo({
        url: `/pages/index/details?id=${this.detailsId}`,
      });
    },
    handleOut() {
      uni.clearStorage();
      uni.reLaunch({
        url: "/pages/user/login",
      });
    },
    handleLogo() {
      uni.navigateTo({
        url: `/pages/index/index`,
      });
    },
    handleClose() {
      this.pdfId = "";
      this.show = false;
    },
    prePage() {
      var page = this.pageNum;
      page = page > 1 ? page - 1 : this.pageTotalNum;
      this.pageNum = page;
    },
    nextPage() {
      var page = this.pageNum;
      page = page < this.pageTotalNum ? page + 1 : 1;
      this.pageNum = page;
    },
    pageLoaded(e) {
      this.curPageNum = e;
    },
    pdfError(error) {
      console.error(error);
    },
  },
  onLoad() {},
};
</script>

<style lang="scss" scoped>
::v-deep .u-modal__content {
  text-align: center;
}
.popup-close {
  position: fixed;
  right: 20px;
  top: 20px;
  z-index: 9999;

  ::v-deep.uni-icons {
    font-size: 40px !important;
    color: #fff !important;
  }
}

.view-gb {
  max-width: 100px;
  margin-left: 16px;
}

.view-li {
  // padding-left: 10px;
}

.view-pdf {
  max-width: 100%;
  width: 60vw;
  margin: auto;
}

.tools {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 26px;
  left: 16px;
  right: 16px;

  uni-button {
    font-size: 18px;
    line-height: 44px;
    height: 44px;
    flex: 1;
  }

  .page {
    line-height: 44px;
    height: 44px;
    width: 100px;
    text-align: center;
  }
}

.pathsName {
  color: #fff;
  font-size: 12px;
}

.pdfBox .el-button {
  background: rgba(255, 255, 255, 0);
  border: none;
  /* width: 30px; */
}

.pdfBox >>> .el-icon-arrow-left,
.pdfBox >>> .el-icon-arrow-right {
  font-size: 18px;
  color: #000;
}

.pdfBox .page {
  margin: 0 10px;
}

.pdfBox .el-button-group {
  width: 100%;
  justify-content: center;
  display: flex;
  align-items: center;
  padding-top: 20px;
}

.pdfBox {
  padding-bottom: 20px;
  margin-top: 20px;
  background: #fff;
  min-height: 300px;
}

.contLeft-pane >>> .el-form-item__label {
  text-align: right;
  margin-right: 10px !important;
  padding: 0 !important;
}

.contLeft-pane >>> .el-form-item--medium .el-form-item__content {
  flex: 1;
}

.li-item {
  uni-view {
    font-size: 20px;
    line-height: 40px;

    span {
      font-size: 20px;
    }
  }

  .li-title {
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
  }
}

.view-box {
  margin-top: 50px;
}

.view-none {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px !important;
}

.view-ul {
  text-align: left;
  margin-bottom: 16px;

  .view-li {
    span {
      font-size: 20px;
      line-height: 40px;
    }
  }
}

.view-title {
  display: inline-block;
  border: 1px solid #000;
  padding: 0 14px;
  margin-bottom: 30px;
  line-height: 50px;
  border-radius: 6px;
  font-size: 20px;
  font-weight: bold;
}

.box {
  height: 100vh;
  background-size: cover;
  box-sizing: border-box;
  padding: 20px 100px;
  display: flex;
  flex-direction: column;

  .box-cent {
    flex: 1;
    margin-top: 70px;
    position: relative;
  }

  .box-cent1 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: scroll;
  }
}
</style>
<style></style>