Blame view

ceres-uniapp-master/pages_category_page2/livePage/index.vue 1.92 KB
3f535f30   杨鑫   '初始'
1
2
3
4
5
6
7
8
9
10
  <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">
726bc80b   杨鑫   最新
11
        <image class="emptyCart-img" src="https://zhgw-uat.028wlkj.com/cdwlMall/zsfwzxt/file/static/images/collectEmpty.png"></image>
3f535f30   杨鑫   '初始'
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
        <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>