college/pages/pc/groupingList.vue

<template>
	<view class="content">
		<pcNav></pcNav>
		<view style="height: 72px;"></view>
	    <view class="top">
	    	<view class="topline" @click="goIndex">首页</view>
	    	<view class="topjt">></view>
	    	<view class="topline">{{topName}}</view>
	    	<view class="topjt">></view>
	    	<view class="topline">{{name}}</view>
	    </view>
		
		<view class="gotop" @click="gotoTop">
			<image src="../../static/pcimg/btn_top@2x.png" mode="" class="gotopImg"></image>
		</view>
		<view class="top">
			<view class="topName">{{name}}</view>
			<view class="comment">{{title}}</view>
		</view>
		<view class="main">
			
			<view class="cont2">
				<view class="contf" v-if="qhIndex==2">
					<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>
				</view>
				<view class="contL" v-if="qhIndex==1">
					<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="wzTitle">{{wz.Name}}</view>
							<view class="wzComment">{{wz.Comment}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="nodata" v-show="list.length==0">
				<image src="../../static/pcimg/pic_empty_search@2x.png" mode="" class="nodataImg"></image>
				<view class="nodataTitle">暂无数据</view>
			</view>
			
		</view>
		
		<!-- -->
		<view class="pageView" v-show="TotalSize>0">
			<page-pagination :pageSize="pageSize" :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:'',
			}
		},
		onLoad(opt) {
           this.name=opt.name;
		   this.title=opt.title;
		   this.parentCode=opt.parentCode;
		   this.topName=opt.topName;
		   this.getgroupPageData()
		},
		methods: {
			goIndex(){
				uni.navigateTo({
					url:'index'
				}) 
			},
			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.parentCode,
					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;
	 }
	 .htmlBox{
	 	width: 720px;
	 	margin: 0 auto;
	 }
	 .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:15vh ;
		bottom: 100px;
		cursor: pointer;
	}
	.topName{
		text-align: center;
		font-size: 24px;
		font-weight: 500;
		color: #3C3C3C;
		line-height: 33px;
		padding-top: 30px;
	}
	.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;
	}
	.activeTab{
		color: #FF4F00;
	}
	.mainwzImg{
		width: 276px;
		height: 184px;
	}
	.mainwzImgBox{
		border-radius: 15px;
	    overflow: hidden;
	}
	.contf{
		display: flex;
		flex-wrap: wrap;
	}
	.mainwzline{
		width: 276px;
		height: 260px;
		background: #FFFFFF;
		margin-right: 32px;	
		padding-top: 33px;
		cursor: pointer;
	}
	.mainwzlineR{
	  margin-right: 0px;	
	}
	.wztitle{
		width: 250px;
		font-size: 16px;
		color: #333333;
		line-height: 22px;
		height: 44px;
		text-overflow: -o-ellipsis-lastline;
		 overflow: hidden;
		 text-overflow: ellipsis;
		 display: -webkit-box;
		 -webkit-line-clamp: 2;
		 line-clamp: 2;
		 -webkit-box-orient: vertical;
		 padding-top: 16px;
		 padding:0 13px ;
	}
	.wzLeftIMg{
		width: 200px;
		height: 132px;
	}
	.wxLine{
		display: flex;
		padding-top: 30px;
		cursor: pointer;
	}
	.wzLineLeft{
		border-radius: 10px;
		overflow: hidden;
		width: 200px;
		height: 132px;
	}
	.wzLineRight{
		padding-left: 16px;
		width: 950px;
	}
	.wzTitle{
		font-size: 16px;
		font-weight: 500;
		color: #3C3C3C;
	}
	.wzComment{
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 17px;
		padding-top: 10px;
		width: 1000px;
	}
	.pageView{
		margin-top: 20px;
		cursor: pointer;
		padding-bottom: 20px;
	}
	.nodataImg{
		width: 300px;
		height: 203px;
	}
	.nodata{
		text-align: center;
	}
	.nodataTitle{
		font-size: 16px;
		padding-top: 16px;
		font-weight: 400;
		color: #999999;
	}
</style>