<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>
|
<u-dropdown style="height:0rpx" @open="open">
|
<u-dropdown-item v-model="value1" title="看新闻" @change="change" :options="options1"></u-dropdown-item>
|
<u-dropdown-item v-model="value1" title="看视频" @change="change" :options="options2"></u-dropdown-item>
|
<u-dropdown-item v-model="value1" title="行业圈" @change="change" :options="options3"></u-dropdown-item>
|
<u-dropdown-item v-model="value1" title="看现场" @change="change" :options="options4"></u-dropdown-item>
|
</u-dropdown>
|
</view>
|
<view>
|
<view class="search-block" style="height: 35px">
|
<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>
|
<scroll-view id="articleBox" :style="{ height: swiperHeight + 'px' }" class="article-content" scroll-y
|
style="width: 100%; margin-top: 100rpx;" :refresher-enabled="refresherFlag" :refresher-threshold="threshold"
|
:refresher-triggered="triggered" @refresherrefresh="refreshing" @refresherrestore="refresherrestore">
|
<view style="text-align: center;">
|
<u-loading size="90" mode="flower" :show="loading"></u-loading>
|
</view>
|
<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" />
|
</scroll-view>
|
|
<!-- <view class="article-content">
|
</view> -->
|
|
<u-toast ref="uToast" />
|
<!-- 底部导航条 -->
|
<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 + "",
|
loading:true,//加载动画
|
page: 1,
|
pagesize: 999999,
|
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: '',
|
value1: "",
|
rolename: "",
|
threshold: 50,
|
triggered: false,
|
isRefreshing: false, // 是否在刷新中
|
refresherFlag: true,
|
options1: [{
|
label: '全部',
|
value: 'kxw',
|
}, {
|
label: '热议',
|
value: 'kxw001',
|
},
|
{
|
label: '通知',
|
value: 'kxw002',
|
},
|
{
|
label: '警闻',
|
value: 'kxw003',
|
},
|
{
|
label: '民生',
|
value: 'kxw004',
|
}
|
],
|
options2: [{
|
label: '全部',
|
value: 'ksp',
|
}, {
|
label: '通告',
|
value: 'ksp001',
|
},
|
{
|
label: '微视',
|
value: 'ksp002',
|
},
|
{
|
label: '动态',
|
value: 'ksp003',
|
}
|
],
|
options3: [{
|
label: '全部',
|
value: 'hyq',
|
}, {
|
label: '消息发布',
|
value: 'hyq001',
|
},
|
{
|
label: '知识竞答',
|
value: 'hyq002',
|
},
|
{
|
label: '知识讨论',
|
value: 'hyq003',
|
}, {
|
label: '个人',
|
value: 'hyq004',
|
}
|
],
|
options4: [{
|
label: '全部',
|
value: 'kxc',
|
}],
|
swiperHeight: 0
|
}
|
},
|
mounted() {
|
// this.getArtcilePageList();
|
},
|
onLoad() {
|
//获取新闻数据
|
this.rolename = this.$store.state.UserData.role_name;
|
this.getArtcilePageList("0");
|
uni.startPullDownRefresh();
|
|
},
|
|
onReady() {
|
let that = this;
|
uni.getSystemInfo({
|
success(e) {
|
console.log(e);
|
let {
|
windowWidth,
|
windowHeight,
|
safeArea
|
} = e;
|
const query = uni.createSelectorQuery().in(that);
|
query
|
.select('#articleBox')
|
.boundingClientRect(data => {
|
that.swiperHeight = (safeArea.bottom - data.top - 70);
|
|
})
|
.exec();
|
}
|
});
|
},
|
|
//上拉加载更多
|
onReachBottom() {
|
if (this.status == 'nomore') return;
|
this.page = ++this.page;
|
setTimeout(() => {
|
this.getArtcilePageList(this.tabInfo);
|
}, 100);
|
},
|
methods: {
|
goTabDetail(index) {
|
this.titleNum = index;
|
},
|
//去跳转详情页面
|
goDetail(e) {
|
let detail = {
|
id: e.id
|
};
|
if (e.articleType.indexOf("ksp") != -1) {
|
//去跳转
|
uni.navigateTo({
|
url: './article_video?detailData=' + (JSON.stringify(e))
|
});
|
} else {
|
//去跳转
|
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 = {
|
rolename: this.rolename, //帐号角色
|
current: this.page,
|
size: this.pagesize,
|
keyword: this.keyword
|
}
|
} else {
|
paramData = {
|
rolename: this.rolename, //帐号角色
|
current: this.page,
|
size: this.pagesize,
|
keyword: this.keyword,
|
articleType: tab
|
}
|
}
|
uni.request({
|
url: that.$store.state.piAPI + '/article/article/pageDate',
|
method: 'GET',
|
data: paramData,
|
success: (res) => {
|
if (res.data.code == 200) {
|
that.loading = false;
|
if (res.data.data.records) {
|
//如果总数小于pageSize,不做其他操作
|
if (res.data.data.total < that.pagesize) {
|
that.data = res.data.data.records;
|
that.status = 'nomore';
|
} else {
|
if (res.data.data.records.length < that.pagesize) {
|
//如果数量小于分页数量，则为最后一页
|
that.status = 'nomore'
|
} else {
|
//否则继续加载更多数据
|
that.status = 'loading';
|
}
|
res.data.data.records.forEach((item) => {
|
that.data.push(item);
|
})
|
}
|
}
|
setTimeout(() => {
|
that.triggered = false; //触发onRestore，并关闭刷新图标 正常应该放在请求成功得接口里
|
that.isRefreshing = false;
|
}, 1000)
|
}
|
}
|
});
|
},
|
change(e) {
|
this.page = 1;
|
this.getArtcilePageList(e);
|
},
|
open(e) {
|
if (e >= 2) {
|
this.$refs.uToast.show({
|
title: '功能研发中',
|
type: 'warning',
|
})
|
}
|
},
|
refreshing() {
|
if (this.isRefreshing) {
|
return;
|
}
|
this.isRefreshing = true;
|
//界面下拉触发，triggered可能不是true，要设为true
|
if (!this.triggered) {
|
this.triggered = true;
|
}
|
|
this.getArtcilePageList();
|
},
|
|
refresherrestore() {
|
|
},
|
}
|
}
|
</script>
|
|
<style>
|
|
</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>
|
