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="listQuery.name"></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="index">
                <cm-product :data="product"></cm-product>
            </view>
        </view>
        <!-- 加载更多 -->
        <cm-loadmore :hasNextPage="hasNextPage" :isLoading="isLoading" :visiable="!hideLoadmore"></cm-loadmore>
        <!-- 回到顶部 -->
        <tui-scroll-top :scrollTop="scrollTop" :bottom="30" :duration="600"></tui-scroll-top>
        <!-- 安全区域 -->
        <cm-safe-area-bottom v-if="hideLoadmore"></cm-safe-area-bottom>
    </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,
            listQuery: makeQuery(),
            navInfo: {},
            productList: [],
            hasNextPage: true,
            total: 0,
            isLoading: false
        }
    },
    computed: {
        ...mapGetters(['userId']),
        hideLoadmore() {
            return this.isRequest || this.productList.length <= this.listQuery.pageSize
        }
    },
    onPageScroll(e) {
        this.scrollTop = e.scrollTop
    },
    onReachBottom() {
        this.loadMore()
    },
    onLoad() {
        this.initQueryList()
    },
    methods: {
        // 搜索商品
        onSearch() {
            this.filterProductList()
        },

        // 取消搜索
        onCancel() {
            this.listQuery.name = ''
            this.filterProductList()
        },

        // 筛选商品
        onFilter(e) {
            const { current, sort } = e
            if (current === 0) {
                // 综合排序
                this.listQuery.sortType = 1
            } else if (current === 1) {
                // 价格高低
                this.listQuery.sortType = sort === 'desc' ? 3 : 2
            } else {
                // 最新上架
                this.listQuery.sortType = 4
            }
            this.filterProductList()
        },

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

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

        // 搜索商品
        filterProductList() {
            this.productList = []
            this.listQuery.pageNum = 1
            this.fetchProductList()
        },

        // 获取商品列表
        fetchProductList: debounce(async function() {
            try {
                if (this.listQuery.sortType === 1) {
                    this.listQuery.productIds = this.productList.map(item => item.productId).join(',')
                } else {
                    this.listQuery.productIds = ''
                }
                const { data } = await fetchProductList(this.listQuery)
                this.productList = [...this.productList, ...data.pageInfo.results]
                this.hasNextPage = data.pageInfo.hasNextPage
                this.total = data.pageInfo.totalRecord
                this.listQuery.pageNum++
                this.isRequest = false
                this.isLoading = false
            } catch (e) {
                console.log('获取商品列表失败')
            }
        }, 200)
    }
}
</script>

<style lang="scss" scoped>
.goods-list {
    box-sizing: border-box;
    min-height: 100vh;
    .product-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-row-gap: 16rpx;
        grid-column-gap: 16rpx;
        padding: 16rpx 24rpx;
    }
}
</style>