horzi_rai_wxa/pages/reportForm/reportForm.vue

<template>
  <view class="reportForm-container">
    <!-- tabs -->
	<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.ChartPermissionId">
     						<view :id="'_'+index" class="scroll-tab-item" :class="{ active: tabAct_id === item.ChartPermissionId }" @click.stop="toggleTab(item,index)">
     						{{item.PermissionName}}
     						<image src="@/static/img/border_act.png" mode="" class="border_act" v-if="tabAct_id === item.ChartPermissionId"></image>
     						</view>
     					</block>
     				</scroll-view>
            
     			</view>
           <view class="lucency" v-if="tabBars.length>6"></view>
   </view>
  	</view>
   <!-- 内容 -->
   <view class="strategy" v-if="strategyIndex==4">
    <view class="tab-cont-two">
       				<scroll-view 
       				scroll-x="true" 
       				scroll-with-animation 
       				class="scroll-tab-tow" 
       			>
       					<block v-for="(item, index) in tabBarsTow" :key="item.CategoryId">
       						<view :id="'_'+index"
                   class="scroll-tab-item"
                    :class="{ active: tabAct_idTwo === item.CategoryId }" 
                    @click.stop="toggleTabTwo(item,index)">
       						{{item.MatchTypeName}}
                  <text class="reg-text" v-if="item.IsRed"></text>
       						</view>
       					</block>
       				</scroll-view>   
      </view>
      <view class="row">
        
      </view>
  <!-- 子组件 -->
      <strategy :strategyIndexTwo="strategyIndexTwo" :pageNumFather='pageNumFather' :matchTypeName="matchTypeName" :tabAct_idTwo="tabAct_idTwo" :isNum="isNum" :isSwitchover="isSwitchover"  @hideIsred="hideIsred"/>
     </view>
   <!-- </view> -->
  <view class="industrial_eport_one" v-else>  
      <!-- 行业报告 -->
   <view class="industry" v-if="tradeList">
     <view style="height: 12rpx;"></view>
     <view class="industry-top">
     <view class="img-top-box">
       <image src="@/static/img/industry-ico.png" ></image>
       <text>行业综述</text>
     </view>
     <view></view>
     </view>
     <view class="industry-box" @click="isClickHandle(item.CategoryId)" v-for="item in tradeList" :key="item.CategoryId">
       <view class="box-left">
         {{item.MatchTypeName}}
         <text v-if="item.IsRed"></text>
       </view>
       <view class="box-right">
         <text>{{item.UpdateTime}}更新</text>
        	<u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
       </view>
     </view>
   </view>
    <!-- 产业报告 -->
   <view class="industry">
	 <!-- <view style="" class="industry-box-sticky"></view> -->
	 <view style="height: 12rpx;" v-if="!tradeList"></view>
     <view class="industry-top industry-sticky" >
      <view>
        <image src="@/static/img/property_ico.png" style="height: 50rpx;"></image>
        <text class="text-sub">细分产业报告</text>
      </view>
	  <text class="equilateral-triangle" v-if="isPitchOnShow"></text>
      <view class="pop-box">
          <!-- <image src="@/static/img/property_inco.png" style="height: 50rpx;" @click="isPitchOnShowBtn"></image> -->
		  <text @click="isPitchOnShowBtn" class="pop-text">
			 {{pitchOnName}}
		  </text>
          <view class="pop-up" v-if="isPitchOnShow">
            <view v-for="(item,index) in pitchOn" :key="item.id" @click="pitchClick(item,index)" :class="pitchOnId==item.id?'pitch-on':''">{{item.name}}</view>
			
          </view>
           
      </view>
	  
     </view>
     <!-- 需要循环的地方 -->
     <view class="forindustry" v-for="item in industryList" :key="item.IndustrialManagementId" >
       <!-- 火锅底料这个位置 -->
       <view class="industry-box industry-content" >
         <view class="industry-box-left">
           <image src="@/static/img/top_ico.png" v-if="item.IsTop" @click="isOverhead(item.IndustrialManagementId)"></image>
           <image src="@/static/img/top_no_ico.png" v-else  @click="isOverhead(item.IndustrialManagementId)"></image>
         </view>
         <view class="industry-box-right" @click="goIndustryReport(item.IndustrialManagementId)">
			 <view class="ndustry-box-read"> 
					<text>{{item.IndustryName}}</text>
					<text v-if="item.IsRed" class="read"></text>
			 </view>
           <view class="ndustry-box-arrow">
           	<text class="ndustry-box-text">{{item.UpdateTime}}更新</text>
           	<u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
           </view>
         </view>
       </view>
        <view class="content-box" v-if="item.IndustrialSubjectList.length>6">
         <!-- <view class="img-box">
            <image src="@/static/img/fenxi_ico.png"></image>
            <text> 分析师:&nbsp; {{item.Analyst}}</text>
          </view>
          <view class="img-box">
              <image src="@/static/img/fugai_ico.png"></image>
            <text>覆盖标的</text>
          </view>
        -->
            <u-read-more :toggle="true" :show-height="item.IndustrialSubjectList.length>6 ? 140 :150" :shadow-style="shadowStyle" close-text="展开" color="#D1D1D1">
                 <view class="read-more">
                 <view v-for="val in item.IndustrialSubjectList" :key="val.IndustrialSubjectId"  @click="goIndustryReport(item.IndustrialManagementId)" class="text-box">{{val.SubjectName}}</view>
                 </view>
            </u-read-more>
        </view>
		<view class="content-box" v-else   @click="goIndustryReport(item.IndustrialManagementId)" >
		         <view class="read-more">
		         <view v-for="val in item.IndustrialSubjectList" :key="val.IndustrialSubjectId" class="text-box">{{val.SubjectName}}</view>
		         </view>
		</view>
     </view>
	  <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="totalPage>1"/> 
   </view>
    <!-- <text class="text-bottom-none">没有更多了</text> -->
   </view>
  
   <u-mask :show="isPitchOnShow" @click="isPitchOnShow = false" :z-index="8" :custom-style="{background: 'rgba(0, 0, 0, 0)'}"></u-mask>
  </view>
</template>

<script>
  import strategy from "./components/strategy.vue"
  import { Throttle } from '@/config/util.js' 
  import { Reports } from '@/config/api.js' 
  export default {
   components:{strategy},
    data(){
      return {
		tabAct_id:null,
        tabAct_idTwo:null,
        tabBars: [],
		pageNumFather:null,
        shadowStyle: {	backgroundImage: "none"},
        tabBarsTow:[],
        pitchOn:[{  name:'按最近更新排序',  id:'NewTime' }, {  name:'按推荐关注排序', id:'Recommend',}],
		pitchOnId:'NewTime',
		pitchOnName:'按最近更新排序',
        isPitchOnShow:false,  
        isNum:1,
		strategyIndex:null,
		strategyIndexTwo:0,
		isSwitchover:1,
		tradeList:[],
		OrderColumn:'',
		industryList:[],
		loadText: {
			loadmore: '上拉加载更多',
			loading: '加载中',
			nomore: '已经到底了'
		},
		refresh: false,//正在下拉
		page_no:1,
		pageSize:10,
		status:'loadmore',
		haveData:true,
		 totalPage:'',
		 matchTypeName:'',
      }
    },
     onLoad() {
	this.getClassify()	
	},
	computed:{
	},
    watch:{
      //监听tabs的变化
        tabAct_id: {
        			handler() {
						if(this.strategyIndex==4) {
							this.getstrategyAll()
						}
						if(this.tabAct_id) {
							this.OrderColumn='NewTime'
							this.pitchOnId='NewTime'
							this.pitchOnName='按最近更新排序'
							this.page_no = 1;
							this.refresh = true;
							this.getIndustryList()
							this.getTradeList()
						}	
        			},
        			immediate:true
        		}
      },
    methods:{
	 //获取一级事件
	 getClassify(){
			Reports.getClassify().then(res=>{
				this.tabBars=res.Data.List
				this.tabAct_id=res.Data.List[0].ChartPermissionId			
			})
		},
	 //获取二级事件
	 getstrategyAll(){
			Reports.getstrategyAll().then(res=>{
				this.tabBarsTow=res.Data.List
				this.tabAct_idTwo=res.Data.List[0].CategoryId
				this.matchTypeName=res.Data.List[0].MatchTypeName
			})
		},
     //tabs切换事件
     toggleTab (item,index) {
		  this.strategyIndex=index
		  // console.log( this.strategyIndex)
		  this.isPitchOnShow=false
      		if(this.tabAct_id !== item.ChartPermissionId) {
      			this.tabAct_id = item.ChartPermissionId;
      			this.pageNum = 1;
      			uni.pageScrollTo({
      			   scrollTop: 0,
      			   duration: 0,
      			});
      		}
      	},
	 //tabs切换二级事件
     toggleTabTwo (item,index) { 
		 this.matchTypeName=item.MatchTypeName
			this.strategyIndexTwo=index
      		if(this.tabAct_idTwo !== item.CategoryId) {
      			this.tabAct_idTwo = item.CategoryId;
      			this.pageNum = 1;
      			uni.pageScrollTo({
      			   scrollTop: 0,
      			   duration: 0,
      			});
      		}
      	},
     //产业报告筛选条件
      isPitchOnShowBtn(){
        this.isPitchOnShow=!this.isPitchOnShow
      },
	  //点击产业报告的筛选条件
      pitchClick(item) {
		  this.pitchOnName=item.name
		  this.OrderColumn=item.id
		  if(this.pitchOnId !== item.id) {
		  	this.pitchOnId = item.id;}
			this.page_no = 1;
			this.refresh = true;
			this.getIndustryList()
		  uni.pageScrollTo({
		  scrollTop: 0,
		  duration: 300
		  });
		this.isPitchOnShow=false
      },
	  //获取报告所有品种接口
	  getTradeList(){
		  Reports.getTradeList({
			  ChartPermissionId:this.tabAct_id
		  }).then(res=>{
			  if(res.Ret==200){
				  if(res.Data.List){
					  this.tradeList=res.Data.List
				  }else{
					   this.tradeList=null
				  }   
			  }
		  })
	  },
	  //获取产业报告所有品种接口
	  getIndustryList(){
	  		  Reports.getIndustryList({
	  			  ChartPermissionId:this.tabAct_id,
				  OrderColumn: this.OrderColumn,
				  PageSize: this.pageSize,
				  CurrentIndex: this.page_no
	  		  }).then(res=>{	
				 // this.industryList=res.Data.List
				 this.status = this.page_no < res.Data.Paging.Pages ? 'loadmore' : 'nomore';
				 this.totalPage = res.Data.Paging.Pages;//总页数
				 if(this.page_no === 1) {
				 	this.industryList = res.Data.List || [];
				 	this.haveData = this.industryList.length ? true : false
				 	if(this.refresh) {
				 		uni.stopPullDownRefresh();
				 		this.refresh = false;
				 	} 
				 }else {
				 	this.industryList = this.industryList.concat(res.Data.List)
				 }
				  
	  		  })
	  },
      //跳转季度策略
      isClickHandle(id){
        uni.navigateTo({
        	url:'/pages/industrialReport/industrialReport?id='+id
        });
      },
      //跳转产业报告
      goIndustryReport(id){
        uni.navigateTo({
        	url:'/pages/IndustryReport/IndustryReport?id='+id
        });
      },
	 
	 //点击顶置的图标
	  isOverhead(id){
		  Reports.postToptt({
			  IndustrialManagementId:id
		  }).then(res=>{   
			  if(res.Ret===200){
				  this.page_no = 1;
				  this.refresh = true;
				  this.industryList=[]
				   this.getIndustryList()
				   uni.showToast({
				       title: res.Msg,
				       duration: 2000
				   });
			  } 
		  })
	  },
	  hideIsred(is){
		  this.tabBarsTow[this.strategyIndexTwo].IsRed=is
	  }
    },
	   /* 触底 */
   	onReachBottom: Throttle(function() {
       this.isNum++
	   if(this.status === 'nomore') return ;
	   this.status = 'loading';
	   this.page_no++;
	   this.getIndustryList()
   	}),
	/* 下拉刷新 */
	onPullDownRefresh: Throttle(function() {
	if(this.strategyIndex==4) {
		this.pageNumFather=1
	}else {
		this.industryList=[]
		this.pageNumFather=null
		this.page_no = 1;
		this.refresh = true;
		this.getIndustryList()
		this.getTradeList()
	}
	 wx.stopPullDownRefresh();
	}),
	onShow() {
		if(this.tabAct_id) {
			this.getTradeList()
		}
		
	},
	
  }
</script>

<style lang="scss" >
  .reportForm-container {
       background-color: #f6f6f6;
	   height: 100vh;
	   .top-box {
		   position: fixed;
		   height: 100rpx;
		   width: 100%;
		   z-index: 99;
		   background-color: #fff;
		   top: 0;
		   left: 0;
    .top-tab-cont{
      height: 60rpx;
      padding-bottom: 40rpx;
       position: relative;
	   background-color: #FFF;
       .lucency{
         position: absolute;
         top: 0;
         right: 0;
         width: 32px;
         height: 30px;
         opacity:0.9;
         background-color: #fff;
       }
   .tab-cont {
     margin-top: 20rpx;
     padding: retu;
   		padding: 0 26rpx;
   		background-color: #fff;
   		font-size: 32rpx;
   		.scroll-tab {
   			width: 100%;
   			white-space: nowrap;
   		}
   		.scroll-tab-item {
   			text-align: center;
   			display: inline-block;
   			padding: 0 8rpx 30rpx 8rpx;
   			margin-right: 70rpx;
   			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;
   			}
   		}
   	}
  }
  }
  .forindustry {
	  margin-bottom: 10rpx;
  }
  .industrial_eport_one {
	 padding-top: 80rpx;
	 background-color:  #f6f6f6;
	 padding-bottom: 10rpx;
  }
  .strategy {
    margin-top: 20rpx;
    height: 65rpx;
    line-height: 65rpx;
    background-color: #fff;
    .row {
      width: 100%;
      height: 170rpx;
      background-color: #f6f6f6;
    }
    .tab-cont-two {
		position: fixed;
		top: 100rpx;
		left: 0;
		width: 100%;
		z-index: 99;
		height: 100rpx;
		background-color: #fff;
       padding: 0 30rpx;
      .scroll-tab-tow {
		padding-top: 20rpx;
        width: 100%;
        white-space: nowrap;
        .scroll-tab-item {
          position: relative;
          display: inline-block;
          height: 54rpx;
          line-height: 54rpx;
          padding: 0 23rpx;
          background: #F7F7F7;
          border-radius: 27px;
          color: #999999;
          margin-right: 46rpx;
          .reg-text {
            position: absolute;
            top: -6rpx;
            right: -8rpx;
            width: 14rpx;
            height: 14rpx;
            background-color: #FF0000;
            border-radius: 50%;
          }
        }
        .active {
          color: #FFFFFF !important;
          background-color: #2C83FF!important;
        }
      }
    }
  }
  .industry {
    margin-top: 20rpx;
	// .industry-box-sticky{
	// 	position: sticky;
	// 	border: 2rpx solid #ccc;
	// 	top:98rpx;
	// 	z-index:999;
	// 	width: 100%;
	// 	height: 12rpx;
	// 	// background-color: #fff;;
	// }
	.industry-sticky{
		// border-bottom: 2rpx solid #f6f6f6;
		position: sticky;
		top:98rpx;
		z-index:99;
	}
    .industry-top {
      display: flex;
      justify-content: space-between;
      background-color: #fff;
      width: 100%;
      height: 90rpx;
      padding: 0 30rpx;
      color: #333333;
      font-weight: 700;
      font-size: 32rpx;
      line-height:90rpx ;
	  .equilateral-triangle {
	  	 position: relative;
	  	 bottom:-78rpx;
		 right:-300rpx;
		 padding: 0;
	  	 width: 0;
	  	 height: 0;
	  	 border-left: 18rpx solid transparent;
	  	 border-right: 18rpx solid transparent;
	  	 border-bottom: 20rpx solid #434343;
	  }
      .pop-box {
        position: relative;
		width: 280rpx;
		text-align: right;
		.pop-up view:nth-child(2) {
			border: none !important;
		}
		.pop-text {
			font-size: 28rpx;
			color: #2C83FF;
		}
        .pop-up {
          position: absolute;
          left: -30rpx;
          bottom: -210rpx;
          width: 317rpx;
		  text-align: center;
		  overflow: hidden;
          font-size: 24rpx;
          background-color: #434343;
		  border-radius: 10rpx;
          z-index: 9;
		 
		  .pitch-on {
			  color: #2C83FF !important;
		  }
          view {
            padding: 0;
			height: 105rpx;
			width: 258rpx;
			font-size: 28rpx;
			margin-left: 30rpx;
            line-height: 104rpx;
            border-bottom: 2rpx solid #f6f6f6;
            text-align: center;
			color: #FFFFFF;
          }  
		
        }
      }
      .img-top-box {
        padding-left: 5rpx;
		
      }
      image {
        width: 44rpx;
        height: 44rpx;
        vertical-align:middle;
		margin-top: -6rpx;
      }
      text {
        display: inline-block;
        padding-left: 16rpx;
        vertical-align:middle;
      }
    }
    .industry-box{
      margin-top: 5rpx;
      background-color: #fff;
      height: 90rpx;
      line-height: 90rpx;
      padding: 0 30rpx;
      display:flex;
      justify-content: space-between; 
      color: #000000;
      font-size: 30rpx;
      .box-left {
        position: relative;
        // width: 150rpx;
		padding-right: 30rpx;
        height: 90rpx;
         text {
           position: absolute;
           top: 20rpx;
           right: 5rpx;
           width: 14rpx;
           height: 14rpx;
           background-color: #f00;
           border-radius: 50%;
         }
         
      }
      .box-right { 
        color: #999999;
        font-size: 26rpx;
		// width: 45%;
        display: flex;
		justify-content: flex-end;
        // justify-content: space-between;
		text-align: right;
		align-items: right;
        u-icon {
          padding-left:15rpx;
        }
      }
    }
    .industry-content {
      padding-left: 40rpx;
      vertical-align:middle;
	  display: flex;
      margin-bottom: 3rpx;
      image {
      padding-right: 20rpx;
        width: 24rpx;
        height: 30rpx;
      }
      .industry-box-left {
		  width: 48rpx;
		image {
			vertical-align: middle;
			 margin-top: -8rpx; 
			 padding:5rpx 20rpx 5rpx 0;
		}
      }
	  .industry-box-right {
		  width: 100%;
		  display: flex;
		  justify-content: space-between;
		  .ndustry-box-read {
			  position: relative;
			  .read {
				  position: absolute;
				  top: 20rpx;
				  right: -20rpx;
				  width: 14rpx;
				  height: 14rpx;
				  background-color: #FF0000;
				  border-radius: 50%;
			  }
		  }
		  .ndustry-box-arrow {
			  display: flex;
			  .ndustry-box-text {
				  font-size: 26rpx;
				  color: #999999;
				  padding-right: 20rpx;
			  }
		  }
	  }
    
  }
  .content-box {
    background-color: #fff;
    padding: 20rpx 25rpx 0;
      .img-box {
         display: flex;
        height: 90rpx;
        line-height: 90rpx;
       box-sizing: border-box;
        width: 100%;
        vertical-align:middle !important;
        image {
          padding-top: 18rpx;
         width: 44rpx;
         height: 44rpx;
         vertical-align:middle;
        }
        text {
          display: inline-block;
          padding-left: 16rpx;
           vertical-align:middle !important;
        }
      }
    }
  }
  .read-more {
   margin-left:60rpx;
   display: flex;
   flex-wrap: wrap;
   .text-box {
     // display: inline-block;
     margin-bottom: 27rpx;
     margin-right:40rpx;
     padding: 0;
     font-size: 24rpx;
     color: #408FFF;
     width: 170rpx;
     height: 46rpx;
     line-height: 46rpx;
     text-align: center !important;
     background:url(../../static/img/report_bg.png) no-repeat;
     background-size: 100% 100%;
     text-indent:0em;
   }
  }
  
  }
  .text-bottom-none {
	  width: 100%;
  	  text-align: center;
  }
</style>