jjx-web/pages/article/list.vue

<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="http://jyx.gxwebsoft.com/uploads/20210506/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">
                        <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>
        <common-footer></common-footer>
    </view>
</template>

<script>
import {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
        },
    },
    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>