college/pages/pc/groupingList.vue

<template>
	<view class="content">
		<pcNav :itemName="topName"></pcNav>
		<view style="height: 72px;"></view>
	    <view class="top">
	    	<view class="topline" @click="goIndex">首页</view>
	    	<view class="topjt">></view>
	    	<view class="topline" @click="goList">{{topName}}</view>
	    	<view class="topjt" v-if="name">></view>
	    	<view class="topline" :class="{'c999':name}">{{name}}</view>
	    </view>
		
		<view class="gotop" @click="gotoTop">
			<image src="../../static/pcimg/btn_top@2x.png" mode="" class="gotopImg"></image>
		</view>
		<view class="">
			<view class="topName">{{name}}</view>
			<view class="comment "  v-if="title">{{title}}</view>
		</view>
		<view class="main">
			<view class="dynamicCol">
				<view class="dynamicColLeft">
					
				</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="{'mainwzlineR':(wzindex+1)%4==0&&wzindex!=0}" @click="goDetail(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="goDetail(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>0">
			<page-pagination :pageSize="pageSize" :size="'small'" :total="TotalSize" :numAround="true" @change="pageChange"></page-pagination>
		</view>
		<!-- <view>
			<a class="table-btn" href="http://phone.66km.cn:8088/marketing/training/940C4BF0A2E04542A1A1AD244EAFB6E2.xlsx" target='_blank'>下载入口</a>
		</view> -->
		
		
		
	</view>
</template>

<script>
	import pcNav from '../../components/pcNav/pcNav.vue'
	export default {
		components: {
			pcNav,
		},
		data() {
			return {
				list:[],
				title:'',
				name:'',
				parentCode:'',
				topCode:'',
				page:1,
				dynamicCol:[],
				qhIndex:1,
				tabIndex:0,
				TotalSize:0,
				pageSize:20,
				topName:'',
				comment:'',
				code:'',
			}
		},
		onLoad(opt) {
           this.name=opt.name;
		   this.title=opt.title;
		   this.parentCode=opt.parentCode;
		   this.code=opt.code;
		   this.topName=opt.topName;
		   this.comment=opt.comment;
		   this.getgroupPageData()
		   uni.setNavigationBarTitle({
		       title: this.name
		   });
		},
		methods: {
			goIndex(){
				uni.navigateTo({
					url:'index'
				}) 
			},
			goList(){
				uni.navigateTo({
					url:'list?code='+this.parentCode+'&topName='+this.topName+'&comment='+this.comment
				})
			},
			goDetail(wz){
				// 1分类2文章
				if (wz.Type == 1) {
					
				}else{
					uni.navigateTo({
						url:'detail?id='+wz.ID+'&topName='+this.topName+'&twoName='+this.dynamicCol[this.tabIndex].name
					})
				}
				//console.log(wz)
			},
			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()
				
			},
			getgroupPageData(){
				var params={
					parentCode:this.code,
					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>
	 .top{
	 	width: 1200px;
	 	margin: 0 auto;
	 	display: flex;
	 	padding: 30px 0;
	 	font-size: 14px;
	 }
	 .content{
	 	background: #F4F5F7;
	 	min-height: 100vh;
		font-family: PingFangSC-Regular, PingFang SC;
	 }
	 .htmlBox{
	 	width: 720px;
	 	margin: 0 auto;
	 }
	 .contBox{
	 	min-height: 58vh;
	 }
	 .topline{
	 	padding-right: 10px;
	 	cursor: pointer;
	 	color: #3C3C3C;
	 	
	 }
	 .topjt{
	 	color: #AAAAAA;
	 	padding-right: 10px;
	 }
	*{
		padding: 0;
		margin: 0;
	}
	.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;
		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;
	}
	.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;
	}
	.mainwzlineR{
	  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;
	}
	.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;
	}
	.wzLeftIMg{
		width: 200px;
		height: 132px;
	}
	.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: 132px;
	}
	.wzLineRight{
		padding-left: 16px;
		width: 788px;
	}
	.wzTitle{
		font-size: 16px;
		color: #3C3C3C;
	}
	.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;
	}
	.pageView{
		margin-top: 20px;
		cursor: pointer;
		padding-bottom: 20px;
	}
	.nodataImg{
		width: 300px;
		height: 203px;
		padding-top: 100px;
	}
	.nodata{
		text-align: center;
	}
	.nodataTitle{
		font-size: 16px;
		padding-top: 16px;
		font-weight: 400;
		color: #999999;
	}
	.c999{
		color: #999999;
	}
</style>