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.
131 lines
2.8 KiB
131 lines
2.8 KiB
<template>
|
|
<view class="page">
|
|
<view class="pageMain">
|
|
<view class="topBox">
|
|
<view class="bg-2f9 padding-lr-30">
|
|
<ty-bar-search :value.sync="keyword" @search="search" @clear="clear" :autofocus="false"
|
|
:clearable="true" :placeholder="'输入关键词搜索'" :bgColor="'#fff'">
|
|
</ty-bar-search>
|
|
</view>
|
|
<view class="bg-ff flex tabBox">
|
|
<view class="eveTab line-height-90 position-relative" v-for="(item,index) in tabs" :key="index"
|
|
:class="tabIndex == index ? 'text-28 text-bold' : 'text-33 text-26'"
|
|
:style="index == (tabs.length - 1) ? '' : 'margin-right: 70rpx;'" @click="changeTab(index)">
|
|
{{item.name}}
|
|
<view class="activeTabLine" v-if="tabIndex == index"></view>
|
|
</view>
|
|
<view class="width-50" style="flex-shrink: 0;"></view>
|
|
</view>
|
|
</view>
|
|
<view class="listBox">
|
|
<ty-list-list :status="load_status">
|
|
<view class="padding-top-30 padding-bottom-15 border-bottom-ed" v-for="(item,index) in list"
|
|
:key="index" @click="go('/pages/home/knowledgeDetail?id=' + item.id)">
|
|
<view class="text-30 text-33 line-40 margin-bottom-10 text-cut-two">{{item.title}}</view>
|
|
<view class="text-24 text-aa">{{item.show_create_time}}</view>
|
|
</view>
|
|
</ty-list-list>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
keyword: '',
|
|
tabs: [],
|
|
tabIndex: 0,
|
|
load_status:'',
|
|
list:[],
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.rq.getData('fire/api/Fire/getKnowledgeCategory').then(res => {
|
|
if (res.code == 0) {
|
|
this.tabs = res.data.category;
|
|
this.loadList(1)
|
|
}
|
|
})
|
|
},
|
|
onReachBottom() {
|
|
this.loadList(2)
|
|
},
|
|
onPullDownRefresh() {
|
|
this.loadList(1)
|
|
},
|
|
|
|
methods: {
|
|
search() {
|
|
this.loadList(1)
|
|
},
|
|
clear() {
|
|
this.keyword = '';
|
|
this.search()
|
|
},
|
|
changeTab(i) {
|
|
if (i == this.tabIndex) {
|
|
return
|
|
} else {
|
|
this.tabIndex = i;
|
|
this.loadList(1)
|
|
}
|
|
},
|
|
loadList(first_page) {
|
|
this.rq.getList('fire/api/Fire/getKnowledgeList', {
|
|
category_id: this.tabs[this.tabIndex].id,
|
|
keyword: this.keyword,
|
|
}, {
|
|
that: this,
|
|
first_page
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.topBox {
|
|
width: 100vw;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
.tabBox {
|
|
width: 100vw;
|
|
padding-left: 50rpx;
|
|
box-sizing: border-box;
|
|
overflow-x: scroll;
|
|
}
|
|
|
|
.tabBox .eveTab {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.activeTabLine {
|
|
width: 40rpx;
|
|
height: 4rpx;
|
|
background: #2F97FF;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 20rpx;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.pageMain {
|
|
padding-top: calc(var(--headerHeight) + 105rpx);
|
|
}
|
|
|
|
.listBox {
|
|
width: 100vw;
|
|
min-height: calc(100vh - 105rpx - var(--headerHeight));
|
|
background: #fff;
|
|
padding: 0 30rpx calc(30rpx + env(safe-area-inset-bottom));
|
|
box-sizing: border-box;
|
|
}
|
|
</style>
|