98 lines
2.2 KiB
Vue
98 lines
2.2 KiB
Vue
<template>
|
|
<view class="content">
|
|
<u-tabs lineColor="#287CCE" lineWidth="30" :activeStyle="{color:'#287CCE',fontSize:'36rpx',fontWeight:'bold'}"
|
|
:list="classifyArr" @click="tabClick"></u-tabs>
|
|
<view class="list" v-if="articleList.length > 0">
|
|
<template v-for="item in articleList">
|
|
<one-article :article="item"></one-article>
|
|
</template>
|
|
</view>
|
|
<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-else></u-empty>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import oneArticle from '@/components/one-article/one-article.vue'
|
|
export default {
|
|
components: {
|
|
oneArticle
|
|
},
|
|
data() {
|
|
return {
|
|
classifyArr: [{
|
|
name: '全部',
|
|
id: '',
|
|
}],
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
parentId: '',
|
|
articleList: [],
|
|
loading: '',
|
|
}
|
|
},
|
|
onShow() {
|
|
this.articleList = [];
|
|
this.pageNum =1;
|
|
this.pageSize = 10;
|
|
this.classifyArr = [{
|
|
name: '全部',
|
|
id: '',
|
|
}];
|
|
this.getArticleClassList();
|
|
this.getArticleList();
|
|
},
|
|
onReachBottom() {
|
|
console.log('触底');
|
|
if (this.loading == 'more') {
|
|
this.pageNum++;
|
|
this.getArticleList();
|
|
}
|
|
},
|
|
methods: {
|
|
tabClick(item) {
|
|
this.articleList = [];
|
|
this.pageNum = 1;
|
|
this.parentId = item.id;
|
|
console.log(this.parentId);
|
|
this.getArticleList();
|
|
},
|
|
// 获取文章分类
|
|
async getArticleClassList() {
|
|
const res = await this.$myRequest({
|
|
url: '/system/type/list',
|
|
})
|
|
this.classifyArr = this.classifyArr.concat(res.data.rows)
|
|
},
|
|
async getArticleList() {
|
|
const res = await this.$myRequest({
|
|
url: '/system/article/articleList',
|
|
data: {
|
|
pageNum: this.pageNum,
|
|
pageSize: this.pageSize,
|
|
parentId: this.parentId
|
|
}
|
|
})
|
|
if (res.data.code == 200) {
|
|
for (let i = 0; i < res.data.rows.length; i++) {
|
|
res.data.rows[i].litpic = this.baseUrl + res.data.rows[i].litpic
|
|
}
|
|
if (res.data.rows.length >= this.pageSize) {
|
|
this.loading = 'more';
|
|
} else {
|
|
this.loading = 'noMore';
|
|
}
|
|
this.articleList = this.articleList.concat(res.data.rows);
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.content {
|
|
.list {
|
|
margin: 50rpx 22rpx;
|
|
}
|
|
}
|
|
</style> |