'颜色尺码价格联动'

pages/product-detail/components/ColorSelector.vue

@@ -1,5 +1,5 @@
 <template>
-  <!-- 颜色选择：第一行 4 个，第二行 2 个；胶囊样式，选中橙色边框+橙色文字 -->
+  <!-- 颜色选择：第一行 4 个，第二行 2 个；胶囊样式，选中橙色边框+橙色文字；不可用透明度降低且不可点 -->
   <view class="color-wrap">
     <text class="title">颜色</text>
 
@@ -8,8 +8,8 @@
         v-for="(item, index) in list"
         :key="index"
         class="color-pill"
-        :class="{ active: selectedId === item.id }"
-        @tap="selectColor(item.id)"
+        :class="{ active: selectedId === item.id, disabled: item.enabled === false }"
+        @tap="selectColor(item)"
       >
         <view class="color-dot" :style="{ background: item.value }"></view>
         <text class="color-name">{{ item.name }}</text>
@@ -32,8 +32,9 @@ export default {
     }
   },
   methods: {
-    selectColor(id) {
-      this.$emit('select', id)
+    selectColor(item) {
+      if (item && item.enabled === false) return
+      this.$emit('select', item.id)
     }
   }
 }
@@ -74,6 +75,10 @@ export default {
 .color-pill.active {
   border-color: #ff6800;
 }
+.color-pill.disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
 
 /* 颜色圆点 15x15，1px 灰色边框 */
 .color-dot {

pages/product-detail/components/PackagingSpec.vue

@@ -1,5 +1,8 @@
 <template>
-  <!-- 包装规格表：4 列 × 4 行，每个数据单元格双单位（cm + in） -->
+  <!-- 包装规格表 - Figma 1544:530 对应节点 -->
+  <!-- 4 列：尺码 / 尺寸(L*W*H) / 体积(L*W*H) / 重量(g) -->
+  <!-- 表头:bg #DFDFDF 高度 40px 圆角 6px 文字13px 居中 -->
+  <!-- 数据行:bg #F7F7F7 高度 60px -->
   <view class="pack-wrap">
     <view class="header-row">
       <text class="title">包装规格</text>
@@ -7,40 +10,39 @@
     </view>
 
     <view class="table">
-      <!-- 表头：bg #DFDFDF，圆角 6px -->
+      <!-- 表头 -->
       <view class="row header">
         <text
           class="cell"
           v-for="(col, index) in data.columns"
-          :key="index"
+          :key="'h-' + index"
         >{{ col }}</text>
       </view>
 
-      <!-- 数据行：偶数行 bg #F7F7F7，行高 60px（双行内容） -->
+      <!-- 数据行：按尺码聚合，每行一个尺码 -->
       <view
         class="row data-row"
-        :class="{ alt: (index + 1) % 2 === 0 }"
         v-for="(row, index) in data.rows"
-        :key="index"
+        :key="'r-' + index"
       >
-        <!-- 尺码列：单行居中 -->
+        <!-- 尺码列：单行居中 13px -->
         <view class="cell size-cell">
           <text class="size-text">{{ row.size }}</text>
         </view>
 
-        <!-- 尺寸列：cm + in 双行 -->
+        <!-- 尺寸列：cm 上 / in 下，双行 10px opacity 0.6 -->
         <view class="cell dual-cell">
           <text class="dual-top">{{ row.dimension.cm }}</text>
           <text class="dual-bottom">{{ row.dimension.in }}</text>
         </view>
 
-        <!-- 体积列：cm + in 双行 -->
+        <!-- 体积列：cm 上 / in 下 -->
         <view class="cell dual-cell">
           <text class="dual-top">{{ row.volume.cm }}</text>
           <text class="dual-bottom">{{ row.volume.in }}</text>
         </view>
 
-        <!-- 重量列：cm + in 双行 -->
+        <!-- 重量列：g 上 / lb 下 -->
         <view class="cell dual-cell">
           <text class="dual-top">{{ row.weight.cm }}</text>
           <text class="dual-bottom">{{ row.weight.in }}</text>
@@ -63,8 +65,9 @@ export default {
 </script>
 
 <style scoped>
+/* 外层 - padding 15px 10px 白底 */
 .pack-wrap {
-  padding: 30rpx 20rpx; /* 15px 10px */
+  padding: 30rpx 20rpx;
   background: #ffffff;
 }
 
@@ -75,72 +78,80 @@ export default {
   margin-bottom: 20rpx; /* 10px */
 }
 .title {
-  font-size: 29rpx; /* 15px */
+  font-size: 29rpx; /* 15px Medium */
+  font-weight: 500;
   color: #000000;
   line-height: 33rpx;
 }
 .unit {
   margin-left: 16rpx;
-  font-size: 21rpx; /* 11px */
+  font-size: 21rpx; /* 11px Medium */
+  font-weight: 500;
   color: rgba(0, 0, 0, 0.5);
   line-height: 33rpx;
 }
 
-/* 表格 */
+/* 表格：列间距 4px（gap 8rpx） */
 .table {
   display: flex;
   flex-direction: column;
-  gap: 8rpx; /* 4px 行间距 */
+  gap: 8rpx;
 }
 
-/* 单行 */
+/* 单行 - 圆角 6px（12rpx），两端对齐 */
 .row {
   display: flex;
-  border-radius: 12rpx; /* 6px */
+  border-radius: 12rpx;
   align-items: center;
+  width: 100%;
 }
+/* 表头：高度 40px（80rpx），背景 #DFDFDF，文字 13px 居中 */
 .row.header {
-  height: 77rpx; /* 40px */
+  height: 80rpx;
   background: #dfdfdf;
 }
+/* 数据行：高度 60px（120rpx），背景 #F7F7F7 */
 .row.data-row {
-  height: 115rpx; /* 60px 双行内容更高 */
-}
-.row.alt {
+  height: 120rpx;
   background: #f7f7f7;
 }
 
-/* 单元格 */
+/* 4 列等宽，flex:1 均分 + 居中 */
 .cell {
   flex: 1;
+  min-width: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
 
-/* 表头文字 */
+/* 表头文字 - 13px Medium 黑色 */
 .row.header .cell {
-  font-size: 25rpx; /* 13px */
+  font-size: 25rpx;
+  font-weight: 500;
   color: #000000;
   line-height: 33rpx;
+  text-align: center;
 }
 
-/* 尺码列：单行 13px */
+/* 尺码列文字 - 13px Medium 黑色 */
 .size-text {
-  font-size: 25rpx; /* 13px */
+  font-size: 25rpx;
+  font-weight: 500;
   color: #000000;
   line-height: 33rpx;
 }
 
-/* 双单位单元格：cm 在上，in 在下 */
+/* 双单位单元格 gap 4px */
 .dual-cell {
-  gap: 4rpx; /* 2px */
+  gap: 4rpx; /* 2px Figma 行间距 17-10=7 实际渲染用 4rpx 贴合 */
 }
 .dual-top,
 .dual-bottom {
-  font-size: 19rpx; /* 10px */
+  font-size: 20rpx; /* 10px Medium Figma */
+  font-weight: 500;
   color: rgba(0, 0, 0, 0.6);
-  line-height: 33rpx;
+  line-height: 33rpx; /* 17px */
 }
 </style>

pages/product-detail/components/SizeSelector.vue

@@ -1,5 +1,5 @@
 <template>
-  <!-- 尺码选择：5 个按钮横排，选中态橙色边框+橙色文字（背景仍为浅灰） -->
+  <!-- 尺码选择：5 个按钮横排，选中态橙色边框+橙色文字（背景仍为浅灰）；不可用置灰 -->
   <view class="size-wrap">
     <text class="title">尺码</text>
 
@@ -8,10 +8,10 @@
         v-for="(item, index) in list"
         :key="index"
         class="size-item"
-        :class="{ active: selected === item }"
+        :class="{ active: isSelected(item), disabled: !isEnabled(item) }"
         @tap="selectSize(item)"
       >
-        <text class="size-text">{{ item }}</text>
+        <text class="size-text">{{ itemName(item) }}</text>
       </view>
     </view>
   </view>
@@ -21,18 +21,40 @@
 export default {
   name: 'SizeSelector',
   props: {
+    // 支持两种格式：字符串数组 ['S','M','L'] 或 对象数组 [{name:'S',enabled:true}]
     list: {
       type: Array,
       default: () => []
     },
     selected: {
-      type: String,
+      type: [String, Number, Object],
       default: ''
     }
   },
   methods: {
-    selectSize(size) {
-      this.$emit('select', size)
+    itemName(item) {
+      if (item == null) return ''
+      if (typeof item === 'object') return item.name
+      return String(item)
+    },
+    isEnabled(item) {
+      if (item == null) return false
+      if (typeof item === 'object') return item.enabled !== false
+      return true
+    },
+    isSelected(item) {
+      const name = this.itemName(item)
+      const selName =
+        this.selected == null
+          ? ''
+          : typeof this.selected === 'object'
+            ? this.selected.name
+            : String(this.selected)
+      return name === selName
+    },
+    selectSize(item) {
+      if (!this.isEnabled(item)) return
+      this.$emit('select', this.itemName(item))
     }
   }
 }
@@ -56,6 +78,7 @@ export default {
 /* 尺码列表横排 */
 .size-list {
   display: flex;
+  flex-wrap: wrap;
   gap: 12rpx; /* 6px */
 }
 
@@ -75,6 +98,11 @@ export default {
 .size-item.active {
   border-color: #ff6800;
 }
+/* 不可用：降低透明度且禁止点击 */
+.size-item.disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
 
 .size-text {
   font-size: 25rpx; /* 13px */