chanyiUniapp/pages/knowledge/index.vue

<template>
		<view class="konwledge-index">
			<wuc-tab 
				:tab-list="tabList"
				:tabCur.sync="TabCur" 
				@change="tabChange"
				tab-class="text-center text-black bg-white" select-class="text-orange text-xl">
			 </wuc-tab>
			 <view class="content-box">
				 <view class="introduce-box acea-row">
					 <view class="left-box"></view>
					 <view class="right-box">
						 <view class="title-txt">国学介绍</view>
						 <view class="desc">
							 <text>抱朴书院孕育自华夏优秀传统文化，以“博学致用抱朴含虚”为院训，以“弘扬国粹，利益社会”为动力。</text>
						 </view>
					 </view>
				 </view>
				 <SecondMenu 
					 :menuList="secondMenu" 
					 :active.sync="active"  
					 @secondMenuClick="secondMenuClick">
				 </SecondMenu>
				 <view class="knowledge-list">
					 <view class="knowledge-item acea-row" v-for="item in articleList" @click="toDetail(item.id)">
						 <view class="img-box">
							 <image :src="item.imageInput" mode=""></image>
						 </view>
						 <view class="knowledge-info-box">
							<view class="title line1">{{item.title}}</view>
							<view class="intro line2">{{item.synopsis}}</view>
							<view class="type-box acea-row">
								<view class="tip blue">{{item.chargeType == 0 ? '免费' : item.articleCharge}}</view>
								<view class="time">{{item.addTime}}</view>
							</view>
						 </view>
					 </view>
				 </view>
			 </view>
		</view>
</template>

<script>
	import WucTab from '@/components/wuc-tab/wuc-tab.vue';
	import SecondMenu from './components/secondMenu.vue';
	import { getCategory,getArticle } from '@/api/knowledge';
	export default {
		data() {
			return {
				TabCur: null,
				tabList: [],
				secondMenu:[],
				active:null,
				articleList:[]
			}
		},
		components: { WucTab,SecondMenu },
		onLoad() {
			getCategory().then((res)=>{
				this.tabList = res.data
				this.$set(this, 'tabList', res.data)
				this.$set(this, 'secondMenu', res.data[0].categoryList)
				this.$set(this, 'TabCur', res.data[0].id)
				if(res.data[0].categoryList.length > 0){
					this.$set(this, 'active', res.data[0].categoryList[0].id)
				}
			}).then(()=>{
				this.getArticle()
			})
		},
		methods: {
			toDetail(id){
				this.$yrouter.push({
				  path: '/pages/knowledge/detail',
				  query: {
				    id: id,
				  },
				})
			},
			getArticle(){
				var cid = null;
				this.active == null ? cid = this.TabCur : cid = this.active
				getArticle({cid:cid}).then((res)=>{
					if(res.success){
						this.articleList = res.data
					}
				})
			},
			tabChange(item) {
				if(item.categoryList.length > 0){
					this.$set(this, 'active', item.categoryList[0].id)
				}
				this.secondMenu = item.categoryList;
				this.TabCur = item.id;
				this.getArticle()
			},
			secondMenuClick(item){
				this.active = item.id;
				this.getArticle()
			}
		}
	}
</script>

<style scoped lang="less">
.konwledge-index{
	background: #fff;
	min-height: 100%;
	.content-box{
		width: 100%;
		box-sizing: border-box;
		padding: 0 24rpx;
	}
	.introduce-box{
		width: 100%;
		height: 328rpx;
		box-shadow: 0px 6rpx 14rpx 8rpx rgba(255,234,231,0.2);
		border-radius: 8px;
		overflow: hidden;
		margin: 30rpx 0;
		.left-box{
			width: 16rpx;
			height: 100%;
			background: #FAEFED;
		}
		.right-box{
			width: calc(100% - 16rpx);
			padding: 30rpx 50rpx 0 24rpx;
			font-size: 26rpx;
			color: #999;
			.title-txt{
				font-size: 36rpx;
				font-weight: 500;
				color: #3C464F;
				line-height: 50rpx;
				font-weight: 600;
				margin-bottom: 20rpx;
			}
			.desc{
				text-indent: 1em;
			}
		}
	}
	
	.knowledge-list{
		width: 100%;
		.knowledge-item{
			border-bottom: 1px solid #ECECEC;
			padding-bottom: 20rpx;
			margin-bottom: 20rpx;
			.img-box{
				width: 204rpx;
				height: 200rpx;
				margin-right: 30rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.knowledge-info-box{
				width: calc(100% - 234rpx);
				.title{
					font-size: 28rpx;
					color: #333;
					font-size: 500;
					line-height: 40rpx;
				}
				.intro{
					font-size: 28rpx;
					color: #999999;
					line-height: 40rpx;
					margin: 8rpx 0 36rpx;
				}
				.type-box{
					font-size: 24rpx;
					color: #999;
					.tip{
						width: 60rpx;
						height: 34rpx;
						line-height: 32rpx;
						text-align: center;
						background: #EDEFF8;
						border-radius: 4rpx;
						border: 1px solid #6E85EB;
						padding: 0 6rpx;
						font-size: 22rpx;
						margin-right: 20rpx;
						box-sizing: border-box;
					}
					.blue{
						color: #6E85EB;
						background: #EDEFF8;
						border-color: #6E85EB;
					}
					.yellow{
						color: #F99C10;
						background: #FFEDCC;
						border-color: #F99C10;
					}
				}
			}
		}
	}
}
.text-black{
	font-size: 32rpx;
}
.text-orange{
	color: #EB5744;
	font-size: 40rpx !important;
	border-color: #EB5744;
}
	
</style>