提交代码

components/cartPopup.vue

@@ -9,92 +9,175 @@
 						@click="clearCart"></u-tag>
 				</view>
 			</view>
-			<radio class="w-full padding-bottom-lg" color="#E51C23" v-for="(item, index) in localCarList" :key="index"
+			<radio class="w-full padding-bottom-lg" color="#E51C23" v-for="(item, index) in carList" :key="index"
 				:name="item.name" :checked="item.selected" @click="radioChange(item)">
 				<my-goods :item="item" ref="my-goods">
 					<view class="num-step">
-						<u-number-box v-model="item.goods_num" :min="1" @change="changeValue($event, item.id)" />
+						<u-number-box v-model="item.quantity" :min="1" @change="changeValue($event, item)" />
 					</view>
 				</my-goods>
 			</radio>
 		</view>
+		<view class="cart-bottom padding-sm dflex-b" v-if="showShop">
+			<view class="cart padding-lr">
+				<uni-badge size="small" :text="buyCount" absolute="rightTop">
+					<u-icon name="shopping-cart-fill" size="28" color="#FF873D"></u-icon>
+				</uni-badge>
+				<text class="cart-total">总计：￥{{total}}</text>
+			</view>
+			<view class="balance dflex-c background-gradient" @click="toBuy">去结算</view>
+		</view>
 	</u-popup>
 </template>
 
 <script>
 	export default {
 		name: "cartPopup",
-		props: {
-			carList: {
-				type: Array,
-				required: true
-			}
-		},
 		data() {
 			return {
 				show: false,
 				allSelected: false,
-				localCarList: []
+				carList: [],
+				showShop: false,
+				total: 0,
+				totalList: []
 			};
 		},
+		mounted() {
+			this.fatchDate()
+		},
 		methods: {
+			openShop(v) {
+				this.showShop = v
+			},
 			open() {},
+			async fatchDate() {
+				const e = uni.getStorageSync('carl')
+				const params = {
+					storeId: e.id
+				}
+				const res = await this.$request('get', `/front/shoppingCart/list`, params)
+				console.log('res.data', res.data)
+				if (res) {
+					this.carList = res.data
+				}
+			},
 			setShow(v) {
-				this.show = v;
-				// 检查 localCarList 是否存在且至少有一个元素
-				if (this.localCarList && this.localCarList.length > 0) {
-					// 检查 localCarList 的第一个元素是否有 selected 属性
-					if (!this.localCarList[0].hasOwnProperty('selected')) {
+				this.show = v
+				this.fatchDate()
+				// 检查 carList 是否存在且至少有一个元素
+				if (this.carList && this.carList.length > 0) {
+					// 检查 carList 的第一个元素是否有 selected 属性
+					if (!this.carList[0].hasOwnProperty('selected')) {
 						// 如果没有 selected 属性，使用 map 方法添加 selected 属性
-						this.localCarList = this.carList.map(item => ({
+						this.carList = this.carList.map(item => ({
 							...item,
-							selected: true
+							selected: false
 						}));
 					}
 				} else {
-					// 如果 localCarList 不存在或没有元素，直接使用 map 方法添加 selected 属性
-					this.localCarList = this.carList.map(item => ({
+					// 如果 carList 不存在或没有元素，直接使用 map 方法添加 selected 属性
+					this.carList = this.carList.map(item => ({
 						...item,
-						selected: true
-					}));
+						selected: false
+					}))
 				}
 
-				if (this.localCarList.length > 0) {
-					this.allSelected = this.localCarList.every(car => car.selected)
+				if (this.carList.length > 0) {
+					this.allSelected = this.carList.every(car => car.selected)
 				}
-
-				console.log('this.localCarList', this.localCarList)
+				console.log('this.carList2222222222222222222', this.carList)
 			},
 			close() {
 				this.show = false;
 			},
-			changeValue(value, index) {
-				this.$emit('numChanged', value.value, index)
-				console.log('更新后的数量=======:', value, '索引=========:', index)
+			changeValue(value, v) {
+				console.log('更新后的数量=======:', value, '索引=========:', v)
+				const e = uni.getStorageSync('carl')
+				const userId = uni.getStorageSync('appUserId')
+				const params = {
+					id: v.id,
+					storeId: e.id,
+					storeName: e.name,
+					skuId: v.skuId,
+					basePrice: v.basePrice,
+					quantity: value.value,
+					extendProps: userId
+				}
+				console.log('params', params)
+				this.$request('put', `/front/shoppingCart`, params, true)
+
 			},
 			selectAll() {
 				this.allSelected = !this.allSelected
-				this.localCarList.forEach(item => {
+				this.carList.forEach(item => {
 					item.selected = this.allSelected
 				})
-				this.$emit('selected-changed', this.localCarList)
-				console.log('this.localCarList111111111111111', this.localCarList)
+				this.$emit('selected-changed', this.carList)
+				this.totalList = this.carList
+				this.totalPrice()
+				console.log('this.carList111111111111111', this.carList)
 			},
 			clearCart() {
-				this.localCarList = []
-				this.allSelected = false
-				this.$emit('selected-changed', this.localCarList)
+				const ids = this.carList.map(car => car.id);
+				console.log('ids', ids)
+				this.$request('delete', `/front/shoppingCart/${ids}`).then(response => {
+					// 请求成功
+					if (response.code = 200) {
+						// 弹出消息
+						uni.showToast({
+							title: '已清空',
+							icon: 'success',
+							duration: 2000
+						})
+						this.carList = []
+						this.$emit('selected-changed', []);
+						this.show = false
+					}
+				}).catch(error => {
+					// 请求失败
+					console.error('请求失败:', error);
+				})
 			},
 			radioChange(e) {
 				console.log(e)
 				e.selected = !e.selected
-				// 检查是否所有车辆都被选中了
-				this.allSelected = this.localCarList.every(car => car.selected)
-				this.$emit('selected-changed', this.localCarList);
+				// 检查是否所有车都被选中了
+				this.allSelected = this.carList.every(car => car.selected)
+				this.localList = this.carList.filter(car => car.selected === true);
+
+				this.$emit('selected-changed', this.localList);
+				this.totalList = this.localList
+				this.totalPrice()
+				console.log('this.totalList', this.totalList);
 				// 打印结果
 				console.log('this.allSelected', this.allSelected);
+			},
+			//计算selected为true的
+			totalPrice() {
+				let total = 0;
+				for (let i = 0; i < this.totalList.length; i++) {
+					// 检查商品是否有 selected 属性
+					if (this.totalList[i].hasOwnProperty('selected')) {
+						// 如果 selected 属性存在，只有当它为 true 时才计算
+						if (this.totalList[i].selected) {
+							let priceInCents = Math.round(this.totalList[i].price * 100);
+							let quant = this.totalList[i].quantity;
+							total += priceInCents * quant;
+						}
+					} else {
+						// 如果 selected 属性不存在，直接计算所有商品
+						let priceInCents = Math.round(this.carList[i].price * 100);
+						let quant = this.carList[i].quantity;
+						total += priceInCents * quant;
+					}
+				}
 
-			}
+				// 将总价格转换回浮点数（以元为单位）
+				this.total = (total / 100).toFixed(2);
+
+				console.log('total', this.total);
+			},
 		}
 	}
 </script>
@@ -117,6 +200,41 @@
 			align-items: center;
 			margin: 10px 0;
 		}
+	}
+
+	.cart-bottom {
+		width: 100%;
+		position: fixed;
+		left: 0;
+		bottom: 0;
+		height: 130rpx;
+		box-sizing: border-box;
+		background-color: #FFF;
+		box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.15);
+		z-index: 10800;
+
+		.cart {
+			width: calc(100% - 220rpx);
+			border-radius: 5px;
+			background-color: #FEEEE4;
+			display: flex;
+			align-items: center;
+			height: 100%;
+
+			.cart-total {
+				padding-left: 40rpx;
+				font-size: 16px;
+				font-weight: 700;
+			}
+		}
 
+		.balance {
+			width: 200rpx;
+			height: 100%;
+			background-color: #FF0000;
+			font-size: $uni-font-size-lg;
+			border-radius: 5px;
+			color: #FFF;
+		}
 	}
 </style>

components/my-goods/my-goods.vue

@@ -2,14 +2,15 @@
 	<view>
 		<view class="goods">
 			<view class="goods-img">
-				<image mode="aspectFit" class="wh-full" :src="item.src"></image>
+				<image v-if="item.imgUrl" mode="aspectFit" class="wh-full" :src="item.imgUrl"></image>
+				<view else class="pic"></view>
 			</view>
 			<view class="right-info">
-				<view class="good-title">{{item.goods_name}}</view>
+				<view class="good-title">{{item.skuName}}</view>
 				<view class="w-full flex-a">
 					<view class="g-left">
-						<view class="spec" @click="popShow">{{item.goods_type}}</view>
-						<view class="price">{{item.goods_price}}</view>
+						<view class="spec">{{item.skuProperties}}</view>
+						<view class="price">{{item.price}}</view>
 					</view>
 					<view class="g-right">
 						<slot></slot>
@@ -35,9 +36,6 @@
 			}
 		},
 		methods: {
-			popShow() {
-				this.show = true;
-			},
 			close() {
 				this.show = false;
 			}
@@ -55,6 +53,12 @@
 			height: 200rpx;
 			width: 200rpx;
 			flex-shrink: 0;
+			.pic {
+				width: 200rpx;
+				height: 200rpx;
+				background-color: #EEE;
+				// flex-shrink: 0;
+			}
 		}
 
 		.right-info {

components/specPopup.vue

@@ -45,24 +45,14 @@
 		data() {
 			return {
 				vModelValue: 1,
-				shopMsg: {
-					id: '',
-					spec: '',
-					num: ''
-				},
 				specs: [], // 总查询数据
 				speL: [],
 				intSkuId: [], // 选择唯一的id
 				caMsg: [], // 根据id查出来的数据
 			}
 		},
-		mounted() {
-			console.log('specPopup mounted:', this.cardMsg)
-		},
 		methods: {
-			changeValue(e) {
-				console.log('vModelValue', e)
-			},
+			changeValue(e) {},
 			change(e) {
 				if (!e.show) { // 当弹出层关闭时
 					// 重置规格选择
@@ -75,34 +65,33 @@
 					}
 					this.speL = []
 					// 重置购买数量
-					this.vModelValue = 1;
+					this.vModelValue = 1
 				}
 			},
 			async selectSpec1(item, spec) {
 				// 首先，取消选择所有其他选项
 				item.values.forEach(value => {
-					value.selected = false;
+					value.selected = false
 				})
 				// 然后，选择当前点击的选项
-				spec.selected = true;
+				spec.selected = true
 				if (spec.selected) {
 					this.speL.push(spec)
 				}
-				console.log('speL', this.speL)
 
 				const seleList = this.speL.filter(item => item.selected == true)
+				const items = seleList.map(item => item.label)
 				// 计算选中规格项的skuIds数组的交集
 				if (seleList.length > 0) {
-					let intersection = seleList[0].skuIds;
+					let intersection = seleList[0].skuIds
 
 					// 遍历数组中的每个对象
 					for (let i = 1; i < seleList.length; i++) {
 						// 使用filter和includes方法找到交集
 						intersection = intersection.filter(skuId => {
 							return seleList[i].skuIds.includes(skuId);
-						});
+						})
 					}
-
 					// 如果交集不为空，取第一个元素作为唯一字符串
 					const uniqueString = intersection.length > 0 ? intersection[0] : '';
 
@@ -112,30 +101,31 @@
 					// 如果没有选中的规格项，返回空字符串
 					this.intSkuId = '';
 				}
-				console.log('intSkuId', this.intSkuId)
+				console.log('speL', this.speL)
 				// 确定每一个都有选择后发起请求
 				const isSelected = this.specs.every(spec => spec.values.some(value => value.selected))
 				if (isSelected) {
 					// 如果所有规格都至少有一个选项被选中
-					console.log('所有规格都已选择');
 					const res = await this.$request('get', `/item/sku/${this.intSkuId}`)
-					console.log('res================', res.data)
 					this.caMsg = res.data
-				} else {
-					// 否则，打印一个错误信息
-					console.log('还有规格未选择');
-				}
+					// 返回选中规格项的label值
+					console.log('intSkuId', this.intSkuId)
+					console.log('items', items)
+					console.log('所有规格都已选择')
+					const itemDetal = {
+						id: this.intSkuId,
+						item: Array.from(items).join(','),
+						count: this.vModelValue
+					}
+					this.$emit('seChanged', itemDetal);
+				} else {}
 			},
 			async open() {
 				this.$refs.popup.open('bottom')
-				console.log('cardMsg', this.cardMsg)
+				console.log("this.cardMsg")
 				const spuId = this.cardMsg.spuId
 				const res = await this.$request('get', `/item/sku/queryPropMapping?spuId=${spuId}`)
-				console.log('res.data', res.data)
 				this.specs = res.data.filter(item => item.values && item.values.length > 0);
-				// this.specs.forEach(item => Object.assign(item, {
-				// 	selected: false
-				// }))
 				this.specs.forEach(item => {
 					Object.assign(item, {
 						values: item.values.map(value => ({
@@ -143,18 +133,41 @@
 							ids: item.id,
 							selected: false
 						}))
-					});
-				});
-
-				console.log('this.spec', this.specs)
+					})
+				})
 			},
 			toShop() {
-				this.shopMsg.id = this.cardMsg.id
-				this.shopMsg.num = this.vModelValue
-				console.log('this.shopMsg', this.shopMsg)
-				this.$emit('update-shopmsg', this.shopMsg);
+				const e = uni.getStorageSync('carl')
+				const userId = uni.getStorageSync('appUserId')
+				const count = this.vModelValue
+				const params = {
+					storeId: e.id,
+					storeName: e.name,
+					skuId: this.caMsg.skuId,
+					basePrice: this.caMsg.retailPrice,
+					price: this.caMsg.retailPrice,
+					quantity: count,
+					extendProps: userId
+				}
+				console.log('params', params)
+				this.$request('post', `/front/shoppingCart`, params, true).then(response => {
+					// 请求成功
+					if (response.code = 200) {
+						// 弹出消息
+						uni.showToast({
+							title: '加入购物车成功',
+							icon: 'success',
+							duration: 2000
+						})
+						this.$emit('addShop');
+					}
+				}).catch(error => {
+					// 请求失败
+					console.error('请求失败:', error);
+				})
+				// this.$emit('update-shopmsg', this.shopMsg);
 				// 关闭弹出层
-				this.$refs.popup.close();
+				this.$refs.popup.close()
 			},
 			toBuy() {
 				uni.navigateTo({

main.js

@@ -70,8 +70,9 @@ Vue.prototype.$request = function(method, url, data, isJSON, hideLoading, showEr
 			  // application/x-www-form-urlencoded application/json
 			},
 			success: (res) => {
+				console.log('resres', res)
 				uni.hideLoading();
-				if (res.data.code === 200) {
+				if (res.statusCode === 200) {
 					resolve(res.data);
 				} else {
 					if (showErrMsg) {

pages/classify/classify.vue

@@ -44,7 +44,8 @@
 			</view>
 		</view>
 		<my-gap :height="10" />
-		<specPopup class='spec-box' ref="specPopup" :cardMsg="cardMsg" @update-shopmsg="handleUpdateShopMsg">
+		<specPopup class='spec-box' ref="specPopup" :cardMsg="cardMsg" @update-shopmsg="handleUpdateShopMsg"
+			@addShop="carListMeg">
 		</specPopup>
 		<view class="cart-bottom padding-sm dflex-b">
 			<view class="cart padding-lr">
@@ -55,8 +56,7 @@
 			</view>
 			<view class="balance dflex-c background-gradient" @click="toBuy">去结算</view>
 		</view>
-		<cartPopupVue ref="cartPopup" :carList="carList" @selected-changed="handleSelectedChanged"
-			@numChanged="numChanged" />
+		<cartPopupVue ref="cartPopup" @selected-changed="handleSelectedChanged" />
 
 	</view>
 </template>
@@ -93,7 +93,8 @@
 		onLoad() {
 			const e = uni.getStorageSync('carl')
 			this.cList = e
-			this.fatchDate(e)
+			this.fatchDate()
+			this.carListMeg()
 		},
 		methods: {
 			// 加购
@@ -103,61 +104,14 @@
 				this.$nextTick(() => {
 					this.$refs.specPopup.open();
 				});
-				this.carList = e
 			},
 			handleSelectedChanged(selectedItems) {
 				console.log('选中的数据:', selectedItems)
 				this.carList = selectedItems
-				if (selectedItems.length > 0) {
-					this.buyCount = this.carList.length
-				} else {
-					this.buyCount = 0
-				}
-
-				this.totalPrice();
-			},
-			handleUpdateShopMsg(shopMsg) {
-				console.log('接收到的购物信息：', shopMsg);
-				const specString = shopMsg.spec + ',' + shopMsg.specs;
-				const item = this.goods.find(item => item.id === shopMsg.id);
-
-				if (item) {
-					// 检查购物车列表中是否已存在相同id和规格的商品
-					const existingCartItem = this.carList.find(cartItem => cartItem.id === item.id && cartItem
-						.goods_type === specString);
-
-					if (existingCartItem) {
-						// 如果已存在，则增加商品数量
-						existingCartItem.goods_num += shopMsg.num;
-					} else {
-						// 如果不存在，则复制item并添加到购物车列表，同时设置商品数量和规格
-						const newItem = {
-							...item
-						};
-						newItem.goods_num = shopMsg.num;
-						newItem.goods_type = specString;
-						this.carList.push(newItem);
-					}
-					this.buyCount = this.carList.length
-					// 您可以在这里执行其他逻辑，比如保存到本地存储或发送到服务器
-				}
-
-				console.log('购物车列表更新：', this.carList);
-				this.totalPrice();
-			},
-			//数量的加减
-			numChanged(value, index) {
-				console.log('更新后的数量????????????:', value, '索引:', index);
-				// 假设 carList 是一个 Map，其中 id 是键
-				const item = this.carList.find(item => item.id === index)
-				if (item) {
-					// 更新对应商品的 goods_num
-					item.goods_num = value;
-					// 您可以在这里执行其他逻辑，比如保存到本地存储或发送到服务器
-					console.log('更新后的数量:', value, '索引:', index);
-				}
+				this.carListMeg()
 				this.totalPrice()
 			},
+
 			//计算selected为true的
 			totalPrice() {
 				let total = 0;
@@ -166,15 +120,15 @@
 					if (this.carList[i].hasOwnProperty('selected')) {
 						// 如果 selected 属性存在，只有当它为 true 时才计算
 						if (this.carList[i].selected) {
-							let priceInCents = Math.round(this.carList[i].goods_price * 100);
-							let quantity = this.carList[i].goods_num;
-							total += priceInCents * quantity;
+							let priceInCents = Math.round(this.carList[i].price * 100);
+							let quant = this.carList[i].quantity;
+							total += priceInCents * quant;
 						}
 					} else {
 						// 如果 selected 属性不存在，直接计算所有商品
-						let priceInCents = Math.round(this.carList[i].goods_price * 100);
-						let quantity = this.carList[i].goods_num;
-						total += priceInCents * quantity;
+						let priceInCents = Math.round(this.carList[i].price * 100);
+						let quant = this.carList[i].quantity;
+						total += priceInCents * quant;
 					}
 				}
 
@@ -184,7 +138,9 @@
 				console.log('total', this.total);
 			},
 			showCart() {
-				this.$refs.cartPopup.setShow(true);
+				this.$nextTick(() => {
+					this.$refs.cartPopup.setShow(true)
+				})
 			},
 			btnIc() {
 				uni.navigateTo({
@@ -192,14 +148,20 @@
 				})
 			},
 			toDetial(e) {
+				console.log('eeeeee====================', e)
+				const data = {
+					spuId: e.spuId,
+					tobyC: this.buyCount
+				}
 				uni.navigateTo({
-					url: `/pages/goodDetail/goodDetail?id=${e}`
+				  url: `/pages/goodDetail/goodDetail?data=${encodeURIComponent(JSON.stringify(data))}`
 				})
 			},
 			toBuy() {
-				uni.navigateTo({
-					url: `/pages/order/submitOrder/submitOrder`
-				})
+				console.log('e========carList', this.carList)
+				// uni.navigateTo({
+				// 	url: `/pages/order/submitOrder/submitOrder`
+				// })
 			},
 			onOrder() {
 				uni.navigateTo({
@@ -207,7 +169,6 @@
 				})
 			},
 			onMyInfo() {
-
 				const info = {
 					customerPhone: this.cList.customerPhone
 				}
@@ -218,9 +179,9 @@
 				})
 			},
 			// 获取餐车列表
-			async fatchDate(e) {
+			async fatchDate() {
 				var queryParmas = {
-					id: e.id
+					id: this.cList.id
 				}
 				console.log('idididididid', queryParmas)
 				const result = await this.$request('post', '/sale/diningCarProduct/queryDiningCarProduct', queryParmas,
@@ -231,11 +192,19 @@
 					const res = await this.$request('get', `/item/spu/queryByIds?spuIds=${spuIds}`)
 					const data = res.data
 					this.goods = data.filter(item => item.status !== 1)
-					
 					console.log('res', res.data)
 				}
+			},
+			async carListMeg() {
+				const res = await this.$request('get', `/front/shoppingCart/list`, {
+					storeId: this.cList.id
+				})
+				console.log('res.data==============', res.data)
+				if (res) {
+					const carList = res.data
+					this.buyCount = carList.length
+				}
 			}
-
 		}
 	}
 </script>

pages/goodDetail/goodDetail.vue

@@ -3,8 +3,10 @@
 		<!-- 01. 轮播区 -->
 		<view class="swiper-area w-full">
 			<swiper class="h-full pos-r" indicator-dots circular="true" duration="400">
-				<swiper-item v-for="(item, index) in swiperDatas" :key="index">
-					<view class="wh-full"><image :src="item.url" class="wh-full loaded" lazy-load="true" mode="aspectFill"></image></view>
+				<swiper-item v-for="(item, index) in goods.imgList" :key="index">
+					<view class="wh-full">
+						<image :src="item.url" class="wh-full loaded" lazy-load="true" mode="aspectFill"></image>
+					</view>
 				</swiper-item>
 			</swiper>
 		</view>
@@ -13,7 +15,7 @@
 			<view class="goods-area bg-main padding">
 				<view class="price-box dflex-b">
 					<view>
-						<text class="price fwb fs-big">{{ goods.price / 100 || '100' }}</text>
+						<text class="price fwb fs-big">{{ goods.minPrice || '' }} ~ {{ goods.maxPrice || ''}}</text>
 					</view>
 					<!-- <view class="dflex fs-sm ft-dark">
 						<view class="margin-right-sm dflex" @click="">
@@ -40,253 +42,369 @@
 					</view>
 					<text class="coupon-name">满30减20</text>
 				</view> -->
-				<view class="title fs">商品名称商品名称商品名称商品名称商品名称商品名称商品名称</view>
+				<view class="title fs">{{goods.spuName}}</view>
 				<view class="sale">月销量：236</view>
 			</view>
-			
+
 			<!-- 06. 详情区 -->
 			<view class="gap"></view>
 			<view class="spec-cell">
 				<u-cell title="已选" isLink clickable @click="clickSpec" :border="false">
-					<text slot="value"  class="u-slot-value">{{specValue}}</text>
+					<text slot="value" class="u-slot-value">{{specValue}}</text>
 				</u-cell>
 			</view>
-			<view class="gap"></view>
+			<!-- <view class="gap"></view>
 			<view class="spec-cell">
-				<u-cell title="发货" isLink clickable  :border="false">
-					<text slot="value"  class="u-slot-value">预计5天内发货</text>
+				<u-cell title="发货" isLink clickable :border="false">
+					<text slot="value" class="u-slot-value">预计5天内发货</text>
 				</u-cell>
-			</view>
-			<view class="gap"></view>		
-			
+			</view> -->
+			<view class="gap"></view>
+
 			<view class="detail-area bg-main">
-				<view class="d-header padding dflex-c"><text>图文详情</text></view>
-				<rich-text class="pro-detail" :nodes="html_nodes"></rich-text>
+				<view class="d-header padding dflex-c"><text>图文详情</text>
+				</view>
+
+				<rich-text class="pro-detail" :nodes="goods.desc"></rich-text>
+				<image mode="aspectFit" :src="goods.imgList[0].url"></image>
 			</view>
 		</view>
 		<my-gap :height="130" bg="#f5f5f5" />
 		<!-- 07. 操作区 -->
 		<view class="cart-bottom padding-sm dflex-b">
 			<view style="width: 60px;">
-				<u-icon :name="service" label="客服" labelPos="bottom" size="32"></u-icon>
+				<u-icon :name="service" label="客服" labelPos="bottom" size="32" @click="call"></u-icon>
 			</view>
 			<view style="width: 60px;">
-				<u-icon :name="shoppingCart" label="购物车" labelPos="bottom" size="32"></u-icon>
+				<uni-badge size="small" :text="buyCount" absolute="rightTop">
+					<u-icon :name="shoppingCart" label="购物车" labelPos="bottom" size="32" @click="showCart"></u-icon>
+				</uni-badge>
 			</view>
-			<view class="go-cart dflex-c" >加入购物车</view>
-			<view class="go-buy dflex-c background-gradient">立即购买</view>
+			<view class="go-cart dflex-c" @click="toShop">加入购物车</view>
+			<view class="go-buy dflex-c background-gradient" @click="toBuy">立即购买</view>
 		</view>
-		
+
 		<!-- 置顶 -->
 		<use-totop ref="usetop" bottom="120"></use-totop>
-		<specPopup ref="specPopup"></specPopup>
+		<specPopup ref="specPopup" :cardMsg="cardMsg" @seChanged="seChanged" @addShop="carListMeg"></specPopup>
+		<cartPopupVue ref="cartPopup" />
 	</view>
 </template>
 
 <script>
 	import specPopup from '@/components/specPopup.vue'
+	import cartPopupVue from '../../components/cartPopup.vue'
 	import shoppingCart from '../../static/shoppingCart.png'
 	import service from '../../static/service.png'
 	export default {
-		components:{specPopup},
+		components: {
+			specPopup,
+			cartPopupVue
+		},
 		data() {
 			return {
+				cardMsg: {},
+				buyCount: '',
+				total: 0,
+				carList: {},
+				detailMsg: {},
 				shoppingCart: shoppingCart,
 				service: service,
-				specValue:'1包，番茄味',
+				specValue: '',
 				// 商品ID
 				id: 0,
 				// 商品数据
 				goods: {},
 				// 轮播图
-				swiperDatas: [{
-					url:'../../static/banner1.jpg'
-				}],
-				// SKU
-				sku: {},
-				// 商品详情
-				html_nodes: '',
-				// 收藏
-				favorite: false,
-				
-				scrollTop: 0
+				scrollTop: 0,
+				count: 1,
+				dataDel: {}
 			}
 		},
-		onLoad(e) {
-			console.log('eeeeeeeeeeeee============', e)
+		onLoad(option) {
+			// 解码 URL 编码的字符串
+			var dataString = decodeURIComponent(option.data);
+			// 尝试将字符串转换为 JSON 对象
+			var data = JSON.parse(dataString);
+			this.dataDel = data
+			// 打印解码后的数据
+			console.log('eeeeeeeeeeeee============data', data);
+			this.fatchDate()
+			const e = uni.getStorageSync('carl')
+			this.cList = e
+			this.buyCount = data.tobyC
 		},
 		methods: {
-			clickSpec(){
-				this.$refs.specPopup.open();
+			call() {
+				console.log('eeeeeeeeeeeeeeee===============', this.cPhone)
+				const e = uni.getStorageSync('info')
+				this.cPhone = e
+				if (this.cPhone.customerPhone) {
+					uni.makePhoneCall({
+						phoneNumber: this.cPhone.customerPhone
+					})
+				} else {
+					uni.showToast({
+						icon: 'none',
+						title: '暂无商家电话'
+					})
+				}
+			},
+			clickSpec() {
+				this.cardMsg = this.goods
+				this.$nextTick(() => {
+					this.$refs.specPopup.open();
+				});
+			},
+			showCart() {
+				this.$refs.cartPopup.setShow(true)
+				this.$refs.cartPopup.openShop(true)
+			},
+			toShop() {
+				const e = uni.getStorageSync('carl')
+				const userId = uni.getStorageSync('appUserId')
+				const params = {
+					storeId: e.id,
+					storeName: e.name,
+					skuId: this.detailMsg.skuId,
+					basePrice: this.detailMsg.retailPrice,
+					price: this.detailMsg.retailPrice,
+					quantity: this.count,
+					extendProps: userId
+				}
+				console.log('params', params)
+				this.$request('post', `/front/shoppingCart`, params, true).then(response => {
+					// 请求成功
+					console.log('response',response)
+					if (response.code = 200) {
+						// 弹出消息
+						uni.showToast({
+							title: '加入购物车成功',
+							icon: 'success',
+							duration: 2000
+						})
+						this.carListMeg()
+					} else if (response.code = 500){
+						uni.showToast({
+							title: response.msg,
+							icon: 'warning',
+							duration: 2000
+						})
+					}
+				}).catch(error => {
+					// 请求失败
+					console.error('请求失败:', response.msg);
+				})
+			},
+			async carListMeg() {
+				const res = await this.$request('get', `/front/shoppingCart/list`, {
+					storeId: this.cList.id
+				})
+				console.log('res.data==============', res.data)
+				if (res) {
+					this.carList = res.data
+					this.buyCount = this.carList.length
+				}
+			},
+			//获取详情列表
+			async fatchDate() {
+				const id = this.dataDel.spuId
+				const res = await this.$request('get', `/item/spu/${id}`)
+				if (res) {
+					this.goods = res.data
+				}
+				console.log('res', res.data)
+			},
+			//根据skuid获取选择商品信息
+			async seChanged(e) {
+				console.log('==================3e', e)
+				this.specValue = e.item
+				this.count = e.count
+				const res = await this.$request('get', `/item/sku/${e.id}`)
+				this.detailMsg = res.data
+				console.log('this.detailMsg', this.detailMsg)
+			},
+			// 去购买
+			toBuy() {
+				
+				uni.navigateTo({
+					url: `/pages/order/submitOrder/submitOrder`
+				})
 			}
 		}
 	}
 </script>
 
 <style scoped lang="scss">
-.d-content{
-	background: $page-color-base;
-	width: 100%;
-}
-
-.fixed-top {
-	bottom: 230rpx;
-}
-
-/* 01. 轮播区 */
-.swiper-area {
-	height: 500rpx;
-	z-index: -1;
-	width: 100%;
-}
-
-/* 02. 商品数据区 */
-.goods-area {
-	// margin-top: 720rpx;
+	.d-content {
+		background: $page-color-base;
+		width: 100%;
+	}
 
-	.price-box {
-		display: flex;
-		align-items: baseline;
+	.fixed-top {
+		bottom: 230rpx;
 	}
 
-	.title {
-		color: $font-color-dark;
-		// height: 46rpx;
-		// line-height: 46rpx;
-		font-weight: 700;
+	/* 01. 轮播区 */
+	.swiper-area {
+		height: 500rpx;
+		z-index: -1;
+		width: 100%;
 	}
-}
 
-/* 06. 详情区 */
-.detail-area {
-	.d-header {
-		font-size: $font-base + 2upx;
-		color: $font-color-dark;
-		position: relative;
+	/* 02. 商品数据区 */
+	.goods-area {
+		// margin-top: 720rpx;
 
-		text {
-			padding: 0 20rpx;
-			background: #fff;
-			position: relative;
-			z-index: 1;
+		.price-box {
+			display: flex;
+			align-items: baseline;
 		}
 
-		&:after {
-			position: absolute;
-			left: 50%;
-			top: 50%;
-			transform: translateX(-50%);
-			width: 300rpx;
-			height: 0;
-			content: '';
-			border-bottom: 1px solid #ccc;
+		.title {
+			color: $font-color-dark;
+			// height: 46rpx;
+			// line-height: 46rpx;
+			font-weight: 700;
 		}
 	}
 
-	/* 产品详情 */
-	.pro-detail {
-		width: 100%;
-		overflow: hidden;
-		-webkit-touch-callout: none;
+	/* 06. 详情区 */
+	.detail-area {
+		.d-header {
+			font-size: $font-base + 2upx;
+			color: $font-color-dark;
+			position: relative;
+
+			text {
+				padding: 0 20rpx;
+				background: #fff;
+				position: relative;
+				z-index: 1;
+			}
+
+			&:after {
+				position: absolute;
+				left: 50%;
+				top: 50%;
+				transform: translateX(-50%);
+				width: 300rpx;
+				height: 0;
+				content: '';
+				border-bottom: 1px solid #ccc;
+			}
+		}
 
-		img {
+		/* 产品详情 */
+		.pro-detail {
 			width: 100%;
-			max-width: 100%;
 			overflow: hidden;
+			-webkit-touch-callout: none;
+
+			img {
+				width: 100%;
+				max-width: 100%;
+				overflow: hidden;
+			}
 		}
 	}
-}
 
 
-/* 优惠券区 */
-.coupon-area {
-	max-height: 60vh;
-	min-height: 30vh;
+	/* 优惠券区 */
+	.coupon-area {
+		max-height: 60vh;
+		min-height: 30vh;
 
-	.coupon-item {
-		margin-bottom: 20rpx;
+		.coupon-item {
+			margin-bottom: 20rpx;
 
-		&:last-child {
-			margin-bottom: 0;
-		}
+			&:last-child {
+				margin-bottom: 0;
+			}
 
-		.content {
-			&:after {
-				position: absolute;
-				left: 0;
-				bottom: 0;
-				content: '';
-				width: 100%;
-				height: 0;
-				border-bottom: 1px dashed #f3f3f3;
-				transform: scaleY(50%);
+			.content {
+				&:after {
+					position: absolute;
+					left: 0;
+					bottom: 0;
+					content: '';
+					width: 100%;
+					height: 0;
+					border-bottom: 1px dashed #f3f3f3;
+					transform: scaleY(50%);
+				}
 			}
-		}
 
-		.circle {
-			position: absolute;
-			bottom: -10rpx;
-			z-index: 10;
-			width: 20rpx;
-			height: 20rpx;
-			background: #f5f5f5;
-			border-radius: 50%;
+			.circle {
+				position: absolute;
+				bottom: -10rpx;
+				z-index: 10;
+				width: 20rpx;
+				height: 20rpx;
+				background: #f5f5f5;
+				border-radius: 50%;
 
-			&.r {
-				right: -6rpx;
-			}
+				&.r {
+					right: -6rpx;
+				}
 
-			&.l {
-				left: -6rpx;
+				&.l {
+					left: -6rpx;
+				}
 			}
 		}
 	}
-}
 
-.sale{
-	color: #999;
-	font-size: 12px;
-	padding-top: 10upx;
-}
-.spec-cell{
-	background: #FFF;
-}
-.u-slot-value{
-	font-size: 12px;
-}
+	.sale {
+		color: #999;
+		font-size: 12px;
+		padding-top: 10upx;
+	}
+
+	.spec-cell {
+		background: #FFF;
+	}
+
+	.u-slot-value {
+		font-size: 12px;
+	}
 
-.cart-bottom{
-	width: 100%;
-	position: fixed;
-	left: 0;
-	bottom: 0;
-	height: 130rpx;
-	box-sizing: border-box;
-	background-color: #FFF;
-	z-index: 10;
-	box-shadow: 0px -4px 16px 0px rgba(0,0,0,0.15);
-	.go-cart{
-		height: 80%;
+	.cart-bottom {
+		width: 100%;
+		position: fixed;
+		left: 0;
+		bottom: 0;
+		height: 130rpx;
 		box-sizing: border-box;
-		border: solid 1px #FF0000;
-		font-size: 14px;
-		color: #FF0000;
-		border-radius: 50upx;
-		margin: 0 10px;
-		width: 45%;
+		background-color: #FFF;
+		z-index: 10;
+		box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.15);
+
+		.go-cart {
+			height: 80%;
+			box-sizing: border-box;
+			border: solid 1px #FF0000;
+			font-size: 14px;
+			color: #FF0000;
+			border-radius: 50upx;
+			margin: 0 10px;
+			width: 45%;
+		}
+
+		.go-buy {
+			height: 80%;
+			width: 45%;
+			background-color: #FF0000;
+			color: #FFF;
+			border-radius: 50upx;
+			font-size: 14px;
+		}
 	}
-	.go-buy{
-		height: 80%;
-		width: 45%;
-		background-color: #FF0000;
-		color: #FFF;
-		border-radius: 50upx;
-		font-size: 14px;
+
+	.container {
+		display: flex;
+		// justify-content: space-between;
+		margin: 10px 0;
+		/* 添加一些外边距以便查看 */
 	}
-}
-.container {
-    display: flex;
-    // justify-content: space-between;
-    margin: 10px 0; /* 添加一些外边距以便查看 */
-  }
-</style>
+</style>