dvcp_v2_wechat_app/src/project/qujing/AppLegalLearning/components/OnlineClass.vue

<template>
  <div class="OnlineClass">
    <div class="search_box">
      <u-search placeholder="请输入需要搜索的课程" bg-color="#FFF" v-model="title" :show-action="false"  @clear="title='',getList()" @search="getList"></u-search>
    </div>

    <p class="all_class">全部课程</p>

    <div class="card_list" v-if="classList.length">
      <div class="card" v-for="item in classList" :key="item.id" @click="handleToDetail(item.id)">
        <div class="card_left">
          <img :src="item.pictureUrl" alt="">
        </div>
        <div class="card_right">
          <div class="title">{{ item.title }}</div>
          <div class="num">
            <div>{{ item.learnerNumber }}人已学习</div>
            <div v-if="item.videoDuration">视频时长{{ item.videoDuration }}</div>
          </div>
        </div>
      </div>
    </div>
    <AiEmpty :description="`暂无数据`" class="emptyWrap" v-else/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 1,
      title: '',
      classList: [],
    }
  },
  onLoad() {
    
  },
  
  methods: {
    getList() {
      this.$instance.post(`/app/appcourseinfo/listByApplet`, null, {
        params: {
          current: this.current,
          size: 10,
          title: this.title
        }
      }).then(res=> {
        if(res?.data) {
          this.classList = res.data.records
        }
      })
    },
    handleToDetail(id) {
      this.$emit('toDetail',id)
    }
  },
  onReachBottom() {
    this.current ++;
    this.getList()
  },
}
</script>

<style lang="scss" socped>
.OnlineClass {
  .search_box {
    margin: 24px 0;
    padding: 0 32px;
    box-sizing: border-box;
  }
  
  .all_class {
    font-size: 28px;
    color: #333333;
    font-weight: 600;
    padding: 0 32px;
    box-sizing: border-box;
  }

  .card_list {
    padding: 8px 32px;
    box-sizing: border-box;

    .card {
      margin-top: 24px;
      background: #FFFFFF;
      box-shadow: 0 0 8px 0 rgba(0,0,0,0.02);
      border-radius: 16px;
      display: flex;
      padding: 24px;
      box-sizing: border-box;
      .card_left {
        margin-right: 24px;
        img {
          width: 160px;
          height: 160px;
          border-radius: 8px;
        }
      }

      .card_right {
        width: calc(100% - 184px);
        .title {
          font-weight: 500;
          font-size: 34px;
          color: #333333;
          overflow: hidden; 
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .num {
          display: flex;
          justify-content: space-between;
          margin-top: 28px;
          font-weight: 400;
          font-size: 26px;
          color: #999999;
        }
      }
      .col_blue {
        color: #2D7DFF;
      }
    }
  }
}
</style>