Gaoxs
4 years ago
9 changed files with 246 additions and 83 deletions
@ -0,0 +1,158 @@
|
||||
<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.id"> |
||||
<shopro-live-card :detail="live"></shopro-live-card> |
||||
</block> |
||||
</view> |
||||
<view v-if="liveList.length" class="cu-load text-gray" :class="loadStatus"></view> |
||||
</scroll-view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
yxWechatLive |
||||
} from "@/api/live"; |
||||
import ShoproLiveCard from '@/components/ShoproLiveCard.vue' |
||||
|
||||
export default { |
||||
components: { |
||||
ShoproLiveCard |
||||
}, |
||||
data() { |
||||
return { |
||||
tabCur: 'all', |
||||
liveStatus: '', |
||||
liveTab: [{ |
||||
title: 'all', |
||||
name: '全部', |
||||
code: '' |
||||
}, |
||||
{ |
||||
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) { |
||||
this.tabCur = tab.title; |
||||
this.liveStatus = tab.code; |
||||
this.liveList = []; |
||||
this.getLiveList(); |
||||
}, |
||||
// 加载更多 |
||||
loadMore() { |
||||
if (this.currentPage < this.lastPage) { |
||||
this.currentPage += 1; |
||||
this.getLiveList(); |
||||
} |
||||
}, |
||||
// 直播列表 |
||||
getLiveList() { |
||||
let that = this; |
||||
yxWechatLive({ |
||||
liveStatus: that.liveStatus, |
||||
page: that.currentPage, |
||||
size: that.size |
||||
}).then(res => { |
||||
that.liveList = [...that.liveList, ...res.data.content]; |
||||
that.lastPage = res.data.lastPage; |
||||
if (that.currentPage < res.data.lastPage) { |
||||
that.loadStatus = ''; |
||||
} else { |
||||
that.loadStatus = 'over'; |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
}; |
||||
</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> |
||||
Loading…
Reference in new issue