'货盘页'

pages/products/components/ActiveFilters.vue

@@ -1,9 +1,9 @@
 <template>
-  <!-- 已选筛选标签 -->
+  <!-- 已选筛选标签 - Figma 1519:250 圆角 60px -->
   <view class="active-filters" v-if="list.length > 0">
     <view class="active-filter-tag" v-for="(item, index) in list" :key="index">
-      <text>{{ item.label }}</text>
+      <text class="filter-text">{{ item.label }}</text>
-      <text class="filter-remove" @tap="onRemove(item.key)">✕</text>
+      <text class="filter-remove" @tap="onRemove(item.key)">×</text>
     </view>
     <view class="clear-all" @tap="onClearAll">清除全部</view>
   </view>
@@ -30,33 +30,40 @@ export default {
 </script>
 
 <style scoped>
+/* 顶部筛选条 - 白底,不占高度时隐藏 */
 .active-filters {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 16rpx;
-  padding: 20rpx 32rpx;
+  padding: 20rpx 20rpx;
   background: #ffffff;
-  border-bottom: 2rpx solid #f5f5f5;
+  border-bottom: 1rpx solid #eeeeee;
 }
+/* 单个标签 - padding 6px 10px 圆角 60px */
 .active-filter-tag {
   display: flex;
   align-items: center;
-  gap: 10rpx;
+  gap: 8rpx;
-  padding: 8rpx 20rpx;
+  padding: 12rpx 20rpx;
-  background: #fff0e5;
+  background: #ffffff;
-  border-radius: 24rpx;
+  border: 1rpx solid #ff6800;
-  font-size: 22rpx;
+  border-radius: 60rpx;
+  line-height: 1.2;
+}
+/* 文字 12px Medium 橙色 */
+.filter-text {
+  font-size: 24rpx;
+  font-weight: 500;
   color: #ff6800;
 }
 .filter-remove {
-  font-size: 20rpx;
+  font-size: 24rpx;
   color: #ff6800;
-  opacity: 0.7;
 }
 .clear-all {
   margin-left: auto;
-  font-size: 22rpx;
+  font-size: 24rpx;
   color: #999999;
 }
 </style>

pages/products/components/CategorySidebar.vue

@@ -1,22 +1,25 @@
 <template>
-  <!-- 左侧分类侧边栏 -->
+  <!-- 左侧分类侧边栏 - Figma 1512:230 (90x794) -->
-  <scroll-view scroll-y class="sidebar">
+  <view class="sidebar-wrap">
-    <view
+    <scroll-view scroll-y class="sidebar">
-      class="sidebar-item"
+      <view
-      :class="{ active: activeId === item.id }"
+        class="sidebar-item"
-      v-for="(item, index) in list"
+        :class="{ active: activeId === item.id }"
-      :key="index"
+        v-for="(item, index) in list"
-      @tap="selectItem(item.id)"
+        :key="index"
-    >
+        @tap="selectItem(item.id)"
-      <view class="sidebar-indicator" v-if="activeId === item.id"></view>
+      >
-      <text>{{ item.name }}</text>
+        <view class="sidebar-indicator" v-if="activeId === item.id"></view>
+        <text class="sidebar-text">{{ item.name }}</text>
+      </view>
+    </scroll-view>
+
+    <!-- 底部 0元拿样本 卡片 -->
+    <view class="sample-banner" @tap="onSample">
+      <text class="sample-title">0元拿样本</text>
+      <text class="sample-sub">免费寄送</text>
     </view>
-    <!-- 促销Banner -->
+  </view>
-    <view class="sidebar-promo">
-      <text class="promo-title">0元拿样</text>
-      <text class="promo-desc">全国包邮</text>
-    </view>
-  </scroll-view>
 </template>
 
 <script>
@@ -35,30 +38,48 @@ export default {
   methods: {
     selectItem(id) {
       this.$emit('select', id)
+    },
+    onSample() {
+      this.$emit('sample')
     }
   }
 }
 </script>
 
 <style scoped>
-.sidebar {
+/* 侧边栏容器 - 包含上方滚动分类 + 底部 0元拿样本 卡片 */
-  width: 160rpx;
+.sidebar-wrap {
+  width: 180rpx;
   height: 100%;
-  background: #f8f8f8;
+  background: #ffffff;
+  border-right: 1rpx solid #eeeeee;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
 }
+/* 侧边栏 - 上方滚动区域 */
+.sidebar {
+  flex: 1;
+  min-height: 0;
+  background: #ffffff;
+}
+/* 单项 - 90x46 (180rpx x 92rpx),居中文字 */
 .sidebar-item {
   position: relative;
-  padding: 28rpx 16rpx;
+  width: 100%;
-  font-size: 26rpx;
+  height: 92rpx;
-  color: #666666;
+  display: flex;
-  text-align: center;
+  align-items: center;
-  line-height: 1.4;
+  justify-content: center;
-}
-.sidebar-item.active {
   background: #ffffff;
-  color: #1a1a1a;
+  box-sizing: border-box;
-  font-weight: 500;
 }
+/* 选中态 - #FFF8F3 背景 */
+.sidebar-item.active {
+  background: #fff8f3;
+}
+/* 选中指示器 - 左侧 3x16 (6rpx x 32rpx) 橙色 圆角 2px */
 .sidebar-indicator {
   position: absolute;
   left: 0;
@@ -67,25 +88,41 @@ export default {
   width: 6rpx;
   height: 32rpx;
   background: #ff6800;
-  border-radius: 0 4rpx 4rpx 0;
+  border-radius: 4rpx;
 }
-.sidebar-promo {
+/* 文字 - 13px Medium 选中橙色 未选中 #666666 */
-  margin: 24rpx 16rpx;
+.sidebar-text {
+  font-size: 26rpx;
+  font-weight: 500;
+  color: #666666;
+  text-align: center;
+  line-height: 34rpx;
+}
+.sidebar-item.active .sidebar-text {
+  color: #ff6800;
+}
+/* 底部 0元拿样本 卡片 - 橙色渐变背景 圆角 内边距 12px 8px */
+.sample-banner {
+  flex-shrink: 0;
+  margin: 16rpx 12rpx 24rpx;
   padding: 24rpx 16rpx;
-  background: linear-gradient(135deg, #ff6800 0%, #ff8c3a 100%);
+  background: linear-gradient(180deg, #ff8a3d 0%, #ff6800 100%);
   border-radius: 16rpx;
   display: flex;
   flex-direction: column;
   align-items: center;
+  gap: 8rpx;
+  box-shadow: 0 4rpx 12rpx rgba(255, 104, 0, 0.25);
 }
-.promo-title {
+.sample-title {
-  font-size: 26rpx;
+  font-size: 24rpx;
   font-weight: 700;
   color: #ffffff;
+  line-height: 1.2;
 }
-.promo-desc {
+.sample-sub {
-  margin-top: 8rpx;
+  font-size: 18rpx;
-  font-size: 20rpx;
+  color: rgba(255, 255, 255, 0.85);
-  color: rgba(255, 255, 255, 0.9);
+  line-height: 1.2;
 }
 </style>

pages/products/components/CountryBar.vue

@@ -1,6 +1,6 @@
 <template>
-  <!-- 国家选择条 - 横向滚动 -->
+  <!-- 国家选择条 - 换行布局(对应 Figma 1511:195) -->
-  <scroll-view scroll-x class="country-bar" show-scrollbar="false">
+  <view class="country-bar">
     <view class="country-inner">
       <view
         class="country-item"
@@ -13,7 +13,7 @@
         <text class="country-name">{{ item.name }}</text>
       </view>
     </view>
-  </scroll-view>
+  </view>
 </template>
 
 <script>
@@ -38,37 +38,44 @@ export default {
 </script>
 
 <style scoped>
+/* 国家筛选条 - 白底 + 底部 1px #EEEEEE 边框 */
 .country-bar {
   width: 100%;
-  white-space: nowrap;
   background: #ffffff;
-  padding: 16rpx 0;
+  border-bottom: 1rpx solid #eeeeee;
-  border-bottom: 2rpx solid #f5f5f5;
+  padding: 12rpx 20rpx;
+  box-sizing: border-box;
 }
+/* 换行布局(不用横向滚动) */
 .country-inner {
-  display: inline-flex;
+  display: flex;
-  gap: 16rpx;
+  flex-wrap: wrap;
-  padding: 0 32rpx;
+  gap: 20rpx;
 }
+/* 单个标签 - padding 4px 10px 圆角 60px */
 .country-item {
-  flex-shrink: 0;
   display: flex;
   align-items: center;
-  gap: 10rpx;
+  gap: 8rpx;
-  padding: 12rpx 24rpx;
+  padding: 8rpx 20rpx;
-  background: #f5f5f5;
+  background: #f7f7f7;
-  border-radius: 30rpx;
+  border-radius: 60rpx;
   font-size: 24rpx;
-  color: #666666;
+  color: #000000;
+  line-height: 1.2;
 }
+/* 选中态 - #FFF3EB 背景 + 0.5px 橙色边框 + 橙色文字 */
 .country-item.active {
-  background: #ff6800;
+  background: #fff3eb;
-  color: #ffffff;
+  border: 1rpx solid #ff6800;
+  color: #ff6800;
 }
 .country-flag {
-  font-size: 28rpx;
-}
-.country-name {
   font-size: 24rpx;
 }
+/* 文字 12px Medium */
+.country-name {
+  font-size: 24rpx;
+  font-weight: 500;
+}
 </style>

pages/products/components/ProductGrid.vue

@@ -1,7 +1,7 @@
 <template>
-  <!-- 产品网格列表 + 子分类 + 分页 -->
+  <!-- 右侧商品列表区 - 上方子分类 + 下方滚动商品网格 -->
-  <scroll-view scroll-y class="product-list-area" @scrolltolower="onLoadMore">
+  <view class="right-content">
-    <!-- 子分类 -->
+    <!-- 子分类(顶部条件) - Figma 1519:250 -->
     <view class="sub-categories" v-if="subCategories.length > 0">
       <view
         class="sub-cat-item"
@@ -9,209 +9,162 @@
         v-for="(item, index) in subCategories"
         :key="index"
         @tap="selectSub(item.id)"
-      >
+      >{{ item.name }}</view>
-        {{ item.name }}
-      </view>
     </view>
 
-    <!-- 产品网格 -->
+    <!-- 商品网格滚动区 -->
-    <view class="product-grid">
+    <scroll-view scroll-y class="product-scroll" @scrolltolower="onLoadMore">
-      <view
+      <view class="product-grid">
-        class="product-card"
+        <view
-        v-for="(item, index) in list"
+          class="product-card"
-        :key="index"
+          v-for="(item, index) in list"
-        @tap="onTapProduct(item)"
+          :key="index"
-      >
+          @tap="onTapProduct(item)"
-        <view class="product-img">
+        >
-          <image
+          <!-- 图片 135x120 (Figma) -->
-            class="product-image"
+          <view class="product-img">
-            :src="item.image"
+            <image
-            mode="aspectFill"
+              class="product-image"
-            v-if="item.image"
+              :src="item.image"
-          ></image>
+              mode="aspectFill"
-          <view class="product-badges">
+              v-if="item.image"
-            <view
+            ></image>
-              class="product-badge"
+            <view class="product-badges">
-              :style="{ background: tag.bg, color: tag.color }"
+              <view
-              v-for="(tag, tIdx) in item.tags"
+                class="product-badge"
-              :key="tIdx"
+                :style="{ background: tag.bg, color: tag.color }"
-            >
+                v-for="(tag, tIdx) in item.tags"
-              {{ tag.text }}
+                :key="tIdx"
+              >{{ tag.text }}</view>
             </view>
           </view>
-        </view>
+          <!-- 商品信息 -->
-        <view class="product-info">
+          <view class="product-info">
-          <text class="product-name">{{ item.name }}</text>
+            <text class="product-name">{{ item.name }}</text>
-          <view class="product-bottom">
+            <text class="product-price">￥{{ item.price }}</text>
-            <text class="product-price">
-              ¥{{ item.price }}
-              <text class="product-price-unit">起</text>
-            </text>
           </view>
         </view>
       </view>
-    </view>
 
-    <!-- 分页 -->
+      <!-- 分页 -->
-    <view class="pagination" v-if="total > 0">
+      <view class="pagination" v-if="total > 0">
-      <text class="page-info">显示 {{ start }}-{{ end }} 共 {{ total }} 个产品</text>
+        <text class="page-info">显示 {{ start }}-{{ end }} 共 {{ total }} 个产品</text>
-      <view class="page-controls">
+        <view class="page-controls">
-        <view
+          <view class="page-btn" :class="{ disabled: current === 1 }" @tap="onPrev">上一页</view>
-          class="page-btn"
+          <view
-          :class="{ disabled: current === 1 }"
+            class="page-num"
-          @tap="onPrev"
+            :class="{ active: current === item }"
-        >
+            v-for="(item, index) in pageNumbers"
-          上一页
+            :key="index"
-        </view>
+            @tap="onGoPage(item)"
-        <view
+          >{{ item }}</view>
-          class="page-num"
+          <view class="page-btn" :class="{ disabled: current === totalPages }" @tap="onNext">下一页</view>
-          :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 class="page-size"><text>{{ pageSize }}/页</text></view>
       </view>
-      <view class="page-size">
-        <text>{{ pageSize }}/页</text>
-      </view>
-    </view>
 
-    <!-- 加载更多提示 -->
+      <view class="loading-more" v-if="loading"><text>加载中...</text></view>
-    <view class="loading-more" v-if="loading">
+    </scroll-view>
-      <text>加载中...</text>
+  </view>
-    </view>
-  </scroll-view>
 </template>
 
 <script>
 export default {
   name: 'ProductGrid',
   props: {
-    list: {
+    list: { type: Array, default: () => [] },
-      type: Array,
+    subCategories: { type: Array, default: () => [] },
-      default: () => []
+    activeSubId: { type: [String, Number], default: '' },
-    },
+    total: { type: Number, default: 0 },
-    subCategories: {
+    current: { type: Number, default: 1 },
-      type: Array,
+    pageSize: { type: Number, default: 10 },
-      default: () => []
+    totalPages: { type: Number, default: 1 },
-    },
+    pageNumbers: { type: Array, default: () => [] },
-    activeSubId: {
+    start: { type: Number, default: 1 },
-      type: [String, Number],
+    end: { type: Number, default: 10 },
-      default: ''
+    loading: { type: Boolean, default: false }
-    },
-    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) {
+    selectSub(id) { this.$emit('sub-select', 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) },
-    onTapProduct(item) {
+    onNext() { if (this.current < this.totalPages) this.$emit('page-change', this.current + 1) },
-      this.$emit('product-click', item)
+    onGoPage(page) { this.$emit('page-change', page) },
-    },
+    onLoadMore() { this.$emit('load-more') }
-    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 {
+/* 右侧内容区 - 上下分:顶部条件 + 下方滚动 */
+.right-content {
   flex: 1;
+  min-width: 0;
   height: 100%;
-  background: #ffffff;
+  display: flex;
+  flex-direction: column;
+  background: #f2f2f2;
+  overflow: hidden;
 }
+
+/* 顶部子分类条件 - padding 6px 10px 圆角 60px */
 .sub-categories {
   display: flex;
   flex-wrap: wrap;
   gap: 16rpx;
-  padding: 20rpx 24rpx;
+  padding: 20rpx 20rpx;
-  border-bottom: 2rpx solid #f5f5f5;
+  background: #ffffff;
+  border-bottom: 1rpx solid #eeeeee;
 }
 .sub-cat-item {
-  padding: 10rpx 24rpx;
+  padding: 12rpx 20rpx;
+  background: #ffffff;
+  border-radius: 60rpx;
   font-size: 24rpx;
-  color: #666666;
+  font-weight: 500;
-  background: #f5f5f5;
+  color: #000000;
-  border-radius: 24rpx;
+  line-height: 1.2;
 }
+/* 选中态 - 白底+橙色边框0.5px+橙色文字 */
 .sub-cat-item.active {
-  background: #fff0e5;
+  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 24rpx;
+  padding: 20rpx;
 }
 .product-card {
-  width: calc(50% - 8rpx);
+  flex: 1 1 calc(50% - 8rpx);
+  min-width: 0;
   background: #ffffff;
-  border-radius: 16rpx;
+  border-radius: 12rpx;
   overflow: hidden;
-  border: 2rpx solid #f5f5f5;
+  box-sizing: border-box;
 }
+/* 图片 135x120 - 用 padding-bottom 撑比例 */
 .product-img {
   position: relative;
   width: 100%;
-  height: 260rpx;
+  padding-bottom: 88.89%;  /* 120/135 */
-  background: #f5f5f5;
+  background: #f7f7f7;
+  overflow: hidden;
 }
 .product-image {
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
 }
@@ -222,39 +175,42 @@ export default {
   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: 16rpx;
+  padding: 20rpx;
 }
+/* 商品名 13px Medium #000000 */
 .product-name {
   display: block;
-  font-size: 24rpx;
+  font-size: 26rpx;
-  color: #1a1a1a;
+  font-weight: 500;
+  color: #000000;
   line-height: 1.4;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.product-bottom {
+/* 价格 15px Heavy #FF0000 红色 */
-  margin-top: 10rpx;
-}
 .product-price {
-  font-size: 28rpx;
+  display: block;
-  font-weight: 700;
+  margin-top: 16rpx;
-  color: #ff6800;
+  font-size: 30rpx;
-}
+  font-weight: 900;
-.product-price-unit {
+  color: #ff0000;
-  font-size: 20rpx;
+  line-height: 1.2;
-  font-weight: 400;
-  color: #ff6800;
 }
+
+/* 分页 */
 .pagination {
-  padding: 32rpx 24rpx;
+  padding: 32rpx 20rpx;
   display: flex;
   flex-direction: column;
   align-items: center;

pages/products/products.css

@@ -5,10 +5,23 @@
   display: flex;
   flex-direction: column;
   height: 100vh;
-  background: #f8f8f8;
+  background: #f2f2f2;
 }
+
+/* 主体内容 - 左右分栏 */
 .content-body {
   flex: 1;
   display: flex;
   overflow: hidden;
+  min-height: 0;
+}
+
+/* 右侧容器 - 自动占满剩余宽度(高度自动撑开,内部由 ProductGrid 自己滚动) */
+.right-wrap {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
 }

pages/products/products.vue

@@ -15,14 +15,7 @@
       @select="selectCountry"
     />
 
-    <!-- 已选筛选标签 -->
+    <!-- 主体内容：左侧分类侧边栏(固定宽度) + 右侧内容区(自动剩余宽度) -->
-    <ActiveFilters
-      :list="activeFilters"
-      @remove="removeFilter"
-      @clear-all="clearAllFilters"
-    />
-
-    <!-- 主体内容：侧边栏 + 产品列表 -->
     <view class="content-body">
       <!-- 左侧分类侧边栏 -->
       <CategorySidebar
@@ -31,24 +24,34 @@
         @select="selectCategory"
       />
 
-      <!-- 右侧产品列表 -->
+      <!-- 右侧内容区:上方筛选条件 + 下方商品滚动区 -->
-      <ProductGrid
+      <view class="right-wrap">
-        :list="products"
+        <!-- 已选筛选标签(只在右侧顶部出现,不挤压左边) -->
-        :sub-categories="subCategories"
+        <ActiveFilters
-        :active-sub-id="activeSubCategory"
+          :list="activeFilters"
-        :total="pagination.total"
+          @remove="removeFilter"
-        :current="pagination.current"
+          @clear-all="clearAllFilters"
-        :page-size="pagination.pageSize"
+        />
-        :total-pages="pagination.totalPages"
+
-        :page-numbers="pageNumbers"
+        <!-- 产品列表(内含子分类条件+滚动商品) -->
-        :start="pagination.start"
+        <ProductGrid
-        :end="pagination.end"
+          :list="products"
-        :loading="loadingMore"
+          :sub-categories="subCategories"
-        @sub-select="selectSubCategory"
+          :active-sub-id="activeSubCategory"
-        @product-click="goDetail"
+          :total="pagination.total"
-        @page-change="loadGoods"
+          :current="pagination.current"
-        @load-more="loadMore"
+          :page-size="pagination.pageSize"
-      />
+          :total-pages="pagination.totalPages"
+          :page-numbers="pageNumbers"
+          :start="pagination.start"
+          :end="pagination.end"
+          :loading="loadingMore"
+          @sub-select="selectSubCategory"
+          @product-click="goDetail"
+          @page-change="loadGoods"
+          @load-more="loadMore"
+        />
+      </view>
     </view>
 
     <!-- 筛选弹窗 -->