horzi_rai_wxa/pages/industrialReport/industrialReport.vue

<template>
  		<!-- 季度策略 -->
	<view class="industrial-container">
    <view class="collect-ul" v-if="haveData">
    			<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 class="nodata" v-else>
			<image src="@/static/img/nodata.png" mode="" class="nodata_ico"></image>
			<text>暂时没有报告的内容</text>
		</view>
	</view>
</template>

<script>
  import { Reports } from '@/config/api.js' 
  import { Throttle } from '@/config/util.js' 
  let app = getApp()
	export default {
		data() {
			return {
          refresh: false,//正在下拉
          page_no:1,
          pageSize:10,
		  categoryId:null,
          collectList:[],
          haveData:true,
          status:'loadmore',
          loadText: {
          	loadmore: '上拉加载更多',
          	loading: '加载中',
          	nomore: '已经到底了'
          },
          totalPage:'',
		  titleReport:''
			};
		},
    onLoad(option) {
		this.categoryId= option.id-0
    	this.getCollectList()
    },
    methods:{
    /* 获取列表 */
    getCollectList() {
    	Reports.getTactics({
    		PageSize: this.pageSize,
    		CurrentIndex: this.page_no,
			CategoryId:this.categoryId
    	}).then(res => {
    		if(res.Ret === 200) {
				uni.setNavigationBarTitle({
				    title: res.Data.MatchTypeName
				});
				this.titleReport=res.Data.MatchTypeName
    			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) {
   	/* 无需授权且已绑定 检验是或否有权限 */
	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,
   			});
   		}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++;
    		this.getCollectList()
    	}),
    	/* 下拉刷新 */
    	onPullDownRefresh: Throttle(function() {
    		this.page_no = 1;
    		this.refresh = true;
    		this.getCollectList()
    	}),
    
   /**
   * 用户点击分享
   */
   onShareAppMessage: function (res) {
   	return {
   		title: this.titleReport,
   		path: '/pages/industrialReport/industrialReport?id='+this.categoryId,
   		success: (res)=> {
   		},
   		fail: (err)=> {
   		}
   	}
   },
	}
</script>

<style scoped lang="scss">
.industrial-container {
  background-color: #f6f6f6;
  .collect-ul {
    // margin-top: 30rpx;s
  	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>