mall-app-t/pages/index/product.vue

<template>
    <pb-layout
        title="产品"
        navbar="normal"
        tabbar="/pages/index/product"
        :bgStyle="bgStyle"
        opacityBgUi="bg-white"
        color="black"
    >
        <view v-if="state.pagination.total > 0" class="goods-list ss-m-t-20">
            <view class="ss-p-l-20 ss-p-r-20" v-for="item in state.pagination.list" :key="item.id">
                <p-goods-column
                    size="lg"
                    :data="item"
                    :topRadius="10"
                    bottomRadius="10"
                    @click="peach.$router.go('/pages/goods/index', { id: item.id })"
                />
            </view>
        </view>

        <uni-load-more
            v-if="state.pagination.total > 0"
            :status="state.loadStatus"
            :content-text="{
                contentdown: '上拉加载更多',
            }"
            @click="loadMore"
        />
        <p-empty v-if="state.pagination.total === 0" icon="/static/soldout-empty.png" text="暂无产品" />
    </pb-layout>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import peach from '@/peach'
import _ from 'lodash'
import { resetPagination } from '@/peach/utils'

const bgStyle = {
    backgroundImage: '',
    backgroundColor: '',
    description: '',
}

const state = ref({
    pagination: {
        list: [],
        total: 0,
        pageNo: 1,
        pageSize: 6,
    },
})

function emptyList() {
    resetPagination(state.value.pagination)
}

function onSearch() {
    emptyList()
    getList()
}

function getList() {}

function loadMore() {
    if (state.value.loadStatus === 'noMore') {
        return
    }
    state.value.pagination.pageNo++
    getList()
}

onLoad(async (options) => {
    getList()
})

onReachBottom(() => {
    loadMore()
})
</script>