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

<template>
  <!-- 右侧商品列表区 - 上方子分类 + 下方滚动商品网格 -->
  <view class="right-content">
    <!-- 子分类(顶部条件) - Figma 1519:250 -->
    <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>

    <!-- 商品网格滚动区 -->
    <scroll-view scroll-y class="product-scroll">
      <view class="product-grid">
        <view
          class="product-card"
          v-for="(item, index) in list"
          :key="index"
          @tap="onTapProduct(item)"
        >
          <!-- 图片 135x120 (Figma) -->
          <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>
            <text class="product-price">￥{{ item.price }}</text>
          </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>
  </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) }
  }
}
</script>

<style scoped>
/* 右侧内容区 - 上下分:顶部条件 + 下方滚动 */
.right-content {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f2f2f2;
  overflow: hidden;
}

/* 顶部子分类条件 - padding 6px 10px 圆角 60px */
.sub-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  padding: 20rpx 20rpx;
  background: #ffffff;
  border-bottom: 1rpx solid #eeeeee;
}
.sub-cat-item {
  padding: 12rpx 20rpx;
  background: #ffffff;
  border-radius: 60rpx;
  font-size: 24rpx;
  font-weight: 500;
  color: #000000;
  line-height: 1.2;
}
/* 选中态 - 白底+橙色边框0.5px+橙色文字 */
.sub-cat-item.active {
  border: 1rpx solid #ff6800;
  color: #ff6800;
}

/* 滚动商品区 */
.product-scroll {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* 商品网格 - 2列自适应(避免宽度+间距同时固定导致挤压) */
.product-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  padding: 20rpx;
}
.product-card {
  flex: 1 1 calc(50% - 8rpx);
  min-width: 0;
  background: #ffffff;
  border-radius: 12rpx;
  overflow: hidden;
  box-sizing: border-box;
}
/* 图片 135x120 - 用 padding-bottom 撑比例 */
.product-img {
  position: relative;
  width: 100%;
  padding-bottom: 88.89%;  /* 120/135 */
  background: #f7f7f7;
  overflow: hidden;
}
.product-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.product-badges {
  position: absolute;
  top: 12rpx;
  left: 12rpx;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  z-index: 1;
}
.product-badge {
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
  font-size: 18rpx;
}

/* 商品信息 - 内边距 10px */
.product-info {
  padding: 20rpx;
}
/* 商品名 13px Medium #000000 */
.product-name {
  display: block;
  font-size: 26rpx;
  font-weight: 500;
  color: #000000;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 价格 15px Heavy #FF0000 红色 */
.product-price {
  display: block;
  margin-top: 16rpx;
  font-size: 30rpx;
  font-weight: 900;
  color: #ff0000;
  line-height: 1.2;
}

/* 分页 */
.pagination {
  padding: 32rpx 20rpx;
  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>