You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
136 lines
4.5 KiB
136 lines
4.5 KiB
<template>
|
|
|
|
<BaseContainer class="search-page">
|
|
<NavBar title="新闻" />
|
|
<view class="news-list-page">
|
|
<view class="swiper-container">
|
|
<view class="swiper-wrapper">
|
|
<view v-for="(item, index) in category" :key="item.id" :class="{ on: index === clickedIndex }"
|
|
@click="clickSlide(index)" class="swiper-slide">{{ item.title }}</view>
|
|
</view>
|
|
</view>
|
|
<template v-if="newsList.length">
|
|
<ul>
|
|
<li v-for="item in newsList" :key="item.id">
|
|
<navigator :url="`/pages/article/news_detail?id=${item.id}`">
|
|
<view class="text">
|
|
<view class="name">{{ item.title }}</view>
|
|
<view class="wrap">
|
|
<view class="hot-wrap">
|
|
<view class="hot" v-for="itm in item.label">{{itm}}</view>
|
|
</view>
|
|
<view class="browse">
|
|
<text class="iconfont iconliulanliang"></text>{{ item.visit | format }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<image :src="item.image_input">
|
|
</navigator>
|
|
</li>
|
|
</ul>
|
|
<view v-if="finished" class="prompt">没有更多了~</view>
|
|
</template>
|
|
<image v-else-if="!loading && page === 2" class="empty" :src="getImgPath('/wap/first/zsff/images/no_data_available.png')">
|
|
</view>
|
|
</BaseContainer>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getNewsList, getCategory
|
|
} from "@/api/article";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
newsList: [],
|
|
page: 1,
|
|
limit: 15,
|
|
loading: false,
|
|
finished: false,
|
|
swiperOptions: {
|
|
slidesPerView: 'auto',
|
|
observer: true,
|
|
observeParents: true,
|
|
observeSlideChildren: true
|
|
},
|
|
category: [],
|
|
clickedIndex: 0
|
|
};
|
|
},
|
|
filters: {
|
|
format: function (value) {
|
|
if (value) {
|
|
return value;
|
|
} else {
|
|
return 0;
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
|
|
},
|
|
mounted() {
|
|
this.getCategory();
|
|
},
|
|
methods: {
|
|
// 点击分类
|
|
clickSlide (index) {
|
|
this.clickedIndex = index;
|
|
this.newsList = [];
|
|
this.page = 1;
|
|
this.finished = false;
|
|
|
|
this.getNewsList();
|
|
},
|
|
// 新闻列表
|
|
getNewsList () {
|
|
var that = this;
|
|
if (that.loading || that.finished) {
|
|
return;
|
|
}
|
|
that.loading = true;
|
|
uni.showLoading({
|
|
title: '加载中'
|
|
});
|
|
let params = {
|
|
page: that.page++,
|
|
limit: that.limit,
|
|
cid: this.category.length ? this.category[this.clickedIndex].id : 0
|
|
}
|
|
getNewsList(params).then(res => {
|
|
var data = res.data;
|
|
that.newsList = that.newsList.concat(data);
|
|
that.finished = that.limit > data.length;
|
|
that.loading = false;
|
|
uni.hideLoading();
|
|
}).catch(err => {
|
|
that.loading = false;
|
|
uni.hideLoading();
|
|
})
|
|
},
|
|
// 获取分类
|
|
getCategory () {
|
|
this.loading = true;
|
|
let app=this
|
|
uni.showLoading({
|
|
title: '加载中'
|
|
});
|
|
getCategory().then(res => {
|
|
app.loading = false;
|
|
uni.hideLoading();
|
|
app.category = res.data;
|
|
app.getNewsList();
|
|
}).catch(err => {
|
|
app.loading = false;
|
|
uni.hideLoading();;
|
|
console.error(err);
|
|
})
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
|
|
|
|
</style> |