小程序外卖点餐购物车效果

var app = getApp(); var server = require('../../utils/server'); Page({ data: { goods: { 1: { id: 1, name: '娃娃菜', pic: '../../imgs/goods/1.jpg', sold: 1014, price: 2, type: '01', }, 2: { id: 2, name: '01', pic: '../../imgs/goods/2.jpg', sold: 1029, price: 3, type: '01', }, 3: { id: 3, name: '方便面', pic: '../../imgs/goods/1.jpg', sold: 1030, price: 2, type: '02', }, 4: { id: 4, name: '粉丝', pic: '../../imgs/goods/1.jpg', sold: 1059, price: 1, type: '01', }, 5: { id: 5, name: '生菜', pic: '../../imgs/goods/1.jpg', sold: 1029, price: 2, type: '02', }, 6: { id: 6, name: '白菜', pic: '../../imgs/goods/1.jpg', sold: 1064, price: 2, type: '03', }, 7: { id: 7, name: '杏鲍菇', pic: '../../imgs/goods/1.jpg', sold: 814, price: 3, type: '04', }, 8: { id: 8, name: '香菇', pic: '../../imgs/goods/1.jpg', sold: 124, price: 3, type: '04', }, 9: { id: 9, name: '猴头菇', pic: '../../imgs/goods/2.jpg', sold: 102, price: 5, type: '05', } }, goodsList: [ { id: '01', classifyName: '热销', goods: [1,2,4] }, { id: '02', classifyName: '新品', goods: [3,5] }, { id: '03', classifyName: '蔬菜', goods: [6] }, { id: '04', classifyName: '蘑菇', goods: [7, 8] }, { id: '05', classifyName: '主食', goods: [9] } ], cart: { count: 0, total: 0, list: {}, num:{} }, showCartDetail: false }, onLoad: function (options) { var shopId = options.id; for (var i = 0; i < app.globalData.shops.length; ++i) { if (app.globalData.shops[i].id == shopId) { this.setData({ shop: app.globalData.shops[i] }); break; } } }, onShow: function () { this.setData({ classifySeleted: this.data.goodsList[0].id }); }, //加第1步 tapAddCart: function (e) { this.addCart(e.target.dataset.id, e.target.dataset.type); }, //减第1步 tapReduceCart: function (e) { this.reduceCart(e.target.dataset.id,e.target.dataset.type); }, //加第2步 addCart: function (id, type) { var num = this.data.cart.list[id] || 0; var num2 = this.data.cart.num[type] || 0; this.data.cart.list[id] = num + 1; let a = this.data.goodsList; console.log(a[0].id); for(var i=0;i<a.length;i++){ if(type == a[i].id){ this.data.cart.num[type] = num2 + 1; } } this.countCart(); }, //减第2步 reduceCart: function (id,type) { var num = this.data.cart.list[id] || 0; var num2 = this.data.cart.num[type]; let a = this.data.goodsList; if (num <= 1) { delete this.data.cart.list[id]; } else { this.data.cart.list[id] = num - 1; } for (var i = 0; i < a.length; i++) { if (type == a[i].id) { this.data.cart.num[type] = num2 - 1; } } this.countCart(); }, // 加减走后一步 countCart: function () { var count = 0, total = 0; for (var id in this.data.cart.list) { var goods = this.data.goods[id]; count += this.data.cart.list[id]; total += goods.price * this.data.cart.list[id]; } this.data.cart.count = count; this.data.cart.total = total; this.setData({ cart: this.data.cart }); }, follow: function () { this.setData({ followed: !this.data.followed }); }, onGoodsScroll: function (e) { if (e.detail.scrollTop > 10 && !this.data.scrollDown) { this.setData({ scrollDown: true }); } else if (e.detail.scrollTop < 10 && this.data.scrollDown) { this.setData({ scrollDown: false }); } var scale = e.detail.scrollWidth / 570, scrollTop = e.detail.scrollTop / scale, h = 0, classifySeleted, len = this.data.goodsList.length; this.data.goodsList.forEach(function (classify, i) { var _h = 70 + classify.goods.length * (46 * 3 + 20 * 2); if (scrollTop >= h - 100 / scale) { classifySeleted = classify.id; } h += _h; }); this.setData({ classifySeleted: classifySeleted }); }, tapClassify: function (e) { var id = e.target.dataset.id; this.setData({ classifyViewed: id }); var self = this; setTimeout(function () { self.setData({ classifySeleted: id }); }, 100); }, showCartDetail: function () { this.setData({ showCartDetail: !this.data.showCartDetail }); }, hideCartDetail: function () { this.setData({ showCartDetail: false }); }, submit: function (e) { server.sendTemplate(e.detail.formId, null, function (res) { if (res.data.errorcode == 0) { wx.showModal({ showCancel: false, title: '恭喜', content: '订单发送成功！下订单过程顺利完成，本例不再进行后续订单相关的功能。', success: function(res) { if (res.confirm) { wx.navigateBack(); } } }) } }, function (res) { console.log(res) }); } });