带你读《2022技术人的百宝黑皮书》——谈一谈凑单页的那些优雅设计（9）

带你读《2022技术人的百宝黑皮书》——谈一谈凑单页的那些优雅设计（8）https://developer.aliyun.com/article/1338374?groupCode=taobaotech

具体方案

1. 首次进入按商品加购时间以及店铺维度做好初始排序，并标记weight（第一个200，第二个199，依次类推）， 并保存在sign对象的activityItemList中，取第一页数据，并将该页最小weight和所有商品的最晚加购时间 endTime同步记录到sign中。并将sign返回给前端
   
2. 前端在加载下一页时将上次请求后端返回的sign字段重新传给后端，后端根据sign中的weight大小判断，依次取下一页数据，同时将最新的最小weight写入sign，返回给前端。
   
3. 期间如果发现有商品的加购时间大于sign中的endTime，则主动将其置顶，weight使用默认最大数字200。
   
4. 由于在排序时无法知道商品是否失效以及能够勾选，所以需要在商品补全后（调用购物车的动态计算接口）重新对失效商品排序。
   

如果本页没有失效的品，不做处理

如果本页全是失效的品，不做处理（为了处理最后几页都是失效品的情况） 如果有下一页，将失效的品放到后面页沉底

如果当前页是最后一页，则直接沉底

方案时序图如下：

商品勾选设计

购物车的商品勾选后就会出现勾选商品的下单价格以及能享受的各类优惠，勾选情况主要分为：

1. 勾选、反勾选、全选
   
2. 全选情况下加载下一页
   
3. 勾选的商品数量变化
   

效果图如下：

难点

1. 勾选的品越多，动态计算的rt越长，当50个品一起勾选，页面接口返回时间将近1.5s
   
2. 全选的情况下，下拉加载需要将新加载出来的品主动勾选上
   
3. 尽可能的减少调用动态计算（比如加载非勾选的品，修改非勾选的商品数量）
   

带你读《2022技术人的百宝黑皮书》——谈一谈凑单页的那些优雅设计（10）https://developer.aliyun.com/article/1338371?groupCode=taobaotech