zc_saas_h5/pages5/liveDetail/course.vue

<template>
  <view style="padding: 30rpx">
    <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="22"
              :show-percent="false"
              active-color="#ff9900"
              :percent="((item.stuAllNum + item.recordNum) / (item.secAllNum + item.examNum)) * 100"
            ></u-line-progress> -->
					</view>
          <view
            ><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,从公众号消息模板进来的才有
    };
  },
  onLoad(option) {
    this.goodsId = Number(option.goodsId);
    this.gradeId = Number(option.goodsId);
    this.orderGoodsId = Number(option.orderGoodsId);
    // 公众号模板消息的数据埋点
    if (option.informId) { // 从公众号消息点击进来上报一次，其他地方进来和没登录需要跳到登录页，登录后返回的不需要上报
      this.informId = option.informId
      this.clickOfficial()
    }
    if (this.$method.isGoLogin()) { // 从公众号消息进来的没登录需要跳到登录页，登录后返回
      return;
    }
    this.courseCourseList();
    this.$store.getters.dictObj;
  },
  onShow() {
    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: 0,
        })
        .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) {
      this.itemIndex = index;

      this.$navTo.togo("/pages3/live/detail", {
        courseId: item.courseId,
        goodsId: this.goodsId,
				gradeId:0,
        orderGoodsId: this.orderGoodsId,
      });
    },
    courseCourseList() {
      let self = this;
      this.param.goodsId = this.goodsId;
      this.param.gradeId = this.gradeId;
      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;
          // 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 scope lang="scss">

.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;
}
.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;
  box-shadow: 0rpx 10rpx 9rpx 1rpx rgba(165, 196, 239, 0.1);
  border-radius: 24rpx;
  padding: 20rpx;
  z-index: 999;
  position: relative;
}
</style>