horzi_rai_wxa/reportPages/IndustryReport/IndustryReport.vue

<template>
	<view class="container industry-content">
	<view v-if="layoutTime">
	<view class="content-top">
	  <view class="top-bg">产业赛道布局于{{layoutTime}}</view>
   <view class="top-box">
	<view class="top-tab-cont">
      <view class="tab-cont">
      				<scroll-view 
      				scroll-x="true" 
      				scroll-with-animation 
      				class="scroll-tab" 
      				:scroll-into-view="'_'+tabIndex">
      					<block v-for="(item, index) in tabBars" :key="item.CategoryId">
      						<view :id="'_'+index" class="scroll-tab-item" :class="{ active: tabAct_id == item.CategoryId }" @click.stop="toggleTab(item,index)">
      						{{item.MatchTypeName}}
      						<image src="@/static/img/border_act.png" mode="" class="border_act" v-if="tabAct_id == item.CategoryId"></image>
                  <text class="reg-hint" v-if="item.IsRed"></text>
      						</view>
      					</block>
      				</scroll-view>
             
      			</view>
            <view class="lucency" v-if="tabBars.length>6"></view>
    </view>
	</view>
	</view>
   <view class="collect-ul">
			<view class="collect-ltem" v-for="(item,index) in collectList" :key="index" @click="goDetail(item,index)">
				<view class="item-left">
					<text class="title text_twoLine">{{item.Title}}
          <text class="reg-text" v-if="item.IsRed"></text>
          </text>
					<text class="text_twoLine desc">{{item.PublishDate}}</text>
				</view>
				<u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
			</view>
			<u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="totalPage>1"/>
		</view>
		
		
		</view>
		<view class="nodata" v-else>
			<image src="@/static/img/nodata.png" mode="" class="nodata_ico"></image>
			<text>暂时没有报告的内容</text>
		</view>
	</view>
</template>

<script>
  import { Mine } from '@/config/api.js' //模拟
  import { Reports } from '@/config/api.js' //模拟
  import { Throttle } from '@/config/util.js' 
    let app = getApp()
	export default {
		data() {
			return {
          tabAct_id:null,
		  tabBars: [],
		  industrialManagementId:null,
		  layoutTime:'',
          refresh: false,//正在下拉
          page_no:1,
          pageSize:10,
		  categoryId:null,
          collectList:[],
		  isShow:false,
          haveDatas:true,
          haveData:true,
          status:'loadmore',
          loadText: {
          	loadmore: '上拉加载更多',
          	loading: '加载中',
          	nomore: '已经到底了'
          },
          totalPage:'',
		  toggleTabIndex:0,
		  titleReport:''
			};
		},
    onLoad(option) {
		this.industrialManagementId=option.id
		this.$store.dispatch("checkHandle",{type:'load',val:option}).then(res=>{		
			this.tabAct_id=option.tab
			this.toArticleCategoryList()
		})
		
    },
	onShow() {
		this.$store.dispatch("statistics",{PageType:'IndustryList',IndustrialManagementId:this.industrialManagementId})
	},
    watch:{
      //监听tabs的变化
        tabAct_id: {
        			handler() {
        			if(this.tabAct_id){
						this.page_no=1,
						this.collectList=[]
						this.getCollectList()
					}
        			},
        		immediate:true
        		}
      },
    methods:{
      //tabs切换事件
      toggleTab (item,index) {
		  this.toggleTabIndex=index
      		if(this.tabAct_id !== item.CategoryId) {
      			this.tabAct_id = item.CategoryId;
      			this.pageNum = 1;
      			uni.pageScrollTo({
      			   scrollTop: 0,
      			   duration: 0,
      			});
      		}
      	},
		toArticleCategoryList(){
			Reports.toArticleCategoryList({
				IndustrialManagementId:this.industrialManagementId
			}).then(res=>{
				if(res.Ret==200){
					uni.setNavigationBarTitle({
					    title: res.Data.IndustryName
					});
					this.titleReport=res.Data.IndustryName
					this.layoutTime=res.Data.LayoutTime
					if(res.Data.List){	
							this.tabAct_id=res.Data.List[0].CategoryId
							this.tabBars=res.Data.List 
					}else {
						this.haveDatas=false
					}
				}
			})
		},
    /* 获取列表 */
    getCollectList() {
    	    Reports.getArticleList({
    		PageSize: this.pageSize,
    		CurrentIndex: this.page_no,
			CategoryId:this.tabAct_id,
			IndustrialManagementId:this.industrialManagementId
    	}).then(res => {
    		if(res.Ret === 200) {
    			this.status = this.page_no < res.Data.Paging.Pages ? 'loadmore' : 'nomore';
    			this.totalPage = res.Data.Paging.Pages;//总页数
    			if(this.page_no === 1) {
    				this.collectList = res.Data.List || [];
    				this.haveData = this.collectList.length ? true : false
    				if(this.refresh) {
    					uni.stopPullDownRefresh();
    					this.refresh = false;
    				} 
    			}else {
    				this.collectList = this.collectList.concat(res.Data.List)
    			}
    		}
    	})
    },
   goDetail(item,index) {
   	/* 无需授权且已绑定 检验是或否有权限 */
	if(index==0) {
		this.tabBars[this.toggleTabIndex].IsRed=false
	}
	this.collectList[index].IsRed=false
   	this.$store.dispatch('checkHandle').then(res => {
   		app.globalData.isAuth = res.IsAuth;
   		app.globalData.isBind = res.IsBind;
   		if((!res.IsAuth) && (!res.IsBind)) { // 已授权已绑定
   			uni.navigateTo({
   				url:'/pages/reportDetail/reportDetail?idReport=' + item.ArticleId,
   				// url:'/pages/landscape/landscape?id=' + item.ArticleId,
   			});
   		}else if(res.IsAuth) { //未授权
   			uni.navigateTo({
   				url:'/pages/authGuide/authGuide'
   			})
   		}else if(res.IsBind && !res.IsAuth){ //已授权未绑定
   			uni.navigateTo({
   				url:'/pages/login/login'
   			})
   		}
   	})
   	
   }
  },
    /* 触底 */
    	onReachBottom: Throttle(function() {
    		if(this.status === 'nomore') return ;
    		this.status = 'loading';
    		this.page_no++;
			if(this.tabAct_id){
    		this.getCollectList()
			}
    	}),
    	/* 下拉刷新 */
    	onPullDownRefresh: Throttle(function() {
    		if(this.tabAct_id){
				this.page_no = 1;
				this.refresh = true;
				this.getCollectList()
    		}
    	}),
	/**
	* 用户点击分享
	*/
	onShareAppMessage: function (res) {
		return {
			title: this.titleReport,
			path: '/reportPages/IndustryReport/IndustryReport?id='+this.industrialManagementId+'&tab='+this.tabAct_id,
			success: (res)=> {
			},
			fail: (err)=> {
			}
		}
	},
	}
</script>

<style lang="scss">
.industry-content {
  background-color: #F7F7F7;
  // height: 100vh;
  .top-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
    background-color: #D1EBFF;
    height: 73rpx;
    color: #2C83FF;
    font-size: 24rpx;
    line-height: 73rpx;
    text-align: center;
  }
  .top-box {
  		   position: fixed;
  		  
  		   width: 100%;
  		   
  		  top: 73rpx;
  		  left: 0;
  		  z-index: 999;}
  		   
  .top-tab-cont{
       
       .lucency{
         position: absolute;
         top: 0;
         right: 0;
         width: 32px;
         height: 30px;
         opacity:0.9;
         background-color: #fff;
       }
   .tab-cont {
     padding: retu;
   		padding: 30rpx 26rpx 0;
   		background-color: #fff;
   		font-size: 32rpx;
   		box-shadow: 0 3rpx 6rpx rgba(187,216,255,0.2);
    
   		.scroll-tab {
   			width: 100%;
   			white-space: nowrap;
   		}
   		.scroll-tab-item {
   			// flex-grow: 1;
   			text-align: center;
   			display: inline-block;
   			padding: 0rpx 8rpx 30rpx 8rpx;
   			margin-right: 60rpx;
   			border-bottom: 8rpx solid transparent;
   			position: relative;
   			&:last-child {
   				margin-right: 0;
   			}
   			&.active {
   				border-bottom: none;
   				color: #2C83FF;
   				font-weight: 700;
   			}
   			.border_act {
   				width: 100%;
   				height: 8rpx;
   				position: absolute;
   				bottom: 0;
   				left: 0;
   			}
        .reg-hint {
          position: absolute;
          top: 0rpx;
          right: -10rpx;
          width: 14rpx;
          height: 14rpx;
          background-color: #FF0000;
          border-radius: 50%;
        }
   		}
   	}
  }
  .collect-ul {
    // margin-top: 30rpx;s
	padding-top: 175rpx;
  	// padding-top: 4rpx;
  	.collect-ltem {
  		display: flex;
  		padding: 30rpx 34rpx;
  		background: #fff;
  		margin-bottom: 4rpx;
  		align-items: center;
  		justify-content: space-between;
  		.title {
        position: relative;
  			max-width: 625rpx;
  			color: #4A4A4A;
  			font-size: 34rpx;
        padding-left: 28rpx;
        .reg-text {
          position: absolute;
          top: 15rpx;
          left:0rpx;
          width: 14rpx;
          height: 14rpx;
          background-color: #FF0000;
          border-radius: 50%;
          z-index: 9;
        }
  		}
  		.desc {
  			margin-top: 17rpx;
        padding-left: 28rpx;
  			width: 625rpx;
  			color: #999;
  		}
  	}
  }
}
</style>