版本更新

zengh

2021-08-27 532faa49707dd6ee6c9843f39ec3d921cb17bf42

 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>