# 商品SKU插件（ HTML版）

**Repository Path**: WuHaojavaCode/Product-SKU

## Basic Information

- **Project Name**: 商品SKU插件（ HTML版）
- **Description**: HTML版商品SKU组合插件
- **Primary Language**: HTML
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 10
- **Forks**: 6
- **Created**: 2020-07-16
- **Last Updated**: 2025-08-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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

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

### 使用方法

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


## 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>
```