jjx-wap/components/index/abc.vue

<template> <!-- 买家中心和卖家中心 -->
    <view class="component">
        <view class="layout-abc">
            <!-- 买家入门 -->
            <view class="abc-box bg-white">
                <view class="index-h3">
                    <view class="big">买家入门</view>
                    <view class="more" @click="$jump(`/pages/article/list?id=6573d7c3e0ec19b5047ffa8c`)">更多</view>
                </view>
                <view class="abc flex justify-between">
                    <view class="abc-left">
                        <image class="full" src="/static/img/abc-1.png" mode=""></image>
                    </view>
                    <view class="abc-right flex-1 p-left-20">
                        <!-- <view class="link">买家中心</view> -->
                        <view class="abc-tab flex justify-start">
                            <view class="tab active">常见问题</view>
<!--                            <view class="tab">如何采购</view>-->
                        </view>
                        <view class="list">
                            <view class="li" v-for="(item, index) in buyerArticleList" :key="index"
                                  @click="jump(`/pages/article/info?id=${item._id}`)">{{ item.name }}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 卖家入门 -->
            <view class="abc-box bg-white mt-10">
                <view class="index-h3">
                    <view class="big">卖家入门</view>
                    <view class="more" @click="$jump(`/pages/article/list?id=6573d7bde0ec19b5047ff941`)">更多</view>
                </view>
                <view class="abc flex justify-between">
                    <view class="abc-left">
                        <image class="full" src="/static/img/abc-1.png" mode=""></image>
                    </view>
                    <view class="abc-right flex-1 p-left-20">
                        <!-- <view class="link">卖家中心</view> -->
                        <view class="abc-tab flex justify-start">
                            <view class="tab active">常见问题</view>
<!--                            <view class="tab">如何采购</view>-->
                        </view>
                        <view class="list">
                            <view class="li" v-for="(item, index) in sellerArticleList" :key="index"
                                  @click="jump(`/pages/article/info?id=${item._id}`)">{{ item.name }}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            isLogin: false,
            sellerArticleList: [],
            buyerArticleList: [],
            articleList: [],
        }
    },
    methods: {
        buyerLink() {
            vk.navigateTo('/pages/user/buyer')
        },
        sellerLink() {
            vk.navigateTo('/pages/user/seller')
        },
        jump(url) {
            vk.navigateTo(url)
        },
        getArticleList() {
            const otherArticleIdList = []
            this.articleList.forEach((item, index) => {
                otherArticleIdList.push(item.id)
            })
            otherArticleIdList.push('6573d7bde0ec19b5047ff941')
            otherArticleIdList.push('6573d7c3e0ec19b5047ffa8c')
            this.sellerArticleList = []
            this.buyerArticleList = []
            this.articleList.forEach((item, index) => {
                this.articleList[index].list = []
            })
            vk.callFunction({
                url: 'client/otherArticle/list/pub/getList',
                data: {
                    pageIndex: 1,
                    pageSize: 200,
                    parentId: otherArticleIdList
                },
                success: (data) => {
                    data.rows.forEach(item => {
                        if (item.parentId === '6573d7bde0ec19b5047ff941') this.sellerArticleList.push(item)
                        else if (item.parentId === '6573d7c3e0ec19b5047ffa8c') this.buyerArticleList.push(item)
                        this.articleList.forEach((article, articleIndex) => {
                            if (article.id === item.parentId) {
                                this.articleList[articleIndex].list.push(item)
                            }
                        })
                    })
                }
            });
        },
    },
    mounted() {
        this.getArticleList()
    },
}
</script>

<style lang="scss">
.layout-abc {
    padding: 5rpx 30rpx;

    .abc-box {
        padding: 10rpx 20rpx;
    }
}

.index-h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10rpx 0rpx;

    .big {
        font-size: 28rpx;
        font-weight: 500;
        line-height: 40rpx;
        color: #A92924;
    }

    .more {
        font-size: 24rpx;
        line-height: 40rpx;
        color: #888888;
    }
}

.abc {
    padding: 10rpx 10rpx;

    .abc-left {
        width: 220rpx;
        height: 190rpx;
    }

    .abc-right {
        position: relative;

        .link {
            position: absolute;
            right: 0;
            top: 0;
            z-index: 9;
            font-size: 20rpx;
            line-height: 32rpx;
            color: #A92924;
            padding: 4rpx 8rpx;
            border: 1px solid #A92924;
        }

        .abc-tab {
            width: 100%;
            height: 40rpx;
            overflow: hidden;
            font-size: 28rpx;
            line-height: 40rpx;
            color: #666666;

            .tab {
                margin-right: 20rpx;
            }

            .active {
                color: #A92924;
            }
        }
    }
}

.list {
    margin-top: 6rpx;
    width: 100%;
    height: 144rpx;
    overflow: hidden;
    font-size: 24rpx;
    line-height: 36rpx;
    color: #666666;
}
</style>