GCLS_Page_Personal/src/components/Personalcenter/Traincourse.vue

<template>
  <!-- 我的课程 -->
  <div class="Teachcourse personal-center">
    <EditTitle :title="title" />
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item
        v-for="(item, acIndex) in activeList"
        :index="item.code"
        :key="'nav' + acIndex"
        >{{ item.name }}</el-menu-item
      >
    </el-menu>
    <template v-if="!isEmpty">
      <div 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" 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 }}</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 { getLearnWebContent } from "@/api/ajax";
import { jumpPath } from "@/utils/jumpPath";
import Empty from "../common/Empty.vue";

export default {
  components: { EditTitle, Empty },
  props: {},
  data() {
    //这里存放数据
    return {
      navType: "3",
      isEmpty: false,
      activeIndex: "[301, 302, 303]",
      activeList: [
        {
          code: "[301, 302, 303]",
          name: this.$t("Key110"), //"全部",
        },
        {
          code: "[302]",
          name: this.$t("Key74"), //"视频",
        },
        {
          code: "[301]",
          name: this.$t("Key75"), // "直播",
        },
        {
          code: "[303]",
          name: this.$t("Key42"), //"线下活动",
        },
      ],
      goods_name: "",
      total: 0,
      pageSize: 20,
      pageNum: 1,
      list: [],
      loading: false,
      isShowCheckBox: false,
      title: this.$t("Key63"),
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    jump(item) {
      jumpPath(item);
    },
    // 选择已购买还是待付款
    handleSelect(val) {
      let _this = this;
      _this.activeIndex = val;
      _this.navValue = "";
      _this.pageNum = 1;
      _this.goods_name = "";
      this.getOrderList();
    },
    changeNav() {
      console.log(this.navValue);
    },
    changecurrentPage(val) {
      this.pageNum = val;
      this.getOrderList();
    },
    //分页查询我的订单列表
    getOrderList() {
      let _this = this;
      _this.loading = true;
      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) => {
            // let obj = this.handleGoodsType(item.goods_type);
            // console.log(obj);
            // item.coverUrl = obj.imgUrl;
            // item.goods_type_root_name = obj.rootName;
            item.checked = false;
            return item;
          });
          this.list = list;
          console.log(this.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;
    },
    close(item) {
      item.isPop = false;
    },
    //删除
    deleteMyOrder(id) {
      let _this = this;
      // "此操作将永久删除该订单, 是否继续?"
      _this
        .$confirm(_this.$t("Key103"), _this.$t("Key361"), {
          confirmButtonText: _this.$t("Key94"),
          cancelButtonText: _this.$t("Key83"),
          type: "warning",
        })
        .then(() => {
          _this.setDeleteMyOrder(id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: this.$t("Key673"), //Key673 已取消删除
          });
        });
    },
    setDeleteMyOrder(id) {
      let _this = this;
      let MethodName = "order-order_manager-DeleteMyOrder";

      let data = {
        id: id,
      };
      getLearnWebContent(MethodName, data).then((res) => {
        _this.$message.success(this.$t("Key532"));
        _this.handleSelect(this.activeIndex);
      });
    },
    // 处理价格
    changePrice(type, item) {
      if (item.indexOf(".") != -1) {
        if (type == 1) {
          return item.split(".")[0];
        } else if (type == 2) {
          return "." + item.split(".")[1];
        }
      } else {
        if (type == 1) {
          return item;
        }
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前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;
        text-align: center;
      }
    }
  }
  .paging {
    margin-left: 25px;
    margin-top: 44px;
    &.paging1 {
      margin-top: 0px;
    }
  }
}
</style>
<style lang="scss">
.Teachcourse {
  .el-menu.el-menu--horizontal {
    border: 0;
    padding: 0 32px;
  }
  .el-menu--horizontal > .el-menu-item {
    height: 44px;
    font-size: 16px;
    line-height: 44px;
    text-align: center;
    padding: 0;
    margin-right: 24px;
  }
  .el-menu--horizontal > .el-menu-item.is-active {
    border-bottom: 1px solid #ff9900;
    color: #ff9900;
  }
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background: #ff9900;
    color: #fff;
  }
}
</style>