yshop3.1正式发布

pages/shop/Live/LiveList/index.vue

@@ -0,0 +1,182 @@
+<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>