首页
/
每日頭條
/
科技
/
3小時實戰入門小程序雲開發
3小時實戰入門小程序雲開發
更新时间:2024-12-14 21:37:07
一、接收到的規格數組1、數據庫中的規格數組

3小時實戰入門小程序雲開發(托管小程序雲開發-052-)1

2、接收到的規格數組

3小時實戰入門小程序雲開發(托管小程序雲開發-052-)2

"product_sku": [ { "prod_id": "6d85a2b962c55aa90ee369061d16c305", "sku_name": "全托班", "sku_price": 4888, "sku_properties": ["餐飲:午餐 晚餐", "休息:午休", "其他:作業輔導"], "sku_stock": 16, "sku_price": 32, "_id": "b69f67c062cf7d120b0a37880f7add15" }, { "prod_id": "6d85a2b962c55aa90ee369061d16c305", "sku_default": true, "sku_name": "午托班", "sku_price": 3800, "sku_properties": ["餐飲:午餐", "休息:午休", "其他:無"], "sku_stock": 18, "sku_price": 24, "_id": "f6e08a6462cf76490c4326ad233eb96d" }

二、轉換産生3個對象,和3個數組,1個布爾值

3小時實戰入門小程序雲開發(托管小程序雲開發-052-)3

1、全部的SKU對象(包含所有的規格名和對應的屬性值集合): skuGroup

let skuGroup = {}//全部的SKU對象(包含所有的規格名和對應的屬性值集合),循環顯示的依據 /**{ * 休息:["午休"], * 餐飲:["午餐 晚餐","午餐"], * 其他:["作業輔導","無"] * }, */

2、SKU規格名數組: propKeys

let propKeys = []//SKU規格名數組, /** * ["餐飲","休息","其他"] */

3、SKU規格值(屬性)數組:allProperties

let allProperties = []//SKU規格值(屬性)數組, /** * ["餐飲:午餐 晚餐","休息:午休","其他:作業輔導","餐飲:午餐","休息:午休","其他:無"] */

4、選中的SKU對象:selectedPropObj

let selectedPropObj={} //選中的SKU對象,就是獲取的sku數組的第一個sku /** * {餐飲: "午餐 晚餐", 休息: "午休", 其他: "作業輔導"} */

5、 選中的SKU值數組:selectedProp

let selectedProp = [] //選中的SKU值數組 /** * ["午餐 晚餐", "午休", "作業輔導"] */

6、選中的SKU完整數據對象(帶價格,數量): selectedSku

let selectedSku={} //選中的SKU完整數據對象(帶價格) /** * { * _id: "b69f67c062cf7d120b0a37880f7add15", * prod_id: "6d85a2b962c55aa90ee369061d16c305", * sku_name: "全托班", * sku_price: 4888, * sku_properties: Array(3), * sku_stock: 18, * sku_total: 24 * } */)

7、是否有選中的sku(布爾值):findSku

findSku: true, //是否有選中的sku

三、所需變量

data: { autoplay:true, currentSwiper:0, //當前幻燈片序号 currentTab: 0, // tab選項卡(商家詳情、規格參數) product: null, //商品詳情 //規格對應參數 skuList: [], //商品規格數組 skuGroup:{},// 全部的SKU對象(包含所有的規格名和對應的屬性值集合) propKeys:[],//SKU規格值(屬性)數組 ["餐飲:午餐 晚餐","休息:午休","其他:作業輔導","餐飲:午餐","休息:午休","其他:無"] allProperties:[],// SKU規格值(屬性)數組 selectedPropObj: {}, //選中的SKU對象 selectedProp:[] ,// 選中的SKU值數組 selectedSku:{}, //選中的SKU完整數據對象(帶價格,庫存數量,總量) findSku: true, //是否有選中的sku prodNum:1, //已選擇商品數量,默認為1 skuShow: false, //是否顯示sku規格彈窗 },

四、數據初始化實現代碼1、根據skuList進行數據組裝: _groupSkuProp

/** * 根據skuList進行數據組裝 */ _groupSkuProp: function() { const skuList = this.data.skuList; //sku數組 let skuGroup = {}//全部的SKU對象(包含所有的規格名和對應的屬性值集合),循環顯示的依據 /**{ * 休息:["午休"], * 餐飲:["午餐 晚餐","午餐"], * 其他:["作業輔導","無"] * }, */ let allProperties = []//SKU規格值(屬性)數組, /** *["餐飲:午餐 晚餐","休息:午休","其他:作業輔導","餐飲:午餐","休息:午休","其他:無"] */ let propKeys = []//SKU規格名數組, /** * ["餐飲","休息","其他"] */ let selectedPropObj={} //選中的sku對象,就是獲取的sku數組的第一個sku /** * {餐飲: "午餐 晚餐", 休息: "午休", 其他: "作業輔導"} */ for (var i = 0; i < skuList.length; i ) { let properties = skuList[i].sku_properties //該sku的屬性值,是一個數組 /** * ["餐飲:午餐 晚餐","休息:午休","其他:作業輔導"] */ allProperties.push(...properties) //ES6數組拼接 //處理屬性值數組 let propList = properties for (var j = 0; j < propList.length; j ) { let propval = propList[j].split(":"); //字符串分隔 為key,value let props = skuGroup[propval[0]]; //先取出 規格名 "餐飲" //選中的sku對象,就是sku數組的sku_default屬性為true的那個個sku,把對應的屬性值 組裝到selectedProp if (skuList[i].sku_default) { const key=propval[0] const value= propval[1] selectedPropObj[key] = value } //如果規格名數組中沒有當前規格名,将其加入規格名數組 const index=propKeys.findIndex(item=>item==propval[0]) if (index<0){ propKeys.push(propval[0]); //propKeys:SKU規格名數組 } if (props == undefined) { props = []; //還沒有,新建個新的空數組 props.push(propval[1]); //把規格的值 "午餐" 放進空數組 } else { if (!this.array_contain(props, propval[1])) { //如果數組裡面沒有"午餐" props.push(propval[1]); //把 "午餐" 放進數組 } } skuGroup[propval[0]] = props; //最後把數據 放回規格對象對應的值 } } this.setData({ skuGroup,//全部的SKU對象(包含所有的規格名和對應的屬性值集合) propKeys, //SKU規格值(屬性)數組 ["餐飲:午餐 晚餐","休息:午休","其他:作業輔導","餐飲:午餐","休息:午休","其他:無"] allProperties,// SKU規格值(屬性)數組 selectedPropObj,//選中的SKU對象 }) console.log('skuGroup=',skuGroup) console.log('propKeys=',propKeys) console.log('allProperties=',allProperties) console.log('selectedPropObj=',selectedPropObj) this._parseSelectedObjToVals(); },

2、将選中的SKU對象進行處理:_parseSelectedObjToVals1、轉換為SKU值數組:

将選中的 {key:val,key2:val2}轉換成 [val,val2]

2、并找出選中的SKU完整數據對象:

根據選中的SKU字符串,在skuList中找到SKU完整數據對象

/** * 将選中的SKU對象進行處理 * 1、轉換為SKU值數組: * 将選中的 {key:val,key2:val2}轉換成 [val,val2] * 2、并找出選中的SKU完整數據對象: * 根據選中的SKU字符串,在skuList中找到SKU完整數據對象 */ _parseSelectedObjToVals: function() { let selectedPropObj = this.data.selectedPropObj; //選中的SKU對象 let selectedProperties = "" //選中的SKU字符串,臨時變量 /** * 餐飲:午餐 晚餐;休息:午休;其他:作業輔導 */ let selectedProp = [] //選中的SKU值數組 /** * ["午餐 晚餐", "午休", "作業輔導"] */ for (var key in selectedPropObj) { selectedProp.push(selectedPropObj[key]); selectedProperties = key ":" selectedPropObj[key] ";"; } selectedProperties = selectedProperties.substring(0, selectedProperties.length - 1); //去讀最後一個分号; console.log('selectedProp=',selectedProp) this.setData({ selectedProp: selectedProp }); //将選中的SKU字符串和skuList中的SKU進行比對,查找出選中的SKUSKU完整數據對象 let selectedSku={} //選中的SKU完整數據對象(帶價格) /** * { * _id: "b69f67c062cf7d120b0a37880f7add15", * prod_id: "6d85a2b962c55aa90ee369061d16c305", * sku_name: "全托班", * sku_price: 4888, * sku_properties: Array(3) * } */ let findSku = false; for (var i = 0; i < this.data.skuList.length; i ) { const sku_properties=this.data.skuList[i].sku_properties //sku數組轉成字符串 let sku_properties_str=sku_properties.join(";") if (sku_properties_str == selectedProperties) { findSku = true selectedSku= this.data.skuList[i] //選中的SKU完整數據對象(帶價格,數量) let product=this.data.product //修改數量,庫存和總數 product.product_stock=selectedSku.sku_stock product.product_total=selectedSku.sku_total //修改商品價格 product.product_price=selectedSku.sku_price this.setData({ selectedSku, product }); break; } } this.setData({ findSku }); console.log('selectedSku=',selectedSku) console.log('findSku=',findSku) },

3、判斷數組是否包含某對象: array_contain

/** * 判斷數組是否包含某對象 */ array_contain: function(array, obj) { for (var i = 0; i < array.length; i ) { if (array[i] == obj) return true; } return false; },

,
Comments
Welcome to tft每日頭條 comments! Please keep conversations courteous and on-topic. To fosterproductive and respectful conversations, you may see comments from our Community Managers.
Sign up to post
Sort by
Show More Comments
推荐阅读
win10電腦如何設置優化最好
win10電腦如何設置優化最好
很多人的電腦系統更新到Win10後沒有使用多久系統就特别卡,反應非常遲鈍,輕松是win10系統需要關閉這些功能才可以提高電腦的運行速度,趕緊設置一下吧。win10界面優化配置:1.優化輕松使用設置中心:描述:提高系統運行速度操作:控制面闆-...
2024-12-14
erp系統和erp軟件的區别和聯系
erp系統和erp軟件的區别和聯系
erp系統和erp軟件的區别和聯系?什麼是ERP系統?ERP系統主要是MRP(物料需求計劃)延伸出來的新一代集成化管理信息系統,主要擴展了MRP的功能,它的核心思想就是供應鍊管理ERP系統脫離了傳統企業的舒适圈,從供應鍊角度優化企業資源,同...
2024-12-14
電腦内存條要一樣的才好嗎
電腦内存條要一樣的才好嗎
内存是電腦硬件中最重要的配件之一,也是決定電腦運行效率的因素之一,計算機中所有軟件的運行都是在内存條中進行的。平時做設計、三維動畫後期渲染,或者是休閑娛樂玩遊戲,如絕地求生、英雄聯盟這類的遊戲,如果你的電腦沒有足夠的内存支持,那麼體驗起來是...
2024-12-14
華為手機如何投屏
華為手機如何投屏
華為手機如何投屏?首先打開手機,然後下拉手機頂部菜單快捷鍵,點擊無線投屏按鈕即可搜索其它設備;,下面我們就來聊聊關于華為手機如何投屏?接下來我們就一起去了解一下吧!華為手機如何投屏首先打開手機,然後下拉手機頂部菜單快捷鍵,點擊無線投屏按鈕即...
2024-12-14
手機号隻知道前三後四怎麼查全号
手機号隻知道前三後四怎麼查全号
手機号隻知道前三後四怎麼查全号?工欲善其事,必先利其器為什麼自己公司沒客戶别人客戶很多?隻要你能搞到同行的報備信息,用本系統就可以找到同行客戶專業化,不服加微測試,下面我們就來說一說關于手機号隻知道前三後四怎麼查全号?我們一起去了解并探讨一...
2024-12-14
Copyright 2023-2024 - www.tftnews.com All Rights Reserved