From 8ea19a6bb34daab1410f6186992a4c1e90299c92 Mon Sep 17 00:00:00 2001
From: zengh <123456>
Date: Wed, 14 Sep 2022 08:54:44 +0800
Subject: [PATCH] 服务器配置
---
pages/article/article.vue | 430 ++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 290 insertions(+), 140 deletions(-)
diff --git a/pages/article/article.vue b/pages/article/article.vue
index 32cd362..cbed7f1 100644
--- a/pages/article/article.vue
+++ b/pages/article/article.vue
@@ -1,27 +1,36 @@
<template>
- <view class="advisory-big ">
+ <view class="advisory-big">
<!-- 自定义顶部导航栏 -->
- <view class="uni-nav-bar-info" :style="{marginTop:navbarTopHeight}">
+ <!-- <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 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 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 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">
@@ -29,14 +38,22 @@
</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">
<image :src="i.url"></image>
</view>
</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>
@@ -49,125 +66,250 @@
data() {
return {
// pathUrl:"http://localhost:89/",
- pathUrl: "http://s16s652780.51mypc.cn/api",
+ pathUrl: this.$store.state.piAPI + "",
+ loading:true,//加载动画
page: 1,
- pagesize: 10,
+ pagesize: 999999,
+ status: 'loadmore',
// loadStatus:'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
isLoadMore: false, //是否加载中
isFlash: false, //是否刷新
data: [],
- titleList: ['推荐', '要闻', '新思想'],
titleNum: 0,
- articleTabArr: ['全部', '视频', '社会', '经济', '热点'],
+ articleTabArr: [],
articleTabNum: 0,
- navbarTopHeight: "10px"
+ 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();
},
- //上拉加载更多
- // 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();
+ //获取新闻数据
+ 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: {
- 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)
- });
+ 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;
- uni.request({
- url: that.pathUrl + '/article/article/page',
- method: 'GET',
- data: {
+ var paramData = null;
+ if (Number(tab) == "") {
+ paramData = {
+ rolename: this.rolename, //帐号角色
current: this.page,
- size: this.pagesize
- },
+ 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) {
- if (tab == 1) {
+ //如果总数小于pageSize,不做其他操作
+ if (res.data.data.total < that.pagesize) {
that.data = res.data.data.records;
+ that.status = 'nomore';
} else {
- //如果总数小于pageSize,不做其他操作
- if (res.data.data.total < this.pagesize) {
- that.data = res.data.data.records;
+ if (res.data.data.records.length < that.pagesize) {
+ //如果数量小于分页数量，则为最后一页
+ that.status = 'nomore'
} 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);
- })
+ //否则继续加载更多数据
+ that.status = 'loading';
}
+ res.data.data.records.forEach((item) => {
+ that.data.push(item);
+ })
}
- } else {
- // this.isLoadMore=true;
- // this.loadStatus='nomore';
}
- uni.stopPullDownRefresh();
+ 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: 70%;
+ height: 100%;
+ background-color: #f7f7f7;
.uni-nav-bar-info {
display: flex;
@@ -183,51 +325,59 @@
.article-tab {
- // background-color: #007AFF;
+ background-color: #fff;
width: 100%;
- height: 2rem;
+ 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: 1rem;
+
+ .article-content {
+ // margin-top: 3.5rem;
width: 100%;
-
+ // background-color: #00FF00;
+
.advisory-model {
- width: 100%;
+ width: 94%;
+ margin: 0 auto;
height: 6rem;
- // background-color: #00FF00;
-
-
+ background-color: #FFF;
+ border-radius: 8px;
+ margin-top: 0.5rem;
+
+
.advisory-left {
- width: 61%;
+ width: 64%;
height: 80%;
float: left;
position: relative;
// background-color: #00FFFF;
position: relative;
- left: 4%;
+ left: 3%;
top: 10%;
-
-
+
+
.advisory-title-top {
// background-color: #2692FD;
width: 100%;
height: 75%;
-
+
.advisory-title {
width: 92%;
font-size: 15px;
@@ -238,10 +388,10 @@
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
-
-
+
+
}
-
+
.advisory-title-down {
// background-color: #0078A8;
width: 100%;
@@ -249,9 +399,9 @@
font-size: 12px;
font-weight: 550;
color: #808080;
-
+
.advisory-title-name {
- width: 130rpx;
+ width: 250rpx;
float: left;
letter-spacing: 1px;
overflow: hidden;
@@ -261,23 +411,23 @@
-webkit-box-orient: vertical;
// background-color:#0078A8;
}
-
+
.advisory-title-time {
position: relative;
left: 15rpx;
}
}
-
+
}
-
+
.advisory-right {
// background-color: #222222;
- width: 32%;
+ width: 33%;
height: 80%;
- left: 63%;
+ left: 65%;
position: relative;
top: 10%;
-
+
image {
position: relative;
left: 0px;
@@ -290,11 +440,12 @@
}
}
}
-
- .cccc{
+
+ .cccc {
position: relative;
top: -5px;
}
+
.cccc::before {
position: relative;
top: 25px;
@@ -302,55 +453,54 @@
width: 30px;
display: block;
height: 3.5px;
- background-color: #000;
+ 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;
display: flex;
flex-direction: row;
position: relative;
- top: 0.35rem;
-
- .search-ico-wapper{
+ top: 2.85rem;
+
+ .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