前端使用HTML實現商城sku效果

引言

在商城業務中經常會遇到商品對規格多屬性的情況，由於商品SKU模塊算法較爲複雜開發難度相對較大，但SKU模塊是各個商城間高度可重用的模塊，因此開發此插件，可應用與快速合成商品SKU的添加與編輯。

此項目爲HTML開發，無需導入其他任何依賴

倉庫地址：https://gitee.com/WuHaojavaCode/Product-SKU 記得Star一下哦

實現效果

使用方法

將源碼克隆下載後直接導入之項目目錄下即可使用

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>