bc_wx_applet/pages/classify/classify.vue

<template>
	<view class="w-full">
		<view>
			<u-row justify="space-between" customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="icon-container-l">
						<uni-badge size="normal" :text="txts" absolute="rightTop">
							<u-icon :name="iconCooking" label="自提" labelPos="bottom" size="32"></u-icon>
						</uni-badge>
					</view>
				</u-col>
				<view class="container">
					<u-tag plain :text="tags ? '营业中' : '离线'" :type="tags ? 'success' : 'error'" size="mini"></u-tag>
					<view @click="btnIc">
						<u-icon label="当前餐车名称" labelPos="left" size="16" name="arrow-down"></u-icon>
					</view>
				</view>
				<u-col span="3">
					<view class="icon-container-r">
						<u-icon label="我的" labelPos="bottom" size="32" :name="iconPeople"></u-icon>
					</view>
				</u-col>
			</u-row>
		</view>
		<!-- <top-search :isSearch="false" @searchClick="searchClick"></top-search>
		 <view class="w-full padding-lr-sm box-sizing-b dflex-b">
			<scroll-view class="goods-category" scroll-x>
				<view class="category-box">
					<view class="category-item padding-lr-lg" v-for="item in 8" :key="item" :class="{'on-category':onIndex === item}">分类{{item+1}}</view>
				</view>
			</scroll-view>
			<view class="classify-icon">
				<u-icon name="grid-fill" size="30" @click="show = true" />
			</view>
		</view>
		<u-popup :show="show" mode="left" @close="show = false">
			<view class="classify-popup padding-lr-lg padding-tb box-sizing-b">
				<view class="padding-tb-sm">全部</view>
				<view class="padding-tb-sm" v-for="index in 8">分类{{index+1}}</view>
			</view>
		</u-popup> -->
		<view class="w-full dflex-b padding-xs box-sizing-b dflex-wrap-w">
			<view class="goods-item margin-bottom-sm" v-for="(item, gindex)  in goods" :key="gindex">
				<view class="img dflex-c" @click="toDetial">
					<image mode="aspectFit" :src="'../../static/x'+ gindex%2 +'.jpg'"></image>
				</view>
				<view class="title">{{item.goods_name}}</view>
				<view class="dflex padding-bottom-xs">
					<u-tag plain text="销量: 199" borderColor="#FF6D20" color="#FF6D20" size="mini"></u-tag>
				</view>
				<view class="w-full dflex-b">
					<view class="price">{{item.goods_price}}</view>
					<view>
						<u-button type="primary" shape="circle" size="small"
							color="linear-gradient(to right, #F54319, #FF6D20)" @click="goCart(item)">
							<u-icon name="shopping-cart-fill" size="28" color="#fff"></u-icon>
						</u-button>
					</view>
				</view>
			</view>
		</view>
		<my-gap :height="130" />
		<specPopup class='spec-box' ref="specPopup" :cardMsg="cardMsg" @update-shopmsg="handleUpdateShopMsg">
		</specPopup>
		<view class="cart-bottom padding-sm dflex-b">
			<view class="cart padding-lr">
				<uni-badge size="small" :text="100" absolute="rightTop">
					<u-icon name="shopping-cart-fill" size="28" color="#FF873D" @click="showCart"></u-icon>
				</uni-badge>
				<text class="cart-total">总计：￥{{total}}</text>
			</view>
			<view class="balance dflex-c background-gradient">去结算</view>
		</view>
		<cartPopupVue ref="cartPopup" :carList="carList" @numChanged="numChanged" />

	</view>
</template>

<script>
	import cartPopupVue from '../../components/cartPopup.vue'
	import specPopup from '@/components/specPopup.vue'
	import iconCooking from '../../static/cooking.png'
	import iconPeople from '../../static/people.png'
	import shoppingCart from '../../static/shoppingCart.png'
	export default {
		components: {
			cartPopupVue,
			specPopup
		},
		data() {
			return {
				onIndex: 0,
				show: false,
				iconCooking: iconCooking,
				iconPeople: iconPeople,
				shoppingCart: shoppingCart,
				tags: 1,
				txts: 1,
				goods: [ // 购物车数据列表
					{
						id: 1,
						goods_name: "小乳酸菌牛奶酸奶",
						goods_price: "5.20",
						goods_type: '大份',
						goods_num: 1,
						src: '../../static/x0.jpg',
					},
					{
						id: 2,
						goods_name: "饮料整箱饮品",
						goods_price: "5.20",
						goods_type: '大份',
						goods_num: 1,
						src: '../../static/x1.jpg',
					},
					{
						id: 3,
						goods_name: "饮品早餐酸乳益生菌",
						goods_price: "5.20",
						goods_type: '小份',
						goods_num: 1,
						src: '../../static/x0.jpg',
					},
					{
						id: 4,
						goods_name: "酸奶饮料",
						goods_price: "5.20",
						goods_type: '小份',
						goods_num: 1,
						src: '../../static/x1.jpg',
					},
					{
						id: 5,
						goods_name: "小乳酸菌",
						goods_price: "5.20",
						goods_type: '小份',
						goods_num: 1,
						src: '../../static/x0.jpg',
					},
					{
						id: 6,
						goods_name: "酸乳益生菌",
						goods_price: "5.20",
						goods_type: '大份',
						goods_num: 1,
						src: '../../static/x1.jpg',
					}
				],
				total: 0,
				carList: [],
				cardMsg: {}
			}
		},
		created() {

		},
		methods: {
			// 加购
			goCart(e) {
				console.log('================', e)
				this.cardMsg = e
				this.$refs.specPopup.open();
				//this.$refs.specPopup.change(true);
			},
			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);
			    }
			
			    // 您可以在这里执行其他逻辑，比如保存到本地存储或发送到服务器
			  }
			
			  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.totalPrice()
			},
			totalPrice() {
				let total = 0;
				for (let i = 0; i < this.carList.length; i++) {
					total += this.carList[i].goods_price * this.carList[i].goods_num;
					//goods_num += this.carList[i].goods_num
				}
				this.total = total
				console.log('total', this.total);
			},
			showCart() {
				this.$refs.cartPopup.setShow(true);
			},
			btnIc() {
				uni.navigateTo({
					url: `/pages/diningList/diningList`
				})
			},
			toDetial() {
				uni.navigateTo({
					url: `/pages/goodDetail/goodDetail`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.goods-category {
		width: calc(100% - 100rpx);
		border-radius: 14rpx;
		overflow: hidden;

		.category-box {
			height: 70rpx;
			width: 100%;
			display: flex;
			align-items: center;

			.category-item {
				font-size: 14px;
				flex-shrink: 0;
				height: 100%;
				line-height: 70rpx;
			}

			.on-category {
				color: #FFF;
				background-color: #000;
			}
		}

		.classify-icon {
			width: 100rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}

	.goods-item {
		width: 48%;
		overflow: hidden;
		box-sizing: border-box;
		border: solid 4px #FFF;
		border-radius: 5px;
		box-shadow: 0px 3px 10px 0px rgba(213, 221, 232, 0.5);

		.img {
			width: 100%;
			height: 180rpx;
			overflow: hidden;
			background: #EEE;
		}

		.title {
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			padding: 10rpx;
		}
	}

	.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;
		}
	}

	.spec-box {
		position: relative;
		z-index: 99999;
	}

	.classify-popup {
		width: 400rpx;
	}

	.container {
		display: flex;
		flex-direction: column;
		/* 垂直排列子元素 */
		align-items: center;
		/* 垂直居中子元素 */
		justify-content: center;
		/* 水平居中子元素 */
	}

	.icon-container-l {
		margin-top: 10px;
		margin-left: 15px;
	}

	.icon-container-r {
		margin-left: 20px;
	}
</style>