saas_miniprogram/pages2/wd/course.vue

<template>
  <view style="padding: 24rpx">
    <nav-bar title="所有课程"></nav-bar>
    <view v-if="!courseList.length">
      <u-empty text="暂无课程" mode="list"></u-empty>
    </view>
    <view
      v-else
      @click="jump(item, index)"
      v-for="(item, index) in courseList"
      :key="index"
      style="margin-bottom: 30rpx"
    >
      <view class="class_item">
        <image
          :src="$method.splitImgHost(item.coverUrl, true)"
          style="height: 316rpx; width: 100%; border-radius: 24rpx"
        ></image>
        <view style="color: #333333; font-weight: bold; font-size: 32rpx">{{
          item.courseName
        }}</view>
      </view>
      <view class="bottomBox">
        <view class="content_box">
          <image src="/static/icon/wk_icon3.png" class="wk_icon"></image>
          学习进度：{{ item.stuAllNum + item.recordNum }}/{{
            item.secAllNum + item.examNum
          }}
        </view>
        <view class="box_progress">
          <view style="width: 60%"
            ><u-line-progress
              height="32"
              :show-percent="false"
              active-color="#ff9900"
              :percent="
                ((item.stuAllNum + item.recordNum) /
                  (item.secAllNum + item.examNum)) *
                100
              "
            ></u-line-progress
          ></view>
          <view class="learing_bt" @click.stop="jump(item, index)">
            进入学习
            <!-- <u-button
              type="warning"
              size="mini"
              @click.stop="jump(item, index)"
              >进入学习</u-button> -->
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      goodsId: 0,
      gradeId: 0,
      courseList: [],
      orderGoodsId: 0,
      param: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      businessData: {},
      itemIndex: "",
      informId: "", //消息id,从公众号消息模板进来的才有
      options: {},
    };
  },
  onLoad(option) {
    console.log("onload的", option);
    this.options = option;
    this.goodsId = Number(option.id);
    this.gradeId = Number(option.gid);
    this.orderGoodsId = Number(option.orderGoodsId);
    // 公众号模板消息的数据埋点
    if (option.informId) {
      this.informId = option.informId;
      // this.clickOfficial()
    }

    this.$store.getters.dictObj;
  },
  onShow(option) {
    if (this.$method.isGoLogin()) {
      // 从公众号消息进来的没登录需要跳到登录页，登录后返回
      return;
    }
    this.courseCourseList();
    this.informId && this.clickOfficial(); // 从公众号消息点击进来上报一次
    if (this.itemIndex !== "") {
      this.refreshByIndex();
    }
  },
  onReachBottom() {
    if (this.courseList.length < this.param.total) {
      this.param.pageNum++;
      this.courseCourseList();
    }
  },
  methods: {
    // 新增微信公众号模板消息点击数据
    clickOfficial() {
      this.$http({
        url: "/data/click",
        method: "post",
        data: { informId: this.informId },
      }).then((res) => {
        if (res.data.code == 200) {
          console.log("埋点");
        }
      });
    },
    /**
     * 返回刷新之前进入的课程数据
     */
    refreshByIndex() {
      this.$api
        .courseCourseList({
          pageNum: this.itemIndex + 1,
          pageSize: 1,
          goodsId: this.goodsId,
          gradeId: this.gradeId,
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.$set(this.courseList, this.itemIndex, res.data.rows[0]);
          }
        });
    },
    /**
     * 获取业务层次详情
     */
    courseBusiness(businessId) {
      this.$api.courseBusiness(businessId).then((res) => {
        this.businessData = res.data.data;
      });
    },
    jump(item, index) {
      console.log("00000000");
      this.itemIndex = index;

      if (index == 0) {
        if (item.rebuild === 0) {
          //未重修
          this.$navTo.togo("/pages2/learn/details", {
            id: item.courseId,
            gradeId: item.gradeId,
            goodsId: this.goodsId,
            orderGoodsId: this.orderGoodsId,
          });
          return;
        }

        this.$api.courseDetail(item.courseId).then((res) => {
          if (res.data.code == 200) {
            // if (res.data.data.educationName == "继续教育") {
            this.$method.checkLock().then((res) => {
              this.$navTo.togo("/pages3/polyv/detail", {
                id: item.courseId,
                goodsId: this.goodsId,
                orderGoodsId: this.orderGoodsId,
              });
            });
          }
        });
      } else {
        if (this.businessData.goodsLearningOrder == 2) {
          //学习顺序是从头到尾学习，没学完上一课不能学习下一课
          let prevItem = this.courseList[index - 1]; //上一课
          if (
            prevItem.stuAllNum + prevItem.recordNum ==
            prevItem.secAllNum + prevItem.examNum
          ) {
            if (item.rebuild === 0) {
              //未重修
              this.$navTo.togo("/pages2/learn/details", {
                id: item.courseId,
                gradeId: item.gradeId,
                goodsId: this.goodsId,
                orderGoodsId: this.orderGoodsId,
              });
              return;
            }

            this.$api.courseDetail(item.courseId).then((res) => {
              if (res.data.code == 200) {
                // if (res.data.data.educationName == "继续教育") {
                this.$method.checkLock().then((res) => {
                  this.$navTo.togo("/pages3/polyv/detail", {
                    id: item.courseId,
                    goodsId: this.goodsId,
                    orderGoodsId: this.orderGoodsId,
                  });
                });
              }
            });
          } else {
            uni.showToast({
              icon: "none",
              title: "请按顺序学完上一课再学习这一课",
            });
          }
        } else {
          if (item.rebuild === 0) {
            //未重修
            this.$navTo.togo("/pages2/learn/details", {
              id: item.courseId,
              gradeId: item.gradeId,
              goodsId: this.goodsId,
              orderGoodsId: this.orderGoodsId,
            });
            return;
          }

          this.$api.courseDetail(item.courseId).then((res) => {
            if (res.data.code == 200) {
              // if (res.data.data.educationName == "继续教育") {
              this.$method.checkLock().then((res) => {
                this.$navTo.togo("/pages3/polyv/detail", {
                  id: item.courseId,
                  goodsId: this.goodsId,
                  orderGoodsId: this.orderGoodsId,
                });
              });
            }
          });
        }
      }
    },
    courseCourseList() {
      let self = this;
      this.param.goodsId = this.goodsId;
      this.param.gradeId = this.gradeId;
      // /course/courseList查询商品下的课程列表
      this.$api.courseCourseList(this.param).then((res) => {
        if (res.data.code == 200) {
          self.courseList.push.apply(self.courseList, res.data.rows);
          self.param.total = res.data.total;
          console.log(res.data.rows.length, "res.data.rows.length");
          if (res.data.rows.length) {
            this.courseBusiness(res.data.rows[0].businessId);
          }
        }
      });
    },
    appointment() {
      this.$navTo.togo(
        "/pages2/appointment/index?orderGoodsId=" + this.orderGoodsId
      );
    },
  },
};
</script>
<style>
page {
  background: #eaeef1;
}
</style>
<style lang="scss" scope>
.box_progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
}
.bottomBox {
  background: #ffffff;
  width: 94%;
  border-bottom-left-radius: 24rpx;
  border-bottom-right-radius: 24rpx;
  margin: 0 auto;
  padding: 20rpx;
  .learing_bt {
    width: 165rpx;
    height: 48rpx;
    line-height: 48rpx;
    background: #ffb102;
    border-radius: 16rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
  }
}
.content_box {
  display: flex;
  align-items: center;
  color: #999999;
  margin-top: 8rpx;
}
.content {
  color: #000000;
  margin: 0 8rpx;
}
.wk_icon {
  width: 24rpx;
  height: 24rpx;
  margin-right: 8rpx;
}

.class_item {
  width: 100%;
  background: #ffffff;
  border-radius: 24rpx;
  padding: 20rpx 20rpx 30rpx 20rpx;
  z-index: 999;
  position: relative;
  background: #ffffff;
  box-shadow: 0px 0px 20px 1px rgba(1, 99, 235, 0.1);
}
</style>