diff --git a/pages/index/cart.vue b/pages/index/cart.vue index 2a114a8..45a3780 100644 --- a/pages/index/cart.vue +++ b/pages/index/cart.vue @@ -15,10 +15,10 @@ 件商品 - - @@ -35,6 +35,12 @@ @tap.stop="onSelectSingle(item.id)" /> + + 该商品已下架 + + + 该商品无库存 + cart.editMode), list: computed(() => cart.list), selectedList: [], selectedIds: computed(() => cart.selectedIds), @@ -127,6 +133,11 @@ cart.selectSingle(id); } + // 编辑、取消 + function onChangeEditMode(flag) { + cart.onChangeEditMode(flag); + } + // 全选 function onSelectAll() { cart.selectAll(!state.isAllSelected); @@ -172,7 +183,7 @@ throw new Error('未找到商品信息'); } // 获取所有商品的配送方式列表 - const deliveryTypesList = spuList.map(item => item.deliveryTypes); + const deliveryTypesList = spuList.map((item) => item.deliveryTypes); // 检查配送方式冲突 const hasConflict = checkDeliveryConflicts(deliveryTypesList); if (hasConflict) { @@ -202,9 +213,7 @@ for (let j = i + 1; j < deliveryTypesList.length; j++) { const nextTypes = deliveryTypesList[j]; // 检查是否没有交集(即冲突) - const hasNoIntersection = !currentTypes.some(type => - nextTypes.includes(type), - ); + const hasNoIntersection = !currentTypes.some((type) => nextTypes.includes(type)); if (hasNoIntersection) { return true; } @@ -270,6 +279,22 @@ .goods-box { background-color: #fff; + position: relative; + } + // 下架商品 + .down-box { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: rgba(#fff, 0.8); + z-index: 2; + display: flex; + justify-content: center; + align-items: center; + color: #999; + font-size: 32rpx; } } } diff --git a/sheep/store/cart.js b/sheep/store/cart.js index edde779..ab96a2b 100644 --- a/sheep/store/cart.js +++ b/sheep/store/cart.js @@ -4,26 +4,29 @@ import CartApi from '@/sheep/api/trade/cart'; const cart = defineStore({ id: 'cart', state: () => ({ - list: [], // 购物车列表 + list: [], // 购物车列表(invalidList + validList) selectedIds: [], // 已选列表 isAllSelected: false, // 是否全选 totalPriceSelected: 0, // 选中项总金额 + newList: [], // 除去已下架的购物车列表(validList) + editMode: false, // 是否是编辑模式 }), actions: { // 获取购物车列表 async getList() { const { data, code } = await CartApi.getCartList(); if (code === 0) { - this.list = data.validList; + this.list = [...data.validList, ...data.invalidList]; + this.newList = data.validList; // 计算各种关联属性 this.selectedIds = []; this.isAllSelected = true; this.totalPriceSelected = 0; - this.list.forEach((item) => { + (this.editMode ? this.list : this.newList).forEach((item) => { if (item.selected) { this.selectedIds.push(item.id); - this.totalPriceSelected += item.count * item.sku.price; + this.totalPriceSelected += item.count * item.sku?.price; } else { this.isAllSelected = false; } @@ -31,6 +34,12 @@ const cart = defineStore({ } }, + onChangeEditMode(flag) { + this.editMode = flag; + this.selectedIds = []; + this.getList(); + }, + // 添加购物车 async add(goodsInfo) { // 添加购物项 @@ -84,7 +93,7 @@ const cart = defineStore({ async selectAll(flag) { const { code } = await CartApi.updateCartSelected({ ids: this.list.map((item) => item.id), - selected: flag + selected: flag, }); if (code === 0) { await this.getList();