苍穹外卖-购物车 前端修改(小程序主页与购物车模块显示不一致)
本人在写完购物车模块进行测试时,发现如下问题:
有时多次点击新增菜品或减少菜品时,出现小程序主页与购物车模块显示菜品数量不一致的情况。
有时连续点击后,数据库中已经增加2个单位,但红圈内数字只增加1,待下次点击后才会更新正常。
经过分析后认为是前端缺少更新逻辑,遂使用伟大的cursor进行分析,最终找到问题所在。 其实也就是加一行代码。
明白,我给你最小改动的“手动修改步骤”,你改这一处就能同步数量,不需要改其他地方。
- 打开前端文件:common/vendor.js
- 在函数 getTableOrderDishListes 的成功回调里,_this10.computOrderInfo(); 下一行新增一行 _this10.setOrderNum();
你可以先用搜索定位:
- 先搜 getTableOrderDishListes
- 再在这个函数里找到 getShoppingCartList({}).then(function (res) { ... _this10.computOrderInfo(); ... })
当前代码位置大致长这样(只看结构,不用管中文注释乱码):
(0, _api.getShoppingCartList)({}).then(function (res) {if (res.code === 1) {_this10.initdishListMut(res.data);console.log(res.data);_this10.computOrderInfo();}}).catch(function (err) {});
把它改成这样(只新增一行,注意必须是 _this10.setOrderNum();,不要写成this.setOrderNum()):(0, _api.getShoppingCartList)({}).then(function (res) {if (res.code === 1) {_this10.initdishListMut(res.data);console.log(res.data);_this10.computOrderInfo();_this10.setOrderNum();}}).catch(function (err) {});
注意事项:
- 不要整体“格式化文件”或改变文件编码,直接就地插入这一行即可,避免再次出现乱码。
- 这是构建后的文件,注释可能是乱码,没关系,不影响运行。只改这一个调用即可。
假设你的代码逻辑如下:
getShoppingCartList({}).then(function (res) {// 其他代码_this10.computOrderInfo(); // 计算订单信息// 其他代码
});
在这个逻辑中:
getShoppingCartList({})
:从后端获取购物车列表。_this10.computOrderInfo();
:计算订单信息,比如总价、数量等。
但是,仅仅计算这些信息是不够的,还需要将这些信息同步到界面上。这就是 _this10.setOrderNum();
的作用。
如果你不调用 _this10.setOrderNum();
,界面可能不会更新,导致用户看到的订单数量是旧的。通过在 _this10.computOrderInfo();
后面添加 _this10.setOrderNum();
,你可以确保在计算订单信息后,界面能够立即更新显示的订单数量。