uni 多商家购物车

最新推荐文章于 2023-11-14 15:08:53 发布
最新推荐文章于 2023-11-14 15:08:53 发布
阅读量536 收藏 6
点赞数 1
分类专栏： uniApp 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdn_yuan_/article/details/109026130
版权

在这里插入图片描述

<template>
	<view>
		<view class="cartBox" style="padding-bottom: 90rpx;">
			<view class="cartShop" v-for="(items,index) in cartData.list" :key="index">
				<view class="cartName cartPad">
					<radio :checked="items.shopSelected==1" color="#ff2d52" style="transform:scale(0.8)" @click="shopselect(items)" />
					<view class="cartName-box" @tap="goShop(items)">
						<image :src="items.logo" class="cartName-img"></image>
						<view style="max-width:400rpx;overflow:hidden; white-space: nowrap;text-overflow:ellipsis;">{{items.marketname}}</view>
					</view>
					<image src="https://yiqihuijia.20080531.com/Public/wxminicon/dsp_arr_rgray2@3x.png" class="cartName-go" @tap="goShop(items)"></image>
				</view>
				<view class="cartLine cartPad"></view>
				<view v-for="(item,k) in items.cart" :key="k" class="cartCont" @click="goodSelect(items,item)">
					<view class="cartDetail">
						<radio :checked="item.goodsSelected==1" color="#ff2d52" style="transform:scale(0.8)" />
						<view class="cartDetail-img">
							<image :src="item.imgurl" class="cartDetail-imgs"></image>
						</view>
						<view class="cartDetail-title">
							<view class="cartDetail-txt">
								{{item.goodsname}}
							</view>
							<view class="cartDetail-lab">
								{{item.skuvalue}}
							</view>
						</view>
					</view>
					<view class="cartNum">
						<view class="cartNum-txt">
							<view style="margin-bottom: 15rpx;">
								¥<text style="font-size: 35rpx;">{{item.price}}</text>
							</view>
						</view>
						<view class="add-sub-con">
							<text class="link" :class="item.num==1? 'jj':'aj'" @click.stop="cutAction(item)">-</text>
							<text class="input1 num input">{{item.num}}</text>
							<text class="link" :class="item.num*1<item.kucun*1? 'aj':'jj'" @click.stop="addAction(item)">+</text>
						</view>
					</view>
				</view>
			</view>

			<view class="cartTotal">
				<view class="cartTotal-title">
					<view class="cartTotal-title">
						<radio :checked="cartData.allSelected==1" color="#ff2d52" style="transform:scale(0.8)" @click="selectAllAction" />
						<view class="cart-choose" @click="selectAllAction">
							全选
						</view>
						<view class="cart-del" @click="deleteItem">
							删除
						</view>
					</view>
					<view class="cart-num">
						<view class="cart-numTxt">
							合计金额
						</view>
						<text style="font-size: 25rpx;">¥</text>{{totalPrice.toFixed(2)}}
					</view>
				</view>
				<view class="cartTotal-btn" @tap="submitAction">
					结算
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				img: this.imgBaseUrl,
				cartData: {
					list: [{
							marketid: "0131",
							marketname: "好再来孕婴店",
							logo: "https://yiqihuijia.20080531.com/Upload/Market/202008/24/159825500113ergs.jpeg",
							shopSelected: "1",
							subTotal: "39.00",
							cart: [{
									cartid: "415",
									goodsid: "508",
									skuid: "879",
									skuvalue: "白色",
									num: "1",
									goodsname: "新生儿尿布2条装",
									marketid: "0131",
									imgurl: "https://yiqihuijia.20080531.com/Upload/MarketGoods/detail/202008/508/5f44ea1f962ba.jpg",
									price: "30.00",
									kucun: "300",
									goodsSelected: "1"
								},
								{
									cartid: "414",
									goodsid: "506",
									skuid: "867",
									skuvalue: "蓝色",
									num: "1",
									goodsname: "新生儿纯棉洗澡起泡擦",
									marketid: "0131",
									imgurl: "https://yiqihuijia.20080531.com/Upload/MarketGoods/detail/202008/506/5f44ddd45a5b9.jpg",
									price: "10.00",
									kucun: "1",
									goodsSelected: "1"
								}
							]
						},
						{
							marketid: "234",
							marketname: "地平线8号旅行箱店",
							logo: "https://yiqihuijia.20080531.com/Upload/MarketM/202008/26/1598424570ah95ua.jpeg",
							shopSelected: "1",
							subTotal: "400.00",
							cart: [{
								cartid: "411",
								goodsid: "516",
								skuid: "971",
								skuvalue: "幻影黑",
								num: "1",
								goodsname: "地平线8号大容量静音万向轮旅行箱",
								marketid: "234",
								imgurl: "https://yiqihuijia.20080531.com/Upload/MarketGoods/detail/202008/234/1599820041wkuxbt.jpeg",
								price: "400.00",
								kucun: "79",
								goodsSelected: "1"
							}]
						}
					],
					allSelected: "1",
					totalPrice: "439.00"
				},
				cart: []
			}
		},
		onShow() {
			this.getShopList()
		},
		computed: {
			//计算选中商品的总价
			totalPrice() {
				let prices = 0;
				if (!!this.cartData.list) {
					this.cartData.list.map(shopItem => {
						shopItem.cart.map(goodItem => {
							goodItem.goodsSelected == 1 ? prices += goodItem.price * goodItem.num : prices += 0;
						})
					})
				}
				return prices;
			}
		},
		methods: {
			getShopList() {
				if (this.cartData.allSelected == 1) {
					this.cartData.list.forEach(shopItem => {
						shopItem.cart.forEach(goodsItem => {
							this.cart.push(goodsItem)
						})
					})
				} else {
					this.cartData.list.forEach(shopItem => {
						shopItem.cart.forEach(goodsItem => {
							if (goodsItem.goodsSelected == 1) {
								this.cart.push(goodsItem)
							}
						})
					})
				}
			},
			// 选择店铺
			shopselect(shopItem) {
				//遍历此店铺中商品 并全部选择
				if (shopItem.shopSelected == 0) {
					shopItem.shopSelected = 1
					shopItem.cart.map(goodItem => {
						goodItem.goodsSelected = 1;
						this.cart.push(goodItem)
					});
				} else {
					shopItem.shopSelected = 0
					shopItem.cart.map(goodItem => {
						goodItem.goodsSelected = 0;
					});
					this.cart = this.cart.filter((item) => {
						return item.marketid != shopItem.cart[0].marketid
					})
				}
				this.changeSelectAllBtn();
			},
			// 选择商品
			goodSelect(shopItem, goodItem) {
				// 如果商品没选中 则不选中店铺
				if (goodItem.goodsSelected == 0) {
					goodItem.goodsSelected = 1
					shopItem.isSelectShop = false;
					//店铺中商品都满足条件 则返回true
					const shopS = shopItem.cart.every(goodItem => {
						return goodItem.goodsSelected == 1;
					});

					//商品都选中  则店铺选中
					if (shopS) {
						shopItem.shopSelected = 1;
					}
					this.cart.push(goodItem)
				} else {
					goodItem.goodsSelected = 0
					shopItem.shopSelected = 0;
					this.cart.forEach((el, index) => {
						if (el.cartid == goodItem.cartid) {
							this.cart.splice(index, 1)
						}
					})
				}
				//监听全选按钮状态
				this.changeSelectAllBtn();
			},
			// 选择全部
			selectAllAction() {
				//遍历数据数组--遍历店铺  修改选择
				if (this.cartData.allSelected == 0) {
					this.cartData.allSelected = 1
					this.cart = []
					this.cartData.list.map(shopItem => {
						shopItem.shopSelected = 1;
						shopItem.cart.map((goodItem, index) => {
							this.cart.push(goodItem)
							goodItem.goodsSelected = 1;
						});
					});
				} else {
					//反选
					this.cartData.allSelected = 0
					this.cartData.list.map(shopItem => {
						shopItem.shopSelected = 0;
						shopItem.cart.map(goodItem => {
							this.cart = []
							goodItem.goodsSelected = 0;
						});
					});
				}
			},
			/* 选择店铺或者商品 监听全选按钮状态 */
			changeSelectAllBtn() {
				const selectAll = this.cartData.list.every(shopItem => {
					return shopItem.shopSelected == 1;
				});
				if (selectAll) {
					this.cartData.allSelected = 1
				} else {
					this.cartData.allSelected = 0
				}
			},
			// 增加数量
			addAction(goodItem) {
				if (goodItem.num >= parseInt(goodItem.kucun)) {
					uni.showToast({
						title: '不能再多了~',
						icon: 'none'
					});
					return true
				}
				goodItem.num++;
			},
			// 减少数量
			cutAction(goodItem) {
				if (goodItem.num > 1) {
					goodItem.num--;
				} else {
					uni.showToast({
						title: '不能再少了~',
						icon: 'none'
					});
				}
			},
			// 删除
			deleteItem() {
				let delObj = {}
				this.cart.map((goodItem, index) => {
					delObj[goodItem.cartid] = goodItem.num
				});

				if (JSON.stringify(delObj) == "{}") {
					uni.showToast({
						title: "请选择要删除的商品",
						icon: "none"
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '确定删除选中的商品？',
						confirmColor: "#fe0909",
						success: (con) => {
							if (con.confirm) {
								console.log(JSON.stringify(delObj))
							} else if (con.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			// 结算
			submitAction() {
				let ALL = []
				this.cart.map(goodItem => {
					let cartarr = {}
					cartarr["cartid"] = goodItem.cartid
					cartarr["goodsid"] = goodItem.goodsid
					cartarr["num"] = goodItem.num
					cartarr["skuid"] = goodItem.skuid
					ALL.push(cartarr)
				});

				console.log(JSON.stringify(ALL))
			}
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}

	.cartBox {
		background-color: #F5F5F5;
		padding-top: 20rpx;
	}

	.cartShop {
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
		overflow: hidden;
	}

	.cartPad {
		margin: 0 26rpx;
	}

	.cartName {
		height: 112rpx;
		font-size: 29rpx;
		color: #333333;
		display: flex;
		align-items: center;
	}

	.cartName-box {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.cartName-img {
		width: 56rpx;
		height: 56rpx;
		margin: 0 18rpx;
		border-radius: 50%;
	}

	.cartName-imgs {
		width: 113rpx;
		height: 35rpx;
		margin-left: 18rpx;
	}

	.cartName-go {
		width: 16rpx;
		height: 27rpx;
	}

	.cartLine {
		height: 2rpx;
		background-color: #e5e5e5;
	}

	.cartCont {
		margin: 0 26rpx;
	}

	.cartDetail {
		display: flex;
		align-items: center;
		margin-top: 22rpx;
	}

	.cartDetail-img {
		width: 108rpx;
		height: 108rpx;
		border: solid 1rpx #e5e5e5;
		margin-left: 17rpx;
	}

	.cartDetail-imgs {
		width: 90rpx;
		height: 90rpx;
		margin: 9rpx;
	}

	.cartDetail-title {
		font-size: 29rpx;
		color: #333333;
		margin-left: 24rpx;
	}

	.cartDetail-txt {
		max-width: 520rpx;
		line-height: 1.2;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.cartDetail-lab {
		font-size: 26rpx;
		color: #999999;
	}

	.cartNum {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-top: 15rpx;
		padding-bottom: 26rpx;
	}

	.cartNum-txt {
		font-size: 25rpx;
		color: #ff2d52;
	}

	.cartTotal {
		width: 100%;
		height: 91rpx;
		background-color: #FFFFFF;
		font-size: 28rpx;
		color: #333333;
		display: flex;
		align-items: center;
		padding-left: 27rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 10;
	}

	.cartTotal-title {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.cart-choose {
		margin: 0 21rpx 0 14rpx;
	}

	.cart-num {
		font-size: 31rpx;
		color: #ff2d52;
		text-align: right;
		padding-right: 21rpx;
	}

	.cart-numTxt {
		font-size: 25rpx;
		color: #999999;
		margin-bottom: 10rpx;
	}

	.cartTotal-btn {
		width: 207rpx;
		height: 91rpx;
		font-size: 31rpx;
		color: #FFFFFF;
		background-color: #ff2d52;
		line-height: 91rpx;
		text-align: center;
	}
	.add-sub-con {
		margin-left: 168rpx;
	}

	.add-sub-con .link {
		float: left;
		width: 60rpx;
		height: 60rpx;
		line-height: 62rpx;
		text-align: center;
		font-size: 32rpx;
		color: #666;
		border: #e5e5e5 solid 1px;
		background-color: #F8F8F8;
	}

	.add-sub-con .link.aj {
		color: #fe0909;
		border: #e5e5e5 solid 1px;
		background: #fff;
	}

	.add-sub-con .link.jj {
		color: #666;
		border: #e5e5e5 solid 1px;
		background-color: #F8F8F8;
	}

	.add-sub-con .input {
		float: left;
		display: block;
	}

	.add-sub-con .input {
		width: 85rpx;
		height: 60rpx;
		line-height: 60rpx;
		box-sizing: border-box;
		text-align: center;
		font-size: 30rpx;
		-webkit-border-radius: 0;
		border: 1px solid #e5e5e5;
		border-left: none;
		border-right: none;
	}
</style>
0131
关注
专栏目录
uniapp [全端兼容] - 详细实现企业级电商购物车界面源码，自动计算购物车合计金额、商品数量加减、单选/一键全选、根据商品归属店铺分类，商铺所属商品嵌套展示和选择区分功能，仿淘宝京东电商购物软件
王佳斌
08-21 6084
uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，购物车，电商平台，uniApp购物车，购物车页面源码，店铺下所属的商品，购物车页面详细代码，全选商品，单选，右滑删除，全选反选，详细购物车源码，仿造京东淘宝购物车，编辑商品数量，结算商品，实时计算商品合计金额，购物车有店铺一键全选，商品购物车有店铺存在怎么做，合计金额，购物车商品的增删全选，类似美团的购物车，带商铺商户的购物车分类，多商家，商家商品，uni-app实现商城多商家购物车功能(超详细, 附
uniapp实现购物车功能
shuux666的博客
03-03 6719
uniapp实现购物车功能 周六我看见一个有个公司招聘需要试岗3天，并使用uniapp完成购物车，直播间，地图，首页四个功能方能通过，于是乎，我趁手上没事就打算自己写一遍，虽然我的项目没用到，但是多掌握点总没错。今天就来第一个——购物车 因为没写接口，上面的数据我都是使用的模拟数据搭建而成，主要实现的是它件数的增加减少与支付总价格的逻辑关系，还有左边的全选和全不选。 首先第一步，我们把页面先搭建出来 <template> <view> //购物车没商品出现的页面 <v
uni-app实现商城多商家购物车功能(超详细, 附带源码)
热门推荐
青衫折扇的博客
10-13 1万+
我们先来看一下效果 有什么不懂可以直接下方留言 先来看代码 <template> <view class="cart"> <!-- 购物车为空 S --> <view v-if="cartList.length === 0" class="empty"> <image class="icongouwuche" src="../../static/icon_gouwuche.png" mode="widthFix">&lt
uniapp小程序购物车多商家单选全选功能
qq_44922777的博客
03-21 1756
说明：点击商家复选框，可选中当前商家下的所有商品。点击全选，选中全部商家的商品。其中，slideLeft 组件是删除的效果。
uniapp购物车功能
最新发布
weixin_58319850的博客
11-14 252
2引入import commonCar from '@/components/shopCar/shopCar.vue'1在components组件下创建一个叫shopCar的vue文件。第一个页面为子组件页面 第二个为父组件。
UNIAPP优购商城购物车功能
m0_64396262的博客
06-26 2101
由于uniapp拥有高效开发，性能优秀，功能扩展灵活等优点，吸引了无数电商企业使用uniapp一次开发多个平台应用和部署，而今天要讲的，就是多渠道经营的卖家要开发商城中不可或缺的功能：购物车那么首先，我们需要写出地址框，购物车标题，购物车统计，以及购物车为空时的页面。
uniapp购物车多商家商品实现（删除-添加-结算-总价计算-总数合计-单选全选-快速清理-）
weixin_69658614的博客
08-16 2334
多余数据自己删除，数据自己更改。
CRMEB_PRO_好物优选模板，适配v1.3版，uni-app商城模板
08-14
uni-app是一个基于Vue.js开发的多端开发框架，允许开发者使用一套代码库在iOS、Android、H5等多个平台上构建应用，大大提高了开发效率和应用的一致性。 此模板的核心特性在于其高度适配CRMEB系统，CRMEB是一个综合...
uniapp-shoprxr_uni.zip
12-16
【标题】"uniapp-shoprxr_uni.zip" 指的是一个使用 UniApp 技术构建的新零售电商系统的前端源...对于希望进入新零售领域的商家来说，这是一个值得考虑的解决方案，因为它能帮助他们快速搭建起具有竞争力的电商应用。
基于uni-app的鲜花小程序
06-07
4. **购物车**：用户选择的商品会暂时存储在购物车中，uni-app的`<van-cart>`组件或自定义组件可以实现购物车逻辑，包括商品增删、数量调整、总价计算等功能。与后台交互时，uni-app的`uni.setStorageSync()`和`uni....
uni-app购物车功能
Cookie686的博客
01-09 681
uni-app购物车功能
uni-app 实现购物车
qq_42292879的博客
02-23 9829
#实现购物车 uni-app文档 ##效果图 ##具体代码 前提 实现了商品的购物车添加和用户登录 <template> <view> <view class="" v-if="flag"> 购物车空空如也，请<navigator open-type="switchTab" url="../home/home">先选购</navi...
uniapp实现购物车全选、反选、单选功能
Nuygnix__的博客
12-06 1824
uniapp实现购物车全选、反选、单选功能。我写的只是一个demo，主要实现了其功能，复制下列代码即可用。 {{item.che
uni-app购物车逻辑
qi_qi_ai的博客
12-03 296
购物车逻辑
uniapp 购物车 单店铺
weixin_45157073的博客
07-08 465
uniapp 购物车 单店铺
[vue]仿淘宝app购物车实现
qq_42709302的博客
01-07 1014
根据需求要类似淘宝app的购物车实现。网上的例子一般都是一个产品列表就完成，但淘宝这些需要有一个对店铺的分类，所以复杂度提升一倍。 1.对单个商品数量进行操作的时候，商品的价格变动，总价变动 2.点击产品选择，总价和数量变动，并且一个商店所以产品被选择时，商店的按钮为被选择状态 3.对一个商店做选择的时候，下面所有商品被选择，总价和数量变动，并且所有商店被选择的时，全选为被选择状态 4.全选的时候，所有店铺已经商品为被选择状态，总价和数量变动 作者：Re_Vive 链接：https://www.jian
uniapp 购物车功能 删除 添加 结算
Acitylion的博客
09-25 4041
<template> <view class=""> <view class="delete1"> <view @click="binddelete" style="width: 50px;text-align: right;">删除</view> </view> <view class="orderBottom" v-if="carList.length != 0"> <view c...
uniapp-购物车功能实现案例
在无知中学习，在学习中成长，在成长中学习
02-03 1998
uniapp购物车的基本实现案例
uni.app购物车
09-15
在开发过程中，uni-app可以实现各种功能，包括购物车功能。通过使用uni-app，可以实现购物车的添加商品、删除商品、修改商品数量等基本功能。根据提供的引用，可以看出购物车的实现需要使用uni.navigateTo方法进行...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值