一、产品描述

1、点餐页面 + 个人中心

2、点餐页面：

    （1）、左侧菜单，右侧单品list：菜单与单菜list，菜单与菜品间实现点击和滑动联动效果；

    （2）、单项菜品功能：购物数量的增加减少，并同步到购物车中；若单菜有多种口味选择，则进行规格选择，选择口味后（可默认口味）再进行上步操作；

    （3）、底部结算栏：

                A、购物车中实现有口味分类的已选菜品list；在购物车弹窗中，可对已选菜品进行加减操作，并同步到菜单列表中

                B、去结算：跳转至订单页面  

3、订单页面：

    （1）、从storage中读取购物车菜品list 及 totalPrice，用户进行留言或者打包或者选择优惠券操作，并点击进行付款

4、个人中心

    （1）我的红包 + 消费记录 + 我的订单

    （2）我的订单：最近订单list + 已退款订单

-----------------------------------------------------------------0901---------------------------------------------------------------------------------

二、技术重点与难点

1、菜单栏与菜品列表的点击和滑动联动；

2、选规格，不同口味的同类菜品加入购物车；

3、购物车与订单页面的已选菜品渲染；

三、问题解决

1、关于菜单栏与菜品列表的点击滑动

（1）布局规定

左边菜单栏：使用<scroll-view >布局，注意使用scroll-view需要特意规定高度，不然后期联动无效果；

右边单品列表：使用<scroll-view>布局，规定高度；

（2）菜单栏联动单品列表：

WXML:

<scroll-view class='menu-wrapper' scroll-y="true" style="height: 100%;">

     <view wx:for="{{goods}}" class="menu-item {{index == navActive ? 'current':''}}" catchtap="selectMenu" data-item-index="{{index}}" wx:key="{{index}}"> 

         <view class="text"> {{item.typeName}} </view>

    </view>

 </scroll-view>

---

js:

// 菜单项 选择

  selectMenu: function (e) {

    var index = e.currentTarget.dataset.itemIndex;

    this.setData({

      contentActive: 'order' + index,

      navActive: index,

    })

    //console.log( this.data.contentActive);

  },

（3）单品列表滑动，菜单栏联动：

wxml:

<scroll-view scroll-y="true" scroll-into-view="{{contentActive}}" class="foods-wrapper" scroll-with-animation="true" bindscroll="onscroll">

    <view wx:for="{{goods}}" class="food-list food-list-hook" wx:for-index="parentindex" wx:key="{{parentindex}}">

      <view id="{{'order'+parentindex}}" class="title">{{item.typeName}}</view>

重点：（1） scroll-into-view中 contentActive 参数的设定要与 锚点的id 相一致，并且是在js中动态赋值的，不可在元素中直接设定值；

（2） 'order'+parentindex ：  是指锚点的命名，id不可以数字开头，所以要自定义

js：
onReady: function () {

    var _that = this;

    var query = wx.createSelectorQuery().in(_that);

    // //console.log(query)

    var heightArr = [];

    var s = 0;

    // 获取每个 单位的内容 高度

    query.selectAll(".food-list").boundingClientRect((react) => {

      // //console.log(react);

      react.forEach((res) => {

        s += (res.height);

        heightArr.push(s);

      });

      // //console.log(heightArr);

      _that.setData({

        heightArr: heightArr

      })

      //console.log(heightArr)

    });

    query.select(".foods-wrapper").boundingClientRect((res) => {

      // //console.log(res.height)

      _that.setData({

        containerH: res.height

      })

      //console.log(res.height)

    }).exec();

  },

//滑动 内容区域

  onscroll:function(e){

    var scrollTop = e.detail.scrollTop;

    var scrollArr = this.data.heightArr;

    // //console.log(scrollArr)

    if(scrollTop >= scrollArr[scrollArr.length - 1] - this.data.containerH){

      // //console.log()

      return

    }else{

      for (var i =0;i

        if(scrollTop >= 0 && scrollTop

          this.setData({

            navActive:0

          })

        } else if (scrollTop >= scrollArr[i - 1] && scrollTop < scrollArr[i]){

          this.setData({

            navActive: i

          })

        }

      }

    }

  },

重点：（1）需现在onReady中计算，滑动内容区域的高度

（2） onscroll ：计算当前滑动点的 scrollTop，并对菜单栏进行对比，实现联动