157 lines
3.7 KiB
Vue
157 lines
3.7 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="tab-sticky">
|
|
<u-tabs
|
|
:list="listArr"
|
|
@click="changeTopic"
|
|
lineColor="#34CE98"
|
|
:activeStyle="{fontWeight: 'bold', fontSize: '30rpx'}"
|
|
/>
|
|
</view>
|
|
<view class="box">
|
|
<view class="topic" v-if="topicArr.length > 0">
|
|
<oct-topic
|
|
:lists="topicArr"
|
|
@onTopic="$Router.push({ name: 'topicDetails', params: {id: $event.topic_id, title: $event.name }})"
|
|
/>
|
|
<block v-if="page.total_page > 1">
|
|
<u-loadmore :status="status" />
|
|
</block>
|
|
</view>
|
|
<view class="noTopic" v-else>
|
|
<u-empty
|
|
mode="list"
|
|
text="暂无话题"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { lists, categories } from '@/apis/interfaces/topic'
|
|
export default {
|
|
data() {
|
|
return {
|
|
listArr : [],
|
|
topicArr : [],
|
|
categoryId : '',
|
|
status : 'loadmore',
|
|
page : ''
|
|
}
|
|
},
|
|
mounted() {
|
|
// 获取分类
|
|
this.getCategories()
|
|
|
|
// 获取列表
|
|
this.getTopic()
|
|
},
|
|
methods: {
|
|
// 分类
|
|
getCategories(){
|
|
categories().then(res => {
|
|
this.listArr = res
|
|
})
|
|
},
|
|
|
|
// 列表
|
|
getTopic(categoryId, pages){
|
|
lists({
|
|
category_id: categoryId,
|
|
page: pages
|
|
}).then(res => {
|
|
if(res.page.current == 1){
|
|
this.topicArr = []
|
|
}
|
|
this.topicArr = this.topicArr.concat(res.data)
|
|
this.status = this.page.has_more ? 'loadmore': 'nomore'
|
|
this.page = res.page
|
|
})
|
|
},
|
|
|
|
// 切换分类
|
|
changeTopic(item) {
|
|
// 获取列表
|
|
this.getTopic(item.category_id, 1)
|
|
}
|
|
},
|
|
|
|
// 下拉加载
|
|
onReachBottom() {
|
|
if(this.page.has_more){
|
|
this.status = 'loading'
|
|
let pages = this.page.current + 1
|
|
// 获取列表
|
|
this.getTopic('', pages)
|
|
return
|
|
}
|
|
this.status = 'nomore'
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.tab-sticky{
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: white;
|
|
z-index: 99;
|
|
}
|
|
|
|
.box {
|
|
padding-top: 40px;
|
|
}
|
|
|
|
.new-item {
|
|
position: relative;
|
|
margin-top: $margin - 10;
|
|
background: #f5fdfa;
|
|
border-radius: $radius;
|
|
padding: $padding ($padding * 2 + 200rpx) $padding $padding;
|
|
.new-cover {
|
|
position: absolute;
|
|
right: $padding;
|
|
top: $padding;
|
|
width: 200rpx;
|
|
height: 150rpx;
|
|
border-radius: $radius;
|
|
}
|
|
.new-title {
|
|
font-size: $title-size;
|
|
line-height: 45rpx;
|
|
min-height: 100rpx;
|
|
margin-bottom: 10px;
|
|
font-weight: bold;
|
|
color: $text-color;
|
|
}
|
|
.new-tool {
|
|
color: $text-gray;
|
|
font-size: $title-size-sm;
|
|
line-height: 40rpx;
|
|
text {
|
|
margin-right: $margin/2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.topic {
|
|
padding: 0 $padding;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.noTopic {
|
|
background-color: white;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-pack: center;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
}
|
|
</style>
|