caimei-applets-hehe/pages/goods/goods-coupon-list.vue

<template>
    <view class="good-coupon-list" :class="{ top: isSticky }">
        <!-- 骨架 -->
        <tui-skeleton v-if="isRequest" :isLoading="true" loadingType="2"></tui-skeleton>
        <template v-else>
            <!-- 列表为空 -->
            <cm-empty
                v-if="productList.length <= 0"
                message="暂无任何商品~"
                :image="baseUrl + 'icon-empty-search.png'"
                :offset="90"
            ></cm-empty>
            <template v-else>
                <!-- 搜索 -->
                <sui-search
                    placeholder="请输入商品关键词"
                    :radius="30"
                    class="sui-search"
                    :class="{ fixed: isSticky }"
                    disabled
                    @gosearch="goSearch"
                ></sui-search>
                <!-- 商品列表 -->
                <view class="product-list">
                    <template v-for="(product, index) in productList">
                        <cm-product class="product" :key="index" :data="product"></cm-product>
                    </template>
                </view>
                <!-- 加载更多 -->
                <template v-if="productList.length > 6">
                    <tui-loadmore :index="2" :visible="isRequest"></tui-loadmore>
                    <tui-nomore :text="loadingText" :visible="!isRequest" backgroundColor="#f7f7f7"></tui-nomore>
                </template>
            </template>
        </template>
        <!-- 侧边 -->
        <scroll-top :isScrollTop="isScrollTop" :bottom="160"></scroll-top>
        <!-- 可拖动悬浮按钮 -->
        <cm-drag :cartNum="kindCount" :isDock="true" :existTabBar="true" @btnClick="btnClick"> </cm-drag>
    </view>
</template>

<script>
import CmProduct from '@/components/cm-module/cm-product/cm-product.vue'
import SuiSearch from '@/components/sui-search/sui-search.vue'
import CmEmpty from '@/components/cm-module/cm-empty/cm-empty.vue'
import CmDrag from '@/components/cm-module/cm-drag/cm-drag'
import { mapGetters, mapActions } from 'vuex'
export default {
    components: {
        CmEmpty,
        SuiSearch,
        CmProduct,
        CmDrag
    },
    data() {
        return {
            baseUrl: this.$Static,
            productList: [], //商品列表
            listQuery: {
                userId: '',
                couponId: '',
                pageNum: 1,
                pageSize: 10,
                productName: ''
            },
            hasNextPage: false,
            isScrollTop: false,
            isRequest: true,
            isRefresh: false,
            timer: null,
            isSticky: false
        }
    },
    onLoad(options) {
        this.listQuery.couponId = options.couponId
        this.listQuery.userId = this.userId
        this.fetchProductList()
    },
    computed: {
        ...mapGetters(['hasLogin', 'userInfo', 'userId', 'kindCount']),
        loadingText() {
            return this.hasNextPage ? '上拉加载' : '没有更多了'
        }
    },
    methods: {
        ...mapActions('cart', ['addToCart']),
        //初始化商品数据列表
        fetchProductList() {
            this.CouponService.ProductInfoByCoupon(this.listQuery)
                .then(response => {
                    let data = response.data
                    if (this.isRefresh) {
                        this.productList = data.list
                    } else {
                        this.productList = [...this.productList, ...data.list]
                    }
                    this.hasNextPage = data.hasNextPage
                    this.listQuery.pageNum++
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
                .finally(() => {
                    this.isRequest = false
                    if (this.isRefresh) {
                        setTimeout(() => {
                            uni.stopPullDownRefresh()
                            this.isRefresh = false
                        }, 500)
                    }
                })
        },
        // 跳转到搜索页面
        goSearch() {
            uni.navigateTo({ url: '/pages/goods/goods-coupon-list-search' })
        },
        btnClick() {
            this.$api.navigateTo('/pages/goods/cart')
        }
    },
    // 监听页面滚动事件
    onPageScroll(e) {
        this.isSticky = e.scrollTop > 0
        this.isScrollTop = e.scrollTop > 400
    },
    onPullDownRefresh() {
        //下拉刷新
        this.listQuery.pageNum = 1
        this.isRefresh = true
        this.fetchProductList()
    },
    onReachBottom() {
        if (!this.hasNextPage) return
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
            console.log('触底了')
            this.fetchProductList()
        }, 200)
    }
}
</script>

<style lang="scss" scoped>
.sui-search {
    width: 100%;
    top: 0;
    left: 0;
    z-index: 999;
    &.fixed {
        position: fixed;
    }
}
.good-coupon-list {
    min-height: 100%;
    background: #f7f7f7;
    box-sizing: border-box;
    overflow: hidden;
    &.top {
        padding-top: 124rpx;
    }
    .product-list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 12rpx 24rpx 12rpx;
        background-color: #f7f7f7;
        box-sizing: border-box;
        .product {
            margin: 12rpx 0;
        }
    }
}
</style>