'颜色尺码价格联动'

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 */