菜单页面和支付界面运行逻辑

菜单页面 menu 运行逻辑

• 首先是页面数据的初始化，把左侧菜品种类列表，右侧菜品列表都初始化为空， 购物车列表初始化为空。

  总价格，总件数置为0和 null , 最后是控制初始显示第一个类目

  然后是购物车的动画列表置为空，且把动画隐藏

• 调用一次 onLoad 函数，向后台请求菜品数据和检查内存中购物车缓存数据。

  1. 有两种方式跳转到菜单页面：

     • 通过输入搜索词，点击查询按钮后跳转，search_key 不为空
     • 通过点击菜单按钮跳转的，search_key 等于空，此时将 search_key 的值变为 all

  2. 接下来从缓存中获取购物车数据，因为顾客可能之间加入过购物车在缓存中留有记录，所以再次回到菜单页面时，需要在页面重新显示出来

  3. 通过 request 请求向后台发送数据

     wx.request({
           url: app.globalData.baseUrl + '/menuList',
           data: {
             searchKey: search_key
           }
     

  4. 对返回的数据进行遍历，将菜品种类信息全部加入到 categories 列表中，当 index = 0 时，保存索引值为0的菜品种类中的所有菜品到 init_food列表，作为刚进入菜单页面的初始显示。并把所有菜品的选择数量初始化为0

  5. 根据之间保存在缓存中的购物车数据，遍历购物车缓存列表，将其中菜品的选择数量赋值为 init_food 列表中的对应菜品，使得可以在页面中显示之间选择过菜品的数量

  6. 将获取到的菜品种类列表和菜品列表赋值给 menu_list 和 food_list ，用于页面显示。

  7. 如果请求到的数据为空，那么将 menu_list 和 food_list 都赋值为 []，且提示用户正在加载数据

  8. 计算总价格和总件数，根据购物车缓存列表中的数据来计算，计算完成后，将结构赋值给页面显示价格和件数的变量 total_price 和 total_num，同时也把购物车缓存页表赋值给页面中的购物车列表进行显示。

类目选项卡切换：

当用户点击左侧菜单类目选项卡进行切换时，触发 changeRightMenu 函数，在此函数功能：

• 获取点击选项卡的 id ，根据 id 获取该类目的所有菜品列表
• 将页面控制显示类目的变量 cur_type 变为 id
• 显示的 food_list 变为 该 id 类目的所有菜品列表

点击 + 号添加菜品 addCount ：

当点击右侧菜单加号或者购物车加号时，触发 addCount 函数

• 检查桌号是否为空，为空提示用户扫码，并调转到首页
• 获取菜品id，遍历右侧菜品列表和购物车列表，找到点击的菜品将菜品数量加一，没有则加入购物车列表，更新购物车缓存记录
• 更新页面购物车数据，和菜品列表数据
• 计算总价格和总件数，更新页面相应数据

点击 - 号减少菜品 minusCount：

当点击右侧菜单减号或者购物车减号时，触发 minusCount 函数， 和点击加号的相应函数处理过程大致相同

购物车弹窗 cascadeToggle ：

当点击购物车按钮后，触发 cascadeToggle 函数，函数功能：

• 当购物车列表有东西时
  • 当购物车处于 hidden 状态时，打卡购物车
  • 否则关闭购物车
• 没有东西关闭购物车

购物车开关动画：

cascadePopup ：购物车开动画，设置了弹出方式和时间，以及遮罩动画

cascadeDismiss ：购物车关动画

删除购物车单项 deleteOne ：

点击购物车 × 号后删除购物车中对应菜品

• 获取删除菜品 id ，和购物车缓存信息列表
• 将页面数据右侧中的 food_list 中对应 id 的菜品选择数量置为 0
• 将购物车中对应菜品信息 splice 删除
• 检查删除后购物车里是否有东西
  • 没有剩余菜品则将总价格和件数置为0，并且调用购物车关闭动画
• 更新购物车缓存数据到内存
• 更新页面购物车列表数据和右侧菜品数据，以及计算总价格

清空购物车 cleanList ：

点击购物车中的清空购物车按钮触发，功能：

• 遍历右侧展示的菜品列表，将选择菜品数量都置为0
• 将缓存在内存中的购物车置为空
• 将更新后的 food_list 传入页面数据，将页面数据中的总价格，总件数置为0 ，购物车置为空列表

结算 goToPay ：

点击 去结算 按钮后，触发 goToPay 函数，函数功能：

• 检查桌号是否为空，为空提醒用户扫码桌号，并调转到首页
• 检查购物车是否为空，为空提醒用户选择商品
• 检查用户是否注册小程序，没有注册提示用户注册，并跳转到注册页面
• 检查完毕后跳转到支付页面

支付页面pay运行逻辑

• 初始数据：

  • 定义支付方式字典
  • 初始化桌号，用餐人数，备注信息，购物车列表，总价格，总件数 都为空或0

• onLoad 函数

  • 获取从菜单页面跳转传进来的参数桌号 table_num
  • 从全局数据中获取用户 vip 结束时间，与现在的时间做差，判断是否在会员期
    • 不在会员期间按照原价计算
    • 在会员期间打八折
    • 获取内存中缓存的购物车列表数据，计算总价格

• 支付按钮 payOrder ：

  • 检查是否填写手机号，手机号为空则调转到注册页面

  • 检查用户余额是否足够支付，不够则提示余额不足

  • 从内存中获取购物车数据，并取出菜品 id 和购买数量，转换为 json 格式

  • 向 java 后台发送 POST 请求，将订单数据上传到后台。

  • 支付成功后，跳转到个人中心，可以查看订单和对订单评论