小程序外卖订单界面

1.效果界面
微信截图_20191230134515.png

2.涉及功能

*左侧商品类型、右侧商品可以相互控制;
*商品列表加减及购物车商品加减icon消失、显示;
*商品每一次加减,页面视图变化(数量、价格变化、购物车置灰);

3.贴上所有代码

1.wxml
    

    
      
      
        {{item.name}}
      
      
      
        
          
            {{item.name}}
            
              
              
                {{itm.title}}
                {{itm.info}}
                ¥{{itm.price}}
              
              
                
                
                
              
            
          
        
      
    
    
      
        
          
        
        
          
          {{totalNum}}
        
        ¥{{totalMoney}}
      
      去结算
    

    
    
      
        
          已选商品
          清空
        
        
          
            
              {{item.name}}
              
                ¥{{item.price}}
                
                  
                  
                  
                
              
            
          
        
      
    
    
    
      
        
        
          {{goodDetail.title}}
          ¥{{goodDetail.price}}
          {{goodDetail.info}}
        
        
      
    
  
2.script
createPage({
  data: {
    foodsList: [], // 商品数据
    cartList: [], // 购物车数据
    isShowCartMask: false,
    totalNum: 0,
    totalMoney: 0,
    initView: 'item0', // 根据此变量的变化,控制左侧选中状态、右侧滑动
    curId: 'item0',
    isShowDetail: false,
    goodDetail: {},
    screenWidth: 0, // 手机屏幕宽度
    heightArray: [0] // 右侧每一个类型的高度区间数组
  },
  onLoad() {
    this.getGoodsData()
  },
  methods: {
    async getGoodsData() {
      const that = this
      const res = await getGoodsInfo({})
      this.foodsList = res
      wx.getSystemInfo({
        success: (ress) => {
          that.screenWidth = ress.windowWidth
        }
      })
      this.getHeightSection()
    },
    // 设置高度区间 所有单位转化为rpx
    getHeightSection() {
      const that = this
      let hg = 0
      for (let index = 0; index < that.foodsList.length - 1; index++) {
        hg += 70 + that.foodsList[index].list.length * 212
        that.heightArray.push(hg)
      }
    },
    // 获取高度区间的下标
    getHeightIndex(arr, hg) {
      const that = this
      arr.forEach((item, index) => {
        if (hg >= item) {
          that.setData({
            curId: 'item' + index
          })
        }
      })
    },
    // 左边菜单控制右边
    scrollToViewFn(e) {
      this.setData({
        initView: e.target.dataset.id,
        curId: e.target.dataset.id
      })
    },
    // 右边滚动控制左边
    onPageScroll(e) {
      const that = this
      let scrollTop = e.detail.scrollTop * 750 / that.screenWidth
      this.getHeightIndex(that.heightArray, scrollTop)
    },
    // 商品列表的减号点击
    reduceNum(index, ind, item) {
      const that = this
      let val = 'foodsList[' + index + '].list[' + ind + '].num'
      this.setData({
        [val]: item.num - 1
      })
      // 如果商品为0,就把当前商品在购物车清除
      // 如果不为0, 就将当前商品数量减1
      if (that.foodsList[index].list[ind].num === 0) {
        that.removeAarry(that.cartList, item.id)
      } else {
        that.cartList.forEach((itm, i) => {
          if (itm.id === item.id) {
            let value = 'cartList[' + i + '].num'
            that.setData({
              [value]: itm.num - 1
            })
          }
        })
      }
      this.computed()
    },
    // 商品列表的加号点击
    addNum(index, ind, item) {
      const that = this
      let val = 'foodsList[' + index + '].list[' + ind + '].num'
      this.setData({
        [val]: item.num + 1
      })
      // 如果商品为1,就把当前商品加入购物车
      // 否则, 就将当前商品数量加1
      if (that.foodsList[index].list[ind].num === 1) {
        let val = { id: item.id, name: item.title, price: item.price, num: 1, index: index, ind: ind, pic: item.pic }
        that.cartList.push(val)
      } else {
        that.cartList.forEach((itm, i) => {
          if (itm.id === item.id) {
            let value = 'cartList[' + i + '].num'
            that.setData({
              [value]: itm.num + 1
            })
          }
        })
      }
      this.computed()
    },
    // 购物车的减号点击
    reduceCart(index, item) {
      const that = this
      let val = 'foodsList[' + item.index + '].list[' + item.ind + '].num'
      let val1 = 'cartList[' + index + '].num'
      this.setData({
        [val]: item.num - 1,
        [val1]: item.num - 1
      })
      // 如果商品为0,就把当前商品在购物车清除
      // 如果不为0, 就将当前商品数量减1
      if (that.cartList[index].num === 0) {
        that.removeAarry(that.cartList, item.id)
      }
      this.computed()
    },
    // 购物车的加号点击
    addCart(index, item) {
      const that = this
      let val = 'cartList[' + index + '].num'
      that.setData({
        [val]: item.num + 1
      })
      this.computed()
    },
    // 清空购物车
    clearCart() {
      const that = this
      wx.showModal({
        title: '提示',
        content: '清空购物车?',
        success: function (res) {
          if (res.confirm) {
            that.setData({
              cartList: []
            })
            that.foodsList.forEach((item, i) => {
              item.list.forEach((itm, j) => {
                let value = 'foodsList[' + i + '].list[' + j + '].num'
                that.setData({
                  [value]: 0
                })
              })
            })
            that.computed()
          }
        }
      })
    },
    // 计算选择商品总价格和总数量
    computed() {
      const that = this
      let num = 0
      let money = 0
      that.cartList.forEach(item => {
        num += item.num
        money += parseFloat(item.price) * item.num
      })
      that.setData({
        totalNum: num,
        totalMoney: money
      })
    },
    // 将数量为0的时候,对应商品在购物车中删除
    removeAarry(arr, id) {
      arr.forEach((item, index) => {
        if (item.id === id) {
          arr.splice(index, 1)
        }
      })
      return arr
    },
    showCartMask() {
      this.isShowCartMask = !this.isShowCartMask
    },
    hiddenCartMak() {
      this.isShowCartMask = false
    },
    stopMaopao() {
    },
    showGoodDetail(item) {
      this.goodDetail = item
      this.isShowDetail = true
    },
    hideDetail() {
      this.isShowDetail = false
    },
    // 订单提交
    submitOrder() {
    }
  }
})

3.css