fix:商品库存不足置灰+提示

pages/detail/serviceDetail.vue

@@ -42,10 +42,15 @@
 
     <!-- 中间菜单列表（可滑动） -->
     <scroll-view class="menu-list" scroll-y="true">
-      <view class="menu-item" v-for="(item, index) in menuList" :key="index">
+      <view
+        class="menu-item"
+        v-for="(item, index) in menuList"
+        :key="index"
+        :class="{ 'out-of-stock': item.stock === 0 }"
+      >
         <view
           class="checkbox"
-          :class="{ checked: item.selected }"
+          :class="{ checked: item.selected, disabled: item.stock === 0 }"
           @click="toggleMenuItem(index)"
         >
           <text v-if="item.selected" class="checkmark">✓</text>
@@ -75,17 +80,21 @@
               <view
                 class="quantity-btn minus"
                 :class="{
-                  disabled: (item.quantity || 0) <= 0,
+                  disabled: (item.quantity || 0) <= 0 || item.stock === 0,
                 }"
                 @click="decreaseQuantity(index)"
                 >-</view
               >
               <text class="quantity-number">{{ item.quantity || 0 }}</text>
-              <view class="quantity-btn plus" @click="increaseQuantity(index)"
+              <view
+                class="quantity-btn plus"
+                :class="{ disabled: item.stock === 0 }"
+                @click="increaseQuantity(index)"
                 >+</view
               >
             </view>
           </view>
+          <view v-if="item.stock === 0" class="stock-tip">库存不足，不可选择</view>
         </view>
       </view>
     </scroll-view>
@@ -275,6 +284,10 @@ export default {
     // 切换菜单项选择状态
     toggleMenuItem(index) {
       const item = this.menuList[index];
+      // 库存不足时不可选择
+      if (item && item.stock === 0) {
+        return;
+      }
       item.selected = !item.selected;
       if (!item.selected) {
         item.quantity = 0;
@@ -287,6 +300,10 @@ export default {
     // 增加数量
     increaseQuantity(index) {
       const item = this.menuList[index];
+      // 库存不足时不可增加数量
+      if (item && item.stock === 0) {
+        return;
+      }
       // 如果未选中，先选中
       if (!item.selected) {
         item.selected = true;
@@ -298,6 +315,10 @@ export default {
     // 减少数量
     decreaseQuantity(index) {
       const item = this.menuList[index];
+      // 库存不足时不处理数量变化
+      if (item && item.stock === 0) {
+        return;
+      }
       const currentQuantity = item.quantity || 0;
       // 确保数量不能小于0
       if (currentQuantity > 0) {
@@ -579,6 +600,10 @@ export default {
     align-items: center;
     position: relative;
 
+    &.out-of-stock {
+      opacity: 0.6;
+    }
+
     .checkbox {
       width: 30rpx;
       height: 30rpx;
@@ -590,6 +615,11 @@ export default {
       margin-right: 19rpx;
       flex-shrink: 0;
 
+      &.disabled {
+        border-color: #dddddd;
+        background-color: #f5f5f5;
+      }
+
       &.checked {
         background-color: #004294;
         border-color: #004294;
@@ -694,6 +724,12 @@ export default {
             font-weight: 500;
             background-color: #ffffff;
             border-radius: 4rpx;
+
+            &.disabled {
+              color: #bbbbbb;
+              border-color: #dddddd;
+              background-color: #f5f5f5;
+            }
           }
 
           .quantity-number {
@@ -706,6 +742,11 @@ export default {
           }
         }
       }
+      .stock-tip {
+        margin-top: 10rpx;
+        font-size: 20rpx;
+        color: #999999;
+      }
     }
   }
 }