college/pages/pc/list.vue

<template>
	<view class="content">
		<pcNav></pcNav>
		<view style="height: 72px;"></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">{{topName}}</view>
			<view class="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="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>
		
		<!-- -->
		<view class="pageView">
			<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:[],
				comment:'',
				topName:'',
				parentCode:'',
				topCode:'',
				page:1,
				dynamicCol:[],
				qhIndex:1,
				tabIndex:0,
				TotalSize:0,
				pageSize:20,
			}
		},
		onLoad(opt) {
           this.topName=opt.topName;
		   this.comment=opt.comment;
		   this.topCode=opt.code;
		   this.parentCode='';
		   this.getcategoryPageData()
		},
		methods: {
			goDetail(wz){
				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()
				
			},
			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>
	
	*{
		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;
	}
	.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;
	}
</style>