248 lines
7.7 KiB
Vue
248 lines
7.7 KiB
Vue
<template>
|
|
<view>
|
|
<top-bar></top-bar>
|
|
<common-header></common-header>
|
|
<category-bar></category-bar>
|
|
<view class="carousel">
|
|
<common-swiper page="article"/>
|
|
</view>
|
|
<view class="filter-outer">
|
|
<view class="cate">
|
|
<view class="item" v-for="(item, index) in cateList" :key="index" :class="[activeCateIndex === index ? 'active' : '']"
|
|
@click="selectCate(index)">
|
|
<text class="title">{{ item.name }}</text>
|
|
<text class="remark mt-10">{{ item.remark }}</text>
|
|
</view>
|
|
<!-- <view class="item" :class="[activeCateIndex === 1 ? 'active' : '']"-->
|
|
<!-- @click="selectCate(1)">-->
|
|
<!-- <text class="title">{{ cateList[1].name }}</text>-->
|
|
<!-- <text class="remark mt-10">{{ cateList[1].remark }}</text>-->
|
|
<!-- </view>-->
|
|
<!-- <view class="item" :class="[activeCateIndex === -1 ? 'active' : '']"-->
|
|
<!-- @click="selectCate(-1)">-->
|
|
<!-- <text class="title">乐邦团</text>-->
|
|
<!-- <text class="remark mt-10">可提问一些与钢材有关的专业知识问答</text>-->
|
|
<!-- </view>-->
|
|
<!-- <view class="item" :class="[activeCateIndex === 1 ? 'active' : '']"-->
|
|
<!-- @click="selectCate(1)">-->
|
|
<!-- <text class="title">{{ cateList[1].name }}</text>-->
|
|
<!-- <text class="remark mt-10">{{ cateList[1].remark }}</text>-->
|
|
<!-- </view>-->
|
|
<!-- <view class="item" :class="[activeCateIndex === -2 ? 'active' : '']"-->
|
|
<!-- @click="selectCate(-2)">-->
|
|
<!-- <text class="title">金久信风向标</text>-->
|
|
<!-- <text class="remark mt-10">平台客户可将宝贵意见和平台需要改进的意见在此发表</text>-->
|
|
<!-- </view>-->
|
|
<view class="item mt-20" @click="navTo('/pages/user/school')">
|
|
<text class="title text-main">我的学堂</text>
|
|
<text class="remark mt-10">我上传和下载的文档</text>
|
|
</view>
|
|
</view>
|
|
<view class="content-wrap">
|
|
<el-input @keyup.enter.native="getContentList()" clearable placeholder="关键字搜索" v-model="keyword">
|
|
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
|
<el-button @click="getContentList()" type="primary" slot="append" style="border-radius: 0">搜索
|
|
</el-button>
|
|
</el-input>
|
|
<view class="flex flex-col justify-start items-start pointer w-100p">
|
|
<view v-for="(item, index) in list" :key="index" class="content-item-wrap"
|
|
@click="navTo(`/pages/article/detail?id=${item._id}`)">
|
|
<template v-if="item.files && item.files.length > 0">
|
|
<template v-if="['doc', 'docx'].includes(item.files[0].split('.').pop())">
|
|
<file-word theme="outline" class="pointer" size="80" fill="#4a90e2" strokeLinecap="square"/>
|
|
</template>
|
|
<template v-else-if="['xls', 'xlsx'].includes(item.files[0].split('.').pop())">
|
|
<file-excel theme="outline" class="pointer" size="80" fill="#417505" strokeLinecap="square"/>
|
|
</template>
|
|
<template v-else-if="['pdf'].includes(item.files[0].split('.').pop())">
|
|
<file-pdf-one theme="outline" class="pointer" size="80" fill="#f5a623" strokeLinecap="square"/>
|
|
</template>
|
|
<template v-else>
|
|
<el-image :src="item.files[0]" style="width: 100px; height: 100px" fit="cover"
|
|
:preview-src-list="[item.files]"/>
|
|
</template>
|
|
</template>
|
|
<view class="content">
|
|
<text class="title">{{ item.name }}</text>
|
|
<view class="desc">
|
|
<text class="item">{{ item._add_time_str }}</text>
|
|
<text class="item">{{ item.viewNum }}人浏览</text>
|
|
<text class="item">{{ item.downloadNum }}次下载</text>
|
|
<!-- <text class="item">{{ item.amount === 0 ? '免费下载' : `${item.amount}元下载` }}</text>-->
|
|
<!-- <text class="item">{{ item._add_time_str }}</text>-->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<el-pagination @current-change="getContentList" background layout="prev, pager, next"
|
|
:total="total"></el-pagination>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<right-bar></right-bar>
|
|
<common-footer></common-footer>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {FilePdfOne, FileExcel, FileWord} from '@icon-park/vue'
|
|
|
|
export default {
|
|
name: "list",
|
|
components: {FilePdfOne, FileExcel, FileWord},
|
|
data() {
|
|
return {
|
|
cateList: [],
|
|
activeCateIndex: 0,
|
|
list: [],
|
|
total: 0,
|
|
pageSize: 10,
|
|
keyword: null
|
|
}
|
|
},
|
|
methods: {
|
|
async getCateList() {
|
|
const {rows} = await vk.callFunction({
|
|
url: 'client/article/category/pub/getList'
|
|
})
|
|
this.cateList = rows
|
|
await this.getContentList()
|
|
},
|
|
selectCate(index) {
|
|
this.activeCateIndex = index
|
|
this.getContentList()
|
|
},
|
|
async getContentList(pageIndex = 1) {
|
|
const {rows, total} = await vk.callFunction({
|
|
url: 'client/article/list/pub/getList',
|
|
data: {
|
|
pageIndex,
|
|
pageSize: this.pageSize,
|
|
parentId: this.cateList[this.activeCateIndex]._id,
|
|
keyword: this.keyword
|
|
}
|
|
})
|
|
this.list = rows
|
|
this.total = total
|
|
window.scrollTo({top: 0})
|
|
},
|
|
navTo(url) {
|
|
vk.navigateTo({
|
|
url
|
|
})
|
|
},
|
|
},
|
|
onLoad() {
|
|
this.getCateList()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.carousel {
|
|
width: 1200px;
|
|
margin: 20px auto;
|
|
}
|
|
|
|
.carousel-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.filter-outer {
|
|
width: 1200px;
|
|
margin: 20px auto;
|
|
|
|
//padding: 20px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
|
|
.cate {
|
|
width: 250px;
|
|
margin-right: 30px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
flex-direction: column;
|
|
|
|
.item {
|
|
width: 100%;
|
|
padding: 25px 10px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
flex-direction: column;
|
|
cursor: pointer;
|
|
background-color: #FFFFFF;
|
|
|
|
.title {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.remark {
|
|
color: #bbb;
|
|
}
|
|
}
|
|
|
|
.active {
|
|
background-color: #CB5050;
|
|
color: white;
|
|
|
|
.remark {
|
|
color: #F2CFCE;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-wrap {
|
|
padding: 20px;
|
|
background-color: #FFFFFF;
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
flex-direction: column;
|
|
|
|
.content-item-wrap {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
margin: 30px 0;
|
|
|
|
.content {
|
|
margin-left: 25px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
flex-direction: column;
|
|
|
|
.title {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.desc {
|
|
font-size: 14px;
|
|
color: #bbb;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
margin-top: 10px;
|
|
|
|
.item {
|
|
padding: 0 10px;
|
|
border-right: 2px solid #bbb;
|
|
}
|
|
|
|
:first-child {
|
|
padding-left: 0;
|
|
}
|
|
|
|
:last-child {
|
|
border-right: none
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |