前端使用HTML实现商城sku效果

最新推荐文章于 2024-09-01 15:05:55 发布

回憶是如此忧伤

最新推荐文章于 2024-09-01 15:05:55 发布

阅读量1.9k

点赞数 1

分类专栏： HTML javaScript

本文链接：https://blog.csdn.net/weixin_37545129/article/details/107399879

版权

HTML 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

javaScript

4 篇文章 0 订阅

订阅专栏

引言

在商城业务中经常会遇到商品对规格多属性的情况，由于商品SKU模块算法较为复杂开发难度相对较大，但SKU模块是各个商城间高度可重用的模块，因此开发此插件，可应用与快速合成商品SKU的添加与编辑。

此项目为HTML开发，无需导入其他任何依赖

仓库地址：https://gitee.com/WuHaojavaCode/Product-SKU

实现效果

在这里插入图片描述

使用方法

将源码克隆下载后直接导入之项目目录下即可使用

SKU初始化加载已有属性

所在文件 index.js

data: function() {
		
		//alert(document.getElementById('seach').value)
		
		var specs = [ { "name": "颜色", "value": [ "白色", "黑色", "土豪金" ] }, { "name": "内存", "value": [ "8G", "16G" ] } ];
		
		var parameterValue = [ { "productId": 0, "productSpec": { "颜色": "白色", "内存": "8G" }, "productNo": "PRODUCTNO_0", "productStock": 0, "productPrice": 0 }, { "productId": 0, "productSpec": { "颜色": "白色", "内存": "16G" }, "productNo": "PRODUCTNO_1", "productStock": 0, "productPrice": 0 }, { "productId": 0, "productSpec": { "颜色": "黑色", "内存": "8G" }, "productNo": "PRODUCTNO_2", "productStock": 0, "productPrice": 0 }, { "productId": 0, "productSpec": { "颜色": "黑色", "内存": "16G" }, "productNo": "PRODUCTNO_3", "productStock": 0, "productPrice": 0 }, { "productId": 0, "productSpec": { "颜色": "土豪金", "内存": "8G" }, "productNo": "PRODUCTNO_4", "productStock": 0, "productPrice": 0 }, { "productId": 0, "productSpec": { "颜色": "土豪金", "内存": "16G" }, "productNo": "PRODUCTNO_5", "productStock": 0, "productPrice": 0 } ];
		return {
			specification:specs,
			// 提交数据格式
			productArray: parameterValue,
			// 用来存储要添加的规格属性
			addValues: [],
			// 默认商品编号
			defaultProductNo: 'PRODUCTNO_'
			// 批量设置相关
		};
	}

其中specs为已有规格项目，parameterValue为项目下属性阵列，如果是新增SKU以上JSON为空即可

提交并获取SKU数据

 this.specification;//获取规格项目
 this.productArray; //获取规格阵列

在以下方法中进行SKU获取和其他提交任务

methods: {
		// 提交
		submit: function () {
			
			var specificationdata = this.specification;//获取规格项目
			var productArraydata = this.productArray; //获取规格阵列
			console.log(productArraydata);
			//添加自己的业务方法
		}

上传属性图片

上传图片可以在页面上进行script的编辑
由于是动态生成的代码调用参考如下

<script>
     $(document).on('click', '.uploadFile', function(e) {
        //获取隐藏文本框
        var value = $(this).parents("div").prev().children("input");
        //上传图片操作
        value.val("OK")//上次成功后给文本框赋值
</script>