C端逻辑整理

为什么80%的码农都做不了架构师？>>>   

App.vue的思路 -> 读取url路径中的桌号 #设置设置axios拦截，返回的code不为0，弹窗提示；401登入态验证失败，重新微信授权处理 -> 判断token是否存在，并且判断是不是debug模式，存在token设置axios的头部Authorization -> 执行vuex的'getFoodList'方法 this.$store.dispatch('getFoodList') 请求后台数据，读取商家列表getShopDetail，食物列表getfoodlist ，购物车列表getShopCar 执行赋值操作，赋值到相应的变量上面，显示出数据 -> 返回App.vue socket的配置和执行 socket的链接，监听购物车，监听订单跳转事件，监听清空购物车事件， 选择人数事件，支付成功事件，信息清空事件，重新连接，断开连接，关闭等 这些事件，都是监听后台消息，然后自动执行相应操作 -> -> -> HomeView页面 使用组件 食物列表，购物车类表，规格选择弹窗，人数选择的弹窗，有人点菜的动态提示，商家详情，订单详情组件 7个组件的使用

getOrderList 请求订单详情，上拉加载 peopleIng 设置人数选择弹窗的显示和隐藏

arrAllCard 监听购物车，值如果购物车值为0，购物车隐藏 peopelCount 判断现在能不能选择人数 tabSelect 点餐，订单，商家的切换 loadOrder 下拉的时候出发，如果订单还有下页，page 会加1，并且执行getOrderList 请求后台数据 showFootView 点击底部的购物车，如果购物车列表显示，就关闭；如果购物车是关闭，并且不为空，就显示购物车列表 orderFine 点击选好的底部按钮，如果购物车列表是空的，弹窗“选择菜品提示”， 不然路由跳转到orderView页面 clearShopCar 清空购物车 -> 组件FoodList食品列表 @xgg="shwoTaste = true父组件监听子组件，执行味口选择的弹窗 父组件没有传值过来，菜品值从vuex传过来 winHeight 设置foodListHeight typeSelect 左侧选择类型，右侧菜移动 scrolled 监听右侧滚动，设置左侧菜类型高亮 xgg 点击选规格或者口味的时候，触发事件与父组件通信。告诉父组件，要弹窗了。 computeHeight 监听值的computeHeight变化，当foodList导入渲染的时候，将不同菜到顶部距离保存在数组中，存入vuex；设置100毫秒后的执行，是为了等页面渲染完毕后执行。

组件CountIcon 设置菜的加价减减 父组件要传入count，id，规格id reduce 触发vuex的countChange方法，该方法告诉后台，那个菜加菜或者减菜了 add 同上

组件CarList 购物侧列表 父组件传来购物车列表信息arrAllCard和food_id字符串（精巧的设计）， 与CountIcon组件通信，传值count,id，combinationId,item

组件TasteAlert 口味弹窗 父组件没有传值过来 其他组件传值过来的，使用Bus中转一下，然后监听接收 按照多规格写的，比较复杂一些！！！没懂透 sumCount当前选中的口味的数量 sumCount监听，如果发生变化，执行changing函数 addCar 点击加入购物车按钮 standardSelect 口味选择 changing 改变

组件PeopleSelect 父组件传来消息，商家名字，桌子名字，商家图片 numSelect 保存选择的人数 startMeal 点击按钮，判断用餐人数是否选择了；告诉后端桌号和用餐人数，如果返回code==0，存入vuex

组件AnimationShow 父组件没穿消息了来，从vuex读取消息 设置动画，两秒后消失。代写在vuex里面

组件ShopDetail vuex获取商家信息，渲染 组件OrderList 父组件传来消息，订单列表，商店名字，是否加载字段 父组件监听@load，要是发生下拉，执行加载更多代码 orderDetail 点击订单，跳转到订单详情 orderScro 发生滚动到底，触发load

OrderView路由 使用组件CarList, FootView, TimeSelect, RepeatFood, AnimationShow 5个组件 inputFocus，inputBlur，orderScroll 设置输入框高亮，失去焦点，滚动时候输入框失去焦点 times 与子组件通信，子组件传来选择下单的时间，进行处理 confirm 点击确认下单触发事件，判断是否有菜品，否则给提示 判断是否有重复菜品，弹窗框确认 否则执行toOrder()方法 toOrder 确认下单，生成订单信息，传给后台

组件TimeSelect 父组件没有传参数过来 子组件有传参，父组件监听@timeSelect timeS 时间格式转换，换成标准的时间格式

组件RepeatFood 父组件没有传值进来 子组件有传值，父组件confrimOrder监听

路由OrderDetail orderObj 监听orderObj这个值，发生变化的话，底部按钮变成支付 toPay 去调起支付

转载于:https://my.oschina.net/dmq/blog/1840980