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 | 611 ++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 446 insertions(+), 165 deletions(-)
diff --git a/pages/article/article.vue b/pages/article/article.vue
index 2e346c6..cbed7f1 100644
--- a/pages/article/article.vue
+++ b/pages/article/article.vue
@@ -1,225 +1,506 @@
<template>
<view class="advisory-big">
- <!-- 顶部下拉刷新 -->
- <view v-show="isFlash">
- <uni-load-more :status="loadStatus" ></uni-load-more>
+ <!-- 自定义顶部导航栏 -->
+ <!-- <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 v-for="i in data" class="advisory-model" @click="goDetail(i)">
+ </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}}</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>
- <!-- loading加载提示处 -->
- <view v-show="isLoadMore">
- <uni-load-more :status="loadStatus" ></uni-load-more>
- </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>
- export default{
- data(){
+ 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/blade-jfpts",
- page:1,
- pagesize:10,
- loadStatus:'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
- isLoadMore:false, //是否加载中
- isFlash:false,//是否刷新
- data:[]
+ 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(){
+ mounted() {
// this.getArtcilePageList();
},
- //上拉加载更多
- onReachBottom(){ //上拉触底函数
- if(!this.isLoadMore){ //此处判断，上锁，防止重复请求
- this.isLoadMore=true
- this.page+=1
- this.getArtcilePageList()
- }
- },
- //下拉刷新
- onPullDownRefresh() {
- // console.log("上拉了！....");
- if(!this.isFlash){ //此处判断，上锁，防止重复请求
- this.isFlash=true;
- this.page =1;
- this.getArtcilePageList();
- }
- },
onLoad() {
- this.getArtcilePageList();
+ //获取新闻数据
+ this.rolename = this.$store.state.UserData.role_name;
+ this.getArtcilePageList("0");
+ uni.startPullDownRefresh();
+
},
- methods:{
+
+ 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){
-
- //内容传值容易报错，所以直传id,然后调用接口去查询
- // let detail = {
- // title: e.title,
- // content: e.content,
- // id: e.id,
- // createTime: e.createTime,
- // sourceName: e.sourceName,
- // imgUrl: e.url,
- // videoUrl:e.videoUrl
- // };
-
+ goDetail(e) {
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(){
+ 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.pathUrl+'/article/article/page',
- method:'GET',
- data:{
- current:this.page,
- size: this.pagesize
- },
+ url: that.$store.state.piAPI + '/article/article/pageDate',
+ method: 'GET',
+ data: paramData,
success: (res) => {
- if(res.data.code==200){
- if(res.data.data.records){
+ if (res.data.code == 200) {
+ that.loading = false;
+ if (res.data.data.records) {
//如果总数小于pageSize,不做其他操作
- if(res.data.data.total<this.pagesize){
+ if (res.data.data.total < that.pagesize) {
that.data = res.data.data.records;
- }else{
- if(res.data.data.records.length<this.pagesize){
+ that.status = 'nomore';
+ } else {
+ if (res.data.data.records.length < that.pagesize) {
//如果数量小于分页数量，则为最后一页
- this.isLoadMore=true;
- this.loadStatus='nomore';
- }else{
- this.isLoadMore=false
+ that.status = 'nomore'
+ } else {
+ //否则继续加载更多数据
+ that.status = 'loading';
}
- res.data.data.records.forEach((item)=>{
+ res.data.data.records.forEach((item) => {
that.data.push(item);
})
}
- }else{
- this.isLoadMore=true;
- this.loadStatus='nomore';
}
+ 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{
+ .advisory-big {
width: 100%;
- height: 70%;
- position: absolute;
- top: 2%;
- // background-color: #0078A8;
-
- .advisory-model{
- width: 100%;
- height: 20%;
- // 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;
- }
- }
-
+ 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;
}
-
- .advisory-right{
- // background-color: #222222;
- width: 32%;
- height: 80%;
- left: 63%;
- position: relative;
- top: 10%;
-
- image{
+ }
+
+
+ .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;
- left: 0px;
- top: -100%;
- width: 100%;
- height: 100%;
- border-radius: 5px;
+ // 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>
--
Gitblit v1.9.3