inkreach-uni/pages/products/components/ProductGrid.vue

<template>
  <!-- 产品网格列表 + 子分类 + 分页 -->
  <scroll-view scroll-y class="product-list-area" @scrolltolower="onLoadMore">
    <!-- 子分类 -->
    <view class="sub-categories" v-if="subCategories.length > 0">
      <view
        class="sub-cat-item"
        :class="{ active: activeSubId === item.id }"
        v-for="(item, index) in subCategories"
        :key="index"
        @tap="selectSub(item.id)"
      >
        {{ item.name }}
      </view>
    </view>

    <!-- 产品网格 -->
    <view class="product-grid">
      <view
        class="product-card"
        v-for="(item, index) in list"
        :key="index"
        @tap="onTapProduct(item)"
      >
        <view class="product-img">
          <image
            class="product-image"
            :src="item.image"
            mode="aspectFill"
            v-if="item.image"
          ></image>
          <view class="product-badges">
            <view
              class="product-badge"
              :style="{ background: tag.bg, color: tag.color }"
              v-for="(tag, tIdx) in item.tags"
              :key="tIdx"
            >
              {{ tag.text }}
            </view>
          </view>
        </view>
        <view class="product-info">
          <text class="product-name">{{ item.name }}</text>
          <view class="product-bottom">
            <text class="product-price">
              ¥{{ item.price }}
              <text class="product-price-unit">起</text>
            </text>
          </view>
        </view>
      </view>
    </view>

    <!-- 分页 -->
    <view class="pagination" v-if="total > 0">
      <text class="page-info">显示 {{ start }}-{{ end }} 共 {{ total }} 个产品</text>
      <view class="page-controls">
        <view
          class="page-btn"
          :class="{ disabled: current === 1 }"
          @tap="onPrev"
        >
          上一页
        </view>
        <view
          class="page-num"
          :class="{ active: current === item }"
          v-for="(item, index) in pageNumbers"
          :key="index"
          @tap="onGoPage(item)"
        >
          {{ item }}
        </view>
        <view
          class="page-btn"
          :class="{ disabled: current === totalPages }"
          @tap="onNext"
        >
          下一页
        </view>
      </view>
      <view class="page-size">
        <text>{{ pageSize }}/页</text>
      </view>
    </view>

    <!-- 加载更多提示 -->
    <view class="loading-more" v-if="loading">
      <text>加载中...</text>
    </view>
  </scroll-view>
</template>

<script>
export default {
  name: 'ProductGrid',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    subCategories: {
      type: Array,
      default: () => []
    },
    activeSubId: {
      type: [String, Number],
      default: ''
    },
    total: {
      type: Number,
      default: 0
    },
    current: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    totalPages: {
      type: Number,
      default: 1
    },
    pageNumbers: {
      type: Array,
      default: () => []
    },
    start: {
      type: Number,
      default: 1
    },
    end: {
      type: Number,
      default: 10
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    selectSub(id) {
      this.$emit('sub-select', id)
    },
    onTapProduct(item) {
      this.$emit('product-click', item)
    },
    onPrev() {
      if (this.current > 1) {
        this.$emit('page-change', this.current - 1)
      }
    },
    onNext() {
      if (this.current < this.totalPages) {
        this.$emit('page-change', this.current + 1)
      }
    },
    onGoPage(page) {
      this.$emit('page-change', page)
    },
    onLoadMore() {
      this.$emit('load-more')
    }
  }
}
</script>

<style scoped>
.product-list-area {
  flex: 1;
  height: 100%;
  background: #ffffff;
}
.sub-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  padding: 20rpx 24rpx;
  border-bottom: 2rpx solid #f5f5f5;
}
.sub-cat-item {
  padding: 10rpx 24rpx;
  font-size: 24rpx;
  color: #666666;
  background: #f5f5f5;
  border-radius: 24rpx;
}
.sub-cat-item.active {
  background: #fff0e5;
  color: #ff6800;
}
.product-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  padding: 20rpx 24rpx;
}
.product-card {
  width: calc(50% - 8rpx);
  background: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
  border: 2rpx solid #f5f5f5;
}
.product-img {
  position: relative;
  width: 100%;
  height: 260rpx;
  background: #f5f5f5;
}
.product-image {
  width: 100%;
  height: 100%;
}
.product-badges {
  position: absolute;
  top: 12rpx;
  left: 12rpx;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}
.product-badge {
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
  font-size: 18rpx;
}
.product-info {
  padding: 16rpx;
}
.product-name {
  display: block;
  font-size: 24rpx;
  color: #1a1a1a;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-bottom {
  margin-top: 10rpx;
}
.product-price {
  font-size: 28rpx;
  font-weight: 700;
  color: #ff6800;
}
.product-price-unit {
  font-size: 20rpx;
  font-weight: 400;
  color: #ff6800;
}
.pagination {
  padding: 32rpx 24rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20rpx;
}
.page-info {
  font-size: 22rpx;
  color: #999999;
}
.page-controls {
  display: flex;
  align-items: center;
  gap: 12rpx;
}
.page-btn {
  padding: 10rpx 20rpx;
  font-size: 24rpx;
  color: #666666;
  background: #f5f5f5;
  border-radius: 8rpx;
}
.page-btn.disabled {
  color: #cccccc;
}
.page-num {
  width: 56rpx;
  height: 56rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #666666;
  background: #f5f5f5;
  border-radius: 8rpx;
}
.page-num.active {
  background: #ff6800;
  color: #ffffff;
}
.page-size {
  font-size: 22rpx;
  color: #999999;
}
.loading-more {
  padding: 32rpx;
  text-align: center;
  font-size: 24rpx;
  color: #999999;
}
</style>