GCLS_Page_Book/src/views/textbook-detail/TextbookDetailPdf.vue

<template>
  <!-- 预览 -->
  <div class="tarcer-dev-Preview" v-loading="loading" v-if="isData">
    <Header />

    <HeaderOne title="教材详情" name="试读PDF" />
    <div class="main" v-if="data">
      <div class="flassify">
        <div class="text">
          <p class="p1">{{ data.name }}</p>
          <p class="p2">
            <span>
              {{ data.author }}
            </span>
          </p>
        </div>
        <div class="pay_collect">
          <div class="download">
            <img
              @click="download"
              src="../../assets/common/download.png"
              alt=""
            />
            <!-- <span>DOWNLOAD</span> -->
          </div>
        </div>
      </div>
      <div v-if="attachment" class="pdf-box">
        <pdf
          ref="pdf"
          :src="attachment"
          v-for="i in numPages"
          :key="i"
          :page="i"
        >
          {{ i / numPages }}
        </pdf>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/inputModules/common/Header";
import HeaderOne from "@/components/inputModules/common/HeaderOne";
import pdf from "vue-pdf";
import { updateWordPack } from "@/utils/i18n";
import { getToken } from "@/utils/auth";
import { Base64 } from "js-base64";

import { TextbookAPI, LearnWebSI } from "@/api/ajax";
export default {
  name: "TextbookDetailPdf",
  components: {
    Header,
    HeaderOne,
    pdf,
  },
  data() {
    return {
      numPages: null,
      isCollect: false,
      materialId: null,
      data: null,
      attachment: null,
      loading: false,
      Ispreview: "", // 是不是预览
      NopymentShow: false, //添加订单弹窗
      PymentShow: false, //支付订单弹窗
      orderNumber: null, //订单号
      IsDownload: false, //是否可以下载
      allList: null,
      isData: false,
    };
  },
  computed: {},
  methods: {
    // 下载
    download() {
      let userInfor = JSON.parse(getToken());
      let UserCode = "",
        UserType = "",
        SessionID = "";
      if (userInfor) {
        UserCode = userInfor.user_code;
        UserType = userInfor.user_type;
        SessionID = userInfor.session_id;
      }
      let FileID = Base64.decode(this.$route.query.fileId);
      let data = {
        SessionID,
        UserCode,
        UserType,
        FileID,
      };
      location.href =
        process.env.VUE_APP_BASE_API +
        `/GCLSFileServer/WebFileDownload?UserCode=${data.UserCode}&UserType=${data.UserType}&SessionID=${data.SessionID}&FileID=${data.FileID}`;
    },
    // 获取pdf的页数
    getNumPages() {
      this.loading = true;
      let _this = this;
      let loadingTask = pdf.createLoadingTask(_this.attachment);

      loadingTask.promise
        .then((pdf) => {
          if (_this.data.isPurchased) {
            _this.numPages = pdf.numPages;
          } else {
            _this.numPages = 2;
          }
          _this.loading = false;
        })
        .catch((err) => {
          console.error("Pdf Loading failed", err);
        });
    },
    // 获取学习资料详情
    getdetail() {
      this.loading = true;
      let Mname = "book-book_manager-GetBook";
      // 获取课程详情
      TextbookAPI(Mname, {
        id: this.materialId,
      })
        .then((res) => {
          this.data = res;
          this.loading = false;
          this.attachment =
            process.env.VUE_APP_PDF_API +
            Base64.decode(this.$route.query.relativePath);
          this.getNumPages();
          console.log(this.attachment);
        })
        .catch((res) => {
          this.loading = false;
        });
    },
  },
  async created() {
    await updateWordPack({
      word_key_list: [
        "Key5",
        "Key8",
        "Key9",
        "Key39",
        "Key43",
        "Key52",
        "Key53",
        "Key54",
        "Key55",
        "Key58",
        "Key72",
        "Key94",
        "Key107",
        "Key109",
        "Key214",
        "Key232",
        "Key108",
        "Key396",
        "Key472",
        "Key473",
        "Key474",
        "Key572",
        "Key574",
        "Key575",
        "Key576",
      ],
    });
    this.isData = true;
  },
  mounted() {
    this.materialId = this.$route.query.id;
    if (this.materialId) {
      this.getdetail();
    }
  },
};
</script>

<style lang="scss" scoped>
.tarcer-dev-Preview {
  height: 100%;

  .main {
    min-height: 543px;
    background: #f6f6f6;
    padding-bottom: 20px;
    padding-top: 30px;
    position: relative;
  }
  .flassify {
    position: relative;
    width: 1140px;
    height: 154px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    // align-items: center;
    padding: 0 30px;
    .text {
      height: 100%;
      padding-top: 24px;
      .p1 {
        font-weight: bold;
        font-size: 30px;
        color: #1f2127;
      }
      .p2 {
        margin-top: 8px;
        margin-bottom: 8px;
        font-size: 16px;
        color: #1f2127;
      }
    }
    .pay_collect {
      // position: absolute;
      // right: 30px;
      // bottom: 24px;
      height: 100%;
      padding-top: 90px;
      display: flex;
      align-content: center;
      .price {
        font-weight: bold;
        font-size: 24px;
        margin-right: 20px;
        .price_2 {
          font-size: 16px;
        }
      }
      .pay {
        width: 120px;
        height: 40px;
        background: #ff9900;
        border-radius: 4px;
        color: white;
        font-weight: 600;
        font-size: 20px;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
        margin-right: 20px;
      }
      .collect {
        display: flex;
        align-items: center;
        height: 40px;

        font-weight: bold;
        font-size: 24px;
        color: #1f2127;
        img {
          width: 24px;
          margin-right: 10px;
          cursor: pointer;
        }
      }
      .download {
        height: 40px;
        margin-right: 20px;
        display: flex;
        align-items: center;
        font-weight: bold;
        font-size: 24px;
        color: #1f2127;
        img {
          width: 24px;
          margin-right: 10px;
          cursor: pointer;
        }
      }
    }
  }
  .pdf-box {
    width: 1140px;
    margin: 24px auto;
  }
  .NObuy {
    width: 1200px;
    margin: 24px auto;
    min-height: 1000px;
    filter: blur(8px);
  }
  .buyBtn {
    width: 284px;
    height: 67px;
    background: #ff9900;
    border-radius: 8px;
    text-align: center;
    line-height: 67px;
    color: white;
    font-weight: bold;
    font-size: 22px;
    margin: 0 auto;
    cursor: pointer;
    position: relative;
    top: -150px;
  }
  .dialogTitle {
  }
}
</style>
<style lang="scss">
.tarcer-dev-Preview {
  .el-dialog__body {
    padding: 30px 32px;
  }
}
.cui-ribbonTopBars {
  display: none !important;
}
</style>