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

260 lines
5.2 KiB
Vue

<template>
<pb-layout
class="product-list"
title="产品"
navbar="normal"
tabbar="/pages/index/product"
:bgStyle="bgStyle"
opacityBgUi="bg-white"
color="black"
:leftIcon="''"
>
<pb-sticky>
<view class="top-search">
<uni-search-bar
v-model="state.searchContent"
radius="5"
placeholder="请输入商品名称"
bgColor="#fff"
clearButton="auto"
cancelButton="none"
@clear="onSearch"
@confirm="onSearch"
/>
</view>
</pb-sticky>
<view v-if="state.pagination.total > 0" class="goods-list">
<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"
@refresh="refresh"
@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, onShow, onReachBottom, onPullDownRefresh } 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({
searchContent: '',
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,
name: state.value.searchContent,
})
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,
specType: false,
})
peach.$router.go('/pages/product/manageGoods', {
title: '添加商品',
})
}
function loadMore() {
if (state.value.loadStatus === 'noMore') {
return
}
state.value.pagination.pageNo++
getList()
}
function refresh() {
resetPagination(state.value.pagination)
getList()
}
onShow(async () => {
resetPagination(state.value.pagination)
await getList()
})
onReachBottom(() => {
loadMore()
})
// 下拉刷新
onPullDownRefresh(() => {
resetPagination(state.value.pagination)
state.value.searchContent = ''
getList()
setTimeout(function () {
uni.stopPullDownRefresh()
}, 800)
})
</script>
<style lang="scss" scoped>
.product-list {
.top-search {
background-color: var(--ui-BG-1);
}
.add-product {
position: fixed;
color: var(--ui-BG-Main);
bottom: 70px;
right: 20px;
font-size: 80rpx;
z-index: 999;
}
.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>