uniapp实现选择商品规格，禁用没有库存的规格

已于 2023-03-24 15:09:17 修改
阅读量802 收藏 4
点赞数 3
文章标签： uni-app html servlet
于 2023-03-23 16:26:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kkltWW/article/details/129733425
版权

先拿到skuList,这边后端返回的skuLis是这种格式 

skuList = [

    {

        "skuId": 50,

        "price": 1799.0,

        "oriPrice": 1799.0,

        "stocks": 99,

        "skuName":

        "8+128GB 黑 ",

        "pic": null,

        "properties":

        "内存:8+128GB;机身颜色:黑"

    },

    {

        "skuId": 52,

        "price": 1399.0,

        "oriPrice": 1959.0,

        "stocks": 9,

        "skuName": "8+256GB 黑 ",

        "pic": null,

        "properties":

        "内存:8+256GB;机身颜色:白"

    }

]

处理好数据 把每一个规格标签取出来

需要把数据处理成这样

{

内存：[128GB,256GB],

机身颜色：[黑色，白色]

}

遍历skuList，取出properties 

实现代码

var obj ={}
skuList.forEach(ele=>{
			   ele.properties.split(';').forEach(el=>{
			    obj[el.split(':')[0]]=[]
			   })
			})
		skuList.forEach(ele=>{
			    ele.properties.split(';').forEach(el=>{
					if(obj[el.split(':')[0]].indexOf(el.split(':')[1])!=-1)     return
			     obj[el.split(':')[0]].push( el.split(':')[1])
			    })
			 })

使用v-for渲染处理好的数据

循环每个规格在渲染时做判断 所以要在判断的方法里通过当前要判断是否禁用的规格（假设当前循环到的这一个规格为i），用i去拼接其他类型的已选中的规格得出i的properties，通过i的properties在skyList找出相同的数据，从而筛选当前匹配的sku，最后通过库存属性返回布尔值

实现代码

isAbled(selectedobj, key, item, skuKeys, skuList) {
			 
					var properties = "";
					for (var j = 0; j < skuKeys.length; j++) {
						properties += skuKeys[j] + ":" + selectedobj[skuKeys[j]] + ";";
					}
					properties = properties.substring(0, properties.length - 1); //首先获取当前选中的规格
					var find = true
					var skuserchArr = properties.split(';') // 将当前选中的规格转为数组
				
					var skuserchKey = key + ':' + item //当前循环到的这个规格标签
					var newsku = skuserchArr.map(function(ele) { //看当前循环到的标签类型等不等于选中的 只需要取其他类型的规格标签
						if (ele.split(':')[0] == key) {
							return skuserchKey
						} else {
							return ele
						}
				
					})
					newsku = newsku.join(";") //生成循环到的这一个规格和已经选中的其他类型的规格的组合
				
					var targetSku = {}
					skuList.forEach(function(ele) { //找到生成的规格属于skuList中的哪一条数据
						if (newsku == ele.properties) {
							targetSku = ele
						}
					})
				
					if (targetSku.stocks == 0) {
						find = false
					}
					//判断找到的这条数据的库存等不等于0，返回布尔值
					return find;
				}
		}

 最后只需要通过布尔值判断规格是否禁用就行了

最后成功实现效果 红色为选中的规格 灰色为禁用的规格

完整的实现代码：

<template>
	<view class="content">
		<!-- <image class="logo" src="/static/logo.png"></image> -->
		<view class="text-area">
			<button @click="selectSku">选择规格</button>
		</view>
		<view class="sku_select" v-if="isShow">
			<view class="" v-for="(value,key) in skuGroup" :key="key" @tap="changeSku">
				<view class="">
					{{key}}
				</view>
				<view class="pup-sku-area">
						<view :class="'sku_item '+(seleArr.indexOf(item)!=-1?'color':'')+' '+(isAbled(selectedobj, key, item, skuKeys, skuList)?'':'abled') " v-for="(item,index) in value" 
						:data-key="key" :data-value='item' :key="item"  :data-abled="isAbled(selectedobj, key, item, skuKeys, skuList)">
							{{item}}
						</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				isShow: true,
				skuList: [{
						"skuId": 671,
						"price": 1799.0,
						"oriPrice": 1799.0,
						"stocks": 99,
						"skuName": "8+128GB 黑 ",
						"pic": null,
						"properties": "内存:8+128GB;机身颜色:黑"
					},
					{
							"skuId": 671,
							"price": 1799.0,
							"oriPrice": 1799.0,
							"stocks": 99,
							"skuName": "8+128GB 白 ",
							"pic": null,
							"properties": "内存:8+128GB;机身颜色:白"
						},
					{
						"skuId": 672,
						"price": 1999.0,
						"oriPrice": 1999.0,
						"stocks": 0,
						"skuName": "8+256GB 白 ",
						"pic": null,
						"properties": "内存:8+256GB;机身颜色:白"
					},
					{
						"skuId": 672,
						"price": 1999.0,
						"oriPrice": 1999.0,
						"stocks": 0,
						"skuName": "8+256GB 黑 ",
						"pic": null,
						"properties": "内存:8+256GB;机身颜色:黑"
					},
					{
						"skuId": 672,
						"price": 1999.0,
						"oriPrice": 1999.0,
						"stocks": 99,
						"skuName": "8+256GB 红 ",
						"pic": null,
						"properties": "内存:8+256GB;机身颜色:红"
					},
					{
							"skuId": 671,
							"price": 1799.0,
							"oriPrice": 1799.0,
							"stocks": 0,
							"skuName": "8+128GB 红 ",
							"pic": null,
							"properties": "内存:8+128GB;机身颜色:红"
						},
				],
				skuGroup:{},
				selectedobj:{},
				seleArr:[],
				skuKeys:[]
			}
		},
		onLoad() {
			this.skuList.forEach(ele=>{
			   ele.properties.split(';').forEach(el=>{
			    this.skuGroup[el.split(':')[0]]=[]
				this.selectedobj[el.split(':')[0]]=''
			   })
			})
			this.skuList.forEach(ele=>{
			    ele.properties.split(';').forEach(el=>{
					if(this.skuGroup[el.split(':')[0]].indexOf(el.split(':')[1])!=-1) return
			     this.skuGroup[el.split(':')[0]].push( el.split(':')[1])
			    })
			 })
			  console.log(this.skuGroup);
		},
		methods: {
			selectSku() {
				this.isShow = true
			},
			changeSku(e){
				let key =e.target.dataset.key
				let value =e.target.dataset.value
				let abled =e.target.dataset.abled
				if(!abled)return
				var seleArr=[]
				var skuKeys=[]
				// this.selectedobj[key]=value
				this.$set(this.selectedobj,key,value)
				if(this.seleArr.indexOf(value)!=-1){
						this.$set(this.selectedobj,key,'')
						this.seleArr[this.seleArr.indexOf(value)]=''
				}else{
					for(var i in this.selectedobj ){
						seleArr.push(this.selectedobj[i])
						skuKeys.push(i)
					}
				}
				
				this.seleArr=seleArr
				this.skuKeys=skuKeys
				console.log(this.selectedobj,this.seleArr,this.skuKeys,abled);
			
			},
			isAbled(selectedobj, key, item, skuKeys, skuList) {
			 
					var properties = "";
					for (var j = 0; j < skuKeys.length; j++) {
						properties += skuKeys[j] + ":" + selectedobj[skuKeys[j]] + ";";
					}
					properties = properties.substring(0, properties.length - 1); //首先获取当前选中的规格
					var find = true
					var skuserchArr = properties.split(';') // 将当前选中的规格转为数组
				
					var skuserchKey = key + ':' + item //当前循环到的这个规格标签
					var newsku = skuserchArr.map(function(ele) { //看当前循环到的标签类型等不等于选中的 只需要取其他类型的规格标签
						if (ele.split(':')[0] == key) {
							return skuserchKey
						} else {
							return ele
						}
				
					})
					newsku = newsku.join(";") //生成循环到的这一个规格和已经选中的其他类型的规格的组合
				
					var targetSku = {}
					skuList.forEach(function(ele) { //找到生成的规格属于skuList中的哪一条数据
						if (newsku == ele.properties) {
							targetSku = ele
						}
					})
				
					if (targetSku.stocks == 0) {
						find = false
					}
					//判断找到的这条数据的库存等不等于0，返回布尔值
					return find;
				}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.sku_select {
		width: 100%;
		position: fixed;
		height: 400px;
		bottom: 0;
	}
	.pup-sku-area{
		display: flex;
	}
	.sku_item{
		margin: 15px;
		border: 1px solid #ddd;
		padding: 5px;
	}
	.color{
		background-color: red;
		color: white;
	}
	.abled{
		background-color: gray;
		color: white;
	}
</style>

 

LYW666661
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
使用vue实现多规格选择实例（SKU）
10-16
1. **数据结构**：为了实现多规格选择，我们需要从后端获取数据，通常这些数据会包含商品的不同规格选项，如颜色、尺寸等，以及每个规格组合的库存和价格信息。在这个例子中，`simulatedDATA`对象包含了所有可能的...
商城选择商品规格安卓
02-24
10. **测试与调试**：在开发完成后，必须进行详尽的测试，包括单元测试、集成测试和用户体验测试，确保所有规格选择和库存匹配功能都能正常工作，并且在各种设备和Android版本上表现一致。 以上就是“商城选择商品...
uniapp sku插件 “ vk-data-goods-sku-popup” 默认选中指定sku
qq_43751598的博客
12-11 574
如果按照文档的示例和提供的Props 是实现不了弹窗默认选中的操作如下：打开弹窗之后花型和尺寸都是没有默认选中数据。看到里面是有个**selectSku（）**方法，这个方法就是用来选中指定sku的方法。简介：商品多规格SKU选择器组件。的格式在sku组件文档里面有。在组件弹窗写入数据;
前端实现SKU选择-uniapp
xms_mq的博客
04-27 266
前端实现SKU 思路 声明一个对象，存储选择属性。 必须给每一个属性值添加一个是否可选，必须循环每一条sku 与 选择属性判断。 点击一次必定会循环每一个属性值做判断，这一步不能省略。可以参考代码。 ps：不要使用矩阵（亲身经历） 使用矩阵会导致点击两次以上时，存在 sku中没有的属性值也能选择的情况。 created() { // 处理数据 this.skuList = skuList; // 初始化选择数据的对象 attrList.forEa...
uniapp 自定义sku规格组 组件（可直接复制使用）
最新发布
nanren_nanren的博客
05-27 375
是我在组件中确认以后构造数据跳转进入“确认订单”页面时需要使用，如果你们在sku.vue组件内不做跳转（点击确认时用$emit()方法回调到页面来操作跳转），或者跳转时不需要这个coverId可以不用传。3、目前我只实验了微信小程序和H5端能用，其他端还没测试（但是按道理应该也是没问题的）。2、有一些参数是我在组件内部做跳转时需要，大家如果在跳转的时候用不到的话也可以不传。: 是双向绑定组件显示的餐宿，需要使用.sync语法糖，且在组件内改变该值需要使用。同上也是我跳转传参需要。组件，所以需要提前安装。
怎么在uniapp开发时使用sku插件
wssg1206的博客
10-10 405
下载并使用SKU组件，实现规格展示和交互。，是 uni-app 官方插件生态集中地。SKU---存货单位：库存管理的最小可用单位，通常称为单品。SKU常见于电商领域，对于前端工程师而言，更多关注和。Q：如何评估第三方插件的质量？A：查看插件的，以确保插件具有良好的社区口碑、兼容性、性能和维护状况。
uni-app ——商品规格多选择以及收货地址的实现思路详解
Bonsoir777的博客
11-23 3405
本文主要介绍小程序中商品规格多选择以及收货地址的实现思路
商品sku排列组合，uniapp小程序商品sku展示+vue2后台管理添加商品
一个处女座的CV工程师
06-01 823
vue 商品sku排列组合，持续优化中.....
商品的选择多规格的View
01-08
多规格选择是一种用户界面设计，它允许用户在购买商品时，根据商品的不同属性进行筛选和定制。比如，一件衣服可能有红色、蓝色、绿色等多种颜色，S、M、L、XL等不同尺码，以及休闲、正式等不同风格。用户可以根据...
Android商城App购物车规格联动选择Demo.zip
06-21
通过这个Demo，开发者可以学习如何在Android应用中实现复杂的商品规格选择逻辑，以及如何优雅地处理联动效果。同时，这个项目也提供了一个实际的案例，帮助开发者提升在电商应用开发中的实践能力。
uni-app 商城 的sku算法(vue)
weixin_43545329的博客
06-29 3885
1,之前一种用的history 路由模式 , 小程序调试工具 和pc 微信端 可以 ,但是 安卓 和ios 死活不行 ,后来将 history模式改为 hash模式 手机config ok 可以支持自定义分享 , 但是分享的url 会加#号, 微信会截取#之前的内容, 导致 分享后跳到首页 ...
Sku商品规格选择
04-06
Sku商品规格选择，RercyclerView,只需要实现对应数据模型即可
基于Vue实现电商SKU组合算法问题
10-16
主要介绍了基于Vue实现电商SKU组合算法问题 ，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Android商城App购物车规格联动选择Demo
03-15
在商城类App中多属性商品的各规格联动选择的实现。
模拟淘宝产品SKU信息的组合添加规格组合
03-25
模拟淘宝产品SKU信息的组合添加规格组合
vue uniapp商品多规格选择套用模板
zhangluludeCSDN的博客
10-25 1902
<!-- 弹窗 --> <u-popup v-model="showIt" mode="bottom" border-radius="20" close-icon="true"> <view class="popup"> <view class="img"> <u-image :src="popAvatar" width="178rpx" height="178rpx"></u-image> &lt
uni-app小程序，基于vue实现电商商城
lucky_fang的博客
11-09 919
uni-app,项目功能完整，后续可能将不断升级。关注作者，及时了解更多好项目！作者主页也有更多好项目分享！获取源码或如需帮助，可通过博客后面名片+作者即可！其他作品集合《uni-app基于vue实现商城小程序》《Springboot+Spring Security+OAuth2+redis+mybatis-plus+mysql+vue+elementui实现请假考勤系统》《vue+element实现电商商城礼品代发网，商品、订单管理》《vue+vant2完美实现香奈儿移动端商城网站》
uniapp编写多规格商品时
okey_dokey的博客
12-31 476
创建一个数组，数组内包含对象，添加时将数组内所需对象push进数组，删除时spilce(idx,1）索引方式,绑定值使用双向绑定数组【索引】.值方式
uniapp-商品详情配置
qq_44021627的博客
03-27 607
1.定义UI结构: 2.自定义脚本: 3.页面美化: 效果:
uniapp规格商品
08-06
根据提供的引用内容，我理解您的问题是关于uniapp规格商品的。根据引用，可以看出在uniapp中，规格商品的数据可以通过data属性中的specifications字段进行存储。该字段是一个包含规格和口味的数组，每个规格都有一个...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值