2024-05-22 15:42:13 +08:00
|
|
|
<template>
|
2024-06-03 18:35:53 +08:00
|
|
|
<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/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="暂无产品"
|
|
|
|
bgColor="transparent"
|
|
|
|
/>
|
|
|
|
</pb-layout>
|
2024-05-22 15:42:13 +08:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
2024-05-27 00:51:03 +08:00
|
|
|
import { ref } from 'vue'
|
|
|
|
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
|
2024-06-03 18:35:53 +08:00
|
|
|
import GoodApi from '@/peach/api/trade/goods'
|
2024-05-27 00:51:03 +08:00
|
|
|
import peach from '@/peach'
|
|
|
|
import _ from 'lodash'
|
2024-05-28 18:22:58 +08:00
|
|
|
import { resetPagination } from '@/peach/utils'
|
2024-05-27 00:51:03 +08:00
|
|
|
|
2024-05-22 15:42:13 +08:00
|
|
|
const bgStyle = {
|
2024-06-03 18:35:53 +08:00
|
|
|
backgroundImage: '',
|
|
|
|
backgroundColor: 'var(--ui-BG-1)',
|
|
|
|
description: '',
|
2024-05-27 00:51:03 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
const state = ref({
|
2024-06-03 18:35:53 +08:00
|
|
|
pagination: {
|
|
|
|
list: [],
|
|
|
|
total: 0,
|
|
|
|
pageNo: 1,
|
|
|
|
pageSize: 6,
|
|
|
|
name: '',
|
|
|
|
createTime: [],
|
|
|
|
},
|
|
|
|
loadStatus: '',
|
2024-05-27 00:51:03 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
function emptyList() {
|
2024-06-03 18:35:53 +08:00
|
|
|
resetPagination(state.value.pagination)
|
2024-05-27 00:51:03 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
function onSearch() {
|
2024-06-03 18:35:53 +08:00
|
|
|
emptyList()
|
|
|
|
getList()
|
2024-05-22 15:42:13 +08:00
|
|
|
}
|
2024-05-27 00:51:03 +08:00
|
|
|
|
2024-06-03 18:35:53 +08:00
|
|
|
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'
|
|
|
|
}
|
2024-06-03 01:09:01 +08:00
|
|
|
|
|
|
|
function addGoods() {
|
2024-06-03 18:35:53 +08:00
|
|
|
peach.$router.go('/pages/product/manageGoods')
|
2024-06-03 01:09:01 +08:00
|
|
|
}
|
2024-05-27 00:51:03 +08:00
|
|
|
|
|
|
|
function loadMore() {
|
2024-06-03 18:35:53 +08:00
|
|
|
if (state.value.loadStatus === 'noMore') {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
state.value.pagination.pageNo++
|
|
|
|
getList()
|
2024-05-27 00:51:03 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
onLoad(async (options) => {
|
2024-06-03 18:35:53 +08:00
|
|
|
getList()
|
2024-05-27 00:51:03 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
onReachBottom(() => {
|
2024-06-03 18:35:53 +08:00
|
|
|
loadMore()
|
2024-05-27 00:51:03 +08:00
|
|
|
})
|
2024-05-22 15:42:13 +08:00
|
|
|
</script>
|
2024-06-03 01:09:01 +08:00
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.product-list {
|
2024-06-03 18:35:53 +08:00
|
|
|
.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;
|
|
|
|
}
|
|
|
|
}
|
2024-06-03 01:09:01 +08:00
|
|
|
}
|
|
|
|
</style>
|