college/pages/pc/indexNew.vue

<template>
	<view class="content">
		<pcNav :data="indexName" :itemName="topName" @getIndexList="getIndexList" 
		@gosearchlist="gosearchlist"
		@getChildList = "getChildList"></pcNav> 
		
		<view v-show="indexShow">
		<view style="height: 72px;"></view>
		<view class="swiperBox"  v-if="recommendList.length>0">
			<view class="swiperCont">
				<view class="tuijbox">
					<image src="../../static/pcimg/icon_tuijian@2x.png" mode="" class="tuijImg"></image>
					<span class="tuijTitle">推荐文章</span>
				</view>
				 <swiper class="swiper"  :autoplay="false"   :circular="true" :current="swpIndex">
					<swiper-item v-for="(item,index) in recommendList" v-if="(index+1)%2!=0">
						<view class="swpCont">
							<view class="swiper-item" @click="goDetail(item)">
								<view class="swpimgBox swpBr">
									<image :src="item.logoImg" mode="" class="swpimg"></image>
								</view>
								<view class="swpTitleBox">
									<view class="swpTitle">{{item.title}}</view>
									<view class="categoryName" @click.stop="goList(item)">{{item.categoryName.substring(0,5)}}</view>
								</view>
								
							</view>
							<view class="swiper-item" v-if="(index+1)<recommendList.length" @click="goDetail(recommendList[index+1])">
								<view class="swpimgBox swpBr">
								   <image :src="recommendList[index+1].logoImg" mode="" class="swpimg"></image>
								</view>
								<view class="swpTitleBox">
									<view class="swpTitle">{{recommendList[index+1].title}}</view>
									<view class="categoryName">{{recommendList[index+1].categoryName.substring(0,5)}}</view>
								</view>
							</view>
						</view>
						
					</swiper-item>
					
				</swiper>
				<image src="../../static/pcimg/icon_arrow_zuo_sel@2x.png" mode="" class="swpImgleft" @click="swpBtnLeft"></image>
				<image src="../../static/pcimg/legtspx.png" mode="" class="swpImgright" @click="swpBtnRight"></image>
			</view>
		</view>
		
		<view class="main">
			<view class="mainCont">
				<view class="mainline" :class="{'mainline1':index==0}" v-for="(item,index) in indexData.categoryList" v-if="item.children.length>0">
					<view class="mainlineTop">
						<view class="mainlineTopleft">
							<view class="mainlineTitle">{{item.name}}</view>
							<view class="mainlinecount">共{{item.count}}篇文章</view>
						</view>
						<view class="mainlineMore" @click="mainMore(item)">查看更多
						  <image src="../../static/pcimg/icon_list_arrow_def@2x.png" mode="" class="linegdImg1"></image>
						  <image src="../../static/pcimg/icon_list_arrow_sel@2x.png" mode="" class="linegdImg2"></image>
						</view>
					</view>
					<view class="mainwzbox" v-if="item.children.length>0">
						<view class="mainwzline" v-for="(wz,wzindex) in item.children" @click="goDetail2(wz,item)" v-if="wzindex<4" :class="{'mainwzlineR':wzindex!=3}">
							<view class="mainwzImgBox">
							  <img :src="wz.logoImg" alt="" class="mainwzImg">	
							</view>
							<view class="wztitle">{{wz.title}}</view>
							<view class="wztime">2022-3-30</view>
						</view>
						
					</view>
					
					
				</view>
				
				
			</view>
			
		</view>
		
		</view>
		<!-- 列表页 -->
		<view v-show="listShow">
			<view style="height: 72px;"></view>
			<view class="top">
				<view class="topName">{{topName}}</view>
				<view class="comment " v-if="comment">{{comment}}</view>
			</view>
			<view class="main">
				<view class="dynamicCol">
					<view class="dynamicColLeft">
						<view class="dynamicColLIne" :class="{'activeTab':tabIndex==index}" v-for="(item,index) in dynamicCol" @click="tabBtn(index,item)">{{item.name}}</view>
					</view>
					<view class="dynamicColRight">
						<image src="../../static/pcimg/icon_kapian_def@2x.png" v-show="qhIndex==2" class="qhImg" @click="qhIndex=1"></image>
						<image src="../../static/pcimg/icon_kapian_sel@2x.png" v-show="qhIndex==2" class="qhImg"></image>
					    <image src="../../static/pcimg/icon_liebiao_sel@2x.png" v-show="qhIndex==1" class="qhImg" ></image>
					    <image src="../../static/pcimg/qh2.png" v-show="qhIndex==1" class="qhImg" @click="qhIndex=2"></image>
					</view>
				</view>
				<view class="cont2">
					<view class="contBox">
						<view class="contf" v-if="qhIndex==2&&list.length>0">
							<view class="mainwzline" v-for="(wz,wzindex) in list"  :class="{'mainwzlineR2':(wzindex+1)%4==0&&wzindex!=0}" @click="goDetail3(wz)">
								<view class="mainwzImgBox">
								  <img :src="wz.LogoImg" alt="" class="mainwzImg">	
								</view>
								<view class="wztitle">{{wz.Title}}</view>
								<view class="wztime">2022-3-30</view>
							</view>
						</view>
						<view class="contL" v-if="qhIndex==1&&list.length>0">
							<view class="wxLine" v-for="(wz,wzindex) in list" @click="goDetail3(wz)">
								<view class="wzLineLeft">
									<image :src="wz.LogoImg" class="wzLeftIMg"></image>
								</view>
								<view class="wzLineRight">
									<view class="wzTitle2">{{wz.Title}}</view>
									<view class="wzComment">{{wz.Comment}}</view>
								</view>
							</view>
						</view>
						<view class="nodata" v-show="list.length==0">
							<image src="../../static/pcimg/listnodata.png" mode="" class="nodataImg"></image>
							<view class="nodataTitle">暂无数据</view>
						</view>
					</view>
				
					
				</view>
				
			</view>
			
			<!-- -->
			<view class="pageView" v-show="TotalSize">
				<page-pagination :pageSize="pageSize" :size="'small'" :total="TotalSize" :numAround="true" @change="pageChange"></page-pagination>
			</view>
			
		</view>
		<view class="gotop" @click="gotoTop">
			<image src="../../static/pcimg/btn_top@2x.png" mode="" class="gotopImg"></image>
		</view>
		<view>
			<newDetail v-show="newDetailShow" :newid='newDetailID' :data="newDetailItem" @getIndexList="getIndexList"></newDetail>
			<newgroupingList @getIndexList="getIndexList"
			 @getChildList="getChildList" @goDetail="goDetail"
			 v-show="newgroupingListShow" :newcode="newgroupingcode" :data="newgroupingdata"></newgroupingList>
		
		    <newsearchlist v-show="newsearchShow" @goDetail="goDetail" @goDetail4="goDetail4"></newsearchlist>
		</view>
	</view>
</template>

<script>
	import pcNav from '../../components/pcNav/pcNav.vue'
	import newDetail from './newDetail.vue'
	import newgroupingList from './newgroupingList.vue'
	import newsearchlist from './newsearchlist.vue'
	export default {
		components: {
			pcNav,newDetail,newgroupingList,newsearchlist
		},
		data() {
			return {
				title: 'Hello',
				allCategory:[],
				navMoret:false,
				swpIndex:0,
				indexData:'',
				recommendList:[],
				list:[],
				comment:'',
				topName:'',
				parentCode:'',
				topCode:'',
				page:1,
				dynamicCol:[],
				qhIndex:1,
				tabIndex:0,
				TotalSize:0,
				pageSize:20,
				indexShow:true,
				listShow:false,
				indexName:'index',
				newDetailShow:false,
				newgroupingListShow:false,
				newsearchShow:false,
				newDetailID:'',
				newDetailItem:'',
				newgroupingcode:'',
				newgroupingdata:'',
			}
		},
		onLoad() {
          
		   this.getindexData()
		},
		created(){
			//this.getindexData()
		},
		methods: {
			getIndexList(){
				this.indexShow=true;
				this.listShow=false;
				this.newDetailShow=false;
				this.newgroupingListShow=false;
				this.newsearchShow=false;
				this.indexName='index';
				this.topName=''
			},
			gosearchlist(){
				this.indexShow=false;
				this.listShow=false;
				this.newDetailShow=false;
				this.newgroupingListShow=false;
				this.newsearchShow=true;
				this.indexName='';
				this.topName=''
			},
			getChildList(item){
					console.log(item);
					this.indexName=''
					this.topName=item.name;
					this.comment=item.comment;
					this.topCode=item.code;
					this.parentCode=item.code;
					this.getcategoryPageData();
					uni.setNavigationBarTitle({
					    title: this.topName
					});
					this.indexShow=false;
					this.listShow=true;
					this.newDetailShow=false;
					this.newgroupingListShow=false;
					this.newsearchShow=false;
			},
			goList(item){
				console.log(item)
				this.getChildList(item)
				uni.pageScrollTo({
				　　　scrollTop: 0, duration: 100 
				}); 
				/* uni.navigateTo({
					url:'list?code='+item.code+'&topName='+item.categoryName//+'&comment='+item.comment
				}) */
			},
			goDetail(item){
				console.log(item)
				this.indexShow=false;
				this.listShow=false;
				this.newDetailShow=true;
				this.newgroupingListShow=false;
				this.newsearchShow=false;
				this.newDetailID=item.id;
				this.newDetailItem=item;
				/* uni.navigateTo({
					url:'detail?id='+item.id+'&topName='+item.categoryName+"&comment="+item.comment+'&parentCode='+item.code
				}) */
			},
			goDetail2(wz,item){
				/* console.log(item)
				console.log(wz) */
				if (wz.type == 1) {
					this.newgroupingcode=wz.code;
					var newgroupingdata={
						parentCode:item.code,
						name:wz.name,
						title:wz.title,
						topName:item.name,
						comment:item.comment
					}
					console.log(newgroupingdata)
					this.indexShow=false;
					this.listShow=false;
					this.newDetailShow=false;
					this.newgroupingListShow=true;
					this.newsearchShow=false;
					this.newgroupingdata=newgroupingdata
				}else{
					this.indexShow=false;
					this.listShow=false;
					this.newDetailShow=true;
					this.newgroupingListShow=false;
					this.newsearchShow=false;
					this.newDetailID=wz.id;
					this.newDetailItem=item;
				}
				
				 /* uni.navigateTo({
					url:'detail?id='+wz.id+'&topName='+item.name+"&comment="+item.comment+'&parentCode='+item.code
				}) */
			},
			goDetail3(wz){
				// 1分类2文章
				if (wz.Type == 1) {
					/* uni.navigateTo({
						url:'groupingList?parentCode='+this.topCode+'&code='+wz.Code+'&name='+wz.Name+'&title='+wz.Title+'&topName='+this.topName+"&comment="+this.comment
					}) */
					this.newgroupingcode=wz.Code;
					var newgroupingdata={
						parentCode:this.topCode,
						name:wz.Name,
						title:wz.Title,
						topName:this.topName,
						comment:this.comment
					}
					console.log(newgroupingdata)
					this.indexShow=false;
					this.listShow=false;
					this.newDetailShow=false;
					this.newgroupingListShow=true;
					this.newsearchShow=false;
					this.newgroupingdata=newgroupingdata
				}else{
					this.indexShow=false;
					this.listShow=false;
					this.newDetailShow=true;
					this.newgroupingListShow=false;
					this.newsearchShow=false;
					this.newDetailID=wz.ID;
					var item={
						categoryName:this.topName,
						twoName:this.dynamicCol[this.tabIndex].name,
						comment:this.comment,
						code:wz.Code
					}
					this.newDetailItem=item;
					/* uni.navigateTo({
						url:'detail?id='+wz.ID+'&topName='+this.topName+'&twoName='+this.dynamicCol[this.tabIndex].name+"&comment="+this.comment+'&parentCode='+wz.Code
					}) */
				}
				//console.log(wz)
			},
			goDetail4(item){
				this.newgroupingcode=item.Code;
				var newgroupingdata={
					parentCode:item.parentCode,
					name:item.Name,
					title:item.Title,
					topName:item.topName,
					comment:''
				}
				console.log(newgroupingdata)
				this.indexShow=false;
				this.listShow=false;
				this.newDetailShow=false;
				this.newgroupingListShow=true;
				this.newsearchShow=false;
				this.newgroupingdata=newgroupingdata
			},
			gotoTop(){
				uni.pageScrollTo({ 
				　　　scrollTop: 0, duration: 300 
				}); 
			},
			
			swpBtnRight(){
				var length=this.recommendList.length
				var num=Math.ceil(length/2)
				if(this.swpIndex<num){
					this.swpIndex++
				}
				
			},
			swpBtnLeft(){
				if(this.swpIndex==0){
					
				}else{
					this.swpIndex--
				}
				
			},
           
			getindexData(){
				uni.showLoading({
					title: '加载中'
				})
				this.$http('/trainingOpenApi/indexData', {}, 'GET').then(res => {
					uni.hideLoading();
					this.indexData = res.data;
					this.recommendList=this.indexData.recommendList
				})
			},
			mainMore(item){
				console.log(item)
				this.getChildList(item)
				/* uni.navigateTo({
					url:'list?code='+item.code+'&topName='+item.name+'&comment='+item.comment
				}) */
			},
			
				
				gotoTop(){
					uni.pageScrollTo({ 
					　　　scrollTop: 0, duration: 300 
					}); 
				},
				tabBtn(index,item){
					this.tabIndex=index;
					//console.log(item)
					this.parentCode=item.code;
					this.getcategoryPageData()
				},
				pageChange(e){
					console.log(e)
					this.page=e;
					this.getcategoryPageData()
					
				},
				getcategoryPageData(){
					var params={
						parentCode:this.parentCode,
						topCode:this.topCode,
						limit:this.pageSize,
						page:this.page,
					}
					uni.showLoading({
						title: '加载中'
					})
					this.$http('/trainingOpenApi/categoryPageData', params, 'GET').then(res => {
						uni.hideLoading();
						this.list=res.data.Items;
						this.TotalSize=res.data.TotalSize;
						var arr=[
							{
								'name':'全部','code':'',
							}	
						]
						this.dynamicCol=arr.concat(res.data.dynamicCol);
						
					})
				}
			}
		
	}
</script>

<style scoped>
	.content{
		background: #F4F5F7;
		min-height: 100vh;
		font-family: PingFangSC-Regular, PingFang SC;
	}
	.swiperBox{
		/* height: 280px; */
		/* background: #F3F8FF; */
		width: 100%;
	}
	.swiperCont{
		width: 1236px;
		margin: 0 auto;
		position: relative;
	}
	.tuijImg{
		width: 24px;height: 24px;
		
	}
	.tuijbox{
		display: flex;padding-top: 32px;padding-bottom: 20px;
		padding-left: 15px;
	}
	.tuijTitle{
		font-size: 22px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #3C3C3C;
		padding-left: 7px;
		line-height: 24px;
	}
	.swpImgleft{
		width: 44px;
		height: 44px;
		position: absolute;
		top: 145px;
		left: -60px;
		cursor: pointer;
	}
	.swpImgright{
		width: 44px;
		height: 44px;
		position: absolute;
		top: 145px;
		right: -60px;
		cursor: pointer;
	}
	.swiper-item{
		width: 590px;
		height: 163px;
		background: #FFFFFF;
		margin-left: 16px;
		margin-right: 12px;
		border-radius: 6px;
		margin-top: 14px;
		position: relative;
		cursor: pointer;
	}
	.swiper-item:hover{
		box-shadow: 0px 0px 16px 0px rgba(153, 153, 153, 0.25);
	}
	.swpCont{
		display: flex;
		height: 210px;
		justify-content: space-between;
	}
	.swpimg{
		width: 284px;
		height: 160px;
	}
	.swpimgBox{
		width: 284px;
		height: 160px;
		position: absolute;
		left: 0;
		top: -14px;
		
	}
	.swpBr{
		width: 284px;
		height: 160px;
		border-radius: 7px;
		overflow: hidden;
	}
	.swiper{
		height: 190px;
	}
	.swpTitleBox{
		padding-left: 304px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 140px;
		padding-top: 10px;
		
	}
	
	.swpTitle{
		width: 240px;
		height: 44px;
		font-size: 16px;
		color: #3C3C3C;
		line-height: 22px;
		 text-overflow: -o-ellipsis-lastline;
		  overflow: hidden;
		  text-overflow: ellipsis;
		  display: -webkit-box;
		  -webkit-line-clamp: 2;
		  line-clamp: 2;
		  -webkit-box-orient: vertical;
	}
	.swpTitleBox:hover .swpTitle{
		color: #FF4F00;
	}
	.categoryName{
		line-height: 24px;
		width: 84px;
		height: 24px;
		background: rgba(63, 144, 247, 0.1);
		border-radius: 14px;
		font-size: 14px;
		color: #3F90F7;
		text-align: center;
		white-space: nowrap; 
		overflow: hidden; 
		text-overflow: ellipsis; 
	}
	.mainCont{
		width: 1200px;
		margin: 0 auto;
		padding-bottom: 20px;
	}
	.mainline{
		padding-top: 34px;
	}
	.mainlineTop{
		display: flex;
		justify-content: space-between;
	}
	.mainlineTopleft{
		display: flex;
	}
	.mainlineTitle{
		font-size: 22px;
		font-weight: 500;
		color: #3C3C3C;
		line-height: 33px;
		font-family: PingFangSC-Medium, PingFang SC;
	}
	.mainlinecount{
		font-size: 14px;
		font-weight: 400;
		color: #999999;
        line-height: 33px;
		padding-left: 16px;
	}
	.mainlineMore{
		font-size: 14px;
		color: #999999;
	}
	.mainwzbox{
		display: flex;
		padding-top: 20px;
		
	}
	.mainwzImg{
		width: 284px;
		height: 160px;
	}
	.mainwzImgBox{
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
	    overflow: hidden;
		height: 160px;
		border: 1px solid #eeeeee;
	}
	.mainwzline{
		width: 284px;
		height: 244px;
		background: #FFFFFF;
		border-radius: 6px;
	}
	.mainwzlineR{
	  margin-right: 22px;	
	}
	.wztitle{
		width: 256px;
		font-size: 16px;
		color: #333333;
		line-height: 22px;
		height: 22px;
		text-overflow: -o-ellipsis-lastline;
		 overflow: hidden;
		 text-overflow: ellipsis;
		 display: -webkit-box;
		 -webkit-line-clamp: 1;
		 line-clamp: 1;
		 -webkit-box-orient: vertical;
		 padding:0 13px ;
		 padding-top: 16px;
		
		
	}
	.wztime{
		font-size: 14px;
		color: #999999;
		padding-left: 14px;
		padding-top: 10px;
	}
	.mainwzline:hover{
		background: #FFFFFF;
		box-shadow: 0px 0px 16px 0px rgba(153, 153, 153, 0.2);
		border-radius: 6px;
		cursor: pointer;
	}
	.mainwzline:hover .wztitle{
		color: #FF4F00;
	}
	.mainlineMore:hover{
		color: #FF4F00;
		cursor: pointer;
	}
	.gotopImg{
		width: 60px;
		height: 60px;
	}
	.gotop{
		position: fixed;
		right:5vh ;
		bottom: 60px;
		cursor: pointer;
	}
	.linegdImg1{
		width: 6px;
		height: 10px;
		margin-top: 5px;
		margin-left: 4px;
	}
	.linegdImg2{
		width: 6px;
		height: 10px;
		display: none;
		margin-top: 5px;
		margin-left: 4px;
	}
	.mainlineMore{
		display: flex;
	}
	.mainlineMore:hover .linegdImg1{
		display: none;
	}
	.mainlineMore:hover .linegdImg2{
		display: block;
	}
	.mainline1{
		padding-top: 20px;
	}
	.content{
		background: #F4F5F7;
		min-height: 100vh;
		font-family: PingFangSC-Regular, PingFang SC;
	}
	.contBox{
		min-height: 58vh;
	}
	.gotopImg{
		width: 60px;
		height: 60px;
	}
	.gotop{
		position: fixed;
		right:5vh ;
		bottom: 60px;
		cursor: pointer;
	}
	.topName{
		text-align: center;
		font-size: 22px;
		font-weight: 500;
		color: #3C3C3C;
		line-height: 33px;
		padding-top: 30px;
		font-family: PingFangSC-Medium, PingFang SC;
	}
	.comment{
		text-align: center;
		font-size: 14px;
		font-weight: 400;
		color: #999999;
		line-height: 20px;
		width: 500px;
		padding-top: 10px;
		margin: 0 auto;
	}
	.main{
		width: 1200px;
		margin: 0 auto;
		padding-top: 30px;
	}
	.dynamicColLeft{
		display: flex;
	}
	.dynamicColLIne{
		padding-right: 44px;
		font-size: 16px;
		color: #3C3C3C;
		cursor: pointer;
		line-height: 32px;
	}
	.qhImg{
		width: 28px;
		height: 28px;
		margin-left: 8px;
		cursor: pointer;
	}
	.dynamicCol{
		display: flex;
		justify-content: space-between;
		background: #FFFFFF;
		padding:15px 20px;
		border-radius: 8px;
	}
	.activeTab{
		color: #FF4F00;
	}
	.mainwzImg{
		width: 284px;
		height: 160px;
	}
	.mainwzImgBox{
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
	    overflow: hidden;
		height: 160px;
		border: 1px solid #eeeeee;
	}
	.contf{
		display: flex;
		flex-wrap: wrap;
	}
	.mainwzline{
		width: 284px;
		height: 244px;
		background: #FFFFFF;
		margin-right: 21px;	
		margin-top: 20px;
		cursor: pointer;
		border-radius: 6px;
	}
	.wztime{
		font-size: 14px;
		color: #999999;
		padding-left: 14px;
		padding-top: 10px;
	}
	.mainwzline:hover{
		box-shadow: 0px 0px 16px 0px rgba(153, 153, 153, 0.2);
	}
	.mainwzlineR2{
	  margin-right: 0px;	
	}
	.wztitle{
		width: 256px;
		font-size: 16px;
		color: #333333;
		line-height: 22px;
		height: 22px;
		text-overflow: -o-ellipsis-lastline;
		 overflow: hidden;
		 text-overflow: ellipsis;
		 display: -webkit-box;
		 -webkit-line-clamp: 1;
		 line-clamp: 1;
		 -webkit-box-orient: vertical;
		 padding:0 13px ;
		 padding-top: 16px;
		
		  
	}
	.wzLeftIMg{
		width: 200px;
		height: 112px;
	}
	.contL{
		background: #FFFFFF;
		margin-top: 20px;
		border-radius: 8px;
		padding: 0 20px;
		
	}
	.wxLine{
		display: flex;
		padding: 20px 0px;
		cursor: pointer;
		border-bottom: 1px solid #EEEEEE;
	}
	.wzLineLeft{
		border-radius: 6px;
		overflow: hidden;
		width: 200px;
		height: 112px;
	}
	.wzLineRight{
		padding-left: 16px;
		width: 788px;
	}
	.wzTitle2{
		font-size: 16px;
		color: #3C3C3C;
		width: 948px;
		height: 20px;
		line-height: 20px;
		text-overflow: -o-ellipsis-lastline;
		 overflow: hidden;
		 text-overflow: ellipsis;
		 display: -webkit-box;
		 -webkit-line-clamp: 1;
		 line-clamp: 1;
		 -webkit-box-orient: vertical;
	}
	.wzComment{
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 20px;
		padding-top: 10px;
		width: 948px;
		height: 80px;
		text-overflow: -o-ellipsis-lastline;
		 overflow: hidden;
		 text-overflow: ellipsis;
		 display: -webkit-box;
		 -webkit-line-clamp: 4;
		 line-clamp: 4;
		 -webkit-box-orient: vertical;
	}
	.pageView{
		margin-top: 20px;
		cursor: pointer;
		padding-bottom: 20px;
	}
	.nodataImg{
		width: 300px;
		height: 203px;
	}
	.nodata{
		text-align: center;
		padding-top: 100px;
	}
	.nodataTitle{
		font-size: 16px;
		padding-top: 16px;
		font-weight: 400;
		color: #999999;
	}
</style>