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.
316 lines
7.2 KiB
316 lines
7.2 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 class="line1"> |
|
<view class="title line1">{{item.title}}</view> |
|
<view class="intro line2">{{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: #EA533E; |
|
border-bottom: 2px solid #EA533E; |
|
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,234,231,0.5); |
|
border-radius: 8px; |
|
overflow: hidden; |
|
margin: 0rpx 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: #FAEFED; |
|
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; |
|
} |
|
.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>
|
|
|