3小时实战入门小程序云开发(托管小程序云开发-052-)

一、接收到的规格数组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; },

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页