【微信小程序】外卖点餐效果展示

概述

外卖点餐效果展示，左右布局，快速点餐，商家信息展示等...程序是模仿人家的，所以界面没做什么调整，功能是没啥问题，可以正常使用...

详细

直接看效果图：

可以把这个点餐这个功能分为5部分组成

1、第一部分头部信息

2、第二部分左布局

3、第三部分右布局

4、第四部分点击购物车弹出，菜品信息

5、结算信息

部分代码展示：

var app = getApp();
var server = require('../../utils/server');
Page({
data: {
goods: {
1: {
id: 1,
name: '娃娃菜',
pic: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.yweidao.com%2F2017%2F11%2F30%2Fgoods_pc_image%2F15120207612096u897w5a1l_600x600.jpg&refer=http%3A%2F%2Fimg.yweidao.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627712306&t=aa990055843dc872e97646234fc6e075',
sold: 1014,
price: 2
},
2: {
id: 2,
name: '金针菇',
pic: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.yweidao.com%2F2017%2F11%2F30%2Fgoods_pc_image%2F15120207612096u897w5a1l_600x600.jpg&refer=http%3A%2F%2Fimg.yweidao.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627712306&t=aa990055843dc872e97646234fc6e075',
sold: 1029,
price: 3
},
3: {
id: 3,
name: '方便面',
pic: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.yweidao.com%2F2017%2F11%2F30%2Fgoods_pc_image%2F15120207612096u897w5a1l_600x600.jpg&refer=http%3A%2F%2Fimg.yweidao.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627712306&t=aa990055843dc872e97646234fc6e075',
sold: 1030,
price: 2
},
4: {
id: 4,
name: '粉丝',
pic: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.yweidao.com%2F2017%2F11%2F30%2Fgoods_pc_image%2F15120207612096u897w5a1l_600x600.jpg&refer=http%3A%2F%2Fimg.yweidao.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627712306&t=aa990055843dc872e97646234fc6e075',
sold: 1059,
price: 1
},
5: {
id: 5,
name: '生菜',
pic: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.yweidao.com%2F2017%2F11%2F30%2Fgoods_pc_image%2F15120207612096u897w5a1l_600x600.jpg&refer=http%3A%2F%2Fimg.yweidao.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627712306&t=aa990055843dc872e97646234fc6e075',
sold: 1029,
price: 2
},
6: {
id: 6,
name: '白菜',
pic: 'http://wxapp.im20.com.cn/impublic/waimai/imgs/goods/1.jpg',
sold: 1064,
price: 2
},
7: {
id: 7,
name: '杏鲍菇',
pic: 'http://wxapp.im20.com.cn/impublic/waimai/imgs/goods/2.jpg',
sold: 814,
price: 3
},
8: {
id: 8,
name: '香菇',
pic: 'http://wxapp.im20.com.cn/impublic/waimai/imgs/goods/1.jpg',
sold: 124,
price: 3
},
9: {
id: 9,
name: '猴头菇',
pic: 'http://wxapp.im20.com.cn/impublic/waimai/imgs/goods/1.jpg',
sold: 102,
price: 5
}
},
goodsList: [
{
id: 'hot',
classifyName: '热销',
goods: [1, 2, 3, 4, 5]
},
{
id: 'new',
classifyName: '新品',
goods: [1, 3]
},
{
id: 'vegetable',
classifyName: '蔬菜',
goods: [1, 6, 5]
},
{
id: 'mushroom',
classifyName: '蘑菇',
goods: [2, 7, 8, 9]
},
{
id: 'food',
classifyName: '主食',
goods: [3, 4]
}
],
cart: {
count: 0,
total: 0,
list: {}
},
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
});
},
tapAddCart: function (e) {
this.addCart(e.target.dataset.id);
},
tapReduceCart: function (e) {
this.reduceCart(e.target.dataset.id);
},
addCart: function (id) {
var num = this.data.cart.list[id] || 0;
this.data.cart.list[id] = num + 1;
this.countCart();
},
reduceCart: function (id) {
var num = this.data.cart.list[id] || 0;
if (num <= 1) {
delete this.data.cart.list[id];
} else {
this.data.cart.list[id] = num - 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)
});
}
});

部分代码：

{{shop.name}}
公告：欢迎光临{{shop.name}}！
{{followed?'已收藏':'收藏'}}

{{shop.desc}}




{{classify.classifyName}}




{{classify.classifyName}}


{{goods[id].name}}
月售{{goods[id].sold}}
￥{{goods[id].price}}












{{cart.count}}

￥{{cart.total}}



去结算