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>
        <!-- 商品列表 -->
        <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>
        <!-- 安全区域 -->
        <cm-safe-area-bottom v-if="hideLoadmore"></cm-safe-area-bottom>
        <!-- 购物车 -->
        <cm-drag :cartNum="kindCount" @btnClick="toCart"></cm-drag>
    </view>
</template>

<script>
import { fetchProductByCoupon } from '@/services/api/coupon.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: {
                productName: '',
                userId: '',
                couponId: '',
                pageNum: 1,
                pageSize: 12
            },
            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()
        },

        // 筛选商品
        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(options) {
            this.listQuery.userId = this.userId
            this.listQuery.couponId = options.couponId
            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 resultProductData = await fetchProductByCoupon(this.listQuery)
                this.productList = [...this.productList, ...resultProductData.data.list]
                this.hasNextPage = resultProductData.data.hasNextPage
                this.total = resultProductData.data.total
                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>