有没有大佬共享一下 Vue3 写的 SKU 组件后台部分代码学习学习。

107 天前
 tlerbao

网上的开源电商系统的代码写的真的是千奇百怪啊,有没有大佬共享一下,如题!

1509 次点击
所在节点    程序员
13 条回复
wednesdayco
107 天前
这个没啥吧,蛮业务的。注意 sku 列表特别大的情况下的渲染
renmu
107 天前
这个比我们后台的好多了
samnya
107 天前
注册一个微店账号参考一下后台,还可以
passion336699
107 天前
SKU Table 渲染就是 求笛卡尔积,知道这个就可以完成 SKU 的组装,渲染这个 Table 。

因为 SKU 组合会随着规格熟悉复选发生顺序上的变化,所以渲染 SKU Table 的时候,你还要单独判断下 SKU 组合是否改变了,如果改变了就将其他属性变成空,没改变,就把 preSkuItem 的其他属性赋值给 nextSkuItem 。

例如,第一次,sku 组装出来是 ['红色', '128'] 设置了其他属性 商品价格:123

后面做了些修改,sku 组装出来是 ['128', '红色'],其实 sku 没有变,你可以把原来的 123 赋值过去,

这样就不用每次渲染 sku table 都清空之前的输入了,体验会好一点。

可以用这个函数,判断两个 string[] 是否有 diff ,

如果 diff === 0 ,俩数组就是相同的,例如:['红色', '128'] 和 ['128', '红色'],

如果 diff > 0 ,俩数组就是不同的,你可以继续 push 到 skus 数组里面。

const DIFFERENCE = (a: string[], b:string[]):string[] => {
const s = new Set(b);
return a.filter((x) => !s.has(x));
};
passion336699
107 天前
最终的 RequestDTO 和 回显的 RequestDTO ,每个公司都不一样,你最后也是要组装值透传接口,或者拿到接口返回组装数据渲染。

1. 求笛卡尔积组装数据渲染 SKU Table ;
2. 再比对 SKU 组合是否发生改变来判断是否要清空或者回填 preSkuItem properties ;

如果是编辑的话,还要回传 skuItem 的 id ,只要第 2 步没有 diff ,你的 id 也是要透传进来的。

大概都是这么玩吧,个人拙见...
ruoxie
107 天前
https://codepen.io/JayceWu/pen/dOxLex 很多年前写的了,vue2 的
humbass
107 天前
刚做了一个电商项目,查了资料才知道是笛卡尔积算法;

做是做出来了,sku 的名称有中文,不太满意,还没想好下一版本如何实现一个纯英文的
TimPeake
107 天前
掘金搜 sku
alex8
107 天前
https://smart-mall.g686.net/manage
预定义规格,后在商品里引用就好了,需要哪个选哪个。大平台都是预定义好了规格对应到特定的类
alex8
107 天前
tlerbao
106 天前
@alex8 #10 小哥你这个预定义规格的到是让我眼前一亮,有什么交流方式可以和你请教一下吗 wechat/QQ/电报都行
summerLast
106 天前
笛卡尔乘积,额
shamogulang
106 天前

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1010932

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX