chore(cart): 购物车添加商品是否下架状态，同步调整全选响应情况

Author: dodolalorc

src/stores/cart-store.ts

@@ -30,15 +30,25 @@ export const useCartStore = defineStore('cartStore', () => {
 
   const pendingQuantityUpdates = new Map<string, PendingQuantityUpdate>()
 
+  const isSelectableItem = (item: CartItem) => String(item.status ?? '') === '0'
+
+  const selectableItems = computed(() => {
+    return filteredItems.value.filter((item) => isSelectableItem(item))
+  })
+
   const isAllSelected = computed({
     get: () => {
-      if (filteredItems.value.length === 0) {
+      if (selectableItems.value.length === 0) {
         return false
       }
-      return selectedItems.value.length === filteredItems.value.length
+      return selectableItems.value.every((item) => selectedItems.value.includes(item.goodsId))
     },
     set: (checked: boolean) => {
-      selectedItems.value = checked ? filteredItems.value.map((item) => item.goodsId) : []
+      if (!checked) {
+        selectedItems.value = []
+        return
+      }
+      selectedItems.value = selectableItems.value.map((item) => item.goodsId)
     },
   })
 
@@ -100,6 +110,7 @@ export const useCartStore = defineStore('cartStore', () => {
       if (item.num > latestAmount) {
         item.num = latestAmount
       }
+      item.status = detailResp.data?.status ?? item.status
     } catch (error) {
       console.error(`获取商品 ${item.goodsId} 库存失败:`, error)
     }
@@ -119,7 +130,11 @@ export const useCartStore = defineStore('cartStore', () => {
       console.log('购物车商品列表:', cartItems.value)
 
       const validIds = new Set(mergedItems.map((item) => item.goodsId))
+      const selectableIds = new Set(
+        mergedItems.filter((item) => isSelectableItem(item)).map((item) => item.goodsId),
+      )
       selectedItems.value = selectedItems.value.filter((id) => validIds.has(id))
+      selectedItems.value = selectedItems.value.filter((id) => selectableIds.has(id))
     } catch (error) {
       console.error('获取购物车失败:', error)
       ElMessage.error(`获取购物车失败: ${error}`)
@@ -146,6 +161,7 @@ export const useCartStore = defineStore('cartStore', () => {
   }
 
   const toggleSelectAll = (checked: boolean) => {
+    console.log(`全选状态改变: ${checked}`)
     isAllSelected.value = checked
   }
 

src/views/shop-cart/index.vue

@@ -113,9 +113,9 @@ const {
   clothingTotal,
   dailyTotal,
   checkoutDialogVisible,
-  isAllSelected,
   isSettling,
   isLoading,
+  isAllSelected,
 } = storeToRefs(cartStore)
 
 const {

src/views/shop-cart/shop-item/index.vue

@@ -1,6 +1,12 @@
 <template>
-  <article :class="['cart-item', { 'is-selected': selected }]">
-    <el-checkbox :model-value="selected" @change="onSelectChange" />
+  <article
+    :class="['cart-item', { 'is-selected': selected && !isOffShelf, 'is-off-shelf': isOffShelf }]"
+  >
+    <el-checkbox
+      :model-value="selected && !isOffShelf"
+      :disabled="isOffShelf"
+      @change="onSelectChange"
+    />
 
     <div class="item-image-wrap">
       <img :src="item.imageUrlUrl" :alt="item.goodsName" class="item-image" />
@@ -18,6 +24,7 @@
           库存剩余：
           <span :class="{ 'low-stock': item.limitNum <= 5 }">{{ item.limitNum }}</span>
         </p>
+        <p v-if="isOffShelf" class="item-tip">该商品已下架，暂不可结算</p>
       </div>
 
       <div class="item-action">
@@ -38,6 +45,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed, watch } from 'vue'
 import CartoonStepper from '@/views/home/components/cartoon-stepper.vue'
 import type { CartItem } from '@/api/cart.api'
 import Coins from '@/components/coins/index.vue'
@@ -55,9 +63,26 @@ const emit = defineEmits<{
   remove: [goodsId: string]
 }>()
 
+const isOffShelf = computed(() => String(props.item.status ?? '') !== '0')
+
+// Keep parent selection state in sync when an item becomes off-shelf.
+watch(
+  () => [isOffShelf.value, props.selected],
+  ([offShelf, selected]) => {
+    if (offShelf && selected) {
+      emit('toggle-select', props.item.goodsId, false)
+    }
+  },
+  { immediate: true },
+)
+
 const formatPrice = (row: { price: number }) => +row.price.toFixed(2)
 
 const onSelectChange = (checked: string | number | boolean) => {
+  if (isOffShelf.value) {
+    emit('toggle-select', props.item.goodsId, false)
+    return
+  }
   emit('toggle-select', props.item.goodsId, Boolean(checked))
 }
 
@@ -96,6 +121,15 @@ const onQuantityChange = (value: number) => {
   box-shadow: 0 8px 22px rgba(64, 158, 255, 0.1);
 }
 
+.cart-item.is-off-shelf {
+  opacity: 0.68;
+  background: #fafafa;
+}
+
+.cart-item.is-off-shelf:hover {
+  box-shadow: none;
+}
+
 .cart-item :deep(.el-checkbox__input) {
   transform: scale(1.35);
 }
@@ -156,6 +190,12 @@ const onQuantityChange = (value: number) => {
   color: #6b7280;
 }
 
+.item-tip {
+  margin: 0;
+  font-size: 12px;
+  color: #f56c6c;
+}
+
 .low-stock {
   color: #f56c6c;
   font-weight: 700;