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

<template>
    <pb-layout
        class="product-list"
        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 ss-m-b-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/product/manageGoods', { id: item.id, mark: 'detail' })"
                />
            </view>
        </view>

        <uni-load-more
            v-if="state.pagination.total > 0"
            :status="state.loadStatus"
            :content-text="{
                contentdown: '上拉加载更多',
            }"
            @click="loadMore"
        />

        <view class="_icon-add-round add-product" @click="addGoods"></view>

        <p-empty
            v-if="state.pagination.total === 0"
            icon="/static/soldout-empty.png"
            text="暂无产品"
            bgColor="transparent"
        />
    </pb-layout>
</template>

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

const bgStyle = {
    backgroundImage: '',
    backgroundColor: 'var(--ui-BG-1)',
    description: '',
}

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

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

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

async function getList() {
    let { data } = await GoodApi.getProductList({
        pageNo: state.value.pagination.pageNo,
        pageSize: state.value.pagination.pageSize,
    })

    state.value.pagination.list = _.concat(state.value.pagination.list, data.list)
    state.value.pagination.total = data.total
    let currentPageTotal = state.value.pagination.length

    state.value.loadStatus = currentPageTotal < state.value.pagination.total ? 'more' : 'noMore'
}

function addGoods() {
    peach.$store('trade').$patch({
        selectedProperty: null,
        goodsInfo: null,
        skus: null,
    })
    peach.$router.go('/pages/product/manageGoods', {
        title: '添加商品',
    })
}

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

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

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

<style lang="scss" scoped>
.product-list {
    .add-product {
        position: fixed;
        color: var(--ui-BG-Main);
        bottom: 70px;
        right: 20px;
        font-size: 80rpx;
    }

    .goods-list-box {
        width: 50%;
        box-sizing: border-box;

        .left-list {
            margin-right: 10rpx;
            margin-bottom: 20rpx;
        }

        .right-list {
            margin-left: 10rpx;
            margin-bottom: 20rpx;
        }
    }

    .goods-box {
        &:nth-last-of-type(1) {
            margin-bottom: 0 !important;
        }

        &:nth-child(2n) {
            margin-right: 0;
        }
    }

    .list-icon {
        width: 80rpx;

        .sicon-goods-card {
            font-size: 40rpx;
        }

        .sicon-goods-list {
            font-size: 40rpx;
        }
    }

    .goods-card {
        margin-left: 20rpx;
    }

    .list-filter-tabs {
        background-color: #fff;
    }

    .filter-list-box {
        padding: 28rpx 52rpx;

        .filter-item {
            font-size: 28rpx;
            font-weight: 500;
            color: #333333;
            line-height: normal;
            margin-bottom: 24rpx;

            &:nth-last-child(1) {
                margin-bottom: 0;
            }
        }

        .filter-item-active {
            color: var(--ui-BG-Main);
        }
    }

    .tab-item {
        height: 50px;
        position: relative;
        z-index: 11;

        .tab-title {
            font-size: 30rpx;
        }

        .cur-tab-title {
            font-weight: $font-weight-bold;
        }

        .tab-line {
            width: 60rpx;
            height: 6rpx;
            border-radius: 6rpx;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 10rpx;
            background-color: var(--ui-BG-Main);
            z-index: 12;
        }
    }
}
</style>