苍穹外卖-购物车 前端修改（小程序主页与购物车模块显示不一致）

本人在写完购物车模块进行测试时，发现如下问题：

有时多次点击新增菜品或减少菜品时，出现小程序主页与购物车模块显示菜品数量不一致的情况。

有时连续点击后，数据库中已经增加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();，你可以确保在计算订单信息后，界面能够立即更新显示的订单数量。