修改页面

pages/shop/shop.vue

@@ -62,11 +62,15 @@
 		</view>
 		
 		<view class="fixed bg-white row-between px48 u-p-t-20 u-p-b-20">
-			<view class="column u-text-center">
+			<view class="column u-text-center u-relative" @click="addCartFun">
 				<view class="row-center">
-					<u-image :src="cloudPath + 'img/icon_store.png'" width="48" height="48"></u-image>
+					<!-- <u-image src="/static/tabbar/tab_cart.png" width="48" height="48"></u-image> -->
+					<u-icon name="shopping-cart" size="48" color="#254062"></u-icon>
+				</view>
+				<view>购物车</view>
+				<view class="u-absolute top-0 right-0 text-fff number u-text-center xxs" v-if="cartNum">
+					{{ cartNum }}
 				</view>
-				<view>门店</view>
 			</view>
 			<view class="u-m-l-64 flex1">
 				<u-button hover-class="none"  @click="showSpecFun"
@@ -78,13 +82,18 @@
 			</view>
 		</view>
 		
-		<shop-spec v-model="showSpec" :name="goods.name" :goods="goods" @close="showSpec = false" @confirm="confirmSpec" @buynow="onBuy"></shop-spec>
+		<shop-spec v-model="showSpec" :name="goods.name" :goods="goods" @close="closePopup" @confirm="confirmSpec" @buynow="onBuy"></shop-spec>
 	</view>
 </template>
 
 <script>
+	import {
+		mapActions,
+		mapGetters
+	} from 'vuex';
 	import {
 		getGoodsDetail,
+		getCartList,
 		addCart,
 		getPoster,
 		getCartNum
@@ -101,6 +110,9 @@
 				goods: [],
 				spec: [],
 				checkedGoods: {},
+				source: '',
+				cartLists: [],
+				totalPrice: 0,
 			}
 		},
 
@@ -110,9 +122,13 @@
 
 		onShow() {
 			this.getGoodsDetailFun();
+			this.getCartNum()
+			this.getCartListFun()
 		},
 
 		methods: {
+			...mapActions(['getCartNum']),
+
 			// 获取商品详情
 			async getGoodsDetailFun() {
 				const {
@@ -124,10 +140,44 @@
 				if (code == 1) {
 					this.goods = data
 					console.log(this.goods.goods_image);
-					
 				}
 			},
 
+			// 获取购物车列表数据
+			getCartListFun() {
+				// 获取商品的分类ID
+				getCartList().then((res) => {
+					if (res.code == 1) {
+						let {
+							lists,
+							total_amount
+						} = res.data;
+						this.cartLists = lists;
+						// // let cartType = 0;
+
+						// // if (lists.length == 0) {
+						// // 	cartType = 2;
+						// // } else {
+						// // 	cartType = 1;
+						// // }
+
+						// this.cartLists = list;
+						// console.log(">>>", this.cartLists);
+				
+						// // this.cartType = cartType;
+						this.totalPrice = total_amount
+						// // this.isShow = true;
+						this.getCartNum();
+					}
+				});
+			},
+
+			// 将当前的商品添加到购物车里面
+			addCartFun() {
+				this.source = 'cart'
+				this.showSpec = true
+			},
+
 			// 打开商品规格
 			openSpec() {
 				this.showSpec = true
@@ -138,6 +188,7 @@
 				console.log("data>>>", data.spec);
 				this.spec = data.spec
 				this.showSpec = false
+				this.source = ''
 			},
 
 			onChangeGoods(e) {
@@ -151,17 +202,46 @@
 				this.showSpec = true;
 			},
 
+			closePopup() {
+				this.source = ''
+			},
+
 			// 购买商品
 			onBuy(e) {
-				let {id, goodsNum} = e.detail
-				let goods = [{item_id: id, num: goodsNum}]
-				const params = {goods}
-				this.showSpec = false
-				uni.navigateTo({
-					url: '/pages/order_now/order_now?data=' + encodeURIComponent((JSON.stringify(params)))
-				})
+				if (this.source === 'cart') {
+					// 限购逻辑:套餐和单品内的商品列表，每个都是只能购买两个
+					console.log("🚀 ~ onBuy ~ this.goods:", this.goods)
+					if (this.goods.first_category_id == 1 || this.goods.first_category_id == 2) {
+						const totalNum = this.cartLists
+							.filter(i => i.first_category_id === this.goods.first_category_id)
+							.reduce((sum, i) => sum + (i.goods_num || 0), 0);
+
+						if (totalNum >= 2) {
+							this.$toast({ title: '该类商品每人限购2件' });
+							return;
+						} else {
+							addCart({
+								item_id: this.goods.id,
+								goods_num: 1
+							}).then(res => {
+								this.getCartListFun()
+							});
+						}
+					}
+				} else {
+					let {id, goodsNum} = e.detail
+					let goods = [{item_id: id, num: goodsNum}]
+					const params = {goods}
+					this.showSpec = false
+					uni.navigateTo({
+						url: '/pages/order_now/order_now?data=' + encodeURIComponent((JSON.stringify(params)))
+					})
+				}
 			}
-		}
+		},
+		computed: {
+			...mapGetters(['cartNum']),
+		},
 	}
 </script>
 
@@ -183,4 +263,13 @@
 		right: 0;
 		padding-bottom: env(safe-area-inset-bottom);
 	}
+
+	.number {
+		background-color: #FF2C3C;
+		width: 40rpx;
+		height: 40rpx;
+		line-height: 40rpx;
+		border-radius: 100%;
+	}
+
 </style>