pika_shangjia/pages/live/live.vue

<template>
<view>
<!--pages/live/live.wxml-->
<view class="list" v-if="pageList.length > 0">
  <block v-for="(item, index) in pageList" :key="index">
  <view class="li" @tap="intoLive" :data-id="item.roomid" :data-index="index">
    <image :src="item.share_img" mode="scaleToFill" class="zbimg"></image>
    <view class="title">{{item.name}}</view>
    <view class="dflex">
      <view class="sta dflex flex" v-if="item.live_status == 101"><image src="/static/pages/images/zbico.png"></image>直播中</view>
      <view class="sta dflex flex" v-else-if="item.live_status == 102"><image src="/static/pages/images/zbico.png"></image>{{item.time}}开播</view>
      <view class="sta end dflex flex" v-else><image src="/static/pages/images/zbico1.png"></image>已结束</view>
      <!-- <view class="ren dflex flex"><image src="/pages/images/ren.png"></image>6247</view> -->
      <view class="into" v-if="item.live_status == 103">查看回放</view>
      <view class="into" v-else>进入直播</view>
      <!-- <view class="into" wx:if="{{item.live_status == 102}}">开播提醒</view> -->
    </view>
  </view>
  </block>
  <footer-copyright></footer-copyright>
</view>
<view class="nodata" v-if="ishow">
  <image :src="picUrlss+'empty_zb.png'"></image>
  <text>暂无直播</text>
</view>



<!-- <view class="placeholder-view" :style="'height:' + (bottomBlankHeignt + 115) + 'rpx'"></view> -->
<foot channel="live" :isUpdate="isUpdate"></foot>
</view>
</template>

<script>
// pages/live/live.js
const app = getApp();
const req = require("../../utils/request.js");
const util = require("../../utils/util.js");
import foot from "../../components/nav-bar/index";
import footerCopyright from "../../components/footer-copyright/footer-copyright";

export default {
  data() {
    return {
		picUrlss: req.public.picUrls,
      bottomBlankHeignt: app.globalData.isIPhoneX ? 68 : 0,
      page: 1,
      pageList: [],
      isLoad: true,
      isUpdate: false // 是否更新消息
      ,
      hasmore: false,
      ishow: false
    };
  },

  components: {
    foot,
    footerCopyright
  },
  props: {},

  onLoad() {// this.getList()
  },

  onShow() {
    this.getList();
    this.setData({
      isUpdate: !this.isUpdate
    });
  },

  onReachBottom() {
    this.page++;
    this.getList();
  },

  methods: {
    getList() {
      let that = this;
      let isShowLoading = false;
      // console.log(that.isLoad);
      if (!that.isLoad) return false;
      that.isLoad = false;
      let form = {
        page: that.page,
        limit: 10
      };

      if (form.page == 1 && !isShowLoading) {
        req.loadIng('加载中');
        isShowLoading = true;
      }

      req.getRequest('/api/live/list', form, data => {
        // if (!data) return req.msg('还没有直播');
        if (data && data.length == 10) that.isLoad = true;
        if (that.page > 1) data = that.pageList.concat(data);

        if (!data || data.length < 10) {
          that.setData({
            hasmore: true
          });
        }

        if (data) {
          data.map(item => {
            if (item.start_time) {
              item.time = util.transTime(item.start_time);
            }

            return item;
          });
        }

        // console.log(data);
        that.setData({
          pageList: data
        });

        if (!this.pageList) {
          that.setData({
            ishow: true
          });
        } else {
          that.setData({
            ishow: false
          });
        }

        if (isShowLoading) {
          uni.hideLoading();
          isShowLoading = false;
        }
      });
    },

    getLive(id) {
      return new Promise((resolve, reject) => {
        req.getRequest('/api/live/playBack', {
          page: 1,
          limit: 10,
          room_id: id
        }, data => {
          this.videoList = data;
          resolve();
        });
      });
    },

    intoLive(event) {
      let roomId = event.currentTarget.dataset.id; 
	  let index=event.currentTarget.dataset.index;
	  // console.log(roomId)
      // let date=this.data.pageList.filter(res=>res.roomid==roomId)
      // // console.log(JSON.stringify(JSON.stringify(date[0])))
      // // console.log(typeof(JSON.stringify(date[0])))
      // res=JSON.stringify(date[0])
	  let redirect = '/pages/liveMiddle/liveMiddle?id=' + roomId
	  req.isLogin().then(success => {
	  	if (success) {
	  		uni.navigateTo({
	  		  url: redirect // url:`plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}`
	  		
	  		});
	  	}
	  });

      
    },

    async playBack(event) {
      let roomId = event.currentTarget.dataset.id;
      await this.getLive(roomId);
      let videoList = JSON.stringify(this.videoList);
      if (videoList.length < 1) return req.msg('回放生成中');
      uni.navigateTo({
        url: '/pages/video/video?videoList=' + videoList
      });
    }

  }
};
</script>
<style>
@import "./live.css";
</style>