Blame view

h5/pages_category_page2/livePage/index.vue 1.91 KB
b7023175   杨鑫   '最新'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
  <template>
  	<view class="live-list-page">
  		<view class="live-list">
  			<LiveBox class="live-item"
  				v-for="item in roomList"
  				:key="item.roomid"
  				:liveData="item"
  			/>
  		</view>
      <view v-if="ifShow" class="emptyCart-box">
        <image class="emptyCart-img" src="https://jy.scjysm.asia:18086/mefile/file/static/images/collectEmpty.png"></image>
        <label class="text font-color-999 fs26 mar-top-30">暂无直播~</label>
      </view>
  	</view>
  </template>
  
  <script>
  const NET = require('@/utils/request')
  const API = require('@/config/api')
  
  import LiveBox from './components/liveBox.vue'
  export default {
  	components: {
  		LiveBox
  	},
  	data() {
  		return {
  			page: {
  				page: 1,
  				pageSize: 10,
  			},
  			isLoading: false,
  			roomList: [],
        ifShow: false
  		}
  	},
  	onLoad() {
  		this.getLiveRooms()
  	},
  	onReachBottom() {
  		this.page.page ++
  		this.getLiveRooms()
    },
  	methods: {
  		// 获取直播间列表
  		getLiveRooms () {
  			if (this.isLoading) { return }
  			this.isLoading = true
  			NET.request(API.LiveRoomes, this.page, 'get').then(res => {
  				if (this.page.page === 1) { // 第一次查询
  					this.roomList = res.data.list
            if (this.roomList.length === 0) {
              this.ifShow = true
            }
  				} else { // 下拉继续查询
  					this.roomList = this.roomList.concat(res.data.list)
  				}
  				this.isLoading = false
  			}).catch(err => {
  				console.log(err)
  				this.isLoading = false
  			})
  		},
  	}
  }
  </script>
  
  <style lang="scss" scoped>
  .live-list-page{
  	.live-list{
  		width: 100%;
  		display: flex;
  		flex-wrap: wrap;
  		.live-item{
  			width: 48%;
  			height: 460rpx;
  			margin: 1%;
  			border-radius: 8rpx;
        overflow: hidden;
  		}
  	}
    .emptyCart-box{
  		position: absolute;
  		top: 0;
  		bottom: 0;
  		left: 0;
  		right: 0;
  		display: flex;
  		flex-direction: column;
  		justify-content: center;
  		align-items: center;
      .emptyCart-img{
        width: 198upx;
        height: 183upx;
      }
    }
  }
  </style>