caimei-applets-store/pages/views/goods/goods-coupon-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.productName"></cm-simple-search>
        </view>
        <simple-safe-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="!hideLoadmore"></cm-loadmore>
        </simple-safe-view>
        <!-- 购物车 -->
        <cm-drag :cartNum="kindCount" @btnClick="toCart"></cm-drag>
    </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,
            listQuery: makeQuery(),
            navInfo: {},
            productList: [],
            hasNextPage: true,
            total: 0,
            isLoading: false
        }
    },
    computed: {
        ...mapGetters(['userId', 'kindCount']),
        hideLoadmore() {
            return this.isRequest || this.productList.length <= this.listQuery.pageSize
        }
    },
    onReachBottom() {
        this.loadMore()
    },
    onLoad(options) {
        this.initQueryList(options)
    },
    methods: {
        // 跳转到购物车
        toCart() {
            this.$router.redirectTo('cart/cart')
        },

        // 搜索商品
        onSearch() {
            this.filterProductList()
        },

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

        // 初始化查询参数
        initQueryList(options) {
            this.listQuery.userId = this.userId
            this.listQuery.couponId = options.couponId
            this.listQuery.listType = 5
            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 {
                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(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>