uni-app购物车逻辑

已于 2023-08-30 17:27:24 修改
阅读量242 收藏
点赞数 1
分类专栏： 购物车 文章标签： uni-app
于 2021-12-03 14:50:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qi_qi_ai/article/details/121698415
版权 
<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].cheched){
						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>
七月上_tao
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
uniapp实战开发商城APP和小程序
03-30
课程包含Uniapp开发全端教程，课程由英特网络独家录制，购买课程后赠送后端CMS管理系统，可以修改商品及接口数据，同时CMS提供Uniapp所需要的全部API接口，包括课程内容：安卓证书申请/APP苹果打包/APP安卓打包/微信小程序发布/后端代码发布/H5打包发布/APP微信支付/APP支付支付/上拉加载下拉刷新/JWT生成Token认证等课程支持1对1售后服务，购买课程或售后服务、演示地址可以联系QQ:1901090033。
UNIAPP优购商城购物车功能
m0_64396262的博客
06-26 2000
由于uniapp拥有高效开发，性能优秀，功能扩展灵活等优点，吸引了无数电商企业使用uniapp一次开发多个平台应用和部署，而今天要讲的，就是多渠道经营的卖家要开发商城中不可或缺的功能：购物车那么首先，我们需要写出地址框，购物车标题，购物车统计，以及购物车为空时的页面。
【uniapp】商城类购物车实现逻辑
ONLYSRY的博客
08-11 1131
uniapp商城类购物车实现逻辑，仅供参考
uni-app购物车流程，创建订单流程，支付流程
KB0824liu的博客
07-25 843
前端处理支付结果：前端接收到后端返回的支付结果后，根据支付结果进行相应的处理。前端发送支付请求：用户在前端选择支付方式后，前端通过发送HTTP请求将支付订单信息发送给后端。后端处理订单逻辑：后端根据接收到的订单信息进行相应的处理，包括验证订单信息的有效性、计算订单总金额、生成订单号、保存订单信息等。后端处理支付逻辑：后端根据接收到的支付订单信息进行相应的处理，包括验证订单状态、验证支付金额、调用支付平台API发起支付请求等。前端处理返回结果：前端接收到后端返回的创建订单结果后，根据结果进行相应的处理。
uniapp实现购物车功能
热门推荐
pumpkin_truck的博客
09-07 1万+
uniapp实现购物车功能 周六我看见一个有个公司招聘需要试岗3天，并使用uniapp完成购物车，直播间，地图，首页四个功能方能通过，于是乎，我趁手上没事就打算自己写一遍，虽然我的项目没用到，但是多掌握点总没错。今天就来第一个——购物车 因为没写接口，上面的数据我都是使用的模拟数据搭建而成，主要实现的是它件数的增加减少与支付总价格的逻辑关系，还有左边的全选和全不选。 首先第一步，我们把页面先搭建出来 <template> <view> //购物车没商品出现的页面 <v
uni-app快速入门源码 uni-app开发经典源码项目 uni-app可快速实现对接进销存
12-09
uni-app快速入门源码 uni-app开发经典源码项目 uni-app可快速实现对接企业进销存、OA、ERP系统 uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、...
uni-app制作咖啡小程序项目
03-18
1. **uni-app框架**：uni-app提供了一套统一的API接口，用于处理跨平台的差异，让开发者可以专注于业务逻辑，而无需关心底层平台的实现细节。它支持Vue组件化开发，提供了丰富的组件库和指令，简化了开发流程。 2. ...
CRMEB客户管理电商商城系统前端模板uni-app版.rar
08-18
CRMEB客户管理电商商城系统前端模板uni-app版是一个专为电商行业设计的前端解决方案，基于uni-app框架构建。uni-app是一个多端开发框架，它允许开发者使用一套代码库就能生成适应于iOS、Android、H5等多个平台的应用...
uni-app黑马优购
06-17
通过以上分析，我们可以看出"uni-app黑马优购"是一个集成了uni-app框架和电商功能的多端应用，开发者在开发过程中需熟悉uni-app的API和Vue.js语法，同时理解电商系统的业务逻辑，才能高效地构建出功能完善的移动购物...
uni-APP项目开发
06-14
它可能包含了商品展示、购物车、订单管理等多个模块，通过uni-APP的组件化和API调用，实现了与服务器的数据交互，构建了完整的移动购物体验。 总的来说，uni-APP凭借其跨平台能力、组件化开发模式以及丰富的生态...
【 uniapp - 黑马优购 | 购物车页面(1)】如何创建购物车编译模式、 商品列表区域实现
小新的博客
01-11 1569
🌴9. 购物车页面 🌳9.0 创建购物车页面的编译模式 🌳9.1 商品列表区域 🌲9.1.1 渲染购物车商品列表的标题区域 🌲9.1.2 渲染商品列表区域的基本结构 🌲9.1.3 为 my-goods 组件封装 radio 勾选状态 🌲9.1.4 为 my-goods 组件封装 radio-change 事件 🌲9.1.5 修改购物车中商品的勾选状态 🌲9.1.6 为 my-goods 组件封装 NumberBox 🌲9.1.7 为 my-goods 组件封装 num-change 事件
uni-app实现购物车(超详细 附带源码)
m0_58885302的博客
04-21 2942
我们的数据一般都是存放在state里，gettters是计算属性，所以全选和总价格的方法在这里写，我们的加，减，单选，全选都是在mutations里写。写到这里我们的vuex就已经搭建好了,可以使用了。
uni-app+uview 购物车模块组件(笔记)
FantasyWeirdo的博客
12-18 3485
<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"
uni-app实现简单购物车流程，创建订单流程，支付流程
qq_65225350的博客
07-26 442
【代码】uni-app实现简单购物车流程，创建订单流程，支付流程。
浅谈uniapp项目购物车业务逻辑
Web_Sam的博客
02-23 3722
购物车逻辑可以说是一个电商项目的重中之重，也是本人较为薄弱的一环。本次疫情，闲置在家，便做了一个小demo，也算是进一步锻炼一下购物车逻辑。下面便跟大家简单分享一下本次的经验，大佬勿喷。疫情当前，逆战不怠，武汉加油，中国加油。 购物车效果图： 一、在用户加入商品至购物车时，首先得判断，当前是否处于登录状态？ 如果未登录，则不能添加，并跳转至登录界面；如果已登录，则根据添加商品的信息发送请求，将商...
购物车模块丨前端uniapp微信小程序项目
黑马程序员官方博客
09-04 645
完成加入购物车，购物车列表交互，计算结算金额等业务。
uniapp微信小程序_购物车_下单页面
最新发布
apple_70049717的博客
03-21 1303
data:{cart: [],// 有重复的处理成一个//过滤，当点击的次数等于0的时候将次数不等于0的过滤出来，就是相当于删除了次数等于0的商品== 0);// 转换成字符串== 0);还得过滤一下不然把之前没有的还会加进去，减商品也一样。
uni-app加入购物车、创建订单以及支付流程
weixin_48043684的博客
07-25 759
uni-app实现加入购物车流程、创建订单流程、支付流程
uniapp 前端购物车增加商品逻辑。根据商品id与规格判断如果包含就增加数量，如果不包含就新增一条数据。
tongxhuanbao的博客
03-20 239
根据值判断增加数量还是新增一条数据
用uni-app写一个购物车底部
05-23
以下是一个简单的购物车底部示例，使用uni-app框架和flex布局实现： ```html <view class="cart-bar"> <view class="check-all"> <checkbox v-model="isCheckAll" /> 全选 <view class="total-price"> ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值