小程序sku的商品用矩阵来完成

敲黑板啦,这是重点要考的,最近在慕课网上学了全栈课,收获满满,所以写个笔记记下来供以后开发使用

//首先小程序的框架是林ui

后台给我们的数据通常是这样的

{"id":2,"title":"林间有风自营针织衫","subtitle":"瓜瓜设计，3件包邮","category_id":12,"root_category_id":2,"price":"77.00","img":"","for_theme_img":"","description":null,"discount_price":"62.00","tags":"包邮$热门","is_test":true,"online":true,"sku_list":[{"id":2,"price":77.76,"discount_price":null,"online":true,"img":"","title":"金属灰·七龙珠","spu_id":2,"category_id":17,"root_category_id":3,"specs":[{"key_id":1,"key":"颜色","value_id":45,"value":"金属灰"},{"key_id":3,"key":"图案","value_id":9,"value":"七龙珠"},{"key_id":4,"key":"尺码","value_id":14,"value":"小号 S"}],"code":"2$1-45#3-9#4-14","stock":5},{"id":3,"price":66,"discount_price":59,"online":true,"img":"","title":"青芒色·灌篮高手","spu_id":2,"category_id":17,"root_category_id":3,"specs":[{"key_id":1,"key":"颜色","value_id":42,"value":"青芒色"},{"key_id":3,"key":"图案","value_id":10,"value":"灌篮高手"},{"key_id":4,"key":"尺码","value_id":15,"value":"中号 M"}],"code":"2$1-42#3-10#4-15","stock":999},{"id":4,"price":88,"discount_price":null,"online":true,"img":"","title":"青芒色·圣斗士","spu_id":2,"category_id":17,"root_category_id":3,"specs":[{"key_id":1,"key":"颜色","value_id":42,"value":"青芒色"},{"key_id":3,"key":"图案","value_id":11,"value":"圣斗士"},{"key_id":4,"key":"尺码","value_id":16,"value":"大号  L"}],"code":"2$1-42#3-11#4-16","stock":8},{"id":5,"price":77,"discount_price":59,"online":true,"img":"http://i1.sleeve.talelin.com/assets/09f32ac8-1af4-4424-b221-44b10bd0986e.png","title":"橘黄色·七龙珠","spu_id":2,"category_id":17,"root_category_id":3,"specs":[{"key_id":1,"key":"颜色","value_id":44,"value":"橘黄色"},{"key_id":3,"key":"图案","value_id":9,"value":"七龙珠"},{"key_id":4,"key":"尺码","value_id":14,"value":"小号 S"}],"code":"2$1-44#3-9#4-14","stock":7}],"spu_img_list":[{"id":165,"img":"http://i1.sleeve.talelin.com/assets/5605cd6c-f869-46db-afe6-755b61a0122a.png","spu_id":2}],"spu_detail_img_list":[{"id":24,"img":"http://i2.sleeve.talelin.com/n4.png","spu_id":2,"index":1}],"sketch_spec_id":1,"default_sku_id":2
}

商品的颜色有的是相同的如图

我们可以通过代码把颜色变成表头如何这个详细的可以百度一下矩阵,就知道啦,不知道没关系,下面是代码粘贴复制实现效果在满满研究

这里是我的请求数据,咱就不必细说啦/*** 生命周期函数--监听页面加载*/onLoad: async function (options) {const pid = options.pidconsole.log(pid)const spu = await Spu.getDetail(pid)this.setData({spu})},

这是定义的工具类用于处理数据和便利数据
class Fence{valueTitles=[]specsconstructor(specs){this.specs =specs}init(){this.specs.forEach(s=>{this.pushValueTitle(s.value)})}pushValueTitle(title){this.valueTitles.push(title)}
}
export {Fence
}

//这里是重点啦,initFences,initFences1这两个方法的实现不同,但是效果一样,你可以选择使用
//第二个老师用的是封装
import {Matrix} from "./matrix";
import {Fence} from "./fence";class FenceGroup{spuskuList=[]constructor(spu){this.spu = sputhis.skuList = spu.sku_list}initFences(){const matrix = this._createMatrix(this.skuList)const fences =[]let currentJ =-1;matrix.forEach((element,i,j)=>{if (currentJ != j){currentJ =jfences[j] =this._createFence(element)}fences[currentJ].pushValueTitle(element.value)})console.log(fences)}initFence1(){const matrix = this._createMatrix(this.skuList)console.log(matrix)const tences =[]const AT = matrix.tranpose()AT.forEach( r=>{const fence = new Fence(r)fence.init()tences.push(fence)})console.log(tences)}_createFence(element){const fence = new Fence()//fence.pushValueTitle(element.value)return fence}_createMatrix(skuList){const m = []skuList.forEach(sku=>{m.push(sku.specs)})return new Matrix(m)}}
export {FenceGroup
}

然后引用就简单了observers:{'spu':function(spu){if (!spu){return}const fencesGroup =new FenceGroup(spu)fencesGroup.initFence1()}},
//是不是觉得不错,可以去慕课网购买视频观看老师讲的,很不错

小程序sku的商品用矩阵来完成相关推荐

Python爬虫系列之爬取某优选微信小程序全国店铺商品数据
Python爬虫系列之爬取某优选微信小程序全国商品数据小程序爬虫接单.app爬虫接单.网页爬虫接单.接口定制.网站开发.小程序开发 > 点击这里联系我们 < 微信请扫描下方二维码代码仅 ...
微信小程序实战篇-商品详情页（二）
今天要讲解商品详情页中sku的弹出选着框,这个涉及css动画样式,css动画是新的知识点,我们之前并没有接触过,请大家做好笔记,我们要做的效果是酱紫的~ 这个布局难点是需要绘制一个阴影背景.弹出的动画 ...
小程序canvas绘制商品海报实现分享朋友圈
小程序canvas绘制商品海报实现分享朋友圈效果图: 实现步骤就是点击生成图片在canvas画布中画出一张海报然后保存在本地在imags标签中展示,此处尽可能的把canvas组件隐藏但是不能 ...
小程序购物车下架商品实时显示，只为更好用户体验！
单商户小程序V1.8.4版本更新说明更新时间:2018年9月10号一. 更新功能清单 1.新增仅支持自提功能设置,用户下单仅可选到店自提! 2.小程序前台优化购物车页面,已删除或已下架的商品,其状 ...
小程序团购商品CPS接入,实现达人分佣模式
1.短视频平台生态本地服务达人数量众多,为小程序的访问提供了先天的粉丝基础: 2.全屏短视频对本地生活中的潮生活和新体验提供了转化形式: 3.将传统的以"需求"为导向改变为了以&q ...
uniapp生成小程序码仿商品小程序码跳转到商品详情
uniapp生成小程序码仿商品小程序码跳转到商品详情之前在网上找了下没有相关教程去生成小程序商品小程序码微信扫码直接跳转到小程序详情页面,今天我们就用uniapp来实现这个,其实微信小程序端方法大致 ...
微信小程序，购买商品属性自动换行，固定div个数，超出部分自动换行
微信小程序,购买商品属性自动换行,固定div个数,超出部分自动换行参考**指定每行div个数(三个为例)** <view class="spec"><view ...
微信小程序商城开发-商品详情页跳转购物车
项目场景: 微信小程序商城开发中商品详情页中购物车页面的跳转(仅限于tabbar页面的跳转) 问题描述点击商品详情页中的购物车图标跳转不到tabbar及导航栏中的购物车页面,总是报错原因分析: 微 ...
微信小程序功能：商品收藏-图片预览-客服-分享-加入购物车
微信小程序–商品详情页面包含功能点: 商品收藏图片预览客服分享加入购物车跳转到购物车页面(注意:open-type="switchTab") 结构:goods_deta ...

小程序sku的商品用矩阵来完成

小程序sku的商品用矩阵来完成相关推荐

最新文章

热门文章