GCLS_Page_Personal/src/components/Personalcenter/Teachcourse.vue

<template>
  <!-- 我的课程 -->
  <div class="Teachcourse personal-center">
    <EditTitle :title="title" />
    <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="
                  userType == 'TEACHER'
                    ? item.picture_url
                    : item.goods_picture_url
                "
                alt=""
              />
            </div>
            <div class="checkout-box" v-if="isShowCheckBox">
              <img src="@/assets/Personalcenter/selected-icon.png" />
            </div>
          </div>
          <p class="goods_name">
            {{ userType == "TEACHER" ? item.name : item.goods_name }}
          </p>
        </div>
      </div>
      <div class="paging" :class="list.length < 16 ? '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 } from "@/api/ajax";
import { jumpPath } from "@/utils/jumpPath";
export default {
  name: "Teachcourse",
  //import引入的组件需要注入到对象中才能使用
  components: {
    EditTitle,
    Empty,
  },
  props: ["userType"],
  data() {
    //这里存放数据
    return {
      navType: "2",
      list: [],
      pageSize: 15,
      pageNum: 1,
      total: 0,
      activeIndex: "[201]",
      loading: false,
      isEmpty: false,
      isShowCheckBox: false,
      title: this.$t("Key62"),
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    jump(item) {
      if (this.userType == "TEACHER") {
        let url = `/GCLS-Learn/#/GoodsDetail?goods_id=${item.id}&goods_type=201&invok_module=GCLS-Personal`;
        window.open(url);
      } else {
        jumpPath(item);
      }
    },
    //   修改当前页
    changecurrentPage(val) {
      this.pageNum = val;
      this.getOrderList();
    },
    //分页查询我的订单列表
    getOrderList() {
      let _this = this;
      _this.loading = true;
      let MethodName = "";
      let data = null;
      if (_this.userType == "TEACHER") {
        MethodName = "page_query-PageQueryMyCourseList";
        data = {
          finish_status: -1, // 完成状态列表， - 1 表示查询所有
          release_status: -1, // 发布状态 -1【全部】，1 【已发布】，0【未发布】
          name: "", // 课程名称，模糊查询
          page_capacity: _this.pageSize, // 每页容量，最大不能超过 200
          cur_page: _this.pageNum, // 当前查询第几页，页码序号从 1 开始
        };
      } else {
        MethodName = "page_query-PageQueryMyGoodsList";
        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;
        let list = [];
        if (_this.userType == "TEACHER") {
          if (res.course_list && res.course_list.length > 0) {
            list = res.course_list;
            this.isEmpty = false;
          } else {
            this.isEmpty = true;
          }
        } else {
          if (res.goods_list && res.goods_list.length > 0) {
            list = res.goods_list;
            this.isEmpty = false;
          } else {
            this.isEmpty = true;
          }
        }
        list = list.map((item) => {
          item.checked = false;
          return item;
        });
        this.list = list;
      });
    },
    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;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getOrderList();
  },
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.Teachcourse {
  .bookList {
    display: flex;
    flex-wrap: wrap;
    padding: 16px 32px;
    min-height: 400px;
    > div {
      width: 160px;
      margin: 0px 8px 24px 8px;
      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;
      }
    }
  }
  .paging {
    margin-left: 25px;
    margin-top: 88px;
    &.paging1 {
      margin-top: 0px;
    }
  }
}
</style>
<style lang="scss">
.Teachcourse {
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background: #ff9900;
    color: #fff;
  }
}
</style>