tft每日頭條

 > 科技

 > 3小時實戰入門小程序雲開發

3小時實戰入門小程序雲開發

科技 更新时间:2024-10-21 05:27:15
一、接收到的規格數組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; },

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关科技资讯推荐

热门科技资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved