caimei-applets-store/pages/tabBar/category/category.vue

<template>
    <view class="category">
        <tui-skeleton v-if="isRequest" :loadingType="3" :isLoading="true"></tui-skeleton>
        <template v-else-if="categories.length > 0">
            <!-- 侧边导航 -->
            <scroll-view class="slide-navbar" :scroll-y="true">
                <template v-for="(item, index) in categories">
                    <view
                        class="slide"
                        :class="{ active: index === current }"
                        :key="item.id"
                        v-text="item.name"
                        @click="onClick(item, index)"
                    ></view>
                </template>
            </scroll-view>
            <!-- 右侧容器 -->
            <scroll-view
                class="panel"
                :scroll-y="true"
                :scroll-with-animation="true"
                :scroll-top="scrollTop"
                @scroll="onScroll"
            >
                <view class="cate" v-for="(item, index) in smallTypeList" :key="index" @click="toGoodsFloor(item)">
                    <image class="cate-icon" :src="item.crmIcon"></image>
                    <view class="cate-name" v-text="item.name"></view>
                </view>
            </scroll-view>
        </template>
        <template v-else>
            <tui-no-data :imgUrl="staticUrl + 'icon-empty-address.png'" :imgHeight="230" :imgWidth="290">
                <view class="empty-tip">暂无分类信息~</view>
            </tui-no-data>
        </template>
    </view>
</template>

<script>
import { fetchProductTypeFirst, fetchProductTypeSecond } from '@/services/api/goods.js'
export default {
    data() {
        return {
            isRequest: true,
            categories: [],
            current: 0,
            oldScrollTop: 0,
            scrollTop: 100
        }
    },
    computed: {
        smallTypeList() {
            const current = this.categories[this.current]
            return (current && current.smallTypeList) || []
        }
    },
    onShow() {
        this.fetchProductTypeFirst()
    },
    methods: {
        onClick(item, index) {
            this.current = index
            this.scrollTop = this.oldScrollTop
            this.$nextTick(() => {
                this.scrollTop = 0
            })
        },

        onScroll(e) {
            this.oldScrollTop = e.detail.scrollTop
        },

        // 获取一级商品分了列表
        async fetchProductTypeFirst() {
            try {
                const { data } = await fetchProductTypeFirst()
                this.categories = data
                this.isRequest = false
            } catch (e) {
                console.log(e)
            }
        },

        // 商品楼层
        toGoodsFloor(item) {
            this.$setStorage('NAVBAR', {
                type: 'second',
                id: item.smallTypeId,
                title: item.name
            })
            this.$router.navigateTo('goods/goods-list')
        }
    }
}
</script>

<style lang="scss" scoped>
.category {
    @extend .cm-flex-between;
    align-items: flex-start;
    background-color: #fff;

    .slide-navbar {
        width: 200rpx;
        height: 100vh;
        background-color: #f7f7f7;
        box-sizing: border-box;

        .slide {
            width: 100%;
            height: 94rpx;
            text-align: center;
            line-height: 94rpx;
            font-size: 28rpx;
            color: #666666;
            background-color: #f7f7f7;

            &.active {
                background-color: #fff;
                color: #ff457b;
            }
        }
    }
    .panel {
        width: 550rpx;
        height: 100vh;
        padding-bottom: 40rpx;
        background-color: #fff;
        box-sizing: border-box;

        &::after {
            content: '';
            display: block;
            clear: both;
        }

        .cate {
            float: left;
            margin-top: 40rpx;
            margin-left: 40rpx;
            @extend .cm-flex-center;
            flex-direction: column;
            .cate-icon {
                display: block;
                width: 128rpx;
                height: 128rpx;
            }

            .cate-name {
                @include ellipsis(1);
                width: 100%;
                margin-top: 16rpx;
                color: #666;
                font-size: 26rpx;
                text-align: center;
            }
        }
    }
}
</style>