college/pages/pc/searchlist.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="main">
			<view class="searchBox">
				<view class="searchInputBox">
					<input class="searchInput" type="text" v-model="title" placeholder="请输入您想搜索到内容~" placeholder-style="color:#CCCCCC" @confirm="search"/>
				</view>
				<view class="searchBtn" @click="search">查询</view>
				<!-- <image src="../../static/pcimg/icon_sousuo@2x.png" mode="" class="searchBtn" @click="search"></image> -->
				
			</view>
			<view class="ssjg" v-if="sstype">为你找到“{{sstitle}}”相关结果共{{TotalSize}}条</view>
			<view class="cont2">
				<view class="contBox">
					<view class="contL" v-show="list.length!=0&&sstype">
						<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&&sstype">
						<image src="../../static/pcimg/pic_empty_search@2x.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:[],
				title:'',
				page:1,
				sstype:false,
				TotalSize:0,
				pageSize:20,
				sstitle:'',
			}
		},
		onLoad(opt) {
          
		  // this.getcategoryPageData()
		},
		methods: {
			search(){
				var params={
					title:this.title,
					limit:this.pageSize,
					page:this.page,
				}
				uni.showLoading({
					title: '加载中'
				})
				this.$http('/trainingOpenApi/searchPageData', params, 'GET').then(res => {
					this.sstitle=this.title;
					this.sstype=true;
					uni.hideLoading();
					this.list=res.data.Items;
					this.TotalSize=res.data.TotalSize;
					
					
				})
			},
			goDetail(wz){
				// 1分类2文章
				if (wz.Type == 1) {
					uni.navigateTo({
						url:'groupingList?parentCode='+wz.Code+'&name='+wz.Name+'&title='+wz.Title+'&topName='
					})
				}else{
					uni.navigateTo({
						url:'detail?id='+wz.ID+'&topName=&twoName='
					})
				}
				//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>
	.content{
		background: #F4F5F7;
		min-height: 100vh;
		font-family: PingFangSC-Regular, PingFang SC;
	}
	.searchTitle{
		font-size: 20px;
		font-weight: 500;
		color: #3C3C3C;
		padding-bottom: 30px;
	}
	.ssjg{
		font-size: 16px;
		color: #666666;
		padding-top: 20px;
	}
	.contBox{
		min-height: 60vh;
	}
	.searchInput{
		width: 520px;
		height: 40px;
		padding-left: 20px;
		line-height: 40px;
		border: 2px solid #EEEEEE;
		border-radius: 6px;
		border-right: none;
		background: #FFFFFF;
	}
	.searchBtn{
		width: 72px;
		height: 42px;
		background: #FF4F00;
		border-radius: 0px 6px 6px 0px;
		line-height: 42px;
		color: #FFFFFF;
		font-size: 16px;
		text-align: center;
		cursor: pointer;
		margin-left: -5px;
	}
	.searchBox{
		display: flex;
		justify-content: center;
		padding-top: 20px;
	}
	*{
		padding: 0;
		margin: 0;
	}
	.gotopImg{
		width: 60px;
		height: 60px;
	}
	.gotop{
		position: fixed;
		right:5vh ;
		bottom: 60px;
		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;
	}
	.contL{
		background: #FFFFFF;
		padding:0px 20px;
		margin-top: 30px;
		border-radius: 8px;
	}
	.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: 20px 0;
		cursor: pointer;
		border-bottom: 1px solid #EEEEEE;
		
	}
	.wzLineLeft{
		border-radius: 6px;
		overflow: hidden;
		width: 200px;
		height: 132px;
	}
	.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>