GCLS_Page_Personal/src/components/Personalcenter/Mytextbook.vue

<template>
  <!-- 我的教材 -->
  <div class="Mytextbook personal-center">
    <EditTitle :title="title" />
    <div class="menuBox">
      <el-menu
        :default-active="selectIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <!-- 全部 机构免费 我购买的 -->
        <!-- <el-menu-item index="-1">{{ $t("Key110") }}</el-menu-item> -->
        <el-menu-item index="0">{{ $t("Key748") }}</el-menu-item>
        <el-menu-item index="1">{{ $t("Key749") }}</el-menu-item>
      </el-menu>
    </div>
    <template v-if="!isEmpty">
      <div v-loading="loading" class="bookList">
        <div v-for="(item, i) in list" :key="i" @click="jump(item)">
          <div class="img-box" :class="item.checked ? 'active' : ''">
            <div class="fengmian">
              <img
                :src="
                  item.goods_picture_url
                    ? item.goods_picture_url
                    : item.book_picture_url
                "
                alt=""
              />
            </div>
            <div class="checkout-box" v-if="isShowCheckBox">
              <img src="@/assets/Personalcenter/selected-icon.png" />
            </div>
          </div>
          <p class="goods_name">
            {{ item.goods_name ? item.goods_name : item.book_name }}
          </p>
          <p class="goods_name goods_license" v-if="item.free_license_end_date">
            {{ item.free_license_end_date }} {{ $t("Key750") }}
          </p>
        </div>
      </div>
      <div class="paging" :class="list.length < 11 ? 'paging1' : ''">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="pageNum"
          :total="total"
          :page-size="pageSize"
          @current-change="changecurrentPage"
        />
      </div>
    </template>
    <template v-else>
      <Empty :navType="navType" />
    </template>
  </div>
</template>

<script>
import EditTitle from "../common/EditTitle.vue";
import Empty from "../common/Empty.vue";
import { getLearnWebContent, getBookWebContent } from "@/api/ajax";
import { jumpPath } from "@/utils/jumpPath";
export default {
  name: "Teachcourse",
  //import引入的组件需要注入到对象中才能使用
  components: {
    EditTitle,
    Empty,
  },
  props: {},
  data() {
    //这里存放数据
    return {
      navType: "1",
      list: [],
      pageSize: 15,
      pageNum: 1,
      total: 0,
      activeIndex: "[101]",
      selectIndex: "0",
      loading: false,
      isEmpty: false,
      isShowCheckBox: false,
      title: this.$t("Key61"),
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    jump(item) {
      jumpPath(item);
    },
    //   修改当前页
    changecurrentPage(val) {
      this.pageNum = val;
      this.getOrderList();
    },
    //分页查询我的订单列表
    getOrderList() {
      let _this = this;
      _this.loading = true;
      if (_this.selectIndex == 0) {
        let MethodName = "page_query-PageQueryMyBookList_OrgFreeLicense";
        let data = {
          page_capacity: _this.pageSize, // 每页容量，最大不能超过 200
          cur_page: _this.pageNum, // 当前查询第几页，页码序号从 1 开始
        };
        getBookWebContent(MethodName, data).then((res) => {
          _this.loading = false;
          this.total = res.total_count;
          if (res.book_list && res.book_list.length > 0) {
            let list = res.book_list;
            list = list.map((item) => {
              item.checked = false;
              return item;
            });
            this.list = list;
            this.isEmpty = false;
          } else {
            this.isEmpty = true;
          }
        });
      } else {
        let MethodName = "page_query-PageQueryMyGoodsList";
        let data = {
          goods_id_list: [], // 商品 ID 列表，空表示查询所有商品
          goods_type_list: JSON.parse(_this.activeIndex), // 商品类型列表，具体参看数据字典 6.9，订单商品类型。空表示查询所有类型
          goods_name: _this.goods_name, // 商品名称，模糊查询，空表示查询所有
          pay_status: 1, //支付状态 -1全部0未支付1已支付
          cancel_status: 0, //取消状态 -1 全部 0 未取消 1 已取消(只有未支付的订单才会有取消状态)
          page_capacity: _this.pageSize, // 每页容量，最大不能超过 200
          cur_page: _this.pageNum, // 当前查询第几页，页码序号从 1 开始
        };
        getLearnWebContent(MethodName, data).then((res) => {
          _this.loading = false;
          this.total = res.total_count;
          if (res.goods_list && res.goods_list.length > 0) {
            let list = res.goods_list;
            list = list.map((item) => {
              item.checked = false;
              return item;
            });
            this.list = list;
            this.isEmpty = false;
          } else {
            this.isEmpty = true;
          }
        });
      }
    },
    handleGoodsType(type) {
      let imgUrl = "",
        rootName = "";

      if (type == 401) {
        rootName = "Word";
        imgUrl = wordImg;
      }
      if (type == 402) {
        rootName = "Excel";
        imgUrl = excelImg;
      }
      if (type == 403) {
        rootName = "PPT";
        imgUrl = pptImg;
      }
      if (type == 404) {
        rootName = "PDF";
        imgUrl = pdfImg;
      }

      return { imgUrl: imgUrl, rootName: rootName };
    },
    handlePrice(price) {
      let str = "";
      price = toString("price");
      if (price.indexOf(".") > -1) {
        let arr = price.split(".");
        str = `<span class="num1">${arr[0]}</span>.<span class="num2">${arr[1]}</span>`;
      } else {
        str = `<span class="num1">${price}</span>.<span class="num2">00</span>`;
      }

      return str;
    },
    handleSelect(val) {
      let _this = this;
      _this.selectIndex = val;
      _this.pageNum = 1;
      this.getOrderList();
      if (val == "0") {
        _this.navType = "7";
      } else {
        _this.navType = "1";
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getOrderList();
  },
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.Mytextbook {
  .bookList {
    clear: both;
    overflow: hidden;
    padding: 16px 32px 14px;
    display: flex;
    flex-flow: wrap;
    > div {
      // float: left;
      width: 120px;
      margin: 0px 28px 24px 28px;
      cursor: pointer;
      .img-box {
        position: relative;
        width: 100%;
        .fengmian {
          box-sizing: border-box;
          width: 100%;
          height: 160px;
          display: flex;
          justify-content: center;
          align-items: center;
          border: 1px solid rgba(0, 0, 0, 0.15);
          > img {
            max-width: 100%;
            max-height: 100%;
          }
        }
        .checkout-box {
          position: absolute;
          border-radius: 10px 0 0 0;
          right: 0;
          bottom: 0;
          width: 24px;
          height: 24px;
          background: rgba(0, 0, 0, 0.5);
          display: flex;
          justify-content: center;
          align-items: center;
        }
        &.active {
          > img {
            border: 2px solid #ff9900;
          }
          .checkout-box {
            background: #ff9900;
            > img {
              width: 10px;
              height: 10px;
            }
          }
        }
      }
      > p.goods_name {
        height: 50px;
        padding: 8px 0 0 0;
        box-sizing: border-box;
        margin: 0;
        font-size: 14px;
        line-height: 150%;
        color: #2c2c2c;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-word;
        &.goods_license {
          opacity: 0.5;
        }
      }
    }
  }
  .paging {
    margin-left: 25px;
    margin-top: 44px;
    &.paging1 {
      margin-top: 0px;
    }
  }
}
</style>
<style lang="scss">
.Mytextbook {
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background: #ff9900;
    color: #fff;
  }
}
</style>