微信小程序 - 商品規格SKU算法實現 - mall4j開源商城系統

本文主要介紹基於微信小程序實現電商SKU組合算法問題 ，這也是電商業務裏比較複雜的一塊內容了。下面先看下實現的效果：

SKU點擊切換效果

後臺編輯商品時，將一些規格組合禁用，如： 金色 256G 原廠延保版 是禁用狀態的。當內存選中256G，版本選中原廠延保版，那麼顏色裏 金色就會變成 虛線邊框，表示這種組合是被禁用的，點擊了 金色後就會 變成無貨狀態，不可購買。

下面來整理下實現思路，先定義一下接下來會用到的名詞：

規格名—好比：顏色、內存、版本

規格值—好比：暗夜綠色、256G、原廠延保版

SKU—惟一肯定一件商品，即 { 顏色：暗夜綠色；內存：256G；版本：原廠延保版；}

後臺接口返回的數據是一個SKU的列表json字符串 skuList：

每個SKU對象都含有 skuId，price(價格)，stocks(庫存)，properties(SKU屬性值)

咱們分三步走：

一、組裝SKU數據，在界面上顯示出 全部規格選項

1.1 把全部的sku對象的 properties(SKU屬性值) 放進一個數組 allProperties

1.2 而後我要得到全部的規格名 放進 數組 propKeys，獲取全部的規格名下的規格值 放進 對象 skuGroup

1.3 有了 skuGroup對象，咱們就能夠在界面上渲染出

二、默認選中一個SKU，並計算其餘選項的狀態，可選或者不可選（虛線邊框）

//找到和商品價格同樣的那個SKU，做爲默認選中的SKU，（後臺代碼計算商品價格時，須要把全部SKU的最低價設置成商品的價格）

並組裝好三個變量： selectedProp，selectedPropObj，selectedProperteis

而後在wxml裏就能夠渲染出來，默認SKU的選中狀態和其餘選項的狀態

prod.wxml部分代碼

其中有wxs方法：array_contain 和 props_contain2

number.wxs 部分代碼

三、規格選項的點擊事件，計算當前SKU的信息

總結：只要是作電商的小夥伴都會遇到SKU的規格選擇問題吧，但願本文對大家有所幫助。想要看詳細代碼的同窗能夠去看咱們的開源商城系統源碼。

開源商城系統Mall4j 項目地址：gitee.com/gz-yami/mal…