'颜色尺码价格联动'

pages/products/components/CategorySidebar.vue

@@ -1,25 +1,17 @@
 <template>
   <!-- 左侧分类侧边栏 - Figma 1512:230 (90x794) -->
-  <view class="sidebar-wrap">
-    <scroll-view scroll-y class="sidebar">
-      <view
-        class="sidebar-item"
-        :class="{ active: activeId === item.id }"
-        v-for="(item, index) in list"
-        :key="index"
-        @tap="selectItem(item.id)"
-      >
-        <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>
+  <scroll-view scroll-y class="sidebar">
+    <view
+      class="sidebar-item"
+      :class="{ active: activeId === item.id }"
+      v-for="(item, index) in list"
+      :key="index"
+      @tap="selectItem(item.id)"
+    >
+      <view class="sidebar-indicator" v-if="activeId === item.id"></view>
+      <text class="sidebar-text">{{ item.name }}</text>
     </view>
-  </view>
+  </scroll-view>
 </template>
 
 <script>
@@ -38,31 +30,20 @@ export default {
   methods: {
     selectItem(id) {
       this.$emit('select', id)
-    },
-    onSample() {
-      this.$emit('sample')
     }
   }
 }
 </script>
 
 <style scoped>
-/* 侧边栏容器 - 包含上方滚动分类 + 底部 0元拿样本 卡片 */
-.sidebar-wrap {
+/* 侧边栏 - 固定宽度 180rpx(=90px),白底 + 右侧 1px #EEEEEE 边框 */
+.sidebar {
   width: 180rpx;
   height: 100%;
   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 {
@@ -101,28 +82,4 @@ export default {
 .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(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);
-}
-.sample-title {
-  font-size: 24rpx;
-  font-weight: 700;
-  color: #ffffff;
-  line-height: 1.2;
-}
-.sample-sub {
-  font-size: 18rpx;
-  color: rgba(255, 255, 255, 0.85);
-  line-height: 1.2;
-}
 </style>

pages/products/components/CountryBar.vue

@@ -9,7 +9,8 @@
         :key="index"
         @tap="selectItem(item)"
       >
-        <text class="country-flag">{{ item.flag }}</text>
+        <!-- 国家图标(18x18 圆形,来自后端 countryIcon 拼接 BASE_URL) -->
+        <image class="country-icon" :src="item.icon" mode="aspectFill"></image>
         <text class="country-name">{{ item.name }}</text>
       </view>
     </view>
@@ -38,7 +39,8 @@ export default {
 </script>
 
 <style scoped>
-/* 国家筛选条 - 白底 + 底部 1px #EEEEEE 边框 */
+/* 国家筛选条 - 白底 + 底部 1px #EEEEEE 边框
+   Figma: Country Filter Bar 1511:195, y=6 起始, 行高约 31px(padding 6+6) */
 .country-bar {
   width: 100%;
   background: #ffffff;
@@ -46,36 +48,45 @@ export default {
   padding: 12rpx 20rpx;
   box-sizing: border-box;
 }
-/* 换行布局(不用横向滚动) */
+/* 换行布局 - 行间距 8px(未选中态 y=37-6=31px; 第二行 y=37) */
 .country-inner {
   display: flex;
   flex-wrap: wrap;
-  gap: 20rpx;
+  row-gap: 16rpx;
+  column-gap: 20rpx;
 }
-/* 单个标签 - padding 4px 10px 圆角 60px */
+/* 单个标签 - padding 4px 10px 圆角 60px gap 10px Figma */
 .country-item {
   display: flex;
   align-items: center;
-  gap: 8rpx;
-  padding: 8rpx 20rpx;
+  gap: 20rpx; /* 10px gap */
+  padding: 8rpx 20rpx; /* 4px 10px */
   background: #f7f7f7;
   border-radius: 60rpx;
-  font-size: 24rpx;
-  color: #000000;
   line-height: 1.2;
+  border: 1rpx solid transparent;
+  box-sizing: border-box;
 }
-/* 选中态 - #FFF3EB 背景 + 0.5px 橙色边框 + 橙色文字 */
+/* 选中态 - #FFF3EB 背景 + 0.5px 橙色边框 + 边框宽度 0.5px Figma */
 .country-item.active {
   background: #fff3eb;
-  border: 1rpx solid #ff6800;
+  border-color: #ff6800;
+}
+.country-item.active .country-name {
   color: #ff6800;
 }
-.country-flag {
-  font-size: 24rpx;
+/* 国家图标 - Figma 18x13 / 18x14 矩形, 圆角 2px,不是圆形 */
+.country-icon {
+  width: 36rpx;
+  height: 26rpx;
+  border-radius: 4rpx; /* 2px */
+  flex-shrink: 0;
+  display: block;
 }
 /* 文字 12px Medium */
 .country-name {
   font-size: 24rpx;
   font-weight: 500;
+  color: #000000;
 }
 </style>

pages/products/products.vue

@@ -75,6 +75,7 @@ import ProductGrid from './components/ProductGrid.vue'
 import FilterDrawer from './components/FilterDrawer.vue'
 
 import { getCountries, getCategories, getTagGroups, getGoods } from '@/api/public.js'
+import { buildUrl } from '@/api/request.js'
 
 export default {
   components: {
@@ -129,7 +130,7 @@ export default {
         const countries = countriesData.map((c) => ({
           id: c.id,
           name: c.countryName,
-          flag: this.codeToEmoji(c.countryIcon)
+          icon: buildUrl(c.countryIcon || '')
         }))
         this.countries = countries