update：购物车页面聚合了店铺

pages/index/cart.vue

@@ -19,36 +19,37 @@
 					</button>
 				</view>
 			</view>
-
+			<view class="ss-m-t-70">
+				
+			</view>
 			<!-- 内容 -->
-			<view class="cart-content ss-flex-1 ss-p-x-30 ss-m-b-40">
-				<view class="ss-m-b-14 bg-white goods-box">
-					<view class="title-text ss-p-x-10 ss-p-t-20 ss-flex ss-col-center">
-						<label class="check-box ss-flex ss-col-center" @tap="onSelectSingle()">
-							<radio color="var(--ui-BG-Main)"
-								style="transform: scale(0.8)"  />
-						</label>
-						<text>中星旗舰店</text>
-					</view>
-					<view class="ss-r-10 " v-for="item in state.list" :key="item.id">
-						<view class="ss-flex ss-col-center">
-							<label class="check-box ss-flex ss-col-center ss-p-l-10" @tap="onSelectSingle(item.id)">
-								<radio :checked="state.selectedIds.includes(item.id)" color="var(--ui-BG-Main)"
-									style="transform: scale(0.8)" @tap.stop="onSelectSingle(item.id)" />
-							</label>
-							<s-goods-item :title="item.spu.name" :img="item.spu.picUrl || item.goods.image"
-								:price="item.sku.price"
-								:skuText="item.sku.properties.length>1? item.sku.properties.reduce((items2,items)=>items2.valueName+' '+items.valueName):item.sku.properties[0].valueName"
-								priceColor="#FF3000" :titleWidth="400">
-								<template v-if="!state.editMode" v-slot:tool>
-									<su-number-box :min="0" :max="item.sku.stock" :step="1" v-model="item.count"
-										@change="onNumberChange($event, item)"></su-number-box>
-								</template>
-							</s-goods-item>
-						</view>
-					</view>
-				</view>
+			<view class="cart-content ss-flex-1 ss-p-x-30" v-for="(shopItems, shopName, index) in processedValidList" :key="shopName">
+			  <view class="ss-m-b-14 bg-white goods-box">
+			    <view class="title-text ss-p-x-10 ss-p-t-20 ss-flex ss-col-center">
+			      <!-- <label class="check-box ss-flex ss-col-center" @tap="onSelectSingle()">
+			        <radio color="var(--ui-BG-Main)" style="transform: scale(0.8)" />
+			      </label> -->
+			      <text class="ss-m-l-10">{{ shopName }}</text>
+			    </view>
+			    <!-- 注意这里v-for的对象是shopItems -->
+			    <view class="ss-r-10" v-for="(product, productIndex) in shopItems" :key="product.id">
+			      <view class="ss-flex ss-col-center">
+			        <label class="check-box ss-flex ss-col-center ss-p-l-10" @tap="onSelectSingle(product.id)">
+			          <radio :checked="state.selectedIds.includes(product.id)" color="var(--ui-BG-Main)" style="transform: scale(0.8)" @tap.stop="onSelectSingle(product.id)" />
+			        </label>
+			        <s-goods-item :title="product.spu.name" :img="product.spu.picUrl || product.goods.image" :price="product.sku.price"
+			          :skuText="product.sku.properties.length > 1 ? product.sku.properties.reduce((items2, items) => items2.valueName + ' ' + items.valueName) : product.sku.properties[0].valueName"
+			          priceColor="#FF3000" :titleWidth="400">
+			          <template v-if="!state.editMode" v-slot:tool>
+			            <su-number-box :min="0" :max="product.sku.stock" :step="1" v-model="product.count" @change="onNumberChange($event, product)"></su-number-box>
+			          </template>
+			        </s-goods-item>
+			      </view>
+			    </view>
+			  </view>
 			</view>
+
+			
 			<!-- 底部 -->
 			<su-fixed bottom :val="48" placeholder v-if="state.list.length > 0" :isInset="false">
 				<view class="cart-footer ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom">
@@ -96,11 +97,31 @@
 	const state = reactive({
 		editMode: false,
 		list: computed(() => cart.list),
+		shopList: computed(() => cart.shopNameMap),
+		skuList: computed(() => cart.shopSkuMap),
 		selectedList: [],
 		selectedIds: computed(() => cart.selectedIds),
 		isAllSelected: computed(() => cart.isAllSelected),
 		totalPriceSelected: computed(() => cart.totalPriceSelected),
 	});
+	// 处理后端返回来的数据
+	const processedValidList = computed(() => {
+	  // 初始化一个空对象，用于按店铺分组商品
+	    const groups = {};
+	    // 遍历validList，将每个商品分配到对应的店铺分组中
+	    state.list.forEach(item => {
+	      // 找到当前SKU所属的店铺ID
+	      const shopId = Object.keys(state.skuList).find(key => state.skuList[key].includes(item.sku.id));
+	      const shopName = state.shopList[shopId] || '未知店铺';
+	      // 如果该店铺分组不存在，则初始化
+	      if (!groups[shopName]) {
+	        groups[shopName] = [];
+	      }
+	      // 将当前商品加入到对应店铺的分组中
+	      groups[shopName].push(item);
+	    });
+	    return groups;
+	});
 	// 单选选中
 	function onSelectSingle(id) {
 		console.log('单选')
@@ -204,13 +225,14 @@
 				border-radius: 40rpx;
 			}
 		}
-
+		
+		
 		.cart-content {
-			margin-top: 70rpx;
 
 			.goods-box {
 				border-radius: 20rpx;
 			}
 		}
+
 	}
 </style>

sheep/store/cart.js

@@ -4,18 +4,22 @@ import CartApi from '@/sheep/api/trade/cart';
 const cart = defineStore({
   id: 'cart',
   state: () => ({
+	shopNameMap:[],
+	shopSkuMap:[],
     list: [], // 购物车列表
     selectedIds: [], // 已选列表
     isAllSelected: false, // 是否全选
     totalPriceSelected: 0, // 选中项总金额
+	
   }),
   actions: {
     // 获取购物车列表
     async getList() {
       const { data, code } = await CartApi.getCartList();
       if (code === 0) {
-        this.list = data.validList;
-
+        this.list = data.validList
+		this.shopSkuMap = data.shopSkuMap
+		this.shopNameMap = data.shopNameMap
         // 计算各种关联属性
         this.selectedIds = [];
         this.isAllSelected = true;