uni-app+uview 购物车模块组件(笔记)

最新推荐文章于 2025-02-26 10:22:18 发布
最新推荐文章于 2025-02-26 10:22:18 发布
阅读量3.7k 收藏 14
点赞数 4
分类专栏： uni-app 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/FantasyWeirdo/article/details/111354751
版权 
<template>
	<!-- 商品列表 -->
	<view class="wee-cart">
		<view class="bg"></view>
		<view class="tips" v-if="goodsList.length==0">
			<u-image class="tips-img" width="305" height="200" src="/static/base/shopping-cart.png"></u-image>
			<view></view>
			<uni-title type="h4" title="购物车竟然是空的" align="center"></uni-title>
			<uni-title type="h5" title="再忙，也要记得买点什么犒劳自己 ~ღ( ´･ᴗ･` )" align="center"></uni-title>
			<u-button size="medium" type="warning">去逛逛</u-button>
		</view>
		<view class="cart-list">
			<view class="cart-item" v-for="(item,index) in goodsList" :key="item.firmId">
				<view class="stylist">
					<u-checkbox-group>
						<u-checkbox v-model="item.selectedAll" shape="circle" @change="firmSelectedAll(index)">
							<u-icon class="home" name="home" :label="item.firmName" label-color="#000"></u-icon>
							<u-icon class="arrow-right" name="arrow-right" color="#aaa" size="20"></u-icon>
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="select-list">
					<u-checkbox-group :wrap="true">
						<u-checkbox @change="selectedSole(index, i)" class="select-checkbox" shape="circle" v-model="goods.selected"
						 v-for="(goods, i) in item.goods" :key="goods.id" :name="goods.name">
							<view class="select-item" @tap.stop>
								<u-image :src="goods.img" class="img" border-radius="10" width="160" height="160"></u-image>
								<view class="goods-info">
									<view class="name">{{goods.name}}</view>
									<view class="size">{{goods.spec}}
										<u-icon class="arrow-down" name="arrow-down" size="20"></u-icon>
									</view>
									<view class="data-num">
										<view class="price">￥<text>{{goods.price}}</text>
										</view>
										<view>
											<u-number-box v-model="goods.number" :min="1" @minus="sub(index,i)" @plus="add(index,i)"></u-number-box>
										</view>
									</view>
								</view>
							</view>
						</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
		</view>

		<view class="navigation">
			<view class="left">
				<view class="item">
					<u-checkbox-group>
						<u-checkbox v-model="isSelectedAllRow" :disabled="!goodsList.length" shape="circle" @change="selectedAllRow">
							全选
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="item">
					<view class="goods-remove u-line-1" v-if="selectedAllRowLength" @click="removeGoodsEvent">
						<u-icon name="trash-fill" size="30" color="#ff3300" label-color="#ff3300" label="删除"></u-icon>
					</view>
				</view>
			</view>
			<view class="right">
				<view class="total-cost u-line-1">总价格<text class="red-price">￥{{sumPrice}}</text></view>
				<view class="buy btn u-line-1" @tap="common.openPages(1,'/pages/store/user/submit-order')">结算<text v-if="selectedAllRowLength">({{selectedAllRowLength}})</text></view>
			</view>
		</view>

	</view>
</template>
<script>
	export default {
		name: 'weeCart',
		data() {
			return {
				goodsList: [{
					firmId: 101,
					firmName: '商铺名称',
					selectedAll: false,
					goods: [{
						id: 1,
						img: '/static/images/10.png',
						name: '商品标题1',
						spec: '规格:S码',
						price: 127.5,
						number: 1,
						selected: false
					}, {
						id: 2,
						img: '/static/images/10.png',
						name: '商品标题商品标题商品标2商品标题商品标题商品标商品标题商品标题商品标商品标题商品标题商品标商品标题商品标题商品标',
						spec: '规格:S码',
						price: 2.5,
						number: 2,
						selected: false
					}]
				}, {
					firmId: 102,
					firmName: 'GeekFun',
					selectedAll: false,
					goods: [{
						id: 3,
						img: '/static/images/10.png',
						name: '商品标题1',
						spec: '规格:S码',
						price: 127.5,
						number: 1,
						selected: false
					}]
				}, {
					firmId: 103,
					firmName: 'GeekFun',
					selectedAll: false,
					goods: [{
						id: 3,
						img: '/static/images/10.png',
						name: '商品标题1',
						spec: '规格:S码',
						price: 127.5,
						number: 1,
						selected: false
					}]
				}, {
					firmId: 104,
					firmName: 'GeekFun',
					selectedAll: false,
					goods: [{
						id: 3,
						img: '/static/images/10.png',
						name: '商品标题1',
						spec: '规格:S码',
						price: 127.5,
						number: 1,
						selected: false
					}]
				}, {
					firmId: 105,
					firmName: 'GeekFun',
					selectedAll: false,
					goods: [{
						id: 3,
						img: '/static/images/10.png',
						name: '商品标题1',
						spec: '规格:S码',
						price: 127.5,
						number: 1,
						selected: false
					}]
				}],
				isSelectedAllRow: false, // 全选所有商品
				selectedAllRowList: [], // 储存一个已经选择的数据
				selectedAllRowLength: 0, // 已经选择了的数据的长度
				sumPrice: '0.00' // 总价格
			}
		},
		methods: {
			/**
			 * 数字步进 减
			 * @param {Object} m 父 索引
			 * @param {Object} n 子 索引
			 */
			sub(m, n) {
				if (this.goodsList[m].goods[n].number <= 1) {
					return
				}
				this.goodsList[m].goods[n].number--
				this.sumTotalPrice()
			},

			/**
			 * 数字步进 加
			 * @param {Object} m 父 索引
			 * @param {Object} n 子 索引
			 */
			add(m, n) {
				this.goodsList[m].goods[n].number++
				this.sumTotalPrice()
			},

			/**
			 * 选择单个商品
			 * @param {Object} m 父 索引
			 * @param {Object} n 子 索引
			 */
			selectedSole(m, n) {
				this.goodsList[m].goods[n].selected = !this.goodsList[m].goods[n].selected
				// 循环设置父全选 如果全部选中  则父全选选中 否则 不选中
				for (let i = 0; i < this.goodsList[m].goods.length; i++) {
					if (this.goodsList[m].goods[i].selected) {
						this.goodsList[m].selectedAll = true
					} else {
						this.goodsList[m].selectedAll = false
						break
					}
				}
				this.computeSelectedAll()
				this.sumTotalPrice()
			},

			/**
			 * 全选 当前店铺下所有的商品
			 * @param {Object} index 索引值
			 */
			firmSelectedAll(index) {
				this.goodsList[index].selectedAll = !this.goodsList[index].selectedAll;
				for (let i = 0; i < this.goodsList[index].goods.length; i++) {
					this.goodsList[index].goods[i].selected = this.goodsList[index].selectedAll
				}
				this.computeSelectedAll()
				this.sumTotalPrice()
			},

			// 全选所有行
			selectedAllRow() {
				this.isSelectedAllRow = this.goodsList.length ? !this.isSelectedAllRow : false
				let len = this.goodsList.length
				for (let i = 0; i < len; i++) {
					this.goodsList[i].selectedAll = this.isSelectedAllRow
					for (let j = 0; j < this.goodsList[i].goods.length; j++) {
						this.goodsList[i].goods[j].selected = this.goodsList[i].selectedAll
					}
				}
				this.sumTotalPrice()
			},

			// 判断全部商品选择
			computeSelectedAll() {
				for (let i = 0; i < this.goodsList.length; i++) {
					if (this.goodsList[i].selectedAll) {
						this.isSelectedAllRow = true
					} else {
						this.isSelectedAllRow = false
						break
					}
				}
			},

			// 合计总价格
			sumTotalPrice() {
				// 获取选择信息
				this.getSelectedInfoList()
				this.sumPrice = 0
				this.selectedAllRowLength = 0
				for (let i = 0; i < this.selectedAllRowList.length; i++) {
					for (let j = 0; j < this.selectedAllRowList[i].goods.length; j++) {
						this.sumPrice += this.selectedAllRowList[i].goods[j].price * this.selectedAllRowList[i].goods[j].number
					}
					this.selectedAllRowLength += this.selectedAllRowList[i].goods.length
				}
				this.sumPrice = this.sumPrice.toFixed(2)
			},

			/* 获取选择数据 */
			getSelectedInfoList() {
				let len = this.goodsList.length
				this.selectedAllRowList = []
				for (let i = 0; i < len; i++) {
					if (this.goodsList[i].selectedAll) {
						this.selectedAllRowList.push(this.goodsList[i])
					} else {
						for (let j = 0; j < this.goodsList[i].goods.length; j++) {
							if (this.goodsList[i].goods[j].selected) {
								this.selectedAllRowList.push(this.copyTowArr(i, j))
							} else {
								continue
							}
						}
					}
				}
			},

			/* 二位数组复制 */
			copyTowArr(m, n) {
				let arr = {}
				for (let key in this.goodsList[m]) {
					arr[key] = this.goodsList[m][key]
				}
				arr.goods = []
				arr.goods.push(this.goodsList[m].goods[n])
				return arr
			},

			/* 删除数据从对象中 */
			deleteDataFromObj() {
				let itemArr = []
				for (let i = 0; i < this.goodsList.length; i++) {
					let item = []
					let len = Object.keys(JSON.stringify(this.goodsList[i].goods)).length
					for (let j = 0; j < this.selectedAllRowList.length; j++) {
						for (let k = 0; k < this.selectedAllRowList[j].goods.length; k++) {
							let addr = JSON.stringify(this.goodsList[i].goods).indexOf(JSON.stringify(this.selectedAllRowList[j].goods[k]))
							if (addr > 1) {
								for (let x in this.goodsList[i].goods) {
									let len1 = Object.keys(JSON.stringify(this.goodsList[i].goods[x])).length
									let num = addr - len1 - 1
									if (num < 0) {
										break
									} else {
										item.push(num)
									}
								}
							} else {
								item.push(addr - 1)
							}
						}
					}
					itemArr.push(item)
				}
				for (let i = itemArr.length - 1; i >= 0; i--) {
					let towArr = itemArr[i]
					for (let x = towArr.length; x > 0; x--) {
						console.log(towArr[x - 1])
						if (towArr[x - 1] > -1) {
							this.goodsList[i].goods.splice(towArr[x - 1], 1)
						} else {
							continue
						}
					}
					if (!this.goodsList[i].goods.length) {
						this.goodsList.splice(i, 1)
					}
				}
				this.selectedAllRowList = []
				this.isSelectedAllRow = false
				this.computeSelectedAll()
				this.sumTotalPrice()
			},
			/* 将商品移出购物出 */
			removeGoodsEvent() {
				uni.showLoading()
				// 请求接口写在此位置
				this.deleteDataFromObj()
				setTimeout(function() {
					uni.hideLoading()
				}, 800)
			}
		}
	}
</script>
<style lang="scss" scoped>
	page {
		background-color: $uni-bg-color-grey;
	}

	.wee-cart {
		position: relative;
		overflow: hidden;

		.bg {
			width: 100%;
			height: 200rpx;
			background-color: #FFE60F;
			position: absolute;
			top: 0;
		}

		.tips {
			position: relative;
			z-index: 1;
			text-align: center;
			.tips-img {
				display: block;
				margin: 250rpx auto 0;
			}
		}
	}

	.cart-list {
		padding: 20rpx;
		position: relative;
		z-index: 1;
		margin-bottom: 110rpx;

		.cart-item {
			background-color: #FFF;
			border-radius: 30rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
			background-color: #FFF;

			.stylist {

				.home,
				.arrow-right {
					margin-left: 15rpx;
				}
			}

			.select-list {
				.select-checkbox {
					padding: 20rpx 0;
					border-bottom: 2rpx solid #EEE;

					&:last-child {
						border: none;
					}

					.select-item {
						display: flex;
						align-items: center;

						.img {
							margin-left: 15rpx;
						}

						.goods-info {
							width: 410rpx;
							margin-left: 15rpx;

							.name {
								color: #000;
								font-size: 26rpx;
								@include line();
							}

							.size {
								color: #484848;
								font-size: 24rpx;
								background-color: #eee;
								padding: 5rpx 10rpx;
								border-radius: 25rpx;
								width: 200rpx;
								display: flex;
								justify-content: space-around;
								margin: 10rpx 0 20rpx;

								.arrow-down {
									margin-left: 10rpx;
								}
							}

							.data-num {
								width: 100%;
								display: flex;
								align-items: center;
								justify-content: space-between;

								.price {
									font-size: 28rpx;
									color: red;

									.num {
										font-size: 40rpx;
										font-weight: bold;
									}
								}
							}
						}
					}

				}
			}
		}
	}

	.navigation {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		padding: 16rpx;
		position: fixed;
		bottom: 0;
		z-index: 1;
		width: 100%;

		.left {
			display: flex;
			font-size: 20rpx;

			.item {
				margin: 0 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
		}

		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;

			.btn {
				line-height: 66rpx;
				padding: 0 30rpx;
				border-radius: 36rpx;
				color: #ffffff;
			}

			.total-cost {
				margin-right: 30rpx;

				.red-price {
					color: red
				}
			}

			.buy {
				background-color: #ff7900;
			}
		}
	}
</style>
uniapp实现购物车功能
pumpkin_truck的博客
09-07 1万+
uniapp实现购物车功能 周六我看见一个有个公司招聘需要试岗3天，并使用uniapp完成购物车，直播间，地图，首页四个功能方能通过，于是乎，我趁手上没事就打算自己写一遍，虽然我的项目没用到，但是多掌握点总没错。今天就来第一个——购物车 因为没写接口，上面的数据我都是使用的模拟数据搭建而成，主要实现的是它件数的增加减少与支付总价格的逻辑关系，还有左边的全选和全不选。 首先第一步，我们把页面先搭建出来 <template> <view> //购物车没商品出现的页面 <v
uniapp-商城-30-vuex 关于购物车的管理
最新发布
weixin_43613170的博客
04-21 693
按照我们前面讲的，vuex，的使用方式：car和系统信息的管理 机制和步骤一样：如下：就是导入和创建，并导出导入vuex 和cars，getters 创建store 并导出 store 7 当然这里还需要将其导入到main.jS中 ，全局导出使用，main.js 如下方式： /* import store from '@/store' //这样就可以对该store进行全局挂载 使用 Vue.prototype.$store=store */ 把前面在页面中计算过的过程，放到这里9、getters中
uniapp基于uView组件UI实现小程序购物车选购功能
m0_46577631的博客
12-05 1947
【代码】uniapp基于uView组件UI实现小程序购物车选购功能。
购物车（uni-app）
Maxgirl的博客
01-08 468
{name:"收纳盒",url:"/static/shounahe.jpg",price:10,number:5,checked:false},{name:"小白鞋",url:"/static/shoe.jpg",price:120,number:2,checked:true},{name:"糖果",url:"/static/sol.jpg",price:20,number:5,checked:false}// /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
小兔鲜儿 uniapp - 购物车模块
每天都要努力学习哦~~
01-01 1463
完成加入购物车，购物车列表交互，计算结算金额等业务。
uview2.0 【uniapp】购物车样式 $event
AAAXiaoApple的博客
01-16 1079
uview2.0 【uniapp】购物车样式
uni-app 实现购物车
qq_42292879的博客
02-23 9936
#实现购物车 uni-app文档 ##效果图 ##具体代码 前提 实现了商品的购物车添加和用户登录 <template> <view> <view class="" v-if="flag"> 购物车空空如也，请<navigator open-type="switchTab" url="../home/home">先选购</navi...
uni-app练习：购物车
我就知道你会来，我们一起进步吧！
01-07 597
6.了解uni-app的api：uni.showModal(OBJECT)----显示模态弹窗。3.了解uview-ui的组件：Button 按钮 和 NumberBox 步进器。的编程基础,安装了和配置完成uview-ui拓展主键包。可能出现的下面这个问题，可以看。是：HBuilder X。
一个基于Uni-app开发快餐订餐平台的完整技术方案，包含核心功能实现逻辑和开发实践指南
欢乐打代码！
02-26 1247
【代码】一个基于Uni-app开发快餐订餐平台的完整技术方案，包含核心功能实现逻辑和开发实践指南。
基于Spring Boot的二手图书商城系统设计与实现【毕业设计+论文】
wt133的博客
11-01 860
基于Spring Boot的二手图书商城系统 摘要 上了大学你会发现有一堆的书本你需要购买，有的书可能只需要用一学期，有的书只是你选修或者必修课中用到，以后的人生再难以碰它，但是我们却要花很多钱去购买一本全新的书籍，它们派上用处的时候甚至不超过三天的时间，这就导致了巨大的资源浪费。在经过一天多的采访调查中，身边大多数的同学都没有意愿购买一本利用率较低的书籍，甚至于专业课的书籍他们更愿意从师兄或者师姐那里购买，比起全新的书籍不仅价格更便宜而且书籍上还有师兄师姐留下来的笔记和重点知识见解，全新的书籍根本不
uni-app微信小程序——商城（5）——购物车
徐小硕—心之所向，素履以往
08-12 3915
基于Vue语法，使用uni-app框架来实现微信小程序中的购物车功能。 实现购物车的全选，多选，计算总价，删除商品等功能。 结合使用VantWeapp微信小程序前端框架来搭建购物车页面。 效果图如下： 效果视频如下： 微信小程序购物车录屏 百度云视频，链接：https://pan.baidu.com/s/1QQHIIT58woini-ggPmrzIA 提取码：xzs8 其中单个的商品可以使用左滑进行删除，视频没有体现出来，但是功能还是齐全的。 下面是代码部门： <temp..
uni-app购物车功能
Cookie686的博客
01-09 749
uni-app购物车功能
uniapp 购物车 单店铺
weixin_45157073的博客
07-08 512
uniapp 购物车 单店铺
uni-app实现购物车(超详细 附带源码)
m0_58885302的博客
04-21 3510
我们的数据一般都是存放在state里，gettters是计算属性，所以全选和总价格的方法在这里写，我们的加，减，单选，全选都是在mutations里写。写到这里我们的vuex就已经搭建好了,可以使用了。
uniapp项目简单实现购物车
热门推荐
小王的技术博客
02-23 1万+
一个电商项目中可以说购物车功能的实现可以说是非常重要的，这次疫情期间刚好自己做了一个小demo，停工不停学，逆战到天明。话不多说，先看看效果。 一、当我们进入购物车页面时应该首先判断用户是不是出于登录状态 onShow() { try { const userid = uni.getStorageSync('userid'); const token = uni.getStorag...
UNIAPP优购商城购物车功能
m0_64396262的博客
06-26 2302
由于uniapp拥有高效开发，性能优秀，功能扩展灵活等优点，吸引了无数电商企业使用uniapp一次开发多个平台应用和部署，而今天要讲的，就是多渠道经营的卖家要开发商城中不可或缺的功能：购物车那么首先，我们需要写出地址框，购物车标题，购物车统计，以及购物车为空时的页面。
uniapp微信小程序_购物车_下单页面
apple_70049717的博客
03-21 1678
data:{cart: [],// 有重复的处理成一个//过滤，当点击的次数等于0的时候将次数不等于0的过滤出来，就是相当于删除了次数等于0的商品== 0);// 转换成字符串== 0);还得过滤一下不然把之前没有的还会加进去，减商品也一样。
【微信小程序】进阶篇 -- uni-app 项目-- 购物车 -- 首页 - 轮播图效果（五十二）
JMFive的博客
03-28 3193
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第52篇文章;今天开始学习微信小程序的第36天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。
uni-app商城（九）购物车页面
R·ZORO的博客
05-31 1081
uni-app商城（九）购物车页面。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值