GCLS_Page_TC/src/views/teacher-dev/Preview.vue

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

    <HeaderOne v-if="!Ispreview && data" :text="data.name" :allList="allList" />
    <div class="main" v-if="data">
      <div class="flassify">
        <div class="text">
          <p class="p1">{{ data.name }}</p>
          <p class="p2">
            <span v-for="(item, i) in data.teacher" :key="i + item">
              {{ item }}{{ i == data.teacher.length - 1 ? "" : "," }}
            </span>
          </p>
          <p>{{ data.updateTime }}</p>
        </div>
        <div class="pay_collect" v-if="!Ispreview">
          <div class="price" v-if="!data.isPurchased">
            ¥
            <span
              class="price_1"
              v-html="changePrice(data.price * 1, 24, 16)"
            ></span>
          </div>
          <div class="pay" @click="buy" v-if="!data.isPurchased">
            <!-- 购买 -->{{ $t("Key72") }}
          </div>
          <div class="download" v-if="data.isPurchased && IsDownload">
            <img
              @click="download"
              src="../../assets/teacherdev/download.png"
              alt=""
            />
            <!-- <span>DOWNLOAD</span> -->
          </div>
          <div class="collect">
            <img
              @click="changeCollect"
              v-show="!data.isFavorite"
              src="../../assets/teacherdev/collect4.png"
              alt=""
            />
            <img
              @click="changeCollect"
              v-show="data.isFavorite"
              src="../../assets/teacherdev/collect3.png"
              alt=""
            />
          </div>
        </div>
      </div>
      <div :class="data.isPurchased || Ispreview ? 'buy' : 'NObuy'">
        <!--fileUrl需要改成安全地址 file_url_https -->
        <iframe
          :src="attachment[0].newpath"
          width="100%"
          height="1000px"
          id="ifm"
        ></iframe>
        <!-- <object
          type="text/html"
          height="1000px"
          width="100%"
          :data="attachment[0].newpath"
        ></object> -->
        <!-- <iframe
          v-if="
            attachment[0].fileType != 'pdf' && attachment[0].fileType != 'PDF'
          "
          :src="
            'https://view.officeapps.live.com/op/view.aspx?src=' +
            `${attachment[0].fileUrlHttps}`
          "
          width="100%"
          height="1000px"
          scrolling="no"
          id="if"
        >
        </iframe>
        <iframe
          v-else
          :src="'./pdf/web/viewer.html?file=' + attachment[0].fileRelativePath"
          style="width: 100%; height: 1000px"
        ></iframe> -->
        <!-- <pdf
          v-else
          ref="pdf"
          :src="attachment[0].fileRelativePath"
          v-for="i in numPages"
          :key="i"
          :page="i"
        >
          {{ i / numPages }}
        </pdf> -->
      </div>
      <div v-if="!data.isPurchased && !Ispreview" @click="buy" class="buyBtn">
        <!-- 点击购买 -->{{ $t("Key574") }}
      </div>
    </div>
    <el-dialog
      :visible.sync="NopymentShow"
      width="720px"
      :before-close="closeNoPyment"
    >
      <div class="dialogTitle" slot="title">
        <!-- 商品详情 -->{{ $t("Key52") }}
      </div>
      <Confirmorder
        ref="Confirmorder"
        :data="data"
        :goods_type="401"
        :changeOrderNumber="changeOrderNumber"
        :goods_detail_type="goods_detail_type"
      />
    </el-dialog>
    <el-dialog
      top="50px"
      :title="$t('Key472') + '：' + orderNumber"
      :visible.sync="PymentShow"
      width="720px"
      :before-close="closePyment"
    >
      <Payment
        :data="data"
        :orderNumber="orderNumber"
        :closePyment="closePyment"
      />
    </el-dialog>
  </div>
</template>

<script>
import Header from "@/components/Header";
import HeaderOne from "@/components/teacher-dev/HeaderOne";
import pdf from "vue-pdf";
import Confirmorder from "@/components/payment/Confirmorder";
import Payment from "@/components/payment/Payment";
import { updateWordPack } from "@/utils/i18n";
import { getToken, getConfig } from "@/utils/auth";

const Base64 = require("js-base64").Base64;

import {
  materialdetail,
  materialvisit,
  LearnWebSI,
  Personamaterialdetail,
  getContentFile,
} from "@/api/api";
export default {
  name: "tarcer-dev-Preview",
  components: {
    Header,
    HeaderOne,
    pdf,
    Confirmorder,
    Payment,
  },
  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,
      goods_detail_type: null,
      file_preview_url: "",
    };
  },
  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 = this.attachment[0].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}`;
    },
    // 生成订单 同时切换到支付弹窗
    changeOrderNumber(
      val,
      back_discount_code,
      discount_money,
      receivables_money
    ) {
      this.orderNumber = val;
      this.NopymentShow = false;
      this.data.back_discount_code = back_discount_code;
      this.data.discount_money = discount_money;
      this.data.receivables_money = receivables_money;
      this.PymentShow = true;
      console.log(this.data);
    },
    closeNoPyment() {
      this.NopymentShow = false;
      this.$refs.Confirmorder.clearData();
    },
    closePyment(str) {
      this.PymentShow = false;
      if (str == "支付成功") {
        this.getdetail();
      }
    },
    // 处理价格
    changePrice(price, fontSize1, fontSize2) {
      price = price ? price : 0;
      price = price.toFixed(2);
      price = price.toString();
      let arr = price.split(".");
      let str = `<span style="font-size: ${fontSize1 ? fontSize1 : 16}px;">${
        arr[0]
      }</span>.<span style="font-size: ${fontSize2 ? fontSize2 : 16}px;">${
        arr[1]
      }</span>`;
      return str;
    },
    // 获取pdf的页数
    getNumPages() {
      this.loading = true;
      let _this = this;
      let loadingTask = pdf.createLoadingTask(
        _this.attachment[0].fileRelativePath
      );

      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);
        });
    },
    // 修改收藏状态
    changeCollect() {
      this.loading = true;
      if (this.data.isFavorite) {
        let Mname = "order-collection_manager-CancelMyGoodsCollection";
        LearnWebSI(Mname, {
          goods_id_list: [this.materialId],
          goods_type: 401,
        })
          .then((res) => {
            this.$message({
              type: "success",
              message: this.$t("Key396"), //"取消收藏成功",
            });
            this.data.isFavorite = false;

            this.loading = false;
            // this.getdetail();
          })
          .catch((res) => {
            this.loading = false;
          });
      } else {
        let Mname = "order-collection_manager-AddMyCollection";
        LearnWebSI(Mname, {
          goods_id: this.materialId,
          goods_type: 401,
          goods_name: this.data.name,
          goods_person_name_desc: this.data.teacher,
          goods_picture_id: this.data.coverFileId,
          goods_price: this.data.price,
          goods_detail_type: this.goods_detail_type,
        })
          .then((res) => {
            this.$message({
              type: "success",
              message: this.$t("Key575"), //"收藏成功",
            });
            this.data.isFavorite = true;

            this.loading = false;
            // this.getdetail();
          })
          .catch((res) => {
            this.loading = false;
          });
      }
    },
    // 购买
    buy() {
      if (!this.data.isAudited) {
        // "您还未通过审核不能购买"
        this.$message.warning(this.$t("Key576"));
        return;
      }
      this.NopymentShow = true;
    },
    // 获取学习资料详情
    getdetail() {
      this.loading = true;
      materialdetail({
        materialId: this.materialId,
        isSelectForUpdate: this.Ispreview ? true : false,
      })
        .then((res) => {
          if (res.data.result) {
            let index = res.data.result.tag.indexOf("downloadable");
            if (index != -1) {
              this.IsDownload = true;
            }
            this.data = res.data.result;
            this.data.pymentTeacher = "";
            res.data.result.teacher.forEach((item, i) => {
              if (i != this.data.teacher.length - 1) {
                this.data.pymentTeacher += item + ";";
              } else {
                this.data.pymentTeacher += item;
              }
            });
            this.data.fileType = this.data.tag[this.data.tag.length - 1];
            this.attachment = JSON.parse(res.data.result.attachment);
            this.loading = false;
            // if (
            //   this.attachment[0].fileType == "pdf" ||
            //   this.attachment[0].fileType == "PDF"
            // ) {
            //   // this.attachment[0].fileRelativePath =
            //   //   process.env.VUE_APP_BASE_API + this.attachment[0].fileRelativePath;
            //   this.attachment[0].fileRelativePath =
            //     process.env.VUE_APP_BASE_API +
            //     this.attachment[0].fileRelativePath;
            //   console.log(this.attachment[0].fileRelativePath);
            //   this.getNumPages();
            // }
            this.changePrice(this.data.price * 1, 24, 16);
            this.goods_detail_type = this.getimgurl(this.data);
            // 3000的
            // let path = `http://dcsapi.com/?k=71630476088128307289910&url=${this.attachment[0].fileUrlHttps}`;
            // this.attachment[0].newpath = path;
            // 400的
            // let path =
            //   "http://view.xdocin.com/xdoc?_xdoc=" +
            //   this.attachment[0].fileUrlHttps+"&printable=false&saveable=false"
            // this.attachment[0].newpath = path;
            // var originUrl = `${this.attachment[0].fileUrlHttps}?fileId=${this.attachment[0].fileId}`; //要预览文件的访问地址
            // var previewUrl =
            //   originUrl + `&fullfilename=${this.attachment[0].name}`;
            // GC 找的免费的 需要后台部署  谷歌可以 火狐和edge不行
            let path =
              `${this.file_preview_url}/onlinePreview?url=` +
              Base64.encode(this.attachment[0].fileUrlHttps);
            this.attachment[0].newpath = path;
          }
        })
        .catch((res) => {
          this.loading = false;
        });
    },
    PersonalDetail() {
      this.loading = true;
      Personamaterialdetail({
        materialId: this.materialId,
        isSelectForUpdate: this.Ispreview ? true : false,
      })
        .then((res) => {
          if (res.data.result) {
            let index = res.data.result.tag.indexOf("downloadable");
            if (index != -1) {
              this.IsDownload = true;
            }
            this.data = res.data.result;
            this.data.pymentTeacher = "";
            res.data.result.teacher.forEach((item, i) => {
              if (i != this.data.teacher.length - 1) {
                this.data.pymentTeacher += item + ";";
              } else {
                this.data.pymentTeacher += item;
              }
            });
            this.data.fileType = this.data.tag[this.data.tag.length - 1];
            this.attachment = JSON.parse(res.data.result.attachment);
            let path =
              `${this.file_preview_url}/onlinePreview?url=` +
              Base64.encode(this.attachment[0].fileUrlHttps);
            this.attachment[0].newpath = path;
            this.loading = false;
            // if (
            //   this.attachment[0].fileType == "pdf" ||
            //   this.attachment[0].fileType == "PDF"
            // ) {
            //   // this.attachment[0].fileRelativePath =
            //   //   process.env.VUE_APP_BASE_API + this.attachment[0].fileRelativePath;
            //   this.attachment[0].fileRelativePath =
            //     process.env.VUE_APP_BASE_API +
            //     this.attachment[0].fileRelativePath;
            //   console.log(this.attachment[0].fileRelativePath);
            //   this.getNumPages();
            // }
            this.changePrice(this.data.price * 1, 24, 16);
          }
        })
        .catch((res) => {
          this.loading = false;
        });
    },
    getimgurl(item) {
      let index = item.tag.indexOf("downloadable");
      let type = "";
      if (index != -1) {
        type = item.tag[2];
      } else {
        type = item.tag[1];
      }
      return type;
    },
  },
  async created() {
    let data = JSON.parse(getConfig());
    this.file_preview_url = data.doc_preview_service_address;
    await updateWordPack({
      word_key_list: [
        "Key5",
        "Key8",
        "Key9",
        "Key39",
        "Key43",
        "Key52",
        "Key53",
        "Key54",
        "Key55",
        "Key58",
        "Key72",
        "Key94",
        "Key107",
        "Key109",
        "Key131",
        "Key214",
        "Key232",
        "Key108",
        "Key396",
        "Key472",
        "Key473",
        "Key474",
        "Key572",
        "Key574",
        "Key575",
        "Key576",
        "Key696",
        "Key697",
      ],
    });
    this.isData = true;
  },
  mounted() {
    this.materialId = this.$route.query.id;
    this.Ispreview = this.$route.query.type;
    this.allList = this.$route.query.allList;
    if (this.$route.query.invok_module == "GCLS-Personal") {
      this.PersonalDetail();
    } else {
      if (this.materialId) {
        this.getdetail();
        if (!this.Ispreview) {
          materialvisit({
            id: this.materialId,
          })
            .then((res) => {})
            .catch((res) => {
              this.loading = false;
            });
        }
      }
    }
  },
};
</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;
        }
      }
    }
  }
  .buy {
    width: 1200px;
    margin: 24px auto;
    min-height: 1000px;
    // filter: blur(8px);
  }
  .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;
}
.overlay--1PlEz {
  display: none !important;
}
#overlay--1PlEz {
  display: none !important;
}
</style>