uniapp购物车多商家商品实现vue3-setup（删除-添加-结算-总价计算-总数合计-单选全选-快速清理-）

最新推荐文章于 2025-04-21 01:03:55 发布

安徒生小妖怪

最新推荐文章于 2025-04-21 01:03:55 发布

阅读量876

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_69658614/article/details/126542445

版权

本文详细介绍了如何使用uniapp和vue3的setup语法来实现购物车功能，包括商品删除、添加、结算操作、总价计算、商品总数合计、单选全选以及快速清理购物车等关键步骤。

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

<template>
	<view class="nr">
		<view class="cartBox" style="padding-bottom: 90rpx;">
			<!-- 商品商家列表 -->
			<view class="cartShop" v-for="(items,index) in list" :key="index">
				<!-- 商家列表 -->
				<view class="cartName cartPad">
					<view class="cart-xxkbk">
						<radio :checked="items.shopSelected==1" color="#ff2d52" style="transform:scale(0.8)"
							@click="shopSelect(items)" />
					</view>
					<view class="cartName-box">
						<view class="sjmz">
							{
  {items.marketname}}
						</view>
					</view>
					<image src="../../static/sptupian/right.png" class="cartName-go"></image>
				</view>
				<!-- 商品列表 -->
				<view v-for="(item,k) in items.cart" :key="k" class="cartCont" @click="goodSelect(items,item)">
					<view class="cartDetail">
						<view class="cart-xxksbbk">
							<radio :checked="item.goodsSelected==1" color="#ff2d52" style="transform:scale(0.8)" />
						</view>
						<view class="cartDetail-img">
							<image :src="item.imgurl"></image>
						</view>
						<view class="cartDetail-title">
							<view class="cartDetail-txt">
								<view class="cartDetail-bk">
									<view class="cartDetail-mz">
										{
  {item.goodsname}}
									</view>
								</view>
							</view>
							<view class="cartDetail-lab">
								规格：{
  {item.skuvalue}}
							</view>
							<view class="cartNum">
								<view class="cartNum-txt">
									<view style="margin-bottom: 15rpx;">
										<text
											style="font-size: 28rpx;color:#FF6000;font-weight: 600; ">{
  {item.price}}</text>
										<text
											style="font-size: 28rpx;color:#FF6000;font-weight: 600; ">{
  {item.tonzheng}}</text>
									</view>
								</view>
								<view class="add-sub-con">
									<text class="link" :class="item.num==1? 'jj':'aj'"
										@click.stop="cutAction(item)">-</text>
									<text class="input1 num input">{
  {item.num}}</text>
									<text class="link" :class="item.num*1<item.kucun*1? 'aj':'jj'"
										@click.stop="addAction(item)">+</text>
								</view>
							</view>
						</view>
						<view class="cartDetail-tb">
							<image :src="item.imgul" class="cartDetail-imgss"></image>
							<view class="db">
								<view class="pick">
									<image class="pick-img" src="../../static/sptupian/shoucang.png"></image>
									<text>收藏</text>
								</view>
								<view class="picks">
									<image class="picks-img" src="../../static/sptupian/sahnchu.png"></image>
									<text @click="allDeldg">删除</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 底部选项卡 -->
			<view class="dbxxk">
				<view class="cartTotal">
					<view class="cartTotal-title">
						<radio :checked="list.allSelected==1" color="#ff2d52" style="transform:scale(0.8)"
							@click="selectAllAction" />
						<view class="cart-choose" @click="selectAllAction">
							全选
						</view>
					</view>
					<view class="cart-shanchu" @click="deleteItem">
						删除
					</view>
					<view class="cart-num">
						<view class="cart-numTxt">
							<text style="color: #ccc;">已选{
  {totalNum}}件商品，</text>
							<text style="color: black;">合计：</text>
							<text style="font-size: 36rpx; color:rgba(255, 96, 0, 1)">{
  {totalPrice}}</text>
						</view>
						<!-- 结算明细展开框 -->
						<view class="fui-page__bd">
							<fui-button type="gray" width="121rpx" height="30rpx" bold @click="showPopup(2)">
								<text
									style="font-size: 22rpx;margin-left: 8rpx;color: #FF6000;border-radius: 0rpx;">查看明细</text>
								<image class="cart-img" src="../../static/sptupian/top.png"></image>
							</fui-button>
						</view>
						<!-- 结算明细内容页面 -->
						<fui-bottom-popup style="margin-bottom:91rpx;transition: 1.2s;" :show="show2"
							:maskClosable="false">
							<view class="fui-popup__container">

								<!-- 农业通证区域 -->
								<view class="fui-title">
									<text>结算明细</text>
								</view>
								<view class="fui-descr">
									<text>农业通证合计：<text class="fui-descrs">{
  {totalPricenonye}}</text></text>
								</view>
								<