From 532faa49707dd6ee6c9843f39ec3d921cb17bf42 Mon Sep 17 00:00:00 2001
From: zengh <123456>
Date: Fri, 27 Aug 2021 08:40:31 +0800
Subject: [PATCH] 版本更新
---
pages/article/article.vue | 323 ++++++++++++++++++++++++++++++++++-------------------
1 files changed, 206 insertions(+), 117 deletions(-)
diff --git a/pages/article/article.vue b/pages/article/article.vue
index fb485a9..4991452 100644
--- a/pages/article/article.vue
+++ b/pages/article/article.vue
@@ -1,27 +1,38 @@
<template>
- <view class="advisory-big ">
+ <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>
+ <u-dropdown style="height:0rpx">
+ <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 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 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>
- <view class="article-content">
+ </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 v-for="i in data" class="advisory-model" @click="goDetail(i)">
<view class="advisory-left">
<view class="advisory-title-top">
@@ -29,7 +40,7 @@
</view>
<view class="advisory-title-down">
<view class="advisory-title-name">{{i.sourceName}}</view>
- <view class="advisory-title-time">{{i.createTime}}</view>
+ <view class="advisory-title-time">{{i.createTime.substring(0,11)}}</view>
</view>
</view>
<view class="advisory-right">
@@ -37,8 +48,12 @@
</view>
</view>
<u-loadmore :status="status" />
- </view>
-
+ </scroll-view>
+
+ <!-- <view class="article-content">
+
+ </view> -->
+
<!-- 底部导航条 -->
<u-tabbar :list="tabbar" :mid-button="false"></u-tabbar>
</view>
@@ -65,73 +80,117 @@
articleTabArr: [],
articleTabNum: 0,
navbarTopHeight: "10px",
- tabbar:this.$store.state.tabbar,
- tabInfo:"0",
- keyword:''
+ 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',
+ }
+ ],
+ options4: [{
+ label: '全部',
+ value: 'kxc',
+ }],
+ swiperHeight: 0
}
},
mounted() {
// this.getArtcilePageList();
},
onLoad() {
- //获取资讯类型
- this.getArticleTypeListInfo();
//获取新闻数据
+ 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 - 44);
+
+ })
+ .exec();
+ }
+ });
+ },
+
//上拉加载更多
onReachBottom() {
- if (this.status=='nomore') return;
+ 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;
},
@@ -146,29 +205,31 @@
});
},
//on input 通过 keyword 关键字查询
- getKeyword(){
+ getKeyword() {
this.getArtcilePageList(this.tabInfo);
},
//获取资讯信息
getArtcilePageList(tab) {
var that = this;
var paramData = null;
- if(Number(tab)==""){
+ if (Number(tab) == "") {
paramData = {
+ rolename: this.rolename, //帐号角色
current: this.page,
size: this.pagesize,
- keyword:this.keyword
+ keyword: this.keyword
}
- }else{
+ } else {
paramData = {
+ rolename: this.rolename, //帐号角色
current: this.page,
size: this.pagesize,
- keyword:this.keyword,
- articleType:that.tabInfo
+ keyword: this.keyword,
+ articleType: tab
}
}
uni.request({
- url: this.$store.state.piAPI + '/article/article/page',
+ url: this.$store.state.piAPI + '/article/article/pageDate',
method: 'GET',
data: paramData,
success: (res) => {
@@ -177,7 +238,7 @@
//如果总数小于pageSize,不做其他操作
if (res.data.data.total < this.pagesize) {
that.data = res.data.data.records;
- that.status='nomore';
+ that.status = 'nomore';
} else {
if (res.data.data.records.length < this.pagesize) {
//如果数量小于分页数量，则为最后一页
@@ -191,17 +252,45 @@
})
}
}
- uni.stopPullDownRefresh();
+ setTimeout(() => {
+ that.triggered = false; //触发onRestore，并关闭刷新图标 正常应该放在请求成功得接口里
+ that.isRefreshing = false;
+ }, 1000)
}
}
});
- }
+ },
+ change(e) {
+ this.page = 1;
+ this.getArtcilePageList(e);
+ },
+ refreshing() {
+
+ if (this.isRefreshing) {
+ return;
+ }
+ this.isRefreshing = true;
+ //界面下拉触发，triggered可能不是true，要设为true
+ if (!this.triggered) {
+ this.triggered = true;
+ }
+
+ this.dataListP = [];
+ this.dataListQZ = [];
+ this.dataListTXL = [];
+
+ this.getArtcilePageList();
+ },
+
+ refresherrestore() {
+
+ },
}
}
</script>
<style>
- page{
+ page {
width: 100%;
height: 100%;
background-color: #f7f7f7;
@@ -250,12 +339,12 @@
height: 1.5rem;
}
}
-
- .article-content{
- margin-top: 3.5rem;
+
+ .article-content {
+ // margin-top: 3.5rem;
width: 100%;
// background-color: #00FF00;
-
+
.advisory-model {
width: 94%;
margin: 0 auto;
@@ -263,8 +352,8 @@
background-color: #FFF;
border-radius: 8px;
margin-top: 0.5rem;
-
-
+
+
.advisory-left {
width: 64%;
height: 80%;
@@ -274,13 +363,13 @@
position: relative;
left: 3%;
top: 10%;
-
-
+
+
.advisory-title-top {
// background-color: #2692FD;
width: 100%;
height: 75%;
-
+
.advisory-title {
width: 92%;
font-size: 15px;
@@ -291,10 +380,10 @@
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
-
-
+
+
}
-
+
.advisory-title-down {
// background-color: #0078A8;
width: 100%;
@@ -302,9 +391,9 @@
font-size: 12px;
font-weight: 550;
color: #808080;
-
+
.advisory-title-name {
- width: 130rpx;
+ width: 250rpx;
float: left;
letter-spacing: 1px;
overflow: hidden;
@@ -314,15 +403,15 @@
-webkit-box-orient: vertical;
// background-color:#0078A8;
}
-
+
.advisory-title-time {
position: relative;
left: 15rpx;
}
}
-
+
}
-
+
.advisory-right {
// background-color: #222222;
width: 33%;
@@ -330,7 +419,7 @@
left: 65%;
position: relative;
top: 10%;
-
+
image {
position: relative;
left: 0px;
@@ -343,11 +432,12 @@
}
}
}
-
- .cccc{
+
+ .cccc {
position: relative;
top: -5px;
}
+
.cccc::before {
position: relative;
top: 25px;
@@ -357,16 +447,17 @@
height: 3.5px;
background-color: #0BB9C8;
}
-
-
+
+
/* 搜索框 */
- .search-ico, .search-ico-1{
+ .search-ico,
+ .search-ico-1 {
width: 40upx;
height: 40upx;
}
-
- .search-block{
+
+ .search-block {
width: 94%;
margin: 0 auto;
// background-color: #007AFF;
@@ -374,36 +465,34 @@
flex-direction: row;
position: relative;
top: 2.85rem;
-
- .search-ico-wapper{
+
+ .search-ico-wapper {
background-color: #F1F1F1;
display: flex;
- flex-direction:column;
+ flex-direction: column;
justify-content: center;
padding: 0upx 0upx 0upx 15upx;
- border-bottom-left-radius:7px;
+ border-bottom-left-radius: 7px;
border-top-left-radius: 7px;
}
-
- .search-text{
+
+ .search-text {
font-size: 14px;
background-color: #F1F1F1;
height: 70upx;
width: 100%;
padding-left: 0.5rem;
}
-
-
- .search-ico-wapper1{
+
+
+ .search-ico-wapper1 {
background-color: #F1F1F1;
display: flex;
- flex-direction:column;
+ flex-direction: column;
justify-content: center;
padding: 0upx 15upx 0upx 0upx;
- border-bottom-right-radius:7px;
+ border-bottom-right-radius: 7px;
border-top-right-radius: 7px;
}
}
-
-
</style>
--
Gitblit v1.9.3