Skip to content

Commit 9c0bdfe

Browse files
committed
chore(cart): 购物车添加商品是否下架状态,同步调整全选响应情况
1 parent 4d080d6 commit 9c0bdfe

3 files changed

Lines changed: 62 additions & 6 deletions

File tree

src/stores/cart-store.ts

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,15 +30,25 @@ export const useCartStore = defineStore('cartStore', () => {
3030

3131
const pendingQuantityUpdates = new Map<string, PendingQuantityUpdate>()
3232

33+
const isSelectableItem = (item: CartItem) => String(item.status ?? '') === '0'
34+
35+
const selectableItems = computed(() => {
36+
return filteredItems.value.filter((item) => isSelectableItem(item))
37+
})
38+
3339
const isAllSelected = computed({
3440
get: () => {
35-
if (filteredItems.value.length === 0) {
41+
if (selectableItems.value.length === 0) {
3642
return false
3743
}
38-
return selectedItems.value.length === filteredItems.value.length
44+
return selectableItems.value.every((item) => selectedItems.value.includes(item.goodsId))
3945
},
4046
set: (checked: boolean) => {
41-
selectedItems.value = checked ? filteredItems.value.map((item) => item.goodsId) : []
47+
if (!checked) {
48+
selectedItems.value = []
49+
return
50+
}
51+
selectedItems.value = selectableItems.value.map((item) => item.goodsId)
4252
},
4353
})
4454

@@ -100,6 +110,7 @@ export const useCartStore = defineStore('cartStore', () => {
100110
if (item.num > latestAmount) {
101111
item.num = latestAmount
102112
}
113+
item.status = detailResp.data?.status ?? item.status
103114
} catch (error) {
104115
console.error(`获取商品 ${item.goodsId} 库存失败:`, error)
105116
}
@@ -119,7 +130,11 @@ export const useCartStore = defineStore('cartStore', () => {
119130
console.log('购物车商品列表:', cartItems.value)
120131

121132
const validIds = new Set(mergedItems.map((item) => item.goodsId))
133+
const selectableIds = new Set(
134+
mergedItems.filter((item) => isSelectableItem(item)).map((item) => item.goodsId),
135+
)
122136
selectedItems.value = selectedItems.value.filter((id) => validIds.has(id))
137+
selectedItems.value = selectedItems.value.filter((id) => selectableIds.has(id))
123138
} catch (error) {
124139
console.error('获取购物车失败:', error)
125140
ElMessage.error(`获取购物车失败: ${error}`)
@@ -146,6 +161,7 @@ export const useCartStore = defineStore('cartStore', () => {
146161
}
147162

148163
const toggleSelectAll = (checked: boolean) => {
164+
console.log(`全选状态改变: ${checked}`)
149165
isAllSelected.value = checked
150166
}
151167

src/views/shop-cart/index.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,9 +113,9 @@ const {
113113
clothingTotal,
114114
dailyTotal,
115115
checkoutDialogVisible,
116-
isAllSelected,
117116
isSettling,
118117
isLoading,
118+
isAllSelected,
119119
} = storeToRefs(cartStore)
120120
121121
const {

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

Lines changed: 42 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
<template>
2-
<article :class="['cart-item', { 'is-selected': selected }]">
3-
<el-checkbox :model-value="selected" @change="onSelectChange" />
2+
<article
3+
:class="['cart-item', { 'is-selected': selected && !isOffShelf, 'is-off-shelf': isOffShelf }]"
4+
>
5+
<el-checkbox
6+
:model-value="selected && !isOffShelf"
7+
:disabled="isOffShelf"
8+
@change="onSelectChange"
9+
/>
410

511
<div class="item-image-wrap">
612
<img :src="item.imageUrlUrl" :alt="item.goodsName" class="item-image" />
@@ -18,6 +24,7 @@
1824
库存剩余:
1925
<span :class="{ 'low-stock': item.limitNum <= 5 }">{{ item.limitNum }}</span>
2026
</p>
27+
<p v-if="isOffShelf" class="item-tip">该商品已下架,暂不可结算</p>
2128
</div>
2229

2330
<div class="item-action">
@@ -38,6 +45,7 @@
3845
</template>
3946

4047
<script setup lang="ts">
48+
import { computed, watch } from 'vue'
4149
import CartoonStepper from '@/views/home/components/cartoon-stepper.vue'
4250
import type { CartItem } from '@/api/cart.api'
4351
import Coins from '@/components/coins/index.vue'
@@ -55,9 +63,26 @@ const emit = defineEmits<{
5563
remove: [goodsId: string]
5664
}>()
5765
66+
const isOffShelf = computed(() => String(props.item.status ?? '') !== '0')
67+
68+
// Keep parent selection state in sync when an item becomes off-shelf.
69+
watch(
70+
() => [isOffShelf.value, props.selected],
71+
([offShelf, selected]) => {
72+
if (offShelf && selected) {
73+
emit('toggle-select', props.item.goodsId, false)
74+
}
75+
},
76+
{ immediate: true },
77+
)
78+
5879
const formatPrice = (row: { price: number }) => +row.price.toFixed(2)
5980
6081
const onSelectChange = (checked: string | number | boolean) => {
82+
if (isOffShelf.value) {
83+
emit('toggle-select', props.item.goodsId, false)
84+
return
85+
}
6186
emit('toggle-select', props.item.goodsId, Boolean(checked))
6287
}
6388
@@ -96,6 +121,15 @@ const onQuantityChange = (value: number) => {
96121
box-shadow: 0 8px 22px rgba(64, 158, 255, 0.1);
97122
}
98123
124+
.cart-item.is-off-shelf {
125+
opacity: 0.68;
126+
background: #fafafa;
127+
}
128+
129+
.cart-item.is-off-shelf:hover {
130+
box-shadow: none;
131+
}
132+
99133
.cart-item :deep(.el-checkbox__input) {
100134
transform: scale(1.35);
101135
}
@@ -156,6 +190,12 @@ const onQuantityChange = (value: number) => {
156190
color: #6b7280;
157191
}
158192
193+
.item-tip {
194+
margin: 0;
195+
font-size: 12px;
196+
color: #f56c6c;
197+
}
198+
159199
.low-stock {
160200
color: #f56c6c;
161201
font-weight: 700;

0 commit comments

Comments
 (0)