live-telecast-ui-h5/src/views/live/index.vue

<template>
  <div class="live" style="padding-top: 44px">
    <div class="live-title">
      <van-nav-bar
        title="我的稻田"
        class="van-nav-bar-my-fixed"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <van-list
      v-if="list && list.length > 0"
      class="videoList"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad()"
    >
      <div
        v-for="item in list"
        :key="item.id"
        class="videoItem"
        @click="goto(item.id)"
      >
        <div class="img">
          <img :src="item.video_img" :border="0" alt="" />
        </div>
        <div class="videoName">{{ item.video_name }}</div>
        <div class="videoDesc">{{ item.video_sn }}</div>
      </div>
    </van-list>
    <van-empty v-else description="暂无视频！" />
  </div>
</template>

<script>
import { List, cell } from "vant";
import asyncRequest from "@/apis/live/index";
import resToken from "@/mixins/resToken";
export default {
  mixins: [resToken],
  components: {
    "van-cell": cell,
    "van-list": List,
  },
  async created() {
    //在组件被创建的时候就加载
    await this.onLoad(1);
  },
  data() {
    return {
      list: [], //用来放接口获得的数据，来渲染页面
      loading: false, //是否在加载
      finished: false, //是否加载完成
      total: 0, //页码数
      parmValue: {
        //使用preview接口的入参
        page: 1, // 页码
        size: 10, // 每页显示条数
      },
    };
  },
  methods: {
    //判断当时传递的页码是不是1，
    async onLoad(e) {
      if (e) {
        this.parmValue.page = 1; //重置页码数
      } else {
        this.parmValue.page++; //如果页码数不是1，页码++
        console.log(this.parmValue);
      }
      if (!this.loading) {
        //加载结束
        if (this.parmValue.page === 1) {
          //判断当前页码是不是1
          this.list = []; //当前页码是1且未加载，那么代表初始化数据
        }
      }
      let res = await asyncRequest.list(this.parmValue); //视频预览接口
      // this.loading = false;//加载状态结束
      if (res && res.code == 0 && res.data) {
        //
        let arr = res.data.list; //缓存接口返回是数据
        this.list.push(...arr); //
        this.total = res.data.count;
        if (
          this.list.length > 0 &&
          this.total > 0 &&
          this.total === this.list.length
        ) {
          this.finished = true;
        }
        if (this.total === 0) {
          this.finished = true;
        }
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.show_title(res.msg);
        if (this.parmValue.page !== 1) {
          this.parmValue.page--;
        }
      }
      this.loading = false;
    },
    onClickLeft() {
      window.history.back(-1);
    },
    goto(id) {
      window.vm.$router.push({
        path: "/liveD",
        query: {
          id: id,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.live {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 44px 0 0 0;
  box-sizing: border-box;
  overflow-y: scroll;
  background: transparent;
  .live-title {
    position: fixed;
    padding: 0;
    width: 100%;
    margin: 0;
    top: 0;
    left: 0;
    z-index: 3;
    border: 0;
    height: 44px;
  }
  .videoList {
    padding: 0 16px 60px 16px;
    box-sizing: border-box;
    background: transparent;
    position: relative;
    height: auto;
    width: 100%;

    .videoItem {
      position: relative;
      width: 100%;
      font-size: 14px;
      line-height: 30px;
      padding: 0;
      margin: 0;
      cursor: pointer;
      box-sizing: border-box;
      .img {
        width: 100%;
        display: block;
        height: 180px;
        padding: 0;
        border: 0;
        border-radius: 20px;
        overflow: hidden;
        border: 0;
        img {
          width: 100%;
          display: inline-block;
          height: 100%;
          border: 0;
        }
      }
      .videoName {
        display: block;
        box-sizing: border-box;
        font-size: 16px;
        font-weight: bolder;
        padding: 0 5px;
        margin: 10px 0 5px 0;
        width: 100%;
        line-height: 20px;
        color: #1a1a1a;
      }
      .videoDesc {
        display: block;
        font-size: 12px;
        color: #999;
        box-sizing: border-box;
        margin: 0 0 10px 0;
        line-height: 25px;
        padding: 0 5px;
      }
    }
  }
  // &:last-child {
  //   margin: 0 0 2px 0;
  // }
}
</style>