uniapp仿淘宝购物车demo

news2024/9/20 18:50:04

项目是基于uview2.0的ui组件，并且在一定程度上修改过原本组件的代码（app-navbar是使用u-navbar在进行二次封装的组件；u-number-box也进行了修改），符合项目需求（这个看个人项目需求在进行修改）
u-number-box有点难用的地方，加减有时候不能很及时的回应合计的数量，导致总价对不上，所以我开启了asyncChange（是否开启异步变更，开启后需要手动控制输入值）。
u-number-box一些改动到的地方

this.$emit(type) 改成 this.$emit(type,value) type是minus和plus
onInput(){
	...
	if (this.asyncChange) {
		this.$nextTick(() => {
			this.currentValue = formatted
			this.$forceUpdate()
		})
	}
	this.$emit('input', formatted)
	//以上时新增加
}

<!-- 购物车 -->
<template>
	<view>
		<!-- 说明：因为小程序右上角有胶囊会挡住右上角的“管理”按钮，所以给设置到左边，app还是在右上角 -->
		<!-- #ifndef MP -->
		<app-navbar navTitle="购物车" bgColor="#fff" leftIconColor="#000" :rightText="manageIndex == 0 ? '管理' : '退出管理'" :border="false" @right="manage"></app-navbar>
		<!-- #endif -->
		<!-- #ifdef MP -->
		<app-navbar navTitle="购物车" bgColor="#fff" leftIconColor="#000" :leftText="manageIndex == 0 ? '管理' : '退出管理'" :border="false" @leftText="manage"></app-navbar>
		<!-- #endif -->
		<view class="trolley-list">
			<view class="trolley-item" v-for="(item,index) in trolleyList" :key="index">
				<view class="item-store flex align-c">
					<u-image :src="item.check ? checkYes : checkNo" width="42rpx" height="42rpx" @click="changeItemCheck(item)"></u-image>
					<view class="store-icon">
						<u-image src="./trolleyStoreIcon.png" width="42rpx" height="42rpx"></u-image>
					</view>
					<view class="store-title f32 text-medium col-1e3 text-over1">
						仙灵老酒坊仙灵老酒坊仙灵老酒坊
					</view>
					<view class="store-right">
						<u-image src="./trolleyStoreRight.png" width="34rpx" height="34rpx"></u-image>
					</view>
				</view>
				<view class="store-list" v-for="(i,k) in item.children" :key="k">
					<view class="flex align-c list-item">
						<view class="list-del flex align-c justify-c" v-if="manageIndex == 1">
							<view class="del-view" @click.stop="changeIDel(item,index,k)">
								<u-icon name="minus-circle-fill" width="42rpx" height="42rpx" size="42rpx" color="#F43B15"></u-icon>
							</view>
						</view>
						<view class="list-check" @click="changeICheck(i,item)">
							<u-image :src="i.check ? checkYes : checkNo" width="42rpx" height="42rpx"></u-image>
						</view>
						<view class="list-cover">
							<u-image src="./cover.png" width="200rpx" height="200rpx" radius="16rpx"></u-image>
						</view>
						<view class="list-msg">
							<view class="list-title text-over1 f32 col-1e3 text-medium">
								泸州老窖高度酒世家精品52°至尊版
							</view>
							<view class="list-spe text-over1 f28 col-96a text-regular">
								典藏版-500ml-红色-精装-豪华-998
							</view>
							<view class="list-label flex">
								<view class="flex align-c justify-c label-item">
									<view class="col-f43 text-regular f20">
										标签1
									</view>
								</view>
								<view class="flex align-c justify-c label-item">
									<view class="col-f43 text-regular f20">
										标签1
									</view>
								</view>
							</view>
							<view class="list-pap flex align-c justify-sb">
								<view class="col-fe5 text-bold list-pap-price">
									￥{{i.price}}
								</view>
								<view class="pap-num flex align-c justify-c" v-if="!i.showBox" @click="showNumberBox(i,k)">
									<view class="f28 text-regular col-1e3">
										x{{i.quantity}}
									</view>
								</view>
								<view class="pap-box" v-if="i.showBox">
									<u-number-box :value="i.quantity" :asyncChange="true" @minus="boxChangeMinus($event,i)" @plus="boxChangePlus($event,i)" @input="boxChangeInput($event,i)" bgColorNum="#fff" :integer="true" :min="1">
										<view slot="minus" class="minus">
											<u-image width="42rpx" height="42rpx" :src="i.quantity <= 1 ? minusNo : minus" name="minus"></u-image>
										</view>
										<view slot="plus" class="plus">
											<u-image width="42rpx" height="42rpx" :src="plusPay" name="plus"></u-image>
										</view>
									</u-number-box>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="margin-top: 200rpx;" v-if="trolleyList.length == 0">
			<u-empty text="暂无数据" icon="./empyIcon.png"></u-empty>
		</view>
		<view class="kongfooter"></view>
		<view class="trolley-footer flex">
			<view class="flex align-c justify-sb footer-1">
				<view class="flex align-c justify-c">
					<u-image :src="trolleyAll ? checkYes : checkNo" width="42rpx" height="42rpx" @click="settle"></u-image>
					<view class="footer-msg">
						<view class="footer-msg-top f24 col-96a text-regular" v-if="allNum != 0">
							已选{{allNum}}件
						</view>
						<view class="flex align-c">
							<view class="f24 col-1e3 text-regular">
								合计：
							</view>
							<view class="f40 col-fe5 text-bold">
								￥{{allTotal}}
							</view>
						</view>
					</view>
				</view>
				<view class="flex align-c justify-c trolley-btn">
					<view class="f36 text-bold col-fff">
						结算
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	//加法(mathAdd)和乘法(mathMul)的精度计算函数
	import { mathAdd,mathMul} from '@/utils/mathUtils.js'
	export default{
		data(){
			return{
				trolleyAll:false,
				manageIndex:0,//0管理 1退出管理
				checkNo: './payNo.png',
				checkYes:'./checkYes.png',
				minus: './minusPay.png',
				minusNo: './minusPayNo.png',
				plusPay: './plusPay.png',
				plusPayNo: './plusPayNo.png',
				quantity:1,
				trolleyList:[],
				allTotal:0,//合计
				allNum:0,//总件数
			}
		},
		onLoad() {
			this.getRrolleyList()
		},
		onReachBottom() {
			
		},
		onPullDownRefresh() {
			this.getRrolleyList()
		},
		methods:{
			//删除商品
			changeIDel(item,index,k){
				if(item.children.length == 1){
					this.trolleyList.splice(index,1)
				}else{
					this.trolleyList[index].children.splice(k,1)
				}
				this.getTotal()
				this.isAllCheck()
			},
			//判断是否全选
			isAllCheck(){
				let num = 0;
				if(this.trolleyList.length == 0){
					this.trolleyAll = false
				}else{
					this.trolleyList.forEach((item,index)=>{
						if(item.check){
							num ++;
						}
					})
					if(num == this.trolleyList.length){
						this.trolleyAll = true
					}else{
						this.trolleyAll = false
					}
				}
			},
			//全部选中、取消
			settle(){
				this.trolleyAll = !this.trolleyAll
				this.trolleyList.forEach((item,index)=>{
					item.check = this.trolleyAll
					item.children.forEach((i,k)=>{
						i.check = this.trolleyAll
					})
				})
				this.getTotal()
			},
			//计算合计价格
			getTotal(){
				let sum = 0;
				let num = 0;
				this.trolleyList.forEach((item,index)=>{
					item.children.forEach((i,k)=>{
						if(i.check){
							let iSum = mathMul(i.price,i.quantity)
							sum = mathAdd(sum,iSum);
							num ++;
						}
					})
				})
				this.allNum = num
				this.allTotal = sum
			},
			//勾选、取消勾选每个店铺的选择
			changeItemCheck(item){
				item.check = !item.check
				item.children.forEach((i,k)=>{
					i.check = item.check
				})
				this.getTotal()
				this.isAllCheck()
			},
			//勾选、取消勾选每个商品的选择
			changeICheck(i,item){
				i.check = !i.check
				let sum = 0
				item.children.forEach((i,k)=>{
					if(i.check){
						sum++
					}
				})
				if(sum == item.children.length){
					item.check = true
				}else{
					item.check = false
				}
				this.getTotal()
				this.isAllCheck()
			},
			//显示每个商品的计步器
			showNumberBox(i,k){
				i.showBox = !i.showBox
			},
			//获取购物车列表
			getRrolleyList(){
				let arr = [
					{
						children:[
							{
								quantity:1,
								price:10
							},{
								quantity:2,
								price:99
							}
						]
					},
					{
						children:[
							{
								quantity:6,
								price:90
							}
						]
					},
					{
						children:[
							{
								quantity:10,
								price:9.9
							},{
								quantity:3,
								price:6.6
							}
						]
					}
				]
				//check是商品是否被勾选，这个值如果后端有返回就用后端返回的key
				//showBox是商品是否显示加减计步器，同上
				arr.forEach((item,index)=>{
					this.$set(item,'check',false)
					item.children.forEach((i,k)=>{
						this.$set(i,'check',false)
						this.$set(i,'showBox',false)
					})
				})
				this.trolleyList = arr
				uni.stopPullDownRefresh()
			},
			//输入框改变
			boxChangeInput(e,i){
				i.quantity = e
				this.getTotal()
			},
			//商品加
			boxChangePlus(e,i){
				i.quantity = e
				this.getTotal()
			},
			//商品减
			boxChangeMinus(e,i){
				i.quantity = e
				this.getTotal()
			},
			//点击管理、退出管理
			manage(){
				this.manageIndex = this.manageIndex == 0 ? 1 : 0
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F9FF;
	}
	.trolley-list{
		padding: 16rpx 10rpx;
		.trolley-item{
			width: 730rpx;
			padding: 38rpx 20rpx 46rpx 20rpx;
			background-color: #fff;
			border-radius: 16rpx;
			margin-bottom: 16rpx;
			.store-list{
				padding-top: 42rpx;
				.list-item{
					position: relative;
					.list-del{
						position: absolute;
						width: 80rpx;
						height: 200rpx;
						background: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 80%,transparent 100%);
						top: 0;
						right: 0;
						z-index: 10078;
						.del-view{
							width: 42rpx;
							height: 42rpx;
						}
					}
				}
				.list-msg{
					width: calc(100% - 42rpx - 20rpx - 200rpx);
					padding-left: 20rpx;
					.list-title{
						width: 100%;
					}
					.list-spe{
						width: 100%;
						margin-top: 12rpx;
					}
					.list-label{
						margin-top: 14rpx;
						.label-item{
							margin-right: 8rpx;
							height: 28rpx;
							padding: 0 6rpx;
							border: 1rpx solid #F43B15;
							border-radius: 4rpx;
							background: #fff;
						}
					}
					.list-pap{
						margin-top: 18rpx;
						.list-pap-price{
							font-size: 40rpx;
							line-height: 40rpx;
						}
						.pap-num{
							height: 42rpx;
							padding: 0 8rpx;
							border: 1rpx solid #D2E2FF;
							border-radius: 8rpx;
						}
					}
				}
				.list-check{
					width: 42rpx;
					height: 42rpx;
					margin-right: 20rpx;
				}
				.list-cover{
					width: 200rpx;
					height: 200rpx;
				}
			}
			.item-store{
				.store-icon{
					margin-left: 32rpx;
					width: 42rpx;
					height: 42rpx;
				}
				.store-title{
					max-width: 320rpx;
					margin-left: 10rpx;
				}
				.store-right{
					width: 34rpx;
					height: 34rpx;
					margin-left: 4rpx;
				}
			}
		}
	}
	.kongfooter{
		height: calc(180rpx + env(safe-area-inset-bottom));
	}
	.trolley-footer{
		position: fixed;
		left: 0;
		right: 0;
		width: 750rpx;
		margin: auto;
		bottom:0;
		height: calc(160rpx + env(safe-area-inset-bottom));
		background: #fff;
		padding: 0 30rpx 0 20rpx;
		z-index: 10079;
		.footer-1{
			height: 160rpx;
			width: 100%;
		}
		.trolley-btn{
			width: 188rpx;
			height: 100rpx;
			border-radius: 32rpx;
			background: linear-gradient(90deg, #478BFF 0%, #47C1FF 100%);
		}
		.footer-msg{
			margin-left: 24rpx;
			.footer-msg-top{
				margin-bottom: 10rpx;
			}
		}
	}
	.col-1e3{
		color: #1E355E;
	}
	.col-96a{
		color: #96A1B5;
	}
	.col-478{
		color: #478BFF;
	}
	.col-fff{
		color: #fff;
	}
	.col-f43{
		color: #F43B15;
	}
	.col-fe5{
		color: #FE5502;
	}
	.f20{
		font-size: 20rpx;
		line-height: 20rpx;
	}
</style>

效果图

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/512335.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【 在线音乐平台(onlinemusic) 】

【 在线音乐平台(onlinemusic) 】

文章目录 一、核心功能二、效果演示三、创建项目四、数据库设计及配置数据库4.1 数据库和表设计4.2 配置连接数据库 五、创建配置类六、具体功能实现6.1 注册模块6.2 登录模块拓展&#xff1a;登录注册加密(MD5&#xff0c;BCrypt) 6.3 退出模块6.4 上传音乐模块知识拓展1&…
阅读更多...
RabbitMQ详解（六）：RabbitMQ集群搭建

RabbitMQ详解（六）：RabbitMQ集群搭建

集群 官方参考文档&#xff1a;https://www.rabbitmq.com/clustering.html RabbitMQ这款消息队列中间件产品本身是基于Erlang编写&#xff0c;Erlang语言天生具备分布式特性&#xff08;通过同步Erlang集群各节点的magic cookie来实现&#xff09;。因此&#xff0c;RabbitMQ天…
阅读更多...
什么是柔性玻璃？

什么是柔性玻璃？

柔性玻璃(Flexible glass)是一种新型薄膜玻璃基板(Thin film glass substrate)材料&#xff0c;厚度极薄可以弯曲。 柔性玻璃定义有广义和狭义之分&#xff1a; 广义柔性玻璃泛指所有制成微米尺寸具有可弯曲特性的玻璃材料&#xff0c;如玻璃纤维、光纤、玻璃棉、玻璃布等。这些…
阅读更多...
第10课【STM32 USB通讯协议实战】HID键盘+CDC虚拟串口组合设备

第10课【STM32 USB通讯协议实战】HID键盘+CDC虚拟串口组合设备

目录 前言USB设备类别未定义设备设备描述符/配置描述符分析如何配置从机类型如何配置设备专用的描述符如何配置从机端点 HID设备特点设备描述符/配置描述符分析HID报文描述符短条目前缀可选数据表现形式 层次结构实例分析总结 CDC设备特点设备描述符/配置描述符分析设备类特定请…
阅读更多...
【LED子系统】四、核心层详解（一）

【LED子系统】四、核心层详解（一）

个人主页&#xff1a;董哥聊技术 我是董哥&#xff0c;嵌入式领域新星创作者 创作理念&#xff1a;专注分享高质量嵌入式文章&#xff0c;让大家读有所得&#xff01; 文章目录 1、前言2、leds_init分析2.1 相关数据结构2.1.1 class 2.2 实现流程 3、leds_class_dev_pm_ops分析…
阅读更多...
Mysql出现问题：ERROR 1062 (23000): Duplicate entry ‘‘ for key ‘PRIMARY‘解决方案

Mysql出现问题：ERROR 1062 (23000): Duplicate entry ‘‘ for key ‘PRIMARY‘解决方案

回城传送–》《数据库问题解决方案》 ❤️作者主页：小虚竹 ❤️作者简介：大家好,我是小虚竹。Java领域优质创作者🏆，CSDN博客专家🏆，华为云享专家🏆，掘金年度人气作者🏆，阿里云专家博主🏆，51CTO专家博主🏆 ❤️技术活，该赏 ❤️点赞 👍 收藏 ⭐再看，养成…
阅读更多...
QT中的模态对话框及非模态对话框

QT中的模态对话框及非模态对话框

QT中的模态对话框及非模态对话框 [1] QT中的模态对话框及非模态对话框[2] Qt工作笔记-主界面往模式对话框emit信号&#xff0c;有注意的问题正常情况下&#xff1a;不正常情况下&#xff1a;下面给出正常情况下的代码&#xff1a; [1] QT中的模态对话框及非模态对话框 原文链接…
阅读更多...
KVM软件安装/Guest OS图形模式安装

KVM软件安装/Guest OS图形模式安装

KVM软件安装 首先你的Linux操作系统得带有图形化界面 虚拟机开启硬件虚拟化 关闭防火墙和selinux [rootserver-d ~]# systemctl stop firewalld [rootserver-d ~]# systemctl disable firewalld Removed symlink /etc/systemd/system/multi-user.target.wants/firewalld.ser…
阅读更多...
RK3568修改调试串口的波特率

RK3568修改调试串口的波特率

概述 使用了临滴 RK3568 开发板,其调试串口的默认波特率是 1500000 &#xff0c;但并不是所有的 USB 转 TTL 都能使用这么高的波特率&#xff0c;所以我们就将波特率修改为 115200 这个比较通用的波特率。 RK3568 调试串口修改波特率的方法 ddr 运行阶段串口波特率的修改 ddr…
阅读更多...
linux利用定时任务提权

linux利用定时任务提权

背景&#xff1a; 运维为了防止数据丢失等&#xff0c;写个定时任务进行数据的打包压缩。由于数据打包压缩命令为tar&#xff0c;tar可以尝试加参数调用其他命令执行。 压缩命令&#xff1a;tar zxf 1.tar.gz /var/www/* 查看定时任务&#xff1a;cat /etc/crontab root权限下…
阅读更多...
WordPress入门之WordPress站点基本设置

WordPress入门之WordPress站点基本设置

在Wordpress站点搭建过程中，我们需要快速去熟悉Wordpress，并进行一些简单的基本设置，在开始设置之前，大家可以先熟悉左边的菜单栏的每个选项，了解它们都是做什么的，今天就简单为大家介绍Wordpress入门之Wordpress站点基本设置。 一、设置个人资料 建议大家完善基本信息…
阅读更多...
电容笔一定要防误触吗？苹果平板平替电容笔排行

电容笔一定要防误触吗？苹果平板平替电容笔排行

至于用ipad作为学习工具的学生们&#xff0c;更是将它当成了一种必不可少的工具。但是&#xff0c;由于苹果原装电容笔的价格过高&#xff0c;没有人能负担得起。所以&#xff0c;最好的办法就是使用普通的电容笔。我是IPAD的忠实用户&#xff0c;也是数码爱好者&#xff0c;这…
阅读更多...
10.BOM浏览器对象模型

10.BOM浏览器对象模型

BOM 浏览器对象模型 1. BOM 概述 1.1 什么是 BOM BOM&#xff08;Browser Object Model&#xff09;即浏览器对象模型&#xff0c;它提供了独立于内容而与**浏览器窗口进行交互的对象&#xff0c;其核心对象是 window BOM 由一系列相关的对象构成&#xff0c;并且每个对象都…
阅读更多...
在Bamboo上怎么使用iOS的单元测试 | 京东云技术团队

在Bamboo上怎么使用iOS的单元测试 | 京东云技术团队

作者&#xff1a;京东零售 吴滔 本教程将使用北汽登录模块为例&#xff0c;一步一步和大家一起搭建单元测试用例&#xff0c;并在Bamboo上跑起来&#xff0c;最终测试结果和代码覆盖率会Bamboo上汇总。 模块名称&#xff1a;BQLoginModule,是通过iBiu创建的一个模块工程 一 建…
阅读更多...
浅尝Kubernetes

浅尝Kubernetes

第一节 内容编排与Kubernetes 为什么要用k8s 集群环境容器部署的困境&#xff0c;假设我们有数十台服务器。分别部署Nginx&#xff0c;redis&#xff0c;mysql&#xff0c;业务服务。如何合理的分配这些资源。这里就需要用到容器编排 容器编排 在实际集群环境下&#xff0…
阅读更多...
JAVA-抽象类和接口

JAVA-抽象类和接口

文章目录 前言 大家好呀,今天给大家带来抽象类和接口的讲解,那么废话不多说,跟着我一起去学习吧! 1.1抽象类的概念 在面向对象的概念中&#xff0c;所有的对象都是通过类来描绘的&#xff0c;但是反过来&#xff0c;并不是所有的类都是用来描绘对象的&#xff0c;如果 一个类…
阅读更多...
Java 11新特性：模块化系统和本地变量类型推断

Java 11新特性：模块化系统和本地变量类型推断

作为Java语言的最新版本&#xff0c;Java 11带来了许多新特性&#xff0c;其中最引人注目的是模块化系统和本地变量类型推断。这两个新特性对Java开发人员来说具有重要意义&#xff0c;因此在本文中&#xff0c;我们将详细探讨这两个新特性及其对Java开发的影响。 章节1&#…
阅读更多...
记录一次uniapp实现APP自动升级

记录一次uniapp实现APP自动升级

描述 app的版本管理和升级&#xff0c;是一个不可或缺的功能&#xff0c;而uniapp则是提供了一整套的流程&#xff0c;由于官方文档过于复杂&#xff0c;而且写的云里雾里的&#xff0c;所以个人记录一次我的操作&#xff0c;直到配置成功。 总体 一共分为2个部分&#xff0…
阅读更多...
scanf与printf函数的用法

scanf与printf函数的用法

前言&#xff1a; 学习c语言编程&#xff0c;必不可少的操作就是键盘输入与屏幕输出。今天我想讲讲自己对scanf与printf使用的看法 一、scanf与printf&#xff1a; 1.scanf()函数&#xff1a; int scanf ( const char * format, ... ); 函数的功能&#xff1a;从标准输入中…
阅读更多...
契约锁亮相华为2023中国合作伙伴大会，共谱华为云软件生态新篇章

契约锁亮相华为2023中国合作伙伴大会，共谱华为云软件生态新篇章

5月8日-9日&#xff0c;以“因聚而生 众志有为”为主题的“华为中国合作伙伴大会2023”在深圳举行。契约锁作为华为云优秀软件伙伴&#xff0c;受邀参会并在“聚数字化先行者&#xff0c;谱软件生态新乐章”分论坛开展“让数字可信&#xff0c;打通数字化最后一公里”数字化实践…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023