小程序外卖订单界面的示例代码

    {{item.name}}   {{item.name}}  {{itm.title}}{{itm.info}}¥{{itm.price}}     {{totalNum}}¥{{totalMoney}}去结算   已选商品清空   {{item.name}} ¥{{item.price}}    {{goodDetail.title}}¥{{goodDetail.price}}{{goodDetail.info}}

 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  { 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() { } } })