baoman / Ezquiz_Platform

  <template>

    <div class="content-box">

      <back-box>

        <template slot="title">
          <span>软件下载</span>
        </template>
      </back-box>

  
      <div v-if="role == 'ROLE_PERSONAL'" class="down-box" v-loading="loading">
        <img class="logo" src="" alt="" />
        <div class="txt">
          <p class="p1">
            {{ `${info.appName || ""} ${info.versionName || ""}` }}
          </p>
          <p class="p2">文件大小：{{ `${info.fileSize}` }}M</p>
          <p class="p2">最近更新：{{ info.modifiedTime }}</p>
        </div>
        <el-button type="primary" @click="downCard">立即下载</el-button>
      </div>
      <div v-else class="page-content">

        <div class="down-item">
          <p class="txt">

            K12公私立学校、高等院校、教育培训机构的课堂互动教学、即时课堂测验。

          </p>
          <el-button plan round @click="links">授课端下载</el-button>
        </div>

        <div class="down-item" v-loading="loading" v-if="role == 'ROLE_XUEXIAO'">

          <p class="txt">
            配合发卡器硬件，方便学校管理员进行发卡补卡操作的软件。
          </p>

          <el-button plan round @click="downCard">发卡软件下载</el-button>

        </div>

        <div class="down-item" v-loading="loading">

          <p class="txt">电脑缺少.NET Framework环境时，请下载安装.NET Framework

            4.5.2，以便于授课端可正常使用。
          </p>

          <el-button plan round @click="downNet">.Net环境下载</el-button>
        </div>

      </div>

    </div>
  </template>
  
  <script>
  export default {

    data() {
      return {

        role: "",

        loading: false,

        loadingNet: false,

        info: {
          id: "",
          appName: "",
          appImage: "",
          versionName: "",
          fileSize: "",
          modifiedTime: "",
        },

      };
    },

    created() {
      this.role =
        this.$store.getters.info.showRole ||
        this.$store.getters.info.permissions[0].role;

      if (this.role == 'ROLE_PERSONAL') {
        this.latestVersion();
      }

    },

    methods: {
      links() {

        this.$router.push({

          path: "/downClient",
        });
      },

      async latestVersion() {
        const { data, status, info } = await this.$request.pLatestVersion();
        if (status == 0) {
          this.info = { ...data };
          this.info.fileSize =
            (this.info.fileSize &&
              (this.info.fileSize / 1024 / 1024).toFixed(2)) ||
            "--";
        } else {
          this.$message.error(info);
        }
      },

      async downCard() {
        if (this.loading == true) return;
        this.loading = true;

        let latestClickersApp;
        let query = {}
        if (this.role == 'ROLE_PERSONAL') {
          latestClickersApp = this.$request.pGetAppDownloadUrl
          query.versionId = this.info.id
        } else {
          latestClickersApp = this.$request.latestClickersApp
        }
  
        const { data, status, info } = await latestClickersApp({ ...query });

        this.loading = false;
        if (status == 0) {
          const a = document.createElement("a");
          a.href = data.downloadUrl;
          a.download = data.appName;
          document.body.appendChild(a);
          a.click();
          a.remove();
        } else {
          this.$message.error(info);
        }
      },

      async downNet() {
        if (this.loadingNet == true) return;
        this.loadingNet = true;

        const { data, status, info } = await this.$request.runtimeEnvFileUrl();

        this.loadingNet = false;
        if (status == 0) {
          const a = document.createElement("a");

          a.href = data;
          // a.download = data.appName;

          document.body.appendChild(a);
          a.click();
          a.remove();
        } else {
          this.$message.error(info);
        }
      },

    },

  };

  </script>
  

  <style lang="scss" scoped>

  .content-box {
    width: 100%;
  }

  .page-content {

    display: flex;

    padding-top: 50px;

    margin-left: 160px;

    .down-item {

      width: 300px;

      padding: 50px 20px;
      border-radius: 20px;
      margin: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: #f8f8f8;

      box-shadow: 2px 2px 5px #ccc; 

      .txt {
        font-size: 16px;
        color: #7f7f7f;
        line-height: 24px;
        height: 120px;
      }
    }
  }

  </style>