kailin_mp/pages/video/index.vue

<template>
  <view>
    <view class="video_list">
      <view class="video_item" v-for="(item, index) in videoList">
        <view class="video_info">
          <image class="thumb_img" :src="item.thumb" mode="aspectFit"></image>
          <view>
            <view class="video_type">
              <text class="type_name">{{ item.type_name }}</text>
            </view>
            <view class="video_title">{{ item.name }}</view>
            <view class="video_time">
              <text class="time_info">{{ item.end_time }} </text>
            </view>
          </view>
        </view>
        <view class="video_btn">
          <button class="to_learn" @click.stop="goDetail(item.id)">
            开始学习
          </button>
          <button
            class="after_exam"
            v-if="item.learn_status > 0"
            @click="goExam(item.id, item.report_id)"
          >
            {{ item.report_id > 0 ? "查看报告" : "课后评测" }}
          </button>
        </view>
      </view>
    </view>
    <view class="to_bottom" v-if="!videoList.length">
      -----您还没有可学习课程-----</view
    >
    <view class="contact_follow">
      <button class="contact_btn" open-type="contact">
        <uni-icons type="headphones" size="30" color="#FFFFFF"></uni-icons>
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 产品列表
      videoList: [],
      // 请求参数
      requestParam: {
        page: 1,
        status: 0,
      },
      // 是否最后一页
      isLast: false,
      // 是否请求中
      isReqing: false,
    };
  },
  onLoad() {},
  onShow() {
    // 没有数据的话，或者请求中，不允许刷新
    if (this.isReqing) return;
    // 初始化页码为1
    this.requestParam.page = 1;
    // 是否是最后一页
    this.isLast = false;
    // 设置请求中
    this.isReqing = true;
    // 请求列表
    this.$http
      .request("api/video_course/get_list", this.requestParam)
      .then((re) => {
        // 设置非请求中
        this.isReqing = false;
        // 成功结果
        if (re.code == "success") {
          if (re.data.last_page <= this.requestParam.page) this.isLast = true;
          this.videoList = re.data.data;
        }
      });
  },
  onPullDownRefresh() {
    // 如果请求中，不允许请求，
    if (this.isReqing) return false;
    // 初始化页码为1
    this.requestParam.page = 1;
    // 是否是最后一页
    this.isLast = false;
    // 设置请求中
    this.isReqing = true;
    // 请求列表
    this.$http
      .request("api/video_course/get_list", this.requestParam)
      .then((re) => {
        // 设置非请求中
        this.isReqing = false;
        // 成功结果
        if (re.code == "success") {
          if (re.data.last_page <= this.requestParam.page) this.isLast = true;
          this.videoList = re.data.data;
        }
      });
    uni.stopPullDownRefresh();
  },
  onReachBottom() {
    // 如果页码是0，避免第一页重复
    if (this.requestParam.page < 1) return;
    // 最后一页不请求
    if (this.isLast) return;
    // 请求中，不再请求
    if (this.isReqing) return;
    // 增加一页
    this.requestParam.page = this.requestParam.page + 1;
    // 设置请求中
    this.isReqing = true;
    // 请求列表
    this.$http
      .request("api/video_course/get_list", this.requestParam)
      .then((re) => {
        // 设置非请求中
        this.isReqing = false;
        // 成功结果
        if (re.code == "success") {
          // 数据
          if (re.data.last_page <= this.requestParam.page) this.isLast = true;
          // 追加数据
          this.videoList.push(...re.data.data);
        }
      });
  },
  methods: {
    goDetail(id) {
      uni.navigateTo({
        url: "/pages/video/detail?id=" + id,
      });
    },
    goExam(id, report_id) {
      if (report_id > 0) {
        uni.navigateTo({
          url: "/pages/video/record?type=exam&record_id=" + report_id,
        });
        return;
      }
      uni.navigateTo({
        url: "/pages/video/exam?id=" + id,
      });
    },
  },
};
</script>

<style lang="less">
.video_list {
  float: left;
  width: 750rpx;
  display: block;
  overflow: hidden;
  .video_item {
    display: block;
    width: 700rpx;
    overflow: hidden;
    margin-bottom: 10rpx;
    padding: 20rpx 25rpx;
    border-radius: 10rpx;
    background-color: #ffffff;
    .video_btn {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 20rpx;
      margin-top: 10rpx;
      .to_learn {
        margin: 0;
        color: #66b66a;
        border: none;
        width: 140rpx;
        height: 50rpx;
        font-size: 26rpx;
        line-height: 50rpx;
        padding: 0rpx 0rpx;
        text-align: center;
        border-radius: 10rpx;
        background-color: #e8f4e8;
      }
      .to_learn::after {
        border: none;
      }
      .after_exam {
        margin: 0;
        color: #66b66a;
        border: none;
        width: 140rpx;
        height: 50rpx;
        font-size: 26rpx;
        line-height: 50rpx;
        padding: 0rpx 0rpx;
        text-align: center;
        border-radius: 10rpx;
        background-color: #e8f4e8;
      }
      .after_exam::after {
        border: none;
      }
    }

    .video_info {
      width: 100%;
      display: flex;

      .thumb_img {
        width: 200rpx;
        height: 200rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
      }
      .video_type {
        color: #999999;
        width: 480rpx;
        display: block;
        height: 60rpx;
        font-size: 26rpx;
        line-height: 60rpx;
      }
      .video_title {
        width: 480rpx;
        display: block;
        height: 80rpx;
        font-size: 32rpx;
        overflow: hidden;
        font-weight: bold;
        line-height: 40rpx;
        text-overflow: ellipsis;
      }
      .video_time {
        color: #999999;
        width: 480rpx;
        display: block;
        height: 60rpx;
        font-size: 26rpx;
        line-height: 60rpx;
      }
    }
  }
}
.contact_follow {
  bottom: 30%;
  right: 20rpx;
  width: 100rpx;
  height: 100rpx;
  display: block;
  position: fixed;
  border-radius: 50%;
  background-color: #1296db;
  .contact_btn {
    border: none;
    width: 100rpx;
    color: #ffffff;
    height: 100rpx;
    padding: 0rpx 0rpx;
    line-height: 100rpx;
    text-align: center;
    border-radius: 50%;
    background-color: #1296db;
  }
  .contact_btn::after {
    border: none;
  }
}
</style>