多规格弹框组件添加

components/multi/multi.vue

@@ -1,32 +1,22 @@
 <template>
-<!-- 多规格组件弹框 -->
+	<!-- 多规格组件弹框 -->
 	<uni-popup ref="multiPopup" type="bottom" @change="changeMulti">
 		<view class="multiPopup">
-			<view class="shop_open_close"  @click="OpenCoupon()">
+			<view class="shop_open_close"  @click="OpenMulti()">
 				<image src="../../static/order/close.png" mode="widthFix"></image>
 			</view>
 			<view class="multishop">
-				<image class="multishop_img" src="http://mnse8q.natappfree.cc/crmebimage/public/content/2025/03/06/8b55b251f89942fbaac25f72143be0e15jg9vmswjy.png" mode="widthFix"></image>
+				<image class="multishop_img" :src="imageUrls" mode="widthFix"></image>
 				<view class="multishop_text">
-					<view class="multishop_title"><text>蔡长青烟熏鸡肉沙拉（调味沙拉）210g</text></view>
+					<view class="multishop_title"><text>{{titles}}</text></view>
-					<view class="multishop_price">14.90<text class="multishop_name">5.00</text></view>
+					<view class="multishop_price">{{prices}}<text class="multishop_name">{{otPrices}}</text></view>
+					<view class="multishop_spec">已选:<text :class="!specValue?'specValue':''">{{specValue||'请选择规格'}}</text></view>
 				</view>
 			</view>
-			<view class="multishop_list">
+			<view class="multishop_list" v-for="(item,index) in productAttr" :key="index">
-				<view class="multishop_list_title">颜色</view>
+				<view class="multishop_list_title">{{item.attrName}}</view>
 				<view class="multishop_list_item">
-					<view class="multishop_list_name multishop_list_arver">沙漠色</view>
+					<view v-for="(v,i) in item.attrValueList" :key="i" class="multishop_list_name" :class="selectedSpecs[item.attrName] === v?'multishop_list_arver':''"   @click="choose(item.attrName,v)">{{v}}</view>
-					<view class="multishop_list_name">黑色</view>
-					<view class="multishop_list_name">原色</view>
-					<view class="multishop_list_name">白色</view>
-				</view>
-			</view>
-			<view class="multishop_list">
-				<view class="multishop_list_title">容量</view>
-				<view class="multishop_list_item">
-					<view class="multishop_list_name multishop_list_arver">256GB</view>
-					<view class="multishop_list_name">512GB</view>
-					<view class="multishop_list_name">1TB</view>
 				</view>
 			</view>
 			<view style="height: 200rpx;"></view>
@@ -34,16 +24,16 @@
 				<view class="multishop_amount">
 					<view class="multishop_name_amount">选数量</view>
 					<view class="multishop_data_edit">
-						<view class="multishop_data_edit_img border_l" @click="editAmount(1,item)">
+						<view class="multishop_data_edit_img border_l" @click="editAmount(1)">
-							<image class="multishop_data_edit_imgurl"  src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/minus.png" mode="widthFix"></image>
+							<image class="multishop_data_edit_imgurl" :class="amount == 1 ?'opy':''"  src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/minus.png" mode="widthFix"></image>
 						</view>
-						<view class="multishop_data_number">22</view>
+						<view class="multishop_data_number">{{amount}}</view>
-						<view class="multishop_data_edit_img border_r" @click="editAmount(2,item)">
+						<view class="multishop_data_edit_img border_r" @click="editAmount(2)">
 							<image class="multishop_data_edit_imgurl"  src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/add.png" mode="widthFix"></image>
 						</view>
 					</view>
 				</view>
-				<view class="footer_multi_btn">确定</view>
+				<view class="footer_multi_btn" @click="specConfirm">确定</view>
 			</view>
 		</view>
 	</uni-popup>
@@ -51,15 +41,165 @@
 
 <script setup>
 	import { loads } from '@/utils/index.js'
-	import { frontproduct } from '@/server/api';
+	import { frontproduct,skudetail,cartsave,frontcartcount } from '@/server/api';
-	import { computed,ref,onMounted,defineEmits } from 'vue';
+	import { computed,ref,onMounted,defineEmits,watch } from 'vue';
 	import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
 	import { storeToRefs } from 'pinia';//实现解构付值
 	import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
-	import { skudetail,cartsave } from '@/server/api.js'
 	const counterStore = useCounterStore(); // 使用 Store
 	//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
-	const { token } = storeToRefs(counterStore);
+	const { token,cartcount } = storeToRefs(counterStore);
+	const multiPopup = ref(null);
+	const multiShow = ref(false);
+	const show = ref(false);
+	const emit = defineEmits(['add-success', 'add-error']);
+	const productAttr = ref([]);
+	const productValue = ref([]);
+	const titles = ref("");
+	const prices = ref("");
+	const otPrices = ref("");
+	const imageUrls = ref("");
+	const amount = ref(1);
+	// 当前选中的规格
+	const selectedSpecs = ref("")
+	const specValue = ref("");
+	// 当前匹配的SKU
+	const currentSku = ref({})
+	const changeMulti = (e)=>{
+		multiShow.value = e.show;
+		show.value = e.show;
+	}
+	const OpenMulti =() =>{
+		multiShow.value ? multiPopup.value.close():multiPopup.value.open()
+	}
+	const props = defineProps({
+		shopitem:{
+			type:Object,
+			default:{}
+		}
+	})
+	//加购物车
+	const addCart=(i,type)=>{
+		const { jumpIds,productInfo,specType,id,image,storeName,price,otPrice } = i;
+		let specTypes = false;
+		let ids = ""
+		if(type){
+			imageUrls.value = image;
+			titles.value = storeName;
+			prices.value = price;
+			otPrices.value = otPrice;
+			specTypes = specType;
+		}else{
+			specTypes = productInfo.specType;
+		}
+		if(jumpIds){
+			ids = jumpIds;
+		}else{
+			ids = id;
+		}
+		api_skudetail(specTypes,ids);
+	}
+	// 暴露方法给父组件
+	defineExpose({
+	  addCart
+	})
+	//购物车数量
+	const api_frontcartcount=()=>{
+		frontcartcount().then(({data}) => {cartcount.value = data.count;})
+	}
+	//购物车规格详情接口 specTypes 多规格true、单规格false
+	const api_skudetail=(specTypes,ids)=>{
+		loads('', true)
+		return skudetail(ids).then(({data}) => {
+			if(specTypes){
+				uni.hideLoading()
+				amount.value = 1;
+				productAttr.value = data.productAttr;
+				productValue.value = Object.values(data.productValue);
+				multiPopup.value.open();
+			}else{
+				const { productId,id } = data.productValue.默认;
+				api_cartsave(productId,id);
+			}
+		})
+		.catch(({message}) => {
+			uni.hideLoading()
+			uni.showModal({
+				content:message,
+				showCancel: false
+			})
+		})
+	}
+	//选择多规格
+	const choose = (name,value)=>{
+		  selectedSpecs.value = { 
+		     ...selectedSpecs.value, 
+		     [name]: value 
+		   }
+		   const valuesArray = Object.values(selectedSpecs.value).toString();
+		   specValue.value = valuesArray;
+		   productValue.value.forEach(item=>{
+		   		if(valuesArray == item.suk){
+					if(item.image){
+						imageUrls.value = item.image
+					}
+					if(item.price){
+						prices.value = item.price
+					}
+					currentSku.value = item
+		   		}
+		   }) 
+	}
+	const specConfirm = ()=>{
+		 if(productAttr.value.length !== Object.values(selectedSpecs.value).length){
+			 uni.showToast({
+			 	title:'请选择规格',
+				icon:'none'
+			 })
+			 return false
+		 }
+		 api_cartsave(currentSku.value.productId,currentSku.value.id);
+	}
+	const api_cartsave = (productId,productAttrUnique) =>{
+		const params = {
+			cartNum:amount.value,
+			productId,
+			productAttrUnique
+		}
+		return cartsave(params).then(({message})=>{
+			uni.hideLoading()
+			uni.showToast({
+				title:'添加购物车成功',
+				icon:'none',
+				success: () => {
+					emit('add-success', message)
+					api_frontcartcount();
+					if(multiShow.value){
+						multiPopup.value.close()
+					}
+				}
+			})
+		})
+		
+		.catch(({message}) => {
+			emit('add-error', message)
+			uni.hideLoading()
+			uni.showModal({
+				content:message,
+				showCancel: false
+			})
+		})
+	}
+	const editAmount = (type) =>{
+		if(type == 1){
+			if(amount.value == 1) return false;
+			amount.value = amount.value - 1;
+		}else{
+			amount.value = amount.value + 1;
+		}
+	}
+	//生命周期钩子
+	onMounted(() => {});
 </script>
 
 <style lang="scss">
@@ -101,7 +241,7 @@
 					color: #333;
 					font-weight: 500;
 					margin-top: 5rpx;
-					min-height: 115rpx;
+					min-height: 75rpx;
 				}
 				.multishop_title text{
 					overflow: hidden;
@@ -127,6 +267,17 @@
 						margin-right: 5rpx;
 					}
 				}
+				.multishop_spec{
+					color: #333333;
+					font-size: 26rpx;
+					margin-top: 15rpx;
+				}
+				.multishop_spec text{
+					margin-left: 10rpx;
+				}
+				.specValue{
+					color: #999;
+				}
 				.multishop_price::before{
 					content: "¥";
 					font-size: 24rpx;
@@ -174,6 +325,7 @@
 			background-color: #FFFFFF;
 			border-top-left-radius: 20rpx;
 			border-top-right-radius: 20rpx;
+			padding-bottom: 20rpx;
 			.multishop_amount{
 				display: flex;
 				align-items: center;
@@ -239,4 +391,8 @@
 				border-radius: 50rpx;
 			}
 		}
+}
+.opy{
+	opacity: 0.3;
+}
 </style>

components/recomGoods/recomGoods.vue

@@ -85,7 +85,7 @@
 <script setup>
 	import { loads } from '@/utils/index.js'
 	import { frontproduct } from '@/server/api';
-	import { computed,ref,onMounted,defineEmits } from 'vue';
+	import { computed,ref,onMounted,defineEmits,watch} from 'vue';
 	import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
 	import { storeToRefs } from 'pinia';//实现解构付值
 	import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
@@ -99,7 +99,7 @@
 	const pages = ref(0);
 	const limits = ref(10);
 	// 1. 定义可触发的事件名
-	const emit = defineEmits(['updatecart']);
+	const emit = defineEmits(['add-message']);
 	const props = defineProps({
 		apiType:{
 			type:Number,
@@ -149,67 +149,9 @@
 			}
 		}	
 	}
-	
-	
-	
-	
-	
 	//加购物车
 	const addCart=(i,type)=>{
-		const { jumpIds,productInfo,specType,id } = i;
+		emit('add-message',i,type)
-		let specTypes = false;
-		if(type){
-			specTypes = specType;
-		}else{
-			specTypes = productInfo.specType;
-		}
-		api_skudetail(specTypes,id);
-	}
-	//购物车规格详情接口 specTypes 多规格true、单规格false
-	const api_skudetail=(specTypes,id)=>{
-		loads('', true)
-		return skudetail(id).then(({data}) => {
-			if(specTypes){
-				uni.hideLoading()
-				
-				
-				
-				
-			}else{
-				const { id,productId } = data.productValue.默认;
-				api_cartsave(productId,id);
-			}
-		})
-		.catch(({message}) => {
-			uni.hideLoading()
-			uni.showModal({
-				content:message,
-				showCancel: false
-			})
-		})
-	}
-	
-	const api_cartsave = (productId,productAttrUnique) =>{
-		const params = {
-			cartNum:1,
-			productId,
-			productAttrUnique
-		}
-		return cartsave(params).then(({message})=>{
-			uni.hideLoading()
-			uni.showToast({
-				title:'添加购物车成功',
-				icon:'none'
-			})
-			emit('updatecart',true);
-		})
-		.catch(({message}) => {
-			uni.hideLoading()
-			uni.showModal({
-				content:message,
-				showCancel: false
-			})
-		})
 	}
 	//生命周期钩子
 	onMounted(() => {

pages/cart/cart.vue

@@ -122,7 +122,7 @@
 			</view>
 		</view>
 		<template>
-			<recomGoods v-if="iscartListLoaded" :apiType="5" @updatecart="cartType"></recomGoods>
+			<recomGoods v-if="iscartListLoaded" :apiType="5" @add-message="addCart"></recomGoods>
 		</template>
 		<view style="height: 200rpx;"></view>
 		<view class="footer" v-if="cartList.length">
@@ -193,6 +193,12 @@
 		</uni-popup>
 		<!-- 获取定位失败小组件提示 -->
 		<locationOpen></locationOpen>
+		
+		<multi
+		ref="shopData"
+		@add-success="handleAddSuccess"
+		@add-error="handleAddError"
+		></multi>
   </view>
 </template>
 
@@ -200,6 +206,7 @@
 import NP from 'number-precision';
 import { loads } from '@/utils/index.js'
 import recomGoods from '@/components/recomGoods/recomGoods.vue';
+import multi from '@/components/multi/multi.vue'
 import { ref,computed } from 'vue';
 import { useCounterStore } from '@/store/counter'; // 引入Pinia Store
 import { storeToRefs } from 'pinia';//实现解构付值
@@ -228,6 +235,7 @@ const options = ref([
     }
   }
 ]);
+const shopData = ref({});
 const OpenCoupon =() =>{
 	couponShow.value ? couponPopup.value.close():couponPopup.value.open()
 };
@@ -246,7 +254,23 @@ const goDetail= ()=>{
 		url:`/shopProDetail/detail/detail`
 	})
 }
-
+//加购物车
+const addCart=(i,type)=>{
+	shopData.value.addCart(i,type);
+}
+// 加入购物车成功回调
+const handleAddSuccess = (data) => {
+  console.log('加入购物车成功回调:', data)
+  setTimeout(()=>{
+	  api_cartlist(true);
+  },1000)
+  
+  // 可以在这里更新购物车徽章数量等
+}
+// 加入购物车失败回调
+const handleAddError = (error) => {
+  console.error('加入购物车失败回调:', error)
+}
 //购物车有效商品
 const api_cartlist = (e) =>{
 	if(e){
@@ -255,16 +279,12 @@ const api_cartlist = (e) =>{
 		// cartpages.value = 0;
 		iscartShow.value = false;
 	}
-	cartdecs.value = "—— 加载中... ——";
 	// cartpages.value = cartpages.value + 1;
 	loads('', true)
 	const params = {isValid:"1",page:'1',limit:'100'}
 	return cartlist(params).then(({data})=>{
 		uni.hideLoading()
-		cartdecs.value = '—— 上拉加载更多 ——'
+		
-		if(data.list.length < 10){
-			cartdecs.value = '—— 嗷呜，已经到底啦 ——';
-		}
 		//更改全选状态
 		const allSelected = data.list.every(item => item.isSelect === 1);
 		if(allSelected){

pages/classify/classify.vue

@@ -129,11 +129,17 @@
 		</view>
 	</view>
 	<view class="bcg_popup" v-if="show" @click="openCategory()"></view>
+	<multi
+	ref="shopData"
+	@add-success="handleAddSuccess"
+	@add-error="handleAddError"
+	></multi>
   </view>
 </template>
 
 <script setup>
 import { loads } from '@/utils/index.js'
+import multi from '@/components/multi/multi.vue'
 import { computed,ref } from 'vue';
 import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
 import { storeToRefs } from 'pinia';//实现解构付值
@@ -155,6 +161,7 @@ const windowWidth = ref(0);
 const navPopup = ref(null);
 const navShow = ref(false);
 const show = ref(false);
+const shopData = ref({});
 const openCategory = ()=>{
 	show.value = !show.value
 }
@@ -235,58 +242,19 @@ const api_frontproducts = (e,i) => {
 			}
 		}	
 	}
-	//加购物车
+//加购物车
-	const addCart=(i,type)=>{
+const addCart=(i,type)=>{
-		const { jumpIds,productInfo,specType,id } = i;
+	shopData.value.addCart(i,type);
-		let specTypes = false;
+}
-		if(type){
+// 加入购物车成功回调
-			specTypes = specType;
+const handleAddSuccess = (data) => {
-		}else{
+	console.log('加入购物车成功回调:', data)
-			specTypes = productInfo.specType;
+	//可以在这里更新购物车徽章数量等
-		}
+}
-		api_skudetail(specTypes,id);
+// 加入购物车失败回调
-	}
+const handleAddError = (error) => {
-	//购物车规格详情接口 specTypes 多规格true、单规格false
+	console.error('加入购物车失败回调:', error)
-	const api_skudetail=(specTypes,id)=>{
+}
-		loads('', true)
-		return skudetail(id).then(({data}) => {
-			if(specTypes){
-				
-			}else{
-				const { id,productId } = data.productValue.默认;
-				api_cartsave(productId,id);
-			}
-		})
-		.catch(({message}) => {
-			uni.hideLoading()
-			uni.showModal({
-				content:message,
-				showCancel: false
-			})
-		})
-	}
-	const api_cartsave = (productId,productAttrUnique) =>{
-		const params = {
-			cartNum:1,
-			productId,
-			productAttrUnique
-		}
-		return cartsave(params).then(({message})=>{
-			uni.hideLoading()
-			uni.showToast({
-				title:'添加购物车成功',
-				icon:'none'
-			})
-		})
-		.catch(({message}) => {
-			uni.hideLoading()
-			uni.showModal({
-				content:message,
-				showCancel: false
-			})
-		})
-	}
-
 // 获取页面宽度
 const updatePageWidth = () => {
   const systemInfo = uni.getSystemInfoSync();

pages/index/index.vue

@@ -66,7 +66,7 @@
 			</scroll-view>
 		</view>
 		<!-- 商品区域 -->
-		<recomGoods v-if="ishomeListLoaded" :apiType="1"></recomGoods>
+		<recomGoods v-if="ishomeListLoaded" :apiType="1" @add-message="addCart"></recomGoods>
 		<view style="height: 200rpx;"></view>
 		<!-- <view class="footer">
 			<view class="footer_cont">
@@ -85,55 +85,11 @@
 		</view> -->
 		<!-- 获取定位失败小组件提示 -->
 		<locationOpen></locationOpen>
-		<!-- 多规格组件弹框 -->
+		<multi 
-		<uni-popup ref="multiPopup" type="bottom" @change="changeMulti">
+		ref="shopData"
-			<view class="multiPopup">
+		@add-success="handleAddSuccess"
-				<view class="shop_open_close"  @click="OpenCoupon()">
+		@add-error="handleAddError"
-					<image src="../../static/order/close.png" mode="widthFix"></image>
+		></multi>
-				</view>
-				<view class="multishop">
-					<image class="multishop_img" src="http://mnse8q.natappfree.cc/crmebimage/public/content/2025/03/06/8b55b251f89942fbaac25f72143be0e15jg9vmswjy.png" mode="widthFix"></image>
-					<view class="multishop_text">
-						<view class="multishop_title"><text>蔡长青烟熏鸡肉沙拉（调味沙拉）210g</text></view>
-						<view class="multishop_price">14.90<text class="multishop_name">5.00</text></view>
-						
-					</view>
-				</view>
-				<view class="multishop_list">
-					<view class="multishop_list_title">颜色</view>
-					<view class="multishop_list_item">
-						<view class="multishop_list_name multishop_list_arver">沙漠色</view>
-						<view class="multishop_list_name">黑色</view>
-						<view class="multishop_list_name">原色</view>
-						<view class="multishop_list_name">白色</view>
-					</view>
-				</view>
-				<view class="multishop_list">
-					<view class="multishop_list_title">容量</view>
-					<view class="multishop_list_item">
-						<view class="multishop_list_name multishop_list_arver">256GB</view>
-						<view class="multishop_list_name">512GB</view>
-						<view class="multishop_list_name">1TB</view>
-					</view>
-				</view>
-				<view style="height: 200rpx;"></view>
-				<view class="footer_multi">
-					<view class="multishop_amount">
-						<view class="multishop_name_amount">选数量</view>
-						<view class="multishop_data_edit">
-							<view class="multishop_data_edit_img border_l" @click="editAmount(1,item)">
-								<image class="multishop_data_edit_imgurl"  src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/minus.png" mode="widthFix"></image>
-							</view>
-							<view class="multishop_data_number">22</view>
-							<view class="multishop_data_edit_img border_r" @click="editAmount(2,item)">
-								<image class="multishop_data_edit_imgurl"  src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/add.png" mode="widthFix"></image>
-							</view>
-						</view>
-					</view>
-					<view class="footer_multi_btn">确定</view>
-				</view>
-			</view>
-		</uni-popup>
   </view>
 </template>
 
@@ -141,6 +97,7 @@
 import { loads } from '@/utils/index.js'
 import { frontindex,frontproduct,frontstorelist,skudetail,cartsave } from '@/server/api';
 import recomGoods from '@/components/recomGoods/recomGoods.vue';
+import multi from '@/components/multi/multi.vue'
 import locationOpen from '@/components/locationOpen/locationOpen.vue'
 import { computed,ref } from 'vue';
 import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
@@ -150,13 +107,13 @@ const counterStore = useCounterStore(); // 使用 Store
 //使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
 const {statusHeight,headerHeight,nikeName,key,token,phone,uid,storeName,storeId,latitude,longitude,locationName,locationShow } = storeToRefs(counterStore);
 const homeList = ref([]);
-const multiPopup = ref(null);
 const shopList = ref([]);
 const total = ref(0);
 const pages = ref(0);
 const limits = ref(10);
 const decs = ref('');
 const ishomeListLoaded = ref(false);
+const shopData = ref({});
 //首页楼层接口
 const api_index=()=>{
 	ishomeListLoaded.value = false;
@@ -165,7 +122,6 @@ const api_index=()=>{
 		uni.hideLoading();
 		homeList.value = data.homeList;
 		ishomeListLoaded.value = true;
-		multiPopup.value.open();
 	})
 	.catch(({message}) => {
 		uni.hideLoading();
@@ -193,54 +149,16 @@ const JumpType=(item)=>{
 }
 //加购物车
 const addCart=(i,type)=>{
-	const { jumpIds,productInfo,specType } = i;
+	shopData.value.addCart(i,type);
-	let specTypes = false;
-	if(type){
-		specTypes = specType;
-	}else{
-		specTypes = productInfo.specType;
-	}
-	api_skudetail(specTypes,jumpIds);
 }
-//购物车规格详情接口 specTypes 多规格true、单规格false
+// 加入购物车成功回调
-const api_skudetail=(specTypes,jumpIds)=>{
+const handleAddSuccess = (data) => {
-	loads('', true)
+  console.log('加入购物车成功回调:', data)
-	return skudetail(jumpIds).then(({data}) => {
+  // 可以在这里更新购物车徽章数量等
-		if(specTypes){
-				
-		}else{
-			const { id,productId } = data.productValue.默认;
-			api_cartsave(productId,id);
-		}
-	})
-	.catch(({message}) => {
-		uni.hideLoading()
-		uni.showModal({
-			content:message,
-			showCancel: false
-		})
-	})
 }
-const api_cartsave = (productId,productAttrUnique) =>{
+// 加入购物车失败回调
-	const params = {
+const handleAddError = (error) => {
-		cartNum:1,
+  console.error('加入购物车失败回调:', error)
-		productId,
-		productAttrUnique
-	}
-	return cartsave(params).then(({message})=>{
-		uni.hideLoading()
-		uni.showToast({
-			title:'添加购物车成功',
-			icon:'none'
-		})
-	})
-	.catch(({message}) => {
-		uni.hideLoading()
-		uni.showModal({
-			content:message,
-			showCancel: false
-		})
-	})
 }
 const orderConfirm=()=>{
 	uni.navigateTo({

pages/index/style.scss

@@ -441,184 +441,3 @@ page{
 	// 结束
 	
 	
-//多规格
-.multiPopup{
-	background-color: #FFFFFF;
-	border-top-left-radius: 25rpx;
-	border-top-right-radius: 25rpx;
-	max-height: 800rpx;
-	overflow-y: auto;
-	position: relative;
-	.shop_open_close{
-		width: 80rpx;
-		height: 80rpx;
-		position: absolute;
-		top: 0;
-		right: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-	.shop_open_close image{
-		width: 45rpx;
-		height: 45rpx;
-	}
-	.multishop{
-		display: flex;
-		padding: 25rpx 25rpx 0rpx 25rpx;
-		.multishop_img{
-			width: 180rpx;
-			height: 180rpx;
-			border-radius: 10rpx;
-		}
-		.multishop_text{
-			width: 460rpx;
-			margin-left: 20rpx;
-			.multishop_title{
-				font-size: 28rpx;
-				color: #333;
-				font-weight: 500;
-				margin-top: 5rpx;
-				min-height: 115rpx;
-			}
-			.multishop_title text{
-				overflow: hidden;
-				text-overflow: ellipsis;
-				display: -webkit-box;
-				-webkit-box-orient: vertical;
-				-webkit-line-clamp: 2;
-			}
-			.multishop_price{
-				font-size: 32rpx;
-				color: #FD3F3F;
-				font-weight: 500;
-				.multishop_name{
-					color: #999;
-					font-size: 23rpx;
-					text-decoration: line-through;
-					margin-left: 5rpx;
-					font-weight: 400;
-				}
-				.multishop_name::before{
-					content: "¥";
-					font-size: 20rpx;
-					margin-right: 5rpx;
-				}
-			}
-			.multishop_price::before{
-				content: "¥";
-				font-size: 24rpx;
-				margin-right: 5rpx;
-			}
-			    
-		}
-	}
-	.multishop_list{
-		padding: 25rpx 25rpx 0rpx 25rpx;
-		.multishop_list_title{
-			font-size: 28rpx;
-			color: #333;
-			font-weight: 500;
-			margin-bottom: 25rpx;
-		}
-		.multishop_list_item{
-			display: flex;
-			flex-wrap: wrap;
-			.multishop_list_name{
-				padding: 12rpx 35rpx 12rpx 35rpx;
-				border-radius: 10rpx;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				font-size: 24rpx;
-				color: #333333;
-				background-color: #f6f6f6;
-				margin-right: 25rpx;
-				margin-bottom: 25rpx;
-				border:1px solid #f6f6f6;
-			}
-			.multishop_list_arver{
-				background-color: #FFD7D7;
-				border:1px solid #fd3f3f;
-				color: #fd3f3f;
-			}
-			
-		}
-	}
-	.footer_multi{
-		position: fixed;
-		bottom: 0rpx;
-		width: 100%;
-		background-color: #FFFFFF;
-		border-top-left-radius: 20rpx;
-		border-top-right-radius: 20rpx;
-		.multishop_amount{
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			padding-left: 25rpx;
-			padding-right: 25rpx;
-			margin-top: 15rpx;
-			margin-bottom: 40rpx;
-			.multishop_name_amount{
-				font-size: 28rpx;
-				color: #333;
-				font-weight: 500;
-			}
-			.multishop_data_edit{
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				.multishop_data_edit_img{
-					width: 55rpx;
-					height: 50rpx;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					border-top: 1px solid #E9E9E9;
-					border-bottom: 1px solid #E9E9E9;
-					.multishop_data_edit_imgurl{
-						width: 25rpx;
-						height: 25rpx;
-						display: block;
-					}
-				}
-				.border_l{
-					border-left: 1px solid #E9E9E9;
-					border-top-left-radius: 50rpx;
-					border-bottom-left-radius: 50rpx;
-				}
-				.border_r{
-					border-right: 1px solid #E9E9E9;
-					border-top-right-radius: 50rpx;
-					border-bottom-right-radius: 50rpx;
-				}
-			}
-			.multishop_data_number{
-				width: 60rpx;
-				height: 50rpx;
-				font-size: 28rpx;
-				color: #333;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				border: 1px solid #E9E9E9;
-			}
-		}
-		.footer_multi_btn{
-			margin: 0 28rpx 0 28rpx;
-			height:84rpx;
-			background-color: #FD3F3F;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			font-size: 32rpx;
-			color: #FFFFFF;
-			border-radius: 50rpx;
-		}
-	}
-	
-	
-	
-	
-}

pages/sidedish/sidedish.vue

@@ -31,8 +31,6 @@
 				</view>
 				<view class="content_shop">
 					<scroll-view class="content_shop_ul" :scroll-with-animation="true" :enhanced="true"  :show-scrollbar="false" scroll-x="true">
-						
-						
 						<view class="content_shop_item" v-for="(item,index) in list.items" :key="index"  @click="JumpType(item)">
 							<view class="content_shop_item_img">
 								<!-- <view class="content_shop_item_tag"></view> -->
@@ -46,7 +44,7 @@
 									<view class="content_shop_item_price price">{{item.productInfo.price}}</view>
 									<view class="content_shop_market prices">{{item.productInfo.otPrice}}</view>
 								</view>
-								<view class="content_shop_item_cart" @click.stop="addCart(item)">
+								<view class="content_shop_item_cart" @click.stop="addCart(item,1)">
 									<image class="content_shop_item_cart_img" src="../../static/oncatr01.png" mode="widthFix"></image>
 								</view>
 							</view>
@@ -57,12 +55,17 @@
 			<view class="load_desc">{{decs}}</view>
 		</view>
 	</view>
-	
+	<multi
+	ref="shopData"
+	@add-success="handleAddSuccess"
+	@add-error="handleAddError"
+	></multi>
   </view>
 </template>
 
 <script setup>
 import { loads } from '@/utils/index.js'
+import multi from '@/components/multi/multi.vue'
 import { computed,ref } from 'vue';
 import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
 import { storeToRefs } from 'pinia';//实现解构付值
@@ -80,6 +83,7 @@ const load = ref(true);
 const scrollLefter = ref(0);
 const windowWidth = ref(0);
 const wishesImage = ref('')
+const shopData = ref({});
 //使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
 const { storeId } = storeToRefs(counterStore);
 const api_index=()=>{
@@ -168,14 +172,17 @@ const JumpType=(item,type)=>{
 	}
 }
 //加购物车
-const addCart=(i)=>{
+const addCart=(i,type)=>{
-	const { jumpIds,productInfo,specType } = i;
+	shopData.value.addCart(i,type);
-	const specTypes = productInfo.specType;
+}
-	if(specTypes){
+// 加入购物车成功回调
-		console.log('多规格弹窗选类加购');
+const handleAddSuccess = (data) => {
-	}else{
+	console.log('加入购物车成功回调:', data)
-		console.log('单规格直接加购')
+	//可以在这里更新购物车徽章数量等
-	}
+}
+// 加入购物车失败回调
+const handleAddError = (error) => {
+	console.error('加入购物车失败回调:', error)
 }
 // 获取页面宽度
 const updatePageWidth = () => {

pages/user/user.vue

@@ -48,13 +48,19 @@
 			<view class="user_cont_li_name">{{item.name}}</view>
 		</view>
 	</view>
-	<recomGoods v-if="token" :apiType="5"></recomGoods>
+	<recomGoods v-if="token" :apiType="5" @add-message="addCart"></recomGoods>
 	<view style="height: 200rpx;"></view>
+	<multi
+	ref="shopData"
+	@add-success="handleAddSuccess"
+	@add-error="handleAddError"
+	></multi>
   </view>
 </template>
 
 <script setup>
 import recomGoods from '@/components/recomGoods/recomGoods.vue';
+import multi from '@/components/multi/multi.vue'
 import { computed,ref } from 'vue';
 import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
 import { storeToRefs } from 'pinia';//实现解构付值
@@ -62,8 +68,7 @@ import { onLoad,onShow,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app
 const counterStore = useCounterStore(); // 使用 Store
 //使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
 const { statusHeight,headerHeight,token } = storeToRefs(counterStore);
-// const statusHeight = ref(uni.getMenuButtonBoundingClientRect()['height'])
+const shopData = ref({});
-// const headerHeight = ref(uni.getSystemInfoSync()['statusBarHeight'])
 const order = ref([
 	{
 		id:1,
@@ -128,11 +133,19 @@ const contList = ref([
 		url:'/userserve/addressList/addressList'
 	}
 ])
-const goDetail=()=>{
+//加购物车
-	uni.navigateTo({
+const addCart=(i,type)=>{
-		url:`/shopProDetail/detail/detail`
+	shopData.value.addCart(i,type);
-	})
+}
-};
+// 加入购物车成功回调
+const handleAddSuccess = (data) => {
+  console.log('加入购物车成功回调:', data)
+  // 可以在这里更新购物车徽章数量等
+}
+// 加入购物车失败回调
+const handleAddError = (error) => {
+  console.error('加入购物车失败回调:', error)
+}
 const goCoupon=()=>{
 	uni.navigateTo({
 		url:`/order/coupon/coupon`

server/config.js

@@ -9,7 +9,7 @@ const type = 'dev'
   * prod生产
   */
 if(type === 'dev'){
-	url = "http://mnse8q.natappfree.cc";
+	url = "http://56w4qa.natappfree.cc";
 }
 if(type === 'test'){
 	url = "https://japiuat.3721zh.com/webapp";

shopProDetail/detail/detail.vue

@@ -52,7 +52,7 @@
 			</view>
 		</view>
 		<view class="item">
-			<recomGoods  :apiType="5"></recomGoods>
+			<recomGoods  :apiType="5"  @add-message="addCart"></recomGoods>
 		</view>
 	<view style="height: 200rpx;"></view>
 	<!-- 底部 -->
@@ -87,12 +87,18 @@
 			</view>
 		</view>
 	</uni-popup>
+	<multi
+	ref="shopData"
+	@add-success="handleAddSuccess"
+	@add-error="handleAddError"
+	></multi>
   </view>
 </template>
 
 <script setup>
 import { loads } from '@/utils/index.js'	
 import recomGoods from '@/components/recomGoods/recomGoods.vue';
+import multi from '@/components/multi/multi.vue'
 import comment from '@/components/comment/comment.vue';
 import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue';
 import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
@@ -120,6 +126,7 @@ const productValue = ref({});
 const sliderImages = ref([]);
 const content = ref('');
 const productId = ref('');
+const shopData = ref({});
 //使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
 const {statusHeight,headerHeight,statusBartop,token,cartcount } = storeToRefs(counterStore);
 import { frontdetail,collectdelete,collectcancel,collectadd,frontcartcount } from '@/server/api'
@@ -155,7 +162,18 @@ const goCart=()=>{
 		url:`/pages/cart/cart`
 	})
 };
-
+//加购物车
+const addCart=(i,type)=>{
+	shopData.value.addCart(i,type);
+}
+// 加入购物车成功回调
+const handleAddSuccess = (data) => {
+	
+}
+// 加入购物车失败回调
+const handleAddError = (error) => {
+  console.error('加入购物车失败回调:', error)
+}
 const handleBack = () => {
   if (getPages()) {
     // 如果有上一页，返回上一页