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"
    :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>