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

86 lines
2.0 KiB
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" 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" />
<view class="_icon-add-round add-product" @click="addGoods"></view>
<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: '#fff',
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 addGoods() {
peach.$router.go('/pages/product/manageGoods')
}
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;
}
}
</style>