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.
 
 
 
 

325 lines
7.3 KiB

<template>
<view class="konwledge-index">
<view class="tabs">
<scroll-view class="scroll-view_H" scroll-x="true" scroll-with-animation :scroll-left='scrollLeft'>
<view class="tab-item scroll-item" :class="index == tabSelect ? 'tab-item-active' : ''"
v-for="(item,index) in tabList" :key="item.id"
@click="tabChange(item,index)">{{item.categoryName}}</view>
</scroll-view>
</view>
<view class="tab-box">
<view class="introduce-box acea-row">
<view class="left-box"></view>
<view class="right-box">
<view class="title-txt">{{currentTab.categoryName}}</view>
<view class="desc line5">
<text>{{currentTab.categoryDetails || '暂无'}}</text>
</view>
</view>
</view>
<SecondMenu
:menuList="secondMenu"
:active.sync="active"
@secondMenuClick="secondMenuClick">
</SecondMenu>
</view>
<view class="content-box">
<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="aspectFill"></image>
</view>
<view class="knowledge-info-box acea-row row-column row-between">
<view style="width: 100%;">
<view class="title line1">{{item.title}}</view>
<view class="intro">{{item.synopsis}}</view>
</view>
<view class="type-box acea-row">
<view class="tip" :class="item.chargeType == 0 ? 'free-bg' : item.chargeType == 1 ? '' : 'jifen'">
{{item.chargeType == 0 ? '免费' : item.chargeType == 1 ? '收费' : '积分'}}
</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 SecondMenu from './components/secondMenu.vue';
import { getArticleCategorys,getArticle } from '@/api/knowledge';
export default {
data() {
return {
windowWidth:'',
tabSelect:0,
scrollLeft:0,
currentTab:null,
showView:true,
isFixedTop:false,
TabCur: null,
tabList: [],
secondMenu:[],
active:null,
articleList:[],
tabHeight:0,
scrollTop:0
}
},
components: { SecondMenu },
onShow() {
console.log(this.tabSelect,'tabSelect')
},
onLoad(){
getArticleCategorys().then((res)=>{
this.tabList = res.data
this.$set(this, 'currentTab', res.data[0])
this.$set(this, 'tabList', res.data)
this.$set(this, 'secondMenu', res.data[0].categoryList)
if(res.data[0].categoryList.length > 0){
this.$set(this, 'active', res.data[0].categoryList[0].id)
} else{
// this.$set(this, 'tabSelect', 0)
// this.scrollLeft = 0
}
}).then(()=>{
this.getArticle()
})
},
methods: {
toDetail(id){
this.$yrouter.push({
path: '/pages/knowledge/detail',
query: {
id: id,
},
})
},
getArticle(){
uni.showLoading({
title:'正在加载中...'
})
var cid = null;
this.active == null ? cid = this.currentTab.id : cid = this.active
getArticle({cid:cid}).then((res)=>{
uni.hideLoading()
if(res.success){
this.articleList = res.data
}
})
},
tabChange(item,index) {
this.currentTab = item
this.tabSelect = index
this.moveTo(index)
if(item.categoryList.length > 0){
this.$set(this, 'active', item.categoryList[0].id)
}
this.secondMenu = item.categoryList
this.getArticle()
},
// 将点击元素移动到中间
moveTo(index) {
const query = uni.createSelectorQuery().in(this)
query.selectAll(`.scroll-item`).boundingClientRect(rect => {
const windowWidth = this.windowWidth // 屏幕宽度
let width = 0
// 循环获取计算当前点击的标签项距离左侧的距离
for (let i = 0; i < index; i++) {
width += rect[i].width
}
// 当大于屏幕一半的宽度则滚动,否则就设置位置为0
if (width > windowWidth / 2) {
this.scrollLeft = width + rect[index].width / 2 - windowWidth / 2
} else {
this.scrollLeft = 0
}
}).exec()
},
secondMenuClick(item){
this.active = item.id;
this.getArticle()
}
}
}
</script>
<style scoped lang="less">
.konwledge-index{
background: #fff;
min-height: 100%;
padding-top: 110rpx;
.tab-box{
// position: fixed;
// top: 0;
background: #fff;
/deep/.second-menu-box {
padding: 0 24rpx;
}
}
.tabs{
width:100%;
height: 96rpx;
padding-left: 20rpx;
position: fixed;
top: 0;
background: #fff;
z-index: 10;
.scroll-view_H{
white-space: nowrap;
width: 100%;
height: 96rpx;
}
.tab-item{
height: 96rpx;
line-height: 96rpx;
display: inline-block;
margin-right: 40rpx;
font-size: 32rpx;
color: #999999;
}
.tab-item-active{
color: #F99C10;
border-bottom: 2px solid #F99C10;
font-weight: bold;
}
}
.fixed{
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 99;
}
.content-box{
width: 100%;
box-sizing: border-box;
padding: 0 24rpx;
}
.introduce-box{
width: calc(100% - 60rpx);
height: auto;
box-shadow: 0px 6rpx 14rpx 8rpx rgba(255, 237, 204, 1);
border-radius: 8px;
overflow: hidden;
margin: 10rpx auto 30rpx;
padding-bottom: 30rpx;
padding-left: 10rpx;
position: relative;
.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;
}
}
}
.introduce-box::after{
content: '';
display: block;
width: 16rpx;
height: 100%;
// background: #F7D08E;
position: absolute;
left: -1rpx;
top: 50%;
border-radius: 50px;
transform: translateY(-50%);
}
.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%;
border-radius: 10rpx;
}
}
.knowledge-info-box{
width: calc(100% - 234rpx);
.title{
font-size: 32rpx;
color: #333;
font-size: 500;
line-height: 32rpx;
}
.intro{
// height: 82rpx;
font-size: 28rpx;
color: #999999;
line-height: 40rpx;
margin: 8rpx 0 36rpx;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
.type-box{
font-size: 24rpx;
color: #999;
.tip{
width: 60rpx;
font-size: 20rpx;
color: #FFAD3A;
height: 34rpx;
text-align: center;
line-height: 34rpx;
background: #fcd391;
border-radius: 10rpx;
margin-right: 20rpx;
}
.free-bg{
background: #8FB85B;
color: #D7FFA4;
}
.jifen{
background: #AAC8FA;
color: #5693F9;
}
}
}
}
}
}
.text-black{
font-size: 32rpx;
}
.text-orange{
color: #E5270F;
font-size: 40rpx !important;
border-color: #E5270F;
}
</style>