xdd-uniapp-new/pages/VideoPlayBackList/VideoPlayBackList.vue

<template>
  <view>
    <view class="type-list flex ai-center">
      <view class="item" :class="{'active':type===item.value}" v-for="(item,index) in typeList" :key="index"
            @click="changeType(item)">{{ item.label }}
      </view>
    </view>

    <view class="list" v-if="list.length">
      <custom-waterfalls-flow :value="list" imageKey="cover">
        <view class="item" v-for="(item,index) in list" :key="index" slot="slot{{index}}" @click="goDetail(item)">
          <image class="cover" :src="item.cover" mode="widthFix"></image>
          <view class="content">
            <view class="title more-t">{{ item.title }}</view>
            <view class="footer flex jc-between ai-center">
              <view class="visit flex ai-center">
                <image class="icon" style="margin-right: 8rpx" :src="item.storeLogo" mode="scaleToFill"></image>
                {{ item.storeName }}
              </view>
              <image class="icon flex-0" :src="webUrl+'/20210806121203835373.png'" mode="scaleToFill"></image>
            </view>
          </view>
        </view>
      </custom-waterfalls-flow>
    </view>

    <view class="v4-nodata" v-else>
      <image src="@/static/images/img_nodata.png" mode="scaleToFill"/>
      <view class="text">暂无数据</view>
    </view>
  </view>
</template>

<script>
import {getStoreVideoType, getArticleList} from '@/api/public'
import {getVideoList} from '@/api/user'
import { pageListenMixins } from '@/mixins/pageListenMixins'

export default {
  mixins: [pageListenMixins],
  data() {
    return {
      webUrl: this.$VUE_APP_RESOURCES_URL,
      typeList: [{'label': '全部', 'value': ''}],
      type: '',
      page: 1,
      limit: 10,
      keyword: '',
      list: [],
      isWait: false,
      pageKeyId: Object.freeze('findVideoList')
    }
  },
  onLoad(options) {
    if (!options.click) {
      uni.switchTab({ url: '/pages/home/index' })
      return
    }
    this.getType()
    this.fetchList()
  },
  onReachBottom() {
    this.page++
    this.fetchList()
  },
  methods: {
    getType() {
      getStoreVideoType().then(({data}) => {
        if (data.length > 0) {
          data.forEach(item => {
            this.typeList.push(item)
          })
        }
      })
    },
    changeType(item) {
      this.type = item.value
      this.page = 1
      this.list = []
      this.fetchList()
    },
    fetchList() {
      if (this.isWait) return
      this.isWait = true
      const params = {
        type: this.type,
        page: this.page,
        limit: this.limit
      }
      getVideoList(params).then(res => {
        if (res.status === 200) {
          for (let i = 0; i < res.data.length; i++) {
            res.data[i].hide = true
            this.list.push(res.data[i])
          }
        }
        this.isWait = false
      })
    },
    goDetail(item) {
      this.$yrouter.push("/pages/VideoPlayBackList/VideoPlayBackDetail?videoUrl=" + item.video + '&id=' + item.id + '&click=1')
    }
  }
}
</script>

<style lang="less">
.type-list {
  margin: 28rpx 32rpx;

  .item {
    margin-right: 20rpx;
    padding: 12rpx 16rpx;
    border-radius: 20rpx;
    background: #fff;
    font-size: 26rpx;
  }

  .active {
    background: #f66;
    color: #fff;
  }
}

.list {
  margin: 28rpx 32rpx;

  .item {
    border-radius: 4rpx;
    background: #fff;

    .cover {
      width: 332rpx;
      //height: 200rpx;
      vertical-align: middle;
    }

    .title {
      padding: 12rpx 16rpx;
      font-size: 26rpx;
      font-weight: bold;
      line-height: 38rpx;
      color: #333;
    }

    .mark {
      margin: 14rpx 16rpx;
      font-size: 22rpx;
      line-height: 32rpx;
      color: #999;
    }

    .footer {
      padding: 12rpx 16rpx 16rpx;
      border-top: 1rpx solid #E1E1E1;
      font-size: 22rpx;
    }

    .icon {
      width: 40rpx;
      height: 40rpx;
      vertical-align: middle;
      border-radius: 50%;
    }

    .visit {
      width: 100%;
      color: #333;
      overflow: hidden;
    }

    .time {
      color: #999;
    }
  }
}
</style>