You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

221 lines
5.0 KiB

<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-if="articleList.length > 0" 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 class="no-content" v-if="articleList.length == 0">暂无内容...</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%;
.no-content{
font-size: 28rpx;
color: #666666;
text-align: center;
padding: 30rpx 0;
}
.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>