GCLS_Page_Book/src/views/BookView2.vue

<template>
  <div class="bookView2">
    <!-- <div>
      <el-button @click="goperview('book1')">新实用汉语课本1</el-button>
    </div>
    <div>
      <el-button @click="goperview('book2')">发展汉语初级综合（Ⅰ）</el-button>
    </div>
    <div>
      <el-button @click="goperview('book3')">HSK标准教程1</el-button>
    </div> -->
    <!-- <div>
      <el-button @click="goperview('book4')">新实用汉语</el-button>
    </div> -->
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import { getStaticContent } from "@/api/ajax";
import { setToken, removeToken } from "@/utils/auth";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      book1: {
        name: "新实用汉语课本（第3版）第1册",
        id: "002-20211006-10-NHVOMDLDRY",
      },
      book2: {
        name: "发展汉语初级综合（Ⅰ）",
        id: "002-20211007-06-4DGL2ZRIB5",
      },
      book3: {
        name: "HSK标准教程1",
        id: "002-20211007-14-UNYIWU8EKW",
      },
      book4: {
        name: "新实用汉语",
        id: "003-20210908-10-1ZWNGSASZL",
      },
      book5: {
        name: "新航标职业英语 综合英语（基础级）学生用书1（修订版）",
        id: "002-20211029-14-9VGMXLV2NU",
      },
      book6: {
        name: "新航标职业英语",
        id: "002-20211011-10-GOLXUZST4G",
      },
      loading: null,
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    goperview(type) {
      this.loading = true;
      let name = "";
      let id = "";
      if (type == "book1") {
        name = this.book1.name;
        id = this.book1.id;
      } else if (type == "book2") {
        name = this.book2.name;
        id = this.book2.id;
      } else if (type == "book3") {
        name = this.book3.name;
        id = this.book3.id;
      } else if (type == "book4") {
        name = this.book4.name;
        id = this.book4.id;
      } else if (type == "book5") {
        name = this.book5.name;
        id = this.book5.id;
      } else if (type == "book6") {
        name = this.book6.name;
        id = this.book6.id;
      }
      let codeName = "login_control-CreateTempAccessCode";
      let access_code = null;
      getStaticContent(codeName, {}).then((res) => {
        access_code = res.access_code;
        let Mname = "login_control-GetLoginInfoByAccessCode";
        getStaticContent(Mname, {
          access_code: access_code,
        }).then((res) => {
          this.loading = false;
          setToken(res);
          this.$router.push(
            `/courseview?bookId=${id}&name=${name}&type=preview`
          );
        });
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.loading = this.$loading({
      lock: true,
      text: "跳转中",
      spinner: "el-icon-loading",
      background: "rgba(0, 0, 0, 0.7)",
    });

    let codeName = "login_control-CreateTempAccessCode";
    let access_code = null;
    let id = this.$route.query.bookId;
    getStaticContent(codeName, {}).then((res) => {
      access_code = res.access_code;
      let Mname = "login_control-GetLoginInfoByAccessCode";
      getStaticContent(Mname, {
        access_code: access_code,
      }).then((res) => {
        this.loading.close();
        setToken(res);
        this.$router.push(`/courseview?bookId=${id}&type=preview`);
      });
    });
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.bookView2 {
  width: 100%;
  height: 100vh;
  padding-left: 30px;
  div {
    margin-top: 15px;
  }
}
</style>