20261008
This commit is contained in:
+212
-205
@@ -1,241 +1,248 @@
|
||||
<template>
|
||||
<view>
|
||||
<top-bar></top-bar>
|
||||
<common-header></common-header>
|
||||
<category-bar></category-bar>
|
||||
<view class="carousel">
|
||||
<el-carousel height="170px">
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
<image class="carousel-img"
|
||||
src="/static/images/600fc93e6b85324b3ea1373ee264290d.jpg"
|
||||
mode="aspectFill"></image>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</view>
|
||||
<view class="filter-outer">
|
||||
<view class="cate">
|
||||
<view class="item" :class="[activeCateIndex === 0 ? 'active' : '']"
|
||||
@click="selectCate(0)">
|
||||
<text class="title">{{ cateList[0].name }}</text>
|
||||
<text class="remark mt-10">{{ cateList[0].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 === 2 ? 'active' : '']"
|
||||
@click="selectCate(2)">
|
||||
<text class="title">{{ cateList[2].name }}</text>
|
||||
<text class="remark mt-10">{{ cateList[2].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="toMySchool">
|
||||
<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="openDownload(item._id, item.files[0])">
|
||||
<file-word theme="outline" size="80" fill="#4a90e2" strokeLinecap="square"/>
|
||||
<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>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<right-bar></right-bar>
|
||||
<common-footer></common-footer>
|
||||
<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" :class="[activeCateIndex === 0 ? 'active' : '']"
|
||||
@click="selectCate(0)">
|
||||
<text class="title">{{ cateList[0].name }}</text>
|
||||
<text class="remark mt-10">{{ cateList[0].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 {FileWord} from '@icon-park/vue'
|
||||
import {FilePdfOne, FileExcel, FileWord} from '@icon-park/vue'
|
||||
|
||||
export default {
|
||||
name: "list",
|
||||
components: {FileWord},
|
||||
data() {
|
||||
return {
|
||||
cateList: [],
|
||||
activeCateIndex: 0,
|
||||
list: [],
|
||||
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() {
|
||||
const {rows} = await vk.callFunction({
|
||||
url: 'client/article/list/pub/getList',
|
||||
data: {
|
||||
parentId: this.cateList[this.activeCateIndex]._id,
|
||||
keyword: this.keyword
|
||||
}
|
||||
})
|
||||
this.list = rows
|
||||
},
|
||||
toMySchool() {
|
||||
vk.navigateTo({
|
||||
url: '/pages/user/school'
|
||||
})
|
||||
},
|
||||
async openDownload(id, url) {
|
||||
await vk.callFunction({
|
||||
url: 'client/article/list/pub/addDownload',
|
||||
data: {
|
||||
id
|
||||
}
|
||||
})
|
||||
window.open(url)
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getCateList()
|
||||
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;
|
||||
width: 1200px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.carousel-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.filter-outer {
|
||||
width: 1200px;
|
||||
margin: 20px auto;
|
||||
width: 1200px;
|
||||
margin: 20px auto;
|
||||
|
||||
//padding: 20px;
|
||||
//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;
|
||||
|
||||
.cate {
|
||||
width: 250px;
|
||||
margin-right: 30px;
|
||||
.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;
|
||||
|
||||
.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;
|
||||
}
|
||||
.title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #CB5050;
|
||||
color: white;
|
||||
.desc {
|
||||
font-size: 14px;
|
||||
color: #bbb;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
margin-top: 10px;
|
||||
|
||||
.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
|
||||
}
|
||||
}
|
||||
}
|
||||
.item {
|
||||
padding: 0 10px;
|
||||
border-right: 2px solid #bbb;
|
||||
}
|
||||
|
||||
:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
:last-child {
|
||||
border-right: none
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user