college/pages/pc/list.vue

<template>
	<view class="content">
		<pcNav :itemName="topName"></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 " 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="{'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">
			<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:[],
				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=opt.code;
		   this.getcategoryPageData();
		   uni.setNavigationBarTitle({
		       title: this.topName
		   });
		},
		methods: {
			goDetail(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
					})
				}else{
					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)
			},
			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;
	}
	.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);
	}
	.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;
		
		  
	}
	.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>