<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)" v-for="(item,index) in articleTabArr"
|
:style="articleTabNum==index?'color:#000000':'color:#808080'">{{item}}</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" value="" 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}}</view>
|
</view>
|
</view>
|
<view class="advisory-right">
|
<image :src="i.url"></image>
|
</view>
|
</view>
|
</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: "http://s16s652780.51mypc.cn/api",
|
page: 1,
|
pagesize: 10,
|
// loadStatus:'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
|
isLoadMore: false, //是否加载中
|
isFlash: false, //是否刷新
|
data: [],
|
titleList: ['推荐', '要闻', '新思想'],
|
titleNum: 0,
|
articleTabArr: ['全部', '视频', '社会', '经济', '热点'],
|
articleTabNum: 0,
|
navbarTopHeight: "10px",
|
tabbar:this.$store.state.tabbar
|
}
|
},
|
mounted() {
|
// this.getArtcilePageList();
|
},
|
//上拉加载更多
|
// onReachBottom() { //上拉触底函数
|
// console.log("上拉了")
|
// if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
|
// // this.isLoadMore=true
|
// this.page += 1
|
// this.getArtcilePageList(2)
|
// }
|
// },
|
// //下拉刷新
|
// onPullDownRefresh() {
|
// // console.log("下拉了！....");
|
// if (!this.isFlash) { //此处判断，上锁，防止重复请求
|
// // this.isFlash=true;
|
// this.page = 1;
|
// this.getArtcilePageList(1);
|
// uni.stopPullDownRefresh();
|
// }
|
// },
|
onLoad() {
|
this.getArtcilePageList(1);
|
uni.stopPullDownRefresh();
|
},
|
methods: {
|
goArticleTab(index) {
|
this.articleTabNum = index;
|
},
|
goTabDetail(index) {
|
this.titleNum = index;
|
},
|
//去跳转详情页面
|
goDetail(e) {
|
|
//内容传值容易报错，所以直传id,然后调用接口去查询
|
// let detail = {
|
// title: e.title,
|
// content: e.content,
|
// id: e.id,
|
// createTime: e.createTime,
|
// sourceName: e.sourceName,
|
// imgUrl: e.url,
|
// videoUrl:e.videoUrl
|
// };
|
|
let detail = {
|
id: e.id
|
};
|
//去跳转
|
uni.navigateTo({
|
url: './article_detail?detailData=' + JSON.stringify(detail)
|
});
|
},
|
|
//获取资讯信息
|
getArtcilePageList(tab) {
|
var that = this;
|
uni.request({
|
url: that.pathUrl + '/article/article/page',
|
method: 'GET',
|
data: {
|
current: this.page,
|
size: this.pagesize
|
},
|
success: (res) => {
|
if (res.data.code == 200) {
|
if (res.data.data.records) {
|
if (tab == 1) {
|
that.data = res.data.data.records;
|
} else {
|
//如果总数小于pageSize,不做其他操作
|
if (res.data.data.total < this.pagesize) {
|
that.data = res.data.data.records;
|
} else {
|
if (res.data.data.records.length < this.pagesize) {
|
//如果数量小于分页数量，则为最后一页
|
// this.isLoadMore=true;
|
// this.loadStatus='nomore';
|
} else {
|
// this.isLoadMore=false
|
}
|
res.data.data.records.forEach((item) => {
|
that.data.push(item);
|
})
|
}
|
}
|
} else {
|
// this.isLoadMore=true;
|
// this.loadStatus='nomore';
|
}
|
uni.stopPullDownRefresh();
|
}
|
}
|
});
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.advisory-big {
|
width: 100%;
|
height: 70%;
|
|
.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: #007AFF;
|
width: 100%;
|
height: 2rem;
|
border-bottom: 2px solid #D7D7D7;
|
|
.article-tab-title {
|
// text-align: center;
|
width: 14%;
|
float: left;
|
margin-left: 1rem;
|
// border-bottom: 4px solid #000000;
|
}
|
|
image {
|
width: 1.5rem;
|
height: 1.5rem;
|
}
|
}
|
|
.article-content{
|
margin-top: 1rem;
|
width: 100%;
|
|
.advisory-model {
|
width: 100%;
|
height: 6rem;
|
// background-color: #00FF00;
|
|
|
.advisory-left {
|
width: 61%;
|
height: 80%;
|
float: left;
|
position: relative;
|
// background-color: #00FFFF;
|
position: relative;
|
left: 4%;
|
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: 130rpx;
|
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: 32%;
|
height: 80%;
|
left: 63%;
|
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: #000;
|
}
|
|
|
|
/* 搜索框 */
|
.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: 0.35rem;
|
|
.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>
|
