<template>
|
<view class="advisory-big ">
|
<!-- 自定义顶部导航栏 -->
|
<!-- <view class="uni-nav-bar-info" :style="{marginTop:navbarTopHeight}">
|
<view class="title" @click="goTabDetail(index)" v-for="(item,index) in titleList"
|
:style="titleNum==index? 'color:#000000':'color:#808080'">{{item}}</view>
|
</view> -->
|
|
<view class="article-tab">
|
<view :class="{'article-tab-title':true,'cccc':index == articleTabNum}" @click="goArticleTab(index,item.dictKey)" v-for="(item,index) in articleTabArr"
|
:style="articleTabNum==index?'color:#000000':'color:#808080'">{{item.dictValue}}</view>
|
<image src="../../static/images/article/menu.png"></image>
|
</view>
|
|
<view class="search-block">
|
<view class="search-ico-wapper">
|
<image src="../../static/images/search/search.png" class="search-ico" mode=""></image>
|
</view>
|
<input type="text" v-on:input ="getKeyword" v-model="keyword" placeholder="搜索" class="search-text" maxlength="10" focus/>
|
<view class="search-ico-wapper1">
|
<image src="../../static/images/article/microphone.png" class="search-ico-1" mode=""></image>
|
</view>
|
</view>
|
<view class="article-content">
|
<view v-for="i in data" class="advisory-model" @click="goDetail(i)">
|
<view class="advisory-left">
|
<view class="advisory-title-top">
|
<view class="advisory-title">{{i.title}}</view>
|
</view>
|
<view class="advisory-title-down">
|
<view class="advisory-title-name">{{i.sourceName}}</view>
|
<view class="advisory-title-time">{{i.createTime.substring(0,11)}}</view>
|
</view>
|
</view>
|
<view class="advisory-right">
|
<image :src="i.url"></image>
|
</view>
|
</view>
|
<u-loadmore :status="status" />
|
</view>
|
|
<!-- 底部导航条 -->
|
<u-tabbar :list="tabbar" :mid-button="false"></u-tabbar>
|
</view>
|
</template>
|
|
<script>
|
import navBarTop from '../../components/nav-bar-top/nav-bar-top.vue';
|
export default {
|
components: {
|
navBarTop
|
},
|
data() {
|
return {
|
// pathUrl:"http://localhost:89/",
|
pathUrl: this.$store.state.piAPI + "",
|
page: 1,
|
pagesize: 10,
|
status: 'loadmore',
|
// loadStatus:'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
|
isLoadMore: false, //是否加载中
|
isFlash: false, //是否刷新
|
data: [],
|
titleNum: 0,
|
articleTabArr: [],
|
articleTabNum: 0,
|
navbarTopHeight: "10px",
|
tabbar:this.$store.state.tabbar,
|
tabInfo:"0",
|
keyword:''
|
}
|
},
|
mounted() {
|
// this.getArtcilePageList();
|
},
|
onLoad() {
|
//获取资讯类型
|
this.getArticleTypeListInfo();
|
//获取新闻数据
|
this.getArtcilePageList("0");
|
|
},
|
//上拉加载更多
|
onReachBottom() {
|
if (this.status=='nomore') return;
|
this.page = ++this.page;
|
setTimeout(() => {
|
this.getArtcilePageList(this.tabInfo);
|
}, 1000);
|
},
|
methods: {
|
//获取资讯类型信息
|
getArticleTypeListInfo(){
|
var that = this;
|
uni.request({
|
url: this.$store.state.piAPI + '/blade-system/dict-biz/dictionary?code=articleType',
|
method: 'GET',
|
data: {
|
current: this.page,
|
size: this.pagesize
|
},
|
success:(res) =>{
|
if(res.data.code==200){
|
const item = {
|
dictKey:"0",
|
dictValue:"全部"
|
}
|
that.articleTabArr.push(item);
|
//判断长度
|
if(res.data.data.length<=4){
|
res.data.data.forEach((item)=>{
|
that.articleTabArr.push(item);
|
})
|
}else{
|
//只取前4个
|
that.articleTabArr.push(res.data.data[0]);
|
that.articleTabArr.push(res.data.data[1]);
|
that.articleTabArr.push(res.data.data[2]);
|
that.articleTabArr.push(res.data.data[3]);
|
}
|
}
|
},
|
})
|
},
|
|
//根据资讯类型查询数据
|
goArticleTab(index,dictKey) {
|
this.tabInfo = dictKey;
|
this.articleTabNum = index;
|
//先清空数据
|
this.data=[];
|
//查询数据
|
this.getArtcilePageList(dictKey);
|
},
|
goTabDetail(index) {
|
this.titleNum = index;
|
},
|
//去跳转详情页面
|
goDetail(e) {
|
let detail = {
|
id: e.id
|
};
|
//去跳转
|
uni.navigateTo({
|
url: './article_detail?detailData=' + JSON.stringify(detail)
|
});
|
},
|
//on input 通过 keyword 关键字查询
|
getKeyword(){
|
this.getArtcilePageList(this.tabInfo);
|
},
|
//获取资讯信息
|
getArtcilePageList(tab) {
|
var that = this;
|
var paramData = null;
|
if(Number(tab)==""){
|
paramData = {
|
current: this.page,
|
size: this.pagesize,
|
keyword:this.keyword
|
}
|
}else{
|
paramData = {
|
current: this.page,
|
size: this.pagesize,
|
keyword:this.keyword,
|
articleType:that.tabInfo
|
}
|
}
|
uni.request({
|
url: this.$store.state.piAPI + '/article/article/page',
|
method: 'GET',
|
data: paramData,
|
success: (res) => {
|
if (res.data.code == 200) {
|
if (res.data.data.records) {
|
//如果总数小于pageSize,不做其他操作
|
if (res.data.data.total < this.pagesize) {
|
that.data = res.data.data.records;
|
that.status='nomore';
|
} else {
|
if (res.data.data.records.length < this.pagesize) {
|
//如果数量小于分页数量，则为最后一页
|
this.status = 'nomore'
|
} else {
|
//否则继续加载更多数据
|
this.status = 'loading';
|
}
|
res.data.data.records.forEach((item) => {
|
that.data.push(item);
|
})
|
}
|
}
|
uni.stopPullDownRefresh();
|
}
|
}
|
});
|
}
|
}
|
}
|
</script>
|
|
<style>
|
page{
|
width: 100%;
|
height: 100%;
|
background-color: #f7f7f7;
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
.advisory-big {
|
width: 100%;
|
height: 100%;
|
background-color: #f7f7f7;
|
|
.uni-nav-bar-info {
|
display: flex;
|
align-items: center;
|
height: 50px;
|
|
.title {
|
font-size: 1.2rem;
|
color: #808080;
|
margin-left: 1rem;
|
}
|
}
|
|
|
.article-tab {
|
background-color: #fff;
|
width: 100%;
|
height: 2.5rem;
|
border-bottom: 2px solid #D7D7D7;
|
z-index: 999;
|
position: fixed;
|
|
.article-tab-title {
|
// text-align: center;
|
width: 14%;
|
float: left;
|
margin-left: 1rem;
|
margin-top: 0.5rem;
|
// border-bottom: 4px solid #000000;
|
}
|
|
image {
|
margin-top: 0.35rem;
|
width: 1.5rem;
|
height: 1.5rem;
|
}
|
}
|
|
.article-content{
|
margin-top: 3.5rem;
|
width: 100%;
|
// background-color: #00FF00;
|
|
.advisory-model {
|
width: 94%;
|
margin: 0 auto;
|
height: 6rem;
|
background-color: #FFF;
|
border-radius: 8px;
|
margin-top: 0.5rem;
|
|
|
.advisory-left {
|
width: 64%;
|
height: 80%;
|
float: left;
|
position: relative;
|
// background-color: #00FFFF;
|
position: relative;
|
left: 3%;
|
top: 10%;
|
|
|
.advisory-title-top {
|
// background-color: #2692FD;
|
width: 100%;
|
height: 75%;
|
|
.advisory-title {
|
width: 92%;
|
font-size: 15px;
|
font-weight: 550;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-line-clamp: 2;
|
-webkit-box-orient: vertical;
|
}
|
|
|
}
|
|
.advisory-title-down {
|
// background-color: #0078A8;
|
width: 100%;
|
height: 25%;
|
font-size: 12px;
|
font-weight: 550;
|
color: #808080;
|
|
.advisory-title-name {
|
width: 250rpx;
|
float: left;
|
letter-spacing: 1px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-line-clamp: 1;
|
-webkit-box-orient: vertical;
|
// background-color:#0078A8;
|
}
|
|
.advisory-title-time {
|
position: relative;
|
left: 15rpx;
|
}
|
}
|
|
}
|
|
.advisory-right {
|
// background-color: #222222;
|
width: 33%;
|
height: 80%;
|
left: 65%;
|
position: relative;
|
top: 10%;
|
|
image {
|
position: relative;
|
left: 0px;
|
top: -100%;
|
width: 100%;
|
height: 100%;
|
border-radius: 5px;
|
}
|
}
|
}
|
}
|
}
|
|
.cccc{
|
position: relative;
|
top: -5px;
|
}
|
.cccc::before {
|
position: relative;
|
top: 25px;
|
content: '';
|
width: 30px;
|
display: block;
|
height: 3.5px;
|
background-color: #0BB9C8;
|
}
|
|
|
|
/* 搜索框 */
|
.search-ico, .search-ico-1{
|
width: 40upx;
|
height: 40upx;
|
}
|
|
.search-block{
|
width: 94%;
|
margin: 0 auto;
|
// background-color: #007AFF;
|
display: flex;
|
flex-direction: row;
|
position: relative;
|
top: 2.85rem;
|
|
.search-ico-wapper{
|
background-color: #F1F1F1;
|
display: flex;
|
flex-direction:column;
|
justify-content: center;
|
padding: 0upx 0upx 0upx 15upx;
|
border-bottom-left-radius:7px;
|
border-top-left-radius: 7px;
|
}
|
|
.search-text{
|
font-size: 14px;
|
background-color: #F1F1F1;
|
height: 70upx;
|
width: 100%;
|
padding-left: 0.5rem;
|
}
|
|
|
.search-ico-wapper1{
|
background-color: #F1F1F1;
|
display: flex;
|
flex-direction:column;
|
justify-content: center;
|
padding: 0upx 15upx 0upx 0upx;
|
border-bottom-right-radius:7px;
|
border-top-right-radius: 7px;
|
}
|
}
|
|
|
</style>
|
