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

安徒生小妖怪

已于 2022-08-16 17:44:09 修改

阅读量2.2k

点赞数 6

文章标签：前端 html5 css3

于 2022-08-16 17:41:20 首次发布

本文链接：https://blog.csdn.net/weixin_69658614/article/details/126371072

版权

附带源码（无插件）

<template>
	<view>
		<view class="cartBox" style="padding-bottom: 90rpx;">
			<!-- 头部选项卡 -->
			<view class="card-header">
				<view class="card-jzheader">
					<text>购物车</text>
					<text>（{
  {totalNum}})</text>
				</view>
				<view @click="tab" class="card-zheader">
					<view v-if="isEdit">管理</view>
					<view v-else>完成</view>
				</view>
			</view>
			<!-- 商品商家列表 -->
			<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" @tap="goShop(items)">
						<image :src="items.logo" class="cartName-img"></image>
						<view style="max-width:400rpx;overflow:hidden; white-space: nowrap;text-overflow:ellipsis;">
							{
  {items.marketname}}
						</view>
					</view>
					<image src="../../static/sptupian/right.png" class="cartName-go" @tap="goShop(items)"></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" class="cartDetail-imgs"></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: 25rpx;">{
  {item.price}}</text>
										<text style="font-size: 25rpx;">{
  {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="