caimei-applets-store/pages/views/goods/goods-list.vue

<template>
    <view class="goods-list">
        <tui-skeleton v-if="isRequest" :loadingType="3" :isLoading="true"></tui-skeleton>
        <view class="sticky-top">
            <!-- 搜索框 -->
            <cm-simple-search @search="onSearch" @cancel="onCancel" v-model="keyword"></cm-simple-search>
            <!-- 筛选 -->
            <goods-filter @filter="onFilter"></goods-filter>
        </view>
        <!-- 商品列表 -->
        <view class="product-list">
            <view class="product-item" v-for="(product, index) in productList" :key="product.productId">
                <cm-product :data="product"></cm-product>
            </view>
        </view>
        <!-- 加载更多 -->
        <cm-loadmore :hasNextPage="hasNextPage" :isLoading="isLoading" :visiable="!isRequest"></cm-loadmore>
        <!-- 回到顶部 -->
        <tui-scroll-top :scrollTop="scrollTop" :bottom="30" :duration="600"></tui-scroll-top>
    </view>
</template>

<script>
import { fetchProductList } from '@/services/api/goods.js'
import { debounce } from '@/common/utils.js'
import { mapGetters } from 'vuex'
import { makeQuery } from '@/pages/views/goods/config/config.js'
export default {
    data() {
        return {
            isRequest: true,
            scrollTop: 0,
            keyword: '',
            listQuery: makeQuery(),
            navInfo: {},
            productList: [],
            hasNextPage: true,
            total: 0,
            isLoading: false
        }
    },
    computed: {
        ...mapGetters(['userId'])
    },
    onPageScroll(e) {
        this.scrollTop = e.scrollTop
    },
    onReachBottom() {
        this.loadMore()
    },
    onLoad() {
        this.initQueryList()
    },
    methods: {
        onSearch() {},
        onCancel() {},
        onFilter(e) {
            console.log(e)
        },

        // 初始化查询参数
        initQueryList() {
            this.listQuery.userId = this.userId
            this.navInfo = this.$getStorage('NAVBAR')
            if (this.navInfo.type === 'navbar') {
                // 从金刚区菜单进入
                this.listQuery.homeTypeId = this.navInfo.id
                this.listType = 2
            } else if (this.navInfo.type === 'floor') {
                // 从楼层进入
                this.homeFloorId = this.navInfo.id
                this.listType = 3
            } else if (this.navInfo.type === 'second') {
                // 从二级菜单进入
                this.smallTypeId = this.navInfo.id
            }
            this.fetchProductList()
        },

        // 加载更多
        loadMore() {
            if (!this.hasNextPage) return
            this.fetchProductList()
        },

        // 获取商品列表
        fetchProductList: debounce(async function() {
            try {
                const resultProductData = await fetchProductList(this.listQuery)
                this.productList = [...this.productList, ...resultProductData.data.results]
                this.hasNextPage = resultProductData.data.hasNextPage
                this.total = resultProductData.data.totalRecord
                this.listQuery.pageNum++
                this.isRequest = false
            } catch (e) {
                console.log('获取商品列表失败')
            }
        }, 200)
    }
}
</script>

<style lang="scss" scoped>
.goods-list {
    box-sizing: border-box;
    min-height: 100vh;
    .product-list {
        // @extend .cm-flex-between;
        // flex-wrap: wrap;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        // grid-template-rows: repeat(2, 1fr);
        grid-row-gap: 12rpx;
        padding: 0 24rpx;
        .product-item {
            width: 224rpx;
        }
    }
}
</style>