1.整体页面样式调整，图标更换 2.工作台页面调整 3.资讯页面调整，更换顶部导航栏，新增tab 条，搜索框

Administrator

2021-06-30 82c62ebc487fb43f3f45a8fd1172023937d144bc

 pages/article/article.vue

@@ -1,12 +1,28 @@
<template>
   <view class="advisory-big">
         <!-- 自定义顶部导航栏 -->
         <navBarTop :title="'我要看'"></navBarTop>
         <!-- 顶部下拉刷新 -->
         <!-- <view v-show="isFlash">
            <uni-load-more :status="loadStatus" ></uni-load-more>
         </view> -->
         <view  v-for="i in data" class="advisory-model" @click="goDetail(i)">
   <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)" 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>
      <view class="article-content">
         <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>
@@ -19,63 +35,70 @@
            <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> -->
      </view>
   </view>
</template>

<script>
   import navBarTop from '../../components/nav-bar-top/nav-bar-top.vue';
   export default{
   export default {
      components: {
         navBarTop
      },
      data(){
      data() {
         return {
            // pathUrl:"http://localhost:89/",
            pathUrl:"http://s16s652780.51mypc.cn/api",
            page:1,
            pagesize:10,
            pathUrl: "http://s16s652780.51mypc.cn/api",
            page: 1,
            pagesize: 10,
            // loadStatus:'loading',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
            isLoadMore:false,  //是否加载中
            isFlash:false,//是否刷新
            data:[]
            isLoadMore: false, //是否加载中
            isFlash: false, //是否刷新
            data: [],
            titleList: ['推荐', '要闻', '新思想'],
            titleNum: 0,
            articleTabArr: ['全部', '视频', '社会', '经济', '关注'],
            articleTabNum: 0,
            navbarTopHeight: "10px"
         }
      },
      mounted(){
      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();
         }
      },
      // 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);
         this.getArtcilePageList(1);
         uni.stopPullDownRefresh();
      },
      methods:{
      methods: {
         goArticleTab(index) {
            this.articleTabNum = index;
         },
         goTabDetail(index) {
            this.titleNum = index;
         },
         //去跳转详情页面
         goDetail(e){
				
         goDetail(e) {

            //内容传值容易报错，所以直传id,然后调用接口去查询
            // let detail = {
            //    title: e.title,
@@ -86,7 +109,7 @@
            //    imgUrl: e.url,
            //    videoUrl:e.videoUrl
            // };
				

            let detail = {
               id: e.id
            };
@@ -95,40 +118,40 @@
               url: './article_detail?detailData=' + JSON.stringify(detail)
            });
         },
			

         //获取资讯信息
         getArtcilePageList(tab){
         getArtcilePageList(tab) {
            var that = this;
            uni.request({
               url: that.pathUrl+'/article/article/page',
               method:'GET',
               data:{
                  current:this.page,
               url: that.pathUrl + '/article/article/page',
               method: 'GET',
               data: {
                  current: this.page,
                  size: this.pagesize
               },
               success: (res) => {
                  if(res.data.code==200){
                     if(res.data.data.records){
                        if(tab==1){
                  if (res.data.code == 200) {
                     if (res.data.data.records) {
                        if (tab == 1) {
                           that.data = res.data.data.records;
                        }else{
                        } else {
                           //如果总数小于pageSize,不做其他操作
                           if(res.data.data.total<this.pagesize){
                           if (res.data.data.total < this.pagesize) {
                              that.data = res.data.data.records;
                           }else{
                              if(res.data.data.records.length<this.pagesize){
                           } else {
                              if (res.data.data.records.length < this.pagesize) {
                                 //如果数量小于分页数量，则为最后一页
                                 // this.isLoadMore=true;
                                 // this.loadStatus='nomore';
                              }else{
                              } else {
                                 // this.isLoadMore=false
                              }
                              res.data.data.records.forEach((item)=>{
                              res.data.data.records.forEach((item) => {
                                 that.data.push(item);
                              })
                           }
                        }
                     }else{
                     } else {
                        // this.isLoadMore=true;
                        // this.loadStatus='nomore';
                     }
@@ -142,98 +165,192 @@
</script>

<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;
               }
            }
				

      .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: #007AFF;
         width: 100%;
         height: 2rem;
         border-bottom: 2px solid #D7D7D7;

         .article-tab-title {
            // text-align: center;
            width: 14%;
            float: left;
            margin-left: 1rem;
            // border-bottom: 4px solid #000000;
         }

         image {
            width: 1.5rem;
            height: 1.5rem;
         }
      }
		
      .article-content{
         margin-top: 1rem;
         width: 100%;
         
         .advisory-right{
            // background-color: #222222;
            width: 32%;
            height: 80%;
            left: 63%;
            position: relative;
            top: 10%;
				
            image{
         .advisory-model {
            width: 100%;
            height: 6rem;
            // background-color: #00FF00;
			
			
            .advisory-left {
               width: 61%;
               height: 80%;
               float: left;
               position: relative;
               left: 0px;
               top: -100%;
               width: 100%;
               height: 100%;
               border-radius: 5px;
               // 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;
                  }
               }
			
            }
			
            .advisory-right {
               // background-color: #222222;
               width: 32%;
               height: 80%;
               left: 63%;
               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: #000;
   }
   
   

   /* 搜索框 */
   .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: 0.35rem;
		
      .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>