多商铺，多商品，多规格购物车怎么做，仿淘宝,用uniapp做，自己修改适合vue

最新推荐文章于 2024-05-27 15:48:05 发布
最新推荐文章于 2024-05-27 15:48:05 发布
阅读量1.1k 收藏 9
点赞数
分类专栏： uniapp js 文章标签： html css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sansanyuner/article/details/106303942
版权
uniapp 同时被 2 个专栏收录
7 篇文章 0 订阅
订阅专栏
js
7 篇文章 1 订阅
订阅专栏

今日做一个商城类的项目，遇到了多商铺展示和多商品展示，一个这样的功能。

在这里插入图片描述
看起来非常简单的一个功能，为了图个方便的来，下面上代码：

<template>
	<view>
		<view class="bianji" @tap='updateCar(updateFonts)'>
			<view class="dianji">{{updateFonts}}</view>
		</view>
		<view class="itemMs" v-if="isHaveData" v-for="(s,s_idx) in dataList" :key="s_idx">
			<view class="imMs im-store">
				<view class="im-chose-icon" @click="choseStore(s)">
					<image v-if="s.storeChose" src="../../static/icon/icon_xz_zylm.png" mode=""></image>
					<image v-else src="../../static/icon/icon_wxz_zylm.png" mode=""></image>
				</view>
				
				<view class="is-store-name">
					{{s.storeName}}
				</view>
			</view>
			<view class="imMs im-goods" v-for="(g,g_idx) in s.goods" :key="g_idx">
				<view class="im-chose-icon" @click="choseGoods(s,g)">
					<image v-if="g.goodsChose" src="../../static/icon/icon_xz_zylm.png" mode=""></image>
					<image v-else src="../../static/icon/icon_wxz_zylm.png" mode=""></image>
				</view>
				<view class="ig-goods-image">
					<image :src="g.image" mode="aspectFill"></image>
				</view>
				<view class="ig-goods-info">
					<view class="igi-name hiddenFonts">
						{{g.name}}
					</view>
					
					<view class="igi-price">
						<view class="ip-price">
							￥{{g.price}}
						</view>
						
						<view class="ip-nums">
							<view class="onm-item" @click="changeCount(g,-1)">
								-
							</view>
							<view class="onm-item onm-nums">
								{{g.nums}}
							</view>
							<view class="onm-item" @click="changeCount(g,1)">
								+
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bomMsSpace"></view>
		<view class="bomMs" v-if="isHaveData">
			<view class="bm-main">
				<view class="bm-left">
					<view class="bl-icon" @click="checkAll()">
						<image v-if="isCheckAll" src="/static/icon/icon_xz_zylm.png" mode=""></image>
						<image v-else src="/static/icon/icon_wxz_zylm.png" mode=""></image>
					</view>
					<view class="bl-name">
						全选
					</view>
				</view>
				<view class="bm-middle" v-if="handleFonts === '结算'">
					合计：<text class="bm-price">￥{{allPrice}}</text>
				</view>
				<view class="bm-right" @click="settlement(handleFonts)">
					{{handleFonts}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var _self;
	export default {
		data() {
			return {
				dataList: [
					{
						storeName: '王小二旗舰店',
						storeChose: false,
						checkedCount: 0,
						goods: [
							{
								image: '/static/images/img_14_sy.png',
								name: '新西兰皇家红苹果6个约135g/个90元包邮到家送货上门',
								price: 128,
								nums: 1,
								goodsChose: false
							},
							{
								image: '/static/images/img_14_sy.png',
								name: '新西兰皇家红苹果6个约135g/个90元包邮到家送货上门',
								price: 128,
								nums: 1,
								goodsChose: false
							}
						]
					},
					{
						storeName: '王小二旗舰店',
						storeChose: false,
						checkedCount: 0,
						goods: [
							{
								image: '/static/images/img_14_sy.png',
								name: '新西兰皇家红苹果6个约135g/个90元包邮到家送货上门',
								price: 128,
								nums: 1,
								goodsChose: false
							}
						]
					}
				],
				url:'',
				// 全选
				isCheckAll: false,
				// 店铺数量
				allShops: 0,
				// 总价格
				allPrice: 0,
				//被选中的产品数量
				allCount: 0,
				updateFonts : '编辑',
				handleFonts : '结算',
				isHaveData : true
			}
		},
		onLoad() {
			_self = this;
		},
		watch: {
			dataList: {
				deep: true,
				handler(val, oldval) {
					_self._totalPrice()
					_self._totalCount()
				}
			}
		},
		methods: {
			// 编辑
			updateCar(fonts){
				if(fonts === '编辑'){
					_self.updateFonts = '完成'
					_self.handleFonts = '删除'
				}else{
					_self.updateFonts = '编辑'
					_self.handleFonts = '结算'
				}
			},
			// 选择店铺
			choseStore(list) {
				console.log(list)
				!list.storeChose ? _self._shopTrue(list) : _self._shopFalse(list)
			},
			_shopTrue(list) {
				console.log(list.goods)
				list.goods.forEach((item) => {
					item.goodsChose === false ? _self._checkTrue(list, item) : ''
				});
			},
			_shopFalse(list) {
				console.log(list.goods)
				list.goods.forEach((item) => {
					item.goodsChose === true ? _self._checkFalse(list, item) : ''
				});
			},
			// 选择商品
			choseGoods(list, item) {
				!item.goodsChose ? _self._checkTrue(list, item) : _self._checkFalse(list, item)
			},
			_checkTrue(list, item) {
				item.goodsChose = true
				++ list.checkedCount === list.goods.length ? list.storeChose = true : ''
				list.storeChose ? ++_self.allShops === _self.dataList.length ? _self.isCheckAll = true : _self.isCheckAll = false : ''
			},
			_checkFalse(list, item) {
				item.goodsChose = false
				-- list.checkedCount
				if (list.storeChose) {
					list.storeChose = false
					-- _self.allShops
				}
				_self.isCheckAll = false
			},
			// 全选
			checkAll() {
				_self.isCheckAll = !_self.isCheckAll
				_self.isCheckAll ?
					_self.dataList.forEach((list) => {
						_self._shopTrue(list)
					}) :
					_self.dataList.forEach((list) => {
						_self._shopFalse(list)
					})
			},
			// 购物车加减
			changeCount(item,type){
				if(type > 0){
					item.nums ++
				}else{
					if(item.nums === 1){}else{
						item.nums --
					}
				}
			},
			// 总价格
			_totalPrice() {
				_self.allPrice = 0
				_self.dataList.forEach((list) => {
					list.goods.forEach((item) => {
						if (item.goodsChose) {
							_self.allPrice += Number(item.price) * Number(item.nums);
						}
					});
				});
			},
			// 数量
			_totalCount() {
				_self.allCount = 0
				_self.dataList.forEach((list) => {
					_self.allCount += list.checkedCount
				});
			}
		}
	}
</script>

<style lang="scss">
	.bianji{
		width: 100%;
		height: 60rpx;
		background-color: #FFFFFF;
		margin-bottom: 30rpx;
		.dianji{
			width: 100rpx;
			height: 100%;
			font-size: 30rpx;
			text-align: center;
			line-height: 60rpx;
			float: right;
			
		}
	}

	.htaMs {
		width: 100%;
		height: 120rpx;
		background-color: #FFFFFF;
		position: fixed;
		top: 0;
		z-index: 99;

		// .hm-space {
		// 	height: 30rpx;
		// }

		.hm-all {
			display: flex;
			align-items: center;

			.ha-left {
				width: 10%;
				height: 90rpx;
				text-align: center;

				image {
					width: 20rpx;
					height: 36rpx;
					margin-top: 30rpx;
				}
			}

			.ha-name {
				width: 80%;
				height: 90rpx;
				text-align: center;
				font-size: 30rpx;
				color: #333333;
				line-height: 100rpx;
			}

			.ha-right {
				float: right;
				width: 10%;
				height: 90rpx;
				line-height: 100rpx;
				font-size: 26rpx;
				color: #333333;
			}
		}
	}

	.headSpace {
		height: 120rpx;
		margin-bottom: 20rpx;
	}
	.guige{
		display: inline-block;
		height: 40rpx;
		padding: 0 20rpx;
		font-size: 22rpx;
		line-height: 40rpx;
		background-color: #f0f0f0;
		color: #797979;
		border-radius: 15rpx;
	}

	.itemMs {
		width: 94%;
		margin: 0 auto 20rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding-bottom: 20rpx;

		.imMs {
			margin: 0 auto;
			display: flex;
			align-items: center;

			.im-chose-icon {
				width: 8%;
				text-align: center;

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}

		.im-store {
			width: 94%;
			height: 90rpx;

			.is-store-icon {
				margin: 0 10rpx 0;

				image {
					width: 30rpx;
					height: 26rpx;
				}
			}

			.is-store-name {
				font-size: 26rpx;
				margin-right: 10rpx;
			}

			.is-into-icon {
				image {
					width: 14rpx;
					height: 24rpx;
				}
			}
		}

		.im-goods {
			width: 88%;
			height: 200rpx;

			.ig-goods-image {
				width: 28%;
				height: 150rpx;
				text-align: center;

				image {
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx;
				}
			}

			.ig-goods-info {
				width: 62%;
				height: 150rpx;

				.igi-name {
					line-height: 40rpx;
					font-size: 26rpx;
				}

				.igi-price {
					height: 70rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.ip-price {
						font-size: 26rpx;
						color: #FF403C;
					}

					.ip-nums {
						height: 30rpx;
						display: flex;
						align-items: center;

						.onm-item {
							width: 40rpx;
							height: 30rpx;
							border: 1rpx solid #BBBBBB;
							font-size: 26rpx;
							line-height: 30rpx;
							text-align: center;
							color: #666666;
						}

						.onm-nums {
							border: none;
							border-top: 1rpx solid #BBBBBB;
							border-bottom: 1rpx solid #BBBBBB;
						}
					}
				}
			}
		}
	}

	.bomMsSpace {
		height: 100rpx;
	}

	.bomMs {
		width: 100%;
		height: 100rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #FFFFFF;
		z-index: 99;
		.bm-main {
			width: 92%;
			height: 100rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.bm-left {
				width: 20%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.bl-icon {
					width: 40%;
					text-align: center;

					image {
						width: 30rpx;
						height: 30rpx;
					}
				}

				.bl-name {
					font-size: 26rpx;
				}
			}

			.bm-middle {
				width: 30%;
				font-size: 26rpx;

				.bm-price {
					color: #FF403C;
				}
			}

			.bm-right {
				width: 200rpx;
				height: 60rpx;
				background-color: #F77F0C;
				text-align: center;
				line-height: 60rpx;
				font-size: 26rpx;
				color: #FFFFFF;
				border-radius: 30rpx;
			}
		}
	}
</style>

直接复制拿走注意包了两层

		dataList: [
					{
						storeName: '王小二旗舰店',
						storeChose: false,
						checkedCount: 0,
						goods: [
							{
								image: '/static/images/img_14_sy.png',
								name: '新西兰皇家红苹果6个约135g/个90元包邮到家送货上门',
								price: 128,
								nums: 1,
								goodsChose: false
							},
							{
								image: '/static/images/img_14_sy.png',
								name: '新西兰皇家红苹果6个约135g/个90元包邮到家送货上门',
								price: 128,
								nums: 1,
								goodsChose: false
							}
						]
					},
					{
						storeName: '王小二旗舰店',
						storeChose: false,
						checkedCount: 0,
						goods: [
							{
								image: '/static/images/img_14_sy.png',
								name: '新西兰皇家红苹果6个约135g/个90元包邮到家送货上门',
								price: 128,
								nums: 1,
								goodsChose: false
							}
						]
					}
				],

最外面一层店铺里面在包商品

木贼三
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
仿淘宝筛选完整功能
06-14
淘宝筛选的完整功能，之前在网络上收集的资源非常不全，所以自行写了这一完整功能，共大家一起分享学习
使用vue实现多规格选择实例（SKU）
10-16
在本文中，我们将探讨如何使用Vue.js框架实现一个多规格选择功能，通常用于电商项目中的商品详情页面，如SKU（Stock Keeping Unit）。Vue.js是一个轻量级的前端JavaScript库，它提供了一种声明式的数据绑定和组件化...
uni-app:商品列表
薛定谔的猫
03-12 1932
为了方便发起请求获取商品列表的数据，我们要根据接口的要求，事先定义一个请求参数对象data() {return {// 请求参数对象// 查询关键词query: '',// 商品分类Idcid: '',// 页码值// 每页显示多少条数据将页面跳转时携带的参数，转存到queryObj// 将页面参数转存到 this.queryObj 对象中为了方便开发商品分类页面，建议大家通过微信开发者工具，新建商品列表页面的编译模式在components目录上鼠标右键，选择新建组件将。
uniapp 自定义sku规格组 组件（可直接复制使用）
nanren_nanren的博客
05-27 375
是我在组件中确认以后构造数据跳转进入“确认订单”页面时需要使用，如果你们在sku.vue组件内不做跳转（点击确认时用$emit()方法回调到页面来操作跳转），或者跳转时不需要这个coverId可以不用传。3、目前我只实验了微信小程序和H5端能用，其他端还没测试（但是按道理应该也是没问题的）。2、有一些参数是我在组件内部做跳转时需要，大家如果在跳转的时候用不到的话也可以不传。: 是双向绑定组件显示的餐宿，需要使用.sync语法糖，且在组件内改变该值需要使用。同上也是我跳转传参需要。组件，所以需要提前安装。
uniapp-购物车功能实现案例
在无知中学习，在学习中成长，在成长中学习
02-03 1829
uniapp购物车的基本实现案例
VUE类似淘宝选择商品多规格(库存判断)
七十多岁的人了、
01-07 3518
商品选择多规格
UNIAPP实战项目笔记34 购物车的单选和全选单选联动
Ggome的博客
11-02 847
common 公共文件：全局css文件 || 全局js文件。pages.json 配置文件： 导航、 tabbar、 路由。manifest.json 配置文件： appid、logo…App.vue 全局配置：样式、全局监视。static 静态资源：图片、字体图标。main.js vue初始化入口文件。store vuex状态机文件。page 页面。components 组件。
基于Vue和uniapp的开店星公众版多端开发设计源码
最新发布
05-31
该项目基于Yii2、Vue2.0和uniapp，经过4000+代理商和10万+商户6年的线上检验，功能完善，系统逻辑清晰，营销活动多样。项目采用前后端分离、多端开发、负载均衡的架构，性能优越，稳定可靠。支持H5、小程序和公众号...
Vue或uniapp使用luckysheet免费开发多人在线编辑Excel文档
04-16
使用该压缩包可以使Vue或uniapp使用luckysheet免费开发多人在线编辑Excel档 使用说明可打开链接https://blog.csdn.net/weixin_43416253/article/details/124211439?spm=1001.2014.3001.5502 或在论坛中搜索“Vue或...
vue实现的仿淘宝购物车功能详解
10-17
在本教程中，我们将深入探讨如何使用Vue.js框架来实现一个仿淘宝购物车的功能。Vue.js是一个轻量级的前端JavaScript框架，它以其简洁的语法和强大的数据绑定能力深受开发者喜爱。通过Vue，我们可以轻松地构建动态且...
vue仿淘宝商品详情demo
11-09
使用vue2仿照了淘宝商品详情以及加入购物车。包含的页面有首页、分类更多、商品详情，其中商品详情的加入购物车利用了vue的组件功能
uniapp类似京东和淘宝的菜单分类
weixin_45167444的博客
03-28 646
uniapp类似京东和淘宝的菜单分类
vue产品多规格选择
AS、SD的博客
06-23 1081
<template> <div class="wrap wrap-sku"> <div class="product-box"> <div class="product-content"> <div class="product-delcom" v-for="(ProductItem,n) in specifications"> <p>{{ProductItem.name}}&
mysql 多商户购物车_购物车的几种实现方式
weixin_31913479的博客
01-19 501
1.购物车的话目前来说有三种,分别是存储在cookie中或是session中,或是结合 数据库存储第一种是存储在cookie中优点:1.cookie是存储在客户端的,且占用很少的资源,一般cookie中可以存储300个cookie,每个cookie为4KB,既可以满足购物车的需求,还可以减轻服务器的压力.2.cookie是浏览器内置,只要在cookie定义的有效期内,数据都不会丢失.3.二区coo...
Vue实现简单购物车
DOM曼珠沙华的博客
05-19 4364
这里先分析一下vue项目的文件结构，组件、入口文件及配置可以添加的位置。 其中： assets表示静态资源，如css，js components是公共组件存放的位置 App.vue是根组件 main.js为入口文件 组件化 需要在项目src文件夹下components文件夹内创建Cart.vue文件作为购物车组件。 所以在新建完成后需要在App.vue根组件内使用。 组件按需引入及注册 import Cart from './components/Cart.vue' export default{ na
VUE 加入购物车实现多个属性选择，取消选择，最后组合成新的属性数组。
神夜空间
05-07 783
<template> <!-- --> <div class="attrselect"> <template v-for="(item2,index) in goodsAttributes"> <p class="p1">{{item2.name}}</p&...
uni-app实现商城多商家购物车功能(超详细, 附带源码)
青衫折扇的博客
10-13 9977
我们先来看一下效果 有什么不懂可以直接下方留言 先来看代码 <template> <view class="cart"> <!-- 购物车为空 S --> <view v-if="cartList.length === 0" class="empty"> <image class="icongouwuche" src="../../static/icon_gouwuche.png" mode="widthFix">&lt
vue实现的购物车商品累加结算功能代码
周家大小姐
03-12 3625
适用于手机端，Vue实现淘宝购物车结算代码支持商品全选、商品累加统计、支持收藏等功能，是一款非常全面的购物车结算表单代码（不兼容IE6,7,8）点击打开链接...
购物车设计的两种方案
热门推荐
xiongxianhe的专栏
06-27 2万+
购物车主要功能是临时存放欲购买的商品，然后在结算或下订单时，把购物里面的数据全部移除。其数据结构主要包含的字段有：用户ID、商品ID、商品规格ID、商品数量。在移动端的电商系统里，根据是否需要在不同终端同步数据以及对购物车数据的重要程度，实现购物车功能有两种方式可选：【1】对于不需要在多终端同步购物车数据，以及购物车数据不太重要的情况下，可以选择把购物车的数据全部缓存在用户本地终端。这种方式的优点...
用vue3写一个商品多规格页面
05-24
好的，下面是一个简单的商品多规格页面示例： ```vue <h2>{{ product.name }} 价格: {{ product.price }} 选择规格 (option, key) in product.options" :key="key"> <h4>{{ option.name }} v-for="...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值