admin123
/
shop-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(cart): 使用 `cellId` 替换 `id` 作为商品唯一标识符 

为了与后端数据结构保持一致，将商品唯一标识符从 `id` 改为 `cellId`。这涉及修改购物车相关函数和组件中的引用，确保代码逻辑正确。
This commit is contained in:
dzq 2025-05-16 10:21:22 +08:00
parent 67addd582f
commit 7aed962049
3 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/pages/product/ProductList.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { publicPath } from "@/common/utils/path" import { publicPath } from "@/common/utils/path"
import { useCartStore } from "@/pinia/stores/cart" import { useCartStore } from "@/pinia/stores/cart"
import { useProductStore } from "@/pinia/stores/product" import { Product, useProductStore } from "@/pinia/stores/product"
import { throttle } from "lodash-es" import { throttle } from "lodash-es"
import { storeToRefs } from "pinia" import { storeToRefs } from "pinia"
import VanPopup from "vant/es/popup" import VanPopup from "vant/es/popup"
@ -86,16 +86,16 @@ function showProductDetail(productId: number) {
showDetailPopup.value = true showDetailPopup.value = true
} }
function handleAddToCart(product: any) { function handleAddToCart(product: Product) {
cartStore.addToCart(product) cartStore.addToCart(product)
} }
function handleRemoveFromCart(product: any) { function handleRemoveFromCart(product: Product) {
cartStore.removeFromCart(product.id) cartStore.removeFromCart(product.cellId)
} }
function getCartItemCount(productId: number) { function getCartItemCount(cellId: number) {
const item = cartItems.value.find(item => item.product.id === productId) const item = cartItems.value.find(item => item.product.cellId === cellId)
return item ? item.quantity : 0 return item ? item.quantity : 0
} }
@ -171,9 +171,9 @@ watch(() => route.path, (newPath) => {
还剩{{ product.stock }}份 还剩{{ product.stock }}份
</span> </span>
<div class="cart-actions"> <div class="cart-actions">
<van-button v-if="getCartItemCount(product.id)" size="mini" icon="minus" <van-button v-if="getCartItemCount(product.cellId)" size="mini" icon="minus"
@click.stop="handleRemoveFromCart(product)" /> @click.stop="handleRemoveFromCart(product)" />
<span v-if="getCartItemCount(product.id)" class="cart-count">{{ getCartItemCount(product.id) }}</span> <span v-if="getCartItemCount(product.cellId)" class="cart-count">{{ getCartItemCount(product.cellId) }}</span>
<van-button size="mini" type="primary" class="add-cart-btn" icon="plus" <van-button size="mini" type="primary" class="add-cart-btn" icon="plus"
:disabled="product.stock === 0" @click.stop="handleAddToCart(product)" :style="{ :disabled="product.stock === 0" @click.stop="handleAddToCart(product)" :style="{
opacity: product.stock === 0 ? 0.6 : 1, opacity: product.stock === 0 ? 0.6 : 1,

7
src/pages/product/components/cart.vue
View File

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { useCartStore } from "@/pinia/stores/cart" import { useCartStore } from "@/pinia/stores/cart"
import { Product } from "@/pinia/stores/product"
import { storeToRefs } from "pinia" import { storeToRefs } from "pinia"
import { showConfirmDialog } from "vant" import { showConfirmDialog } from "vant"
import { useRouter } from "vue-router" import { useRouter } from "vue-router"
@ -15,12 +16,12 @@ const { cartItems, totalPrice, totalQuantity } = storeToRefs(cartStore)// 处理
function handleClose() { function handleClose() {
emit("cartClose") emit("cartClose")
} }
function handleAddToCart(product: any) { function handleAddToCart(product: Product) {
cartStore.addToCart(product) cartStore.addToCart(product)
} }
function handleRemoveFromCart(product: any) { function handleRemoveFromCart(product: Product) {
cartStore.removeFromCart(product.id) cartStore.removeFromCart(product.cellId)
} }
function handleClearCart() { function handleClearCart() {

6
src/pinia/stores/cart.ts
View File

@ -10,7 +10,7 @@ export const useCartStore = defineStore('cart', () => {
if (quantity > product.stock && product.stock !== -1) { if (quantity > product.stock && product.stock !== -1) {
return false; return false;
} }
const existingItem = cartItems.value.find(item => item.product.id === product.id) const existingItem = cartItems.value.find(item => item.product.cellId === product.cellId)
if (existingItem) { if (existingItem) {
if (existingItem.quantity + quantity > product.stock && product.stock !== -1) { if (existingItem.quantity + quantity > product.stock && product.stock !== -1) {
return false; return false;
@ -23,8 +23,8 @@ export const useCartStore = defineStore('cart', () => {
} }
// 移除商品 // 移除商品
const removeFromCart = (productId: number, quantity: number = 1) => { const removeFromCart = (cellId: number, quantity: number = 1) => {
const index = cartItems.value.findIndex(item => item.product.id === productId) const index = cartItems.value.findIndex(item => item.product.cellId === cellId)
if (index !== -1) { if (index !== -1) {
if (cartItems.value[index].quantity <= quantity) { if (cartItems.value[index].quantity <= quantity) {
cartItems.value.splice(index, 1) cartItems.value.splice(index, 1)