chanyishenghuo-uniapp/pages/shop/Live/LiveList/index.vue

<template>
  <view class="page_box">
    <view class="head_box">
      <view class="live-tab">
        <view class="live-tab__item" v-for="tab in liveTab" :key="tab.title" @tap="selTab(tab)">
          <view class="live-tab__item-name">{{ tab.name }}</view>
          <text class="live-tab__item--link" :class="{ 'live-tab__item--active': tabCur == tab.title }"></text>
        </view>
      </view>
    </view>
    <view class="content_box">
      <scroll-view scroll-y="true" @scrolltolower="loadMore" class="scroll-box">
        <view class="list-box">
          <block v-for="live in liveList" :key="live.roomId">
            <shop-live-card :detail="live"></shop-live-card>
          </block>
        </view>
        <view v-if="liveList.length" class="cu-load text-gray" :class="loadStatus"></view>
      </scroll-view>
    </view>
    <Loading :loaded="loaded" :loading="loading"></Loading>
  </view>
</template>

<script>
  import {
    yxWechatLive
  } from "@/api/live";
  import ShopLiveCard from '@/components/ShopLiveCard.vue'
  import Loading from "@/components/Loading";

  export default {
    components: {
      ShopLiveCard,
      Loading
    },
    data() {
      return {
        tabCur: 'all',
        liveStatus: '',
        loaded: false,
        loading: false,
        liveTab: [{
            title: 'all',
            name: '全部',
            code: ''
          },
          {
            title: 'prevue',
            name: '预告',
            code: '102'

          },
          {
            title: 'living',
            name: '直播中',
            code: '101'

          },
          {
            title: 'lived',
            name: '已结束',
            code: '103'

          }
        ],
        liveList: [],
        loadStatus: '', //loading,over
        currentPage: 0,
        size: 10,
        lastPage: 0
      };
    },
    computed: {},
    onLoad() {
      this.getLiveList();
    },
    onHide() {},
    methods: {
      // 切换tab
      selTab(tab) {
        console.log(tab)
        this.tabCur = tab.title;
        this.liveStatus = tab.code;
        this.liveList = [];
        this.loaded=false;
        this.loading=false;
        this.getLiveListTab();
      },

      // 直播列表
      getLiveListTab() {
        let that = this;
        yxWechatLive({
          liveStatus: that.liveStatus,
          page: 0,
          size: that.size
        }).then(res => {
          that.liveList = [...that.liveList, ...res.data.content];
          that.lastPage = res.data.lastPage;
          this.loaded = res.data.content.length < that.size;
          this.loading = false;
        });
      },
      // 直播列表
      getLiveList() {
        let that = this;
        if (this.loading || this.loaded) return;
        this.loading = true;
        yxWechatLive({
          liveStatus: this.liveStatus,
          page: this.currentPage,
          size: this.size
        }).then(res => {
          that.liveList = that.liveList.concat(res.data.content)
          this.currentPage++;
          this.loaded = res.data.content.length < that.size;
          this.loading = false;
        });
      }
    },
    onReachBottom() {
      !this.loading && this.getLiveList();
    }
  };
</script>

<style lang="scss">
  // tab
  .live-tab {
    width: 100%;
    height: 96rpx;
    background: #fff;
    display: flex;
    align-items: center;

    &__item {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
    }

    &__item-name {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: rgba(51, 51, 51, 1);
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    &__item--link {
      width: 68rpx;
      height: 4rpx;
      background: transparent;
      border-radius: 2rpx;
    }

    &__item--active {
      width: 68rpx;
      height: 4rpx;
      background: rgba(213, 166, 90, 1);
      border-radius: 2rpx;
    }
  }

  // 瀑布流 list
  .scroll-box {
    .list-box {
      width: 100%;
      -moz-column-count: 2;
      -webkit-column-count: 2;
      column-count: 2;
      padding: 25rpx;
    }
  }
</style>