132 lines
3.4 KiB
Vue
132 lines
3.4 KiB
Vue
<template>
|
||
<page-meta><navigation-bar :title="$tt('navBar.classification')" title-align="center" background-color="#007AFF" /></page-meta>
|
||
<view class="container">
|
||
<view style="margin-top: 20px">
|
||
<view><u--text prefixIcon="grid-fill" iconStyle="font-size: 16px;color:#606266" :text="categoryName" bold color="#606266"></u--text></view>
|
||
</view>
|
||
<view v-for="(item, index) in list" :key="index">
|
||
<u-line margin="10px 0 15px 0"></u-line>
|
||
<view style="display: flex; align-items: center">
|
||
<view style="margin-right: 10px">
|
||
<u--image :src="item.imgUrl" @click="gotoDetail(item.newsId)" mode="aspectFill" radius="5" width="120" height="80">
|
||
<template v-slot:loading>
|
||
<u-loading-icon></u-loading-icon>
|
||
</template>
|
||
</u--image>
|
||
</view>
|
||
<view>
|
||
<u--text lines="2" lineHeight="24" size="16" @click="gotoDetail(item.newsId)" :text="item.title"></u--text>
|
||
<view style="display: flex; align-items: center; margin-top: 5px">
|
||
<view style="margin-right: 10px">
|
||
<u--text
|
||
prefixIcon="account"
|
||
iconStyle="color:#606266;font-size:14px;margin-right:3px;"
|
||
size="12"
|
||
color="#606266"
|
||
mode="name"
|
||
:text="item.author"
|
||
></u--text>
|
||
</view>
|
||
<view>
|
||
<u--text
|
||
prefixIcon="calendar"
|
||
iconStyle="color:#606266;font-size:14px;margin-right:3px;"
|
||
size="12"
|
||
color="#606266"
|
||
mode="date"
|
||
:text="item.createTime"
|
||
></u--text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<u-empty mode="list" :show="total == 0" marginTop="30"></u-empty>
|
||
<u-loadmore :status="status" v-if="total>queryParams.pageSize" marginTop="20" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { listTrend } from '@/apis/modules/trend';
|
||
import projectConfig from '@/env.config.js';
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 刷新和加载相关
|
||
status: 'nomore',
|
||
list: [],
|
||
total: 0,
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
status:1,
|
||
categoryId: null,
|
||
},
|
||
categoryName: ''
|
||
};
|
||
},
|
||
//option为object类型，会序列化上个页面传递的参数
|
||
onLoad: function(option) {
|
||
this.queryParams.categoryId = option.categoryId;
|
||
this.categoryName = option.categoryName;
|
||
},
|
||
created() {
|
||
this.getlistTrend();
|
||
},
|
||
methods: {
|
||
gotoDetail(newsId) {
|
||
uni.navigateTo({
|
||
url: '/pagesA/list/trend/trendDetail?newsId=' + newsId
|
||
});
|
||
},
|
||
//列表
|
||
getlistTrend() {
|
||
listTrend(this.queryParams).then(res => {
|
||
this.queryParams.pageNum++;
|
||
let list = null;
|
||
let rows = res.rows
|
||
.map((item, i) => {
|
||
item.imgUrl = projectConfig.baseUrl + item.imgUrl;
|
||
return item;
|
||
})
|
||
// .filter(item => item.categoryId == this.queryParams.categoryId);
|
||
if (this.queryParams.pageNum == 1) {
|
||
this.list = rows;
|
||
} else {
|
||
this.list = this.list.concat(rows);
|
||
}
|
||
this.total = res.total;
|
||
this.loading = false;
|
||
uni.stopPullDownRefresh();
|
||
});
|
||
},
|
||
// 下拉刷新
|
||
onPullDownRefresh() {
|
||
this.list = [];
|
||
this.queryParams.pageNum = 1;
|
||
// Http获取列表
|
||
this.getlistTrend();
|
||
},
|
||
// 上拉加载
|
||
onReachBottom() {
|
||
this.status = 'loading';
|
||
this.queryParams.pageNum = this.queryParams.pageNum + 1;
|
||
if ((this.queryParams.pageNum - 1) * this.queryParams.pageSize > this.total) {
|
||
this.status = 'nomore';
|
||
} else {
|
||
this.getlistTrend();
|
||
this.status = 'loading';
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
.container {
|
||
padding: 10px;
|
||
padding-bottom: 100px;
|
||
}
|
||
</style>
|