uni-app购物车逻辑

已于 2025-02-20 18:30:35 修改
阅读量332 收藏 1
点赞数 2
分类专栏： 购物车 文章标签： uni-app
于 2021-12-03 14:50:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qi_qi_ai/article/details/121698415
版权
这是一个关于购物车功能实现的代码片段，包括全选、店铺内商品全选和单选操作，同时更新商品数量及总价。通过点击事件处理函数`allcheckTap`、`allcheckTap`和`checkTap`来改变商品选中状态，并计算总价。此外，代码还展示了商品的图片、名称、价格等信息。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<template>
	<view class="content">
		<view class="top">
			<view class="top_1">发货说明</view>
		</view>
		<view class="shop-box" v-for="(caritem,carindex) in cartData" :key="carindex">
			<view class="shop-1" @tap="allcheckTap(carindex)">
				<image :src="caritem.checked?'/static/img/icon13.png':'/static/img/icon16.png'" class="shop_img1" />
				<view class="titile">{{caritem.storename}}</view>
			</view>
			<view class="shop-con" v-for="(carvalue,valindex) in caritem.datalist" :key="valindex">
				<image :src="carvalue.checked?'/static/img/icon13.png':'/static/img/icon16.png'" class="shop_img1"
					@click.stop="checkTap(carindex,valindex)" />
				<image :src="carvalue.img" class="shop_img2" />
				<view class="right">
					<view class="shop-title">{{carvalue.title}} <span>10支/扎</span></view>
					<view class="flex">
						<view class="kuan">B级</view>
						<view class="shop_1">可售228扎</view>
					</view>
					<view class="flex" style="margin-top: 50rpx;">
						<view class="price"><span>{{carvalue.price}}元/扎</span></view>
						<view class="bottom">
							<view class="reduce" @tap="numchangeTap('minus',carindex,valindex)">-</view>
							<view class="num">{{carvalue.number}}</view>
							<view class="reduce add" @tap="numchangeTap('add',carindex,valindex)">+</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="uni-p-b-98"></view>
		<view class="bottom_shadow"></view>
		<view class="fixed">
			<image :src="allselect?'/static/img/icon13.png':'/static/img/icon16.png'" mode="" @tap="select_all"/>
			<view class="fixed_1">全选</view>
			<view class="fixed_2">合计:￥{{totalPrice}}</view>
			<view class="fixed_btn btt">移除</view>
			<view class="fixed_btn">去结算</view>
		</view>
		<block v-if="cartData.length==0">
			<image src="/static/img/icon40.png" mode="" class="img" />
			<view class="tip">购物车是空的，快去购物吧</view>
		</block>
		<view class="bottom_shadow"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				totalPrice:0,
				allselect: false,
				cartData: [{
					'checked': false,
					'storename': '这是店铺名称',
					'datalist': [{
						'checked': false,
						'img': 'https://img0.baidu.com/it/u=2130936966,1906850419&fm=26&fmt=auto',
						'title': '这是商品的名称',
						'skuname': '228',
						'number': 1,
						'price': 9.5
					}, {
						'checked': false,
						'img': 'https://img0.baidu.com/it/u=522065287,3241838381&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
						'title': '这是商品的名称',
						'skuname': '228',
						'number': 1,
						'price': 9.3
					}]
				}, {
					'checked': false,
					'storename': '这是店铺名称',
					'datalist': [{
						'checked': false,
						'img': 'https://img2.baidu.com/it/u=3666548066,2508071679&fm=26&fmt=auto',
						'title': '这是商品的名称',
						'skuname': '228',
						'number': 1,
						'price': 9.2
					}, {
						'checked': false,
						'img': 'https://img2.baidu.com/it/u=3666548066,2508071679&fm=26&fmt=auto',
						'title': '这是商品的名称',
						'skuname': '228',
						'number': 1,
						'price': 9.1
					}]
				}]
			}
		},
		onLoad() {

		},
		methods: {
			select_all(){
				//全选
				this.allselect=this.cartData.every(r=>r.checked)
				if(!this.allselect){
					for(let i in this.cartData){
						this.cartData[i].checked=true
						for(let j in this.cartData[i].datalist){
							this.cartData[i].datalist[j].checked=true
						}
					}
				}else{
					for(let i in this.cartData){
						this.cartData[i].checked=false
						for(let j in this.cartData[i].datalist){
							this.cartData[i].datalist[j].checked=false
						}
					}
					this.$forceUpdate()
				}
				this.allselect=!this.allselect
				this.calculateTotal();
			},
			allcheckTap(carindex) {
				//店铺全选
				this.cartData[carindex].checked = !this.cartData[carindex].checked
				if(this.cartData[carindex].checked){
					for(let i in this.cartData[carindex].datalist){
						this.cartData[carindex].datalist[i].checked=true
					}
				}else{
					for(let i in this.cartData[carindex].datalist){
						this.cartData[carindex].datalist[i].checked=false
					}
				}
				this.calculateTotal();
				this.judgmentAll()
			},
			checkTap(carindex,valindex){
				//单选
				this.cartData[carindex].datalist[valindex].checked = !this.cartData[carindex].datalist[valindex].checked
				for(let i in this.cartData[carindex].datalist){
					if(!this.cartData[carindex].datalist[i].checked){
						this.cartData[carindex].checked=false
					}
				}
				this.cartData[carindex].checked= this.cartData[carindex].datalist.every(r => r.checked)
				this.calculateTotal();
				this.judgmentAll()
			},
			calculateTotal() {
				var total=0
				for(let i in this.cartData){
					for(let j in this.cartData[i].datalist){
						if(this.cartData[i].datalist[j].checked){
							total+=this.cartData[i].datalist[j].price*this.cartData[i].datalist[j].number
						}
					}
				}
				this.totalPrice=total.toFixed(2)
			},
			judgmentAll(){
				//判断是否为全选  使用every() 方法测数组中的所有元素
				this.allselect=this.cartData.every(r=>r.checked)
			},
			numchangeTap(type, carindex, valindex) {
				var that = this
				var cartData = this.cartData; //初始数据
				if (type == 'minus') { //-
					var number = cartData[carindex].datalist[valindex].number;
					if (number <= 1) {
						return;
					} else {
						cartData[carindex].datalist[valindex].number--;
						that.cartData = cartData
					}
				} else {
					var number = cartData[carindex].datalist[valindex].number;
					cartData[carindex].datalist[valindex].number++;
					that.cartData = cartData
				}
				that.calculateTotal(); //计算价格
			}
		}
	}
</script>

<style scoped>
	.content{
	background: #F7F7F7;
	fons-size:28rpx;
}
.top{
	width: 706rpx;
	padding: 24rpx 0;
	margin: 18rpx auto 0;
	background: #FFEBE5;border-radius: 20rpx;
}
.top_1{
	width: 90%;
	font-size: 24rpx;
	color: #FF9F5D;margin: 0 auto;
}
.img{
	width: 540rpx;
	height: 544rpx;
	margin: 100rpx auto 0;
}
.tip{
	color: #ccc;
	text-align: center;
}
.shop-box{
	width: 706rpx;
	padding: 22rpx 0 42rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	margin: 24rpx auto 0;
}
.shop-1{
	width: 95%;
	margin: 0 auto;
	display: flex;align-items: center;
}
.titile{
	font-size: 36rpx;
	font-weight: bold;
}
.shop-con{
	width: 95%;
	margin: 26rpx auto 0;
	display: flex;
	align-items: center;
}
.shop_img1{
	width: 32rpx;
	height: 32rpx;
	margin-right: 8rpx;
}
.shop_img2{
	width: 220rpx;
	height: 220rpx;
	border-radius: 30rpx;
}
.right{
	width: 390rpx;
	height: 220rpx;
	margin-left: 20rpx;
	margin-top: 10rpx;
}
.shop-title{
	display: flex;justify-content: space-between;
	font-size: 28rpx;
	font-weight: bold;
}
.kuan{
	width: 120rpx;
	height: 46rpx;
	line-height: 46rpx;
	background: #FAFAFA;border-radius: 10rpx;
	color: #9E9E9E;text-align: center;
}
.flex{
	margin-top: 12rpx;
	width: 100%;
	display: flex;justify-content: space-between;align-items: center;
}
.shop_1{
	font-size: 20rpx;color: #C4C4C4;
}
.price{
	color: #FE6B82;
}
.price span{
	font-size: 36rpx;
	color:  #FE6B82;
}
.bottom{
	display: flex;
}
.reduce{
		width: 52rpx;
		height: 46rpx;
		line-height: 46rpx;
		border-radius: 22rpx 0 0 22rpx;
		border: 1rpx solid#A3A3A3;
		text-align: center;
}
.add{
		border-radius: 0 22rpx 22rpx 0;
}
.num{
		width: 48rpx;
		border-top:1rpx solid#A3A3A3;
		border-bottom:1rpx solid#A3A3A3;
		font-size: 26rpx;
		height: 46rpx;
		line-height: 46rpx;
		text-align: center;
}
.fixed{
	width: 100%;
	height: 120rpx;
	display: flex;
	align-items: center;
	position: fixed;
	bottom: 0;right: 0;
	background: #FFFFFF;
}
.fixed image{
	width: 30rpx;height: 30rpx;
	margin-left: 36rpx;
}
.fixed_1{
	font-size: 24rpx;
	margin-left: 10rpx;
	margin-right: 16rpx;
}
.fixed_2{
	font-size: 24rpx;
	width: 200rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fixed_btn{
	width: 180rpx;
	height: 74rpx;
	line-height: 74rpx;
	color: #FFFFFF;
	background: linear-gradient(to right,#FF936F,#FE6C82);
	margin-left: 18rpx;
	border-radius: 36rpx;
	text-align: center;
}
.btt{
	color: #979DAD;
	background: #F7F8FC;
	margin-left: 0rpx;
}
</style>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值