uniapp购物车功能

最新推荐文章于 2024-10-11 19:00:00 发布
最新推荐文章于 2024-10-11 19:00:00 发布
阅读量304 收藏
点赞数 1
文章标签： uni-app vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58319850/article/details/134399578
版权

1在components组件下创建一个叫shopCar的vue文件

2引入import commonCar from '@/components/shopCar/shopCar.vue'

<template>
	<view class="common-car">
		<view class="empty-shop-car" v-if="isEmpty">
			<!-- <image src="../../static/empty_shop_car.png" class="empty-shop-car-image" mode=""></image> -->
			<text>当前您的购物车是空的</text>
			<view class="empty-shop-car-btn">
				<text>去逛逛</text>
			</view>
		</view>
		<view class="shop-car" v-else>
			<view class="shop-car-header">
				<text @tap="cut">{{isCut?'编辑':'完成'}}</text>
			</view>
			<view class="store-box">
				<!-- 				<view class="store-header">
					<image src="../../static/select.png" v-if="itemq.checked == 2" class="checked-image" mode="" @tap="storeCheck(indexq,itemq.checked)"></image>
					<image src="../../static/not_select.png" v-else class="checked-image" mode="" @tap="storeCheck(indexq,itemq.checked)">
					</image>
					<text>{{itemq.name}}</text>
					<image src="../../static/youjiantou1.png" class="label" mode=""></image>
				</view> -->
				<view class="goodsInfo" v-for="(itemw,indexw) in datas" :key="indexw">
					<image src="../../static/select.png" v-if="itemw.checked == 2" class="checked-image" mode=""
						@tap="goodsCheck(indexw,itemw.checked)"></image>
					<image src="../../static/not_select.png" v-else class="checked-image" mode=""
						@tap="goodsCheck(indexw,itemw.checked)"></image>
					<view class="goodsInfo-right">
						<image :src="itemw.img" class="goods-image" mode=""></image>
						<view class="goodsInfo-box">
							<text class="goods-name">{{itemw.title}}</text>
							<!-- <text class="spe">规格：{{itemw.remark}}</text> -->
							<view class="goods-box">
								<text class="goods-price">¥{{itemw.price}}</text>
								<view class="goods-num-box">
									<view class="goods-image" @tap="sub(indexq,indexw,itemw.number)">
										<text>-</text>
									</view>
									<view class="goods-num">
										<text>{{itemw.number}}</text>
									</view>
									<view class="goods-image" @tap="add(indexq,indexw,itemw.number)">
										<text>+</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="statistics-box">
				<view class="statistics">
					<view class="statistics-left" v-if="statisticsIndex" @tap="allCheck">
						<image src="../../static/select.png" class="checked-image" mode="">
						</image>
						<text>全选</text>
					</view>
					<view class="statistics-left" v-else @tap="allCheck">
						<image src="../../static/not_select.png" class="checked-image" mode="">
						</image>
						<text>全选</text>
					</view>
					<view class="statistics-right" v-if="isCut" @tap="accounts">
						<text>总计：</text><text class="text-color">¥{{total}}</text>
						<view class="btn">
							<text>结算</text>
						</view>
					</view>
					<view class="statistics-right" v-else @tap="delect">
						<view class="btn">
							<text>删除</text>
						</view>
					</view>
				</view>
				<!-- <view class="gap"></view> -->
			</view>
		</view>
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name: "commonCar",
		data() {
			return {
				isEmpty: true,
				iPhoneX: false,
				datas: {},
				statisticsIndex: false,
				total: 0,
				isCut: true
			}
		},
		props: {
			list: {
				type: [Object, Array],
				default: {}
			}
		},
		created() {
			this.iPhoneX = uni.getStorageSync('iPhoneX')
			if (this.list.length == 0) {
				this.isEmpty = true
			} else {
				this.datas = this.list
				this.isEmpty = false
			}
		},
		methods: {
			//商品选择
			goodsCheck(goodsIndex, goodsChecked) {
				console.log(goodsIndex, goodsChecked)
				if (goodsChecked == 1) {
					this.datas[goodsIndex].checked = 2
				} else {
					this.datas[goodsIndex].checked = 1
				}
				//判断是否该店铺全选
				// let storeChecked = true
				// this.datas.map((item,index)=>{
				// 	if(item.checked == 1){
				// 		storeChecked = false
				// 	}
				// })
				// if(storeChecked == false){
				// 	this.datas[storeIndex].checked = 1
				// }else{
				// 	this.datas[storeIndex].checked = 2
				// }

				//判断是否全选
				let statisticsIndex = true
				this.datas.find((item, index) => {
					if (item.checked == 1) {
						statisticsIndex = false
					}
				})
				if (statisticsIndex == false) {
					this.statisticsIndex = false
				} else {
					this.statisticsIndex = true
				}

				this.statistics()
			},
			//店铺选择
			// storeCheck(storeIndex,storeCheck){
			// 	if(storeCheck == 1){
			// 		this.datas[storeIndex].checked = 2
			// 		this.datas[storeIndex].goods.find((item,index)=>{
			// 			item.checked = 2
			// 		})
			// 	}else{
			// 		this.datas[storeIndex].checked = 1
			// 		this.datas[storeIndex].goods.find((item,index)=>{
			// 			item.checked = 1
			// 		})
			// 	}
			// 	//判断是否全选
			// 	let statisticsIndex = true
			// 	this.datas.find((item,index)=>{
			// 		if(item.checked == 1){
			// 			statisticsIndex = false
			// 		}
			// 	})
			// 	if(statisticsIndex == false){
			// 		this.statisticsIndex = false
			// 	}else{
			// 		this.statisticsIndex = true
			// 	}
			// 	this.statistics()
			// },
			//减少
			sub(storeIndex, goodsIndex, goodsnum) {
				if (goodsnum == 1) {
					return
				} else {
					this.datas[goodsIndex].number--
				}
				this.statistics()
			},
			//增加
			add(storeIndex, goodsIndex, goodsnum) {
				this.datas[goodsIndex].number++
				this.statistics()
			},
			//全选
			allCheck() {
				if (this.statisticsIndex) {
					this.datas.find((item, index) => {
						item.checked = 1
						// item.find((itemq,indexq)=>{
						// 	itemq.checked = 1
						// })
					})
					this.statisticsIndex = false
				} else {
					this.datas.find((item, index) => {
						item.checked = 2
						// item.find((itemq,indexq)=>{
						// 	itemq.checked = 2
						// })
					})
					this.statisticsIndex = true
				}
				this.statistics()
			},
			//统计
			statistics() {
				let total = 0
				this.datas.find((item, index) => {
					if (item.checked == 2) {
						total = total + item.price * item.number
					}

				})
				this.total = total.toFixed(2)
				console.log(this.total)
				this.$emit('total', this.total);
			},
			cut() {
				this.isCut = !this.isCut
				this.statisticsIndex = true
				this.allCheck()
			},
			// judgeSelect() {
			//   let checkedItems = this.datas.filter(item => item.checked === 2);
			//   return checkedItems;
			// },

			accounts() {

				let checkedItems = this.datas.filter(item => item.checked === 2);
				if (checkedItems.length > 0) {
					this.statistics()
					
					this.$emit('accounts', checkedItems,this.total);
					// console.log(this.total)
					// this.$emit('total', this.total);
				} else {
					uni.showToast({
						title: '您当前未选择任何商品，结算失败',
						icon: 'none'
					});
				}
			},
			delect() {
				let checkedItems = this.datas.filter(item => item.checked === 2);
				if (checkedItems.length > 0) {
					this.$emit('delect', checkedItems);
				} else {
					uni.showToast({
						title: '您当前未选择任何商品，删除失败',
						icon: 'none'
					});
				}
			}
			// judgeSelect(){
			// 	let judge = false
			//   let checkedItems = this.datas.filter(item => item.checked === 2);

			//   if (checkedItems.length > 0) {
			//     // 执行结算逻辑，例如跳转到结算页面或提交订单等操作
			//     this.$emit('settle', checkedItems);
			//   } else {
			//     uni.showToast({
			//       title: '请至少选择一件商品进行结算',
			//       icon: 'none'
			//     });
			//   }
			// 	return judge
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.common-car {
		width: 750rpx;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #F5F5F5;
	}

	.empty-shop-car {
		width: 750rpx;
		min-height: 680rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.empty-shop-car-image {
			width: 340rpx;
			height: 278rpx;
			margin-top: 102rpx;
		}

		text {
			margin-top: 40rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #666666;
		}

		.empty-shop-car-btn {
			width: 240rpx;
			height: 90rpx;
			background: #FF5E5E;
			border-radius: 200rpx;
			margin-top: 40rpx;
			text-align: center;
			line-height: 90rpx;
			font-size: 30rpx;
			font-weight: 400;
			color: #313133;
		}
	}

	.shop-car {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.shop-car-header {
			width: 690rpx;
			height: 80rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-end;

			text {
				font-size: 28rpx;
				font-weight: 400;
				color: #313133;
			}
		}

		.store-box {
			width: 750rpx;
			// margin-bottom: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #FFFFFF;
			border-bottom: 2rpx solid #EDEDED;

			.store-header {
				width: 690rpx;
				height: 78rpx;
				padding: 0 30rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: 28rpx;
				font-weight: 400;
				color: #313133;

				.checked-image {
					width: 36rpx;
					height: 36rpx;
				}

				text {
					font-size: 28rpx;
					font-weight: 400;
					color: #313133;
					margin-left: 20rpx;
				}

				.label {
					width: 14rpx;
					height: 24rpx;
					margin-left: 10rpx;
					margin-top: 5rpx;
				}
			}

			.goodsInfo {
				width: 690rpx;
				height: 246rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				border-bottom: 2rpx solid #EDEDED;

				&:nth-last-child(1) {
					border: none;
				}

				.checked-image {
					width: 36rpx;
					height: 36rpx;
				}

				.goodsInfo-right {
					width: 634rpx;
					height: 246rpx;
					margin-left: 20rpx;
					display: flex;
					flex-direction: row;
					align-items: center;

					.goods-image {
						width: 180rpx;
						height: 180rpx;
					}

					.goodsInfo-box {
						width: 428rpx;
						margin-left: 24rpx;
						display: flex;
						flex-direction: column;
						align-items: center;

						.goods-name {
							width: 428rpx;
							font-size: 26rpx;
							font-weight: 400;
							color: #313133;
						}

						.spe {
							width: 428rpx;
							margin-top: 10rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #919298;
						}

						.goods-box {
							width: 428rpx;
							margin-top: 18rpx;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: space-between;

							.goods-price {
								font-size: 28rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: 400;
								color: #FE6363;
							}

							.goods-num-box {
								width: 168rpx;
								height: 46rpx;
								display: flex;
								flex-direction: row;
								align-items: center;

								.goods-image {
									width: 46rpx;
									height: 44rpx;
									text-align: center;
									line-height: 44rpx;
									border: 1rpx solid #CFCFCF;
									font-size: 38rpx;
								}

								.goods-num {
									width: 76rpx;
									height: 44rpx;
									text-align: center;
									line-height: 44rpx;
									font-size: 33rpx;
									font-weight: 400;
									color: #666666;
									border-top: 1px solid #CFCFCF;
									border-bottom: 1px solid #CFCFCF;
								}
							}
						}
					}
				}
			}
		}

		.statistics-box {
			width: 750rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #FFFFFF;
			position: fixed;
			bottom: 0;

			.statistics {
				width: 720rpx;
				padding: 0 0 0 30rpx;
				height: 98rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				.statistics-left {
					width: 120rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;

					image {
						width: 36rpx;
						height: 36rpx;
					}

					text {
						font-size: 30rpx;
						font-weight: 400;
						color: #313133;
					}
				}

				.statistics-right {
					width: 600rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-end;

					.btn {
						width: 218rpx;
						height: 98rpx;
						background: #FF5E5E;
						text-align: center;
						line-height: 98rpx;
						font-size: 30rpx;
						font-weight: 400;
						color: #fff;
						margin-left: 40rpx;
					}

					text {
						font-size: 30rpx;
						font-weight: 400;
						color: #fff;
					}

					.text-color {
						color: rgba(242, 18, 18, 1);
					}
				}
			}

			.gap {
				width: 750rpx;
				height: 40rpx;
			}
		}
	}
</style>
<template>
	<view class="box">
		<view class="custom-title-box">
			<view class="status-bar-height-box" :style="{height: statusBarHeight + 'px'}"></view>
			<view class="title-box" :style="{height: titleHeight + 'px'}">
				<!-- <uni-icons type="back" class="left" size="30" color="#fff" @click="back()"></uni-icons> -->
				购物车
			</view>
		</view>
		<view class="empty-box" :style="{height: statusBarHeight + titleHeight + 'px'}" style="width: 100%;"></view>
		<view class="shop-car">
			<commonCar :list="goodsProducts" @delect="delect" @accounts="accounts">
				<text>123456</text>
			</commonCar>
			<!-- <image src="" mode=""></image> -->
		</view>
	</view>
</template>
<script>
	import commonCar from '@/components/shopCar/shopCar.vue'
	export default {
		data() {
			return {
				statusBarHeight: 0, // 状态栏高度
				titleHeight: 0, // 标题栏高度
				num: 0,
				selAll: true,
				sellist: [],
				flag: "",
				value: '1',
				goodsProducts: [
					// name: '铲屎官的店',
					// checked: 1,
					{
						img: 'https://cdn.pixabay.com/photo/2017/03/24/08/27/cat-2170495_1280.jpg',
						title: '天然无谷天然猫粮1.5kg',
						price: '128.80',
						number: 1,
						checked: 1
					}, {
						img: 'https://cdn.pixabay.com/photo/2017/03/24/08/27/cat-2170495_1280.jpg',
						title: '天然无谷天然猫粮1.5kg',
						price: '116.80',
						number: 1,
						checked: 1
					}, {
						// name: '铲屎官的店',
						// checked: 1,

						img: 'https://cdn.pixabay.com/photo/2017/03/24/08/27/cat-2170495_1280.jpg',
						title: '天然无谷天然猫粮1.5kg',
						price: '129.80',
						number: 1,
						checked: 1
					}, {
						img: 'https://cdn.pixabay.com/photo/2017/03/24/08/27/cat-2170495_1280.jpg',
						title: '天然无谷天然猫粮1.5kg',
						price: '156.80',
						number: 1,
						checked: 1

					}
				],
			}
		},
		onLoad() {

		},
		onReady() {
			uni.getSystemInfo({
				success: res => {
					this.statusBarHeight = res.statusBarHeight
				}
			})
			const btnInfo = uni.getMenuButtonBoundingClientRect();
			this.titleHeight = (btnInfo.top - this.statusBarHeight) * 2 + btnInfo.height
		},
		components: {
			commonCar
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			delect(e) {
				console.log(e);
			},
			accounts(e, e1) {
				console.log('total:', e1);
				console.log('checkedItems:', e);
				// console.log('extra:', extra);
			}
		},
	}
</script>
<style lang="scss">
	.custom-title-box {
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		background-color: #FF5E5E;

		.title-box {
			// background-color: red;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 36rpx;
			color: #FFFFFF;

			>image {
				width: 346rpx;
				height: 96rpx;
			}

			.left {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				left: 24rpx;
				bottom: 10rpx;
			}
		}
	}

	.box {
		width: 750rpx;
		// height: 1624rpx;
		background-color: #F8F8F8;
		position: relative;
	}

	.top {
		width: 750rpx;
		height: 50rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		padding-top: 24rpx;

		.item {

			width: 98rpx;
			height: 50rpx;
			background: #FFFFFF;
			border-radius: 100rpx 100rpx 100rpx 100rpx;
			opacity: 1;
			border: 1rpx solid rgba(51, 51, 51, 0.5);
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: rgba(51, 51, 51, 0.5);
			text-align: center;
			line-height: 50rpx;

		}
	}

	.wrap {
		margin-top: 24rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;

		.center {
			width: 646rpx;
			height: 140rpx;
			background: #FFFFFF;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			opacity: 1;
			display: flex;
			position: relative;

			>image {
				width: 140rpx;
				height: 140rpx;
			}

			.detail {
				width: 506rpx;

				.name {
					margin-left: 14rpx;
					margin-top: 24rpx;
					width: 400rpx;
					height: 34rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #3D3D3D;
					white-space: nowrap;
					/* 防止文本换行 */
					overflow: hidden;
					/* 隐藏超出容器的部分内容 */
					text-overflow: ellipsis;
					/* 在溢出的位置显示省略号 */
				}

				.price {
					margin-left: 14rpx;
					margin-top: 24rpx;
					width: 200rpx;
					height: 40rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #FE6363;
				}

				.sel {
					position: absolute;
					bottom: 20rpx;
					right: 20rpx;
				}
			}
		}
	}

	.buttom {
		width: 750rpx;
		height: 200rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		position: fixed;
		bottom: 0;

		// position: relative;
		.text-one {
			position: absolute;
			top: 76rpx;
			left: 40rpx;
			width: 88rpx;
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.text-two {
			position: absolute;
			top: 72rpx;
			left: 128rpx;
			height: 68rpx;
			font-size: 34rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 600;
			color: #FE6363;
		}

		.btn {
			width: 326rpx;
			height: 88rpx;
			background: #9263FE;
			opacity: 1;
			border: 2rpx solid #9263FE;
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			line-height: 88rpx;
			position: absolute;
			right: 24rpx;
			top: 32rpx;
		}
	}

	.shop-car {
		width: 750rpx;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #F5F5F5;
	}
</style>

第一个页面为子组件页面 第二个为父组件

望眼玉川
关注
uniapp 购物车功能
DumBnessA的博客
11-29 2311
结构 <view class="box"> <!-- 自定义导航栏 --> <view class="border"> <view class="border_left" @click="onleft()"> 管理 </view> <view class="border_center"> 购物车 </view> <view class="border_right"&
uni-app 实现购物车
qq_42292879的博客
02-23 9869
#实现购物车 uni-app文档 ##效果图 ##具体代码 前提 实现了商品的购物车添加和用户登录 <template> <view> <view class="" v-if="flag"> 购物车空空如也，请<navigator open-type="switchTab" url="../home/home">先选购</navi...
uni-app之旅-day06-加入购物车
最新发布
weixin_44423378的博客
10-11 1348
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言8.0 创建 cart 分支8.1 配置 vuex8.2 创建购物车的 store 模块8.3 在商品详情页中使用 Store 中的数据8.4 实现加入购物车的功能8.5 动态统计购物车中商品的总数量8.6 持久化存储购物车中的商品8.7 优化商品详情页的 total 侦听器8.8 动态为 tabBar 页面设置数字徽标8.9 将设置 tabBar 徽标的代码抽离为 mixins 前言 8.0 创建 cart 分支 git
uni-app微信小程序——商城（5）——购物车
徐小硕—心之所向，素履以往
08-12 3724
基于Vue语法，使用uni-app框架来实现微信小程序中的购物车功能。 实现购物车的全选，多选，计算总价，删除商品等功能。 结合使用VantWeapp微信小程序前端框架来搭建购物车页面。 效果图如下： 效果视频如下： 微信小程序购物车录屏 百度云视频，链接：https://pan.baidu.com/s/1QQHIIT58woini-ggPmrzIA 提取码：xzs8 其中单个的商品可以使用左滑进行删除，视频没有体现出来，但是功能还是齐全的。 下面是代码部门： <temp..
小兔鲜儿 uniapp - 购物车模块
每天都要努力学习哦~~
01-01 1283
完成加入购物车，购物车列表交互，计算结算金额等业务。
Uniapp + Vue3 + Vite +Uview + Pinia 分商家实现购物车功能（最新附源码保姆级）
一名全栈小白的博客
09-13 854
Uniapp + Vue3 + Vite +Uview + Pinia 分商家实现购物车功能（最新附源码保姆级）
uniapp实现购物车功能
热门推荐
pumpkin_truck的博客
09-07 1万+
uniapp实现购物车功能 周六我看见一个有个公司招聘需要试岗3天，并使用uniapp完成购物车，直播间，地图，首页四个功能方能通过，于是乎，我趁手上没事就打算自己写一遍，虽然我的项目没用到，但是多掌握点总没错。今天就来第一个——购物车 因为没写接口，上面的数据我都是使用的模拟数据搭建而成，主要实现的是它件数的增加减少与支付总价格的逻辑关系，还有左边的全选和全不选。 首先第一步，我们把页面先搭建出来 <template> <view> //购物车没商品出现的页面 <v
UNIAPP优购商城购物车功能
m0_64396262的博客
06-26 2157
由于uniapp拥有高效开发，性能优秀，功能扩展灵活等优点，吸引了无数电商企业使用uniapp一次开发多个平台应用和部署，而今天要讲的，就是多渠道经营的卖家要开发商城中不可或缺的功能：购物车那么首先，我们需要写出地址框，购物车标题，购物车统计，以及购物车为空时的页面。
uniapp基于uView组件UI实现小程序购物车选购功能
m0_46577631的博客
12-05 1819
【代码】uniapp基于uView组件UI实现小程序购物车选购功能。
uniapp购物车基本功能——总价计算（商城项目）
weixin_54586989的博客
06-28 491
合计价格: {{ totalPrice }} 元
uniapp购物车功能实现与练习
uniapp的购物车（cart练习）是一个很实用的练习项目，通过该项目，学习者可以加深对uniapp框架的理解，并且掌握在uniapp环境下开发购物车功能的方法。 购物车是电商平台中不可或缺的一部分，它允许用户选择商品并将...
小程序购物车实现uni-app
weixin_44965581的博客
08-30 870
uni-app 小程序实现购物车，功能完整。 展示效果图 部分 <template> <view class="container"> <!-- 空白页 --> <view v-if="empty===true || cartList =='' " class="empty"> <image src="/static/emptyCart.png" mode="aspectFit"></image> <vie
uni-app 购物车及微信支付
weixin_44134551的博客
06-30 284
<template> <view class="cart"> <view class="content"> <label for="" v-for="item in list" :key='item.id'> <view class="list"> <view class="left"> <checkbox-group @change="checkboxChange($event,item
uni-app 优购商城 - 购物车功能
m0_72270772的博客
06-28 681
一、购物车（1）ycq-address - 收货地址（2）ycq-goods - 购物车显示商品信息（3）ycq-settle - 购物车结算页面（4）cart - 购物车页面。
uni-app实现购物车(超详细 附带源码)
m0_58885302的博客
04-21 3226
我们的数据一般都是存放在state里，gettters是计算属性，所以全选和总价格的方法在这里写，我们的加，减，单选，全选都是在mutations里写。写到这里我们的vuex就已经搭建好了,可以使用了。
Uniapp、小程序中双向联动购物车列表实现详解
m0_59415345的博客
06-23 1005
商品的双向联动列表在电商、外卖等小程序，App中是非常常见的，相较于点检实现列表切换的购物车，双向联动列表的交互更为便捷，用户体验更加，但是实现起来也较为复杂。dcloud插件市场是有现成的插件的，是黄河爱浪同学写的，可以直接使用，下面主要介绍一下实现方法。商品双向联动列表插件 地址：https://ext.dcloud.net.cn/plugin?id=707。
uniapp微信小程序_购物车_下单页面
apple_70049717的博客
03-21 1495
data:{cart: [],// 有重复的处理成一个//过滤，当点击的次数等于0的时候将次数不等于0的过滤出来，就是相当于删除了次数等于0的商品== 0);// 转换成字符串== 0);还得过滤一下不然把之前没有的还会加进去，减商品也一样。
uniapp [全端兼容] - 详细实现企业级电商购物车界面源码，自动计算购物车合计金额、商品数量加减、单选/一键全选、根据商品归属店铺分类，商铺所属商品嵌套展示和选择区分功能，仿淘宝京东电商购物软件
王佳斌
08-21 6167
uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，购物车，电商平台，uniApp购物车，购物车页面源码，店铺下所属的商品，购物车页面详细代码，全选商品，单选，右滑删除，全选反选，详细购物车源码，仿造京东淘宝购物车，编辑商品数量，结算商品，实时计算商品合计金额，购物车有店铺一键全选，商品购物车有店铺存在怎么做，合计金额，购物车商品的增删全选，类似美团的购物车，带商铺商户的购物车分类，多商家，商家商品，uni-app实现商城多商家购物车功能(超详细, 附
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值