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

这篇具有很好参考价值的文章主要介绍了【微信小程序】外卖点餐效果展示。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

概述

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

详细

直接看效果图:

【微信小程序】外卖点餐效果展示,微信及其他应用,微信小程序,小程序

可以把这个点餐这个功能分为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)
});
}
});

部分代码:文章来源地址https://www.toymoban.com/news/detail-714462.html

<view class="container">
<view class="header {{scrollDown?'hidden':''}}">
<image class="logo" src="https://img2.baidu.com/it/u=2421505363,3507499484&fm=26&fmt=auto&gp=0.jpg"/>
<view class="name ellipsis">{{shop.name}}</view>
<view class="welcome ellipsis">公告:欢迎光临{{shop.name}}!</view>
<view class="follow" bindtap="follow">{{followed?'已收藏':'收藏'}}</view>
<view class="line"></view>
<view class="desc">{{shop.desc}}</view>
</view>
<view class="content-container">
<scroll-view class="classify-container" scroll-y="true">
<view class="classify {{classifySeleted==classify.id?'active':''}}" wx:for="{{goodsList}}" wx:for-item="classify" wx:key="id" data-id="{{classify.id}}" bindtap="tapClassify">
<view class="name">{{classify.classifyName}}</view>
</view>
</scroll-view>
<scroll-view class="goods-container" scroll-y="true" scroll-into-view="{{classifyViewed}}" bindscroll="onGoodsScroll">
<view wx:for="{{goodsList}}" wx:for-item="classify" wx:key="id" id="{{classify.id}}">
<view class="title">{{classify.classifyName}}</view>
<view class="goods" wx:for="{{classify.goods}}" wx:for-item="id" wx:key="*this">
<image class="pic" src="{{goods[id].pic}}"></image>
<view class="name ellipsis">{{goods[id].name}}</view>
<view class="sold">月售{{goods[id].sold}}</view>
<view class="price">¥{{goods[id].price}}</view>
<view class="addCart" bindtap="tapAddCart" data-id="{{id}}">
<image src="/imgs/shop/plus.png"></image>
</view>
</view>
</view>
</scroll-view>
</view>
<view class="cart-detail" hidden="{{!showCartDetail||!cart.count}}">
<view class="mask" bindtap="hideCartDetail"></view>
<view class="list">
<view class="item" wx:for="{{cart.list}}" wx:for-index="id" wx:for-item="num" wx:key="id">
<view class="name ellipsis">{{goods[id].name}}</view>
<view class="total">¥{{goods[id].price*cart.list[id]}}</view>
<view class="reduce" data-id="{{id}}" bindtap="tapReduceCart">-</view>
<view class="num">{{num}}</view>
<view class="add" data-id="{{id}}" bindtap="tapAddCart">+</view>
</view>
</view>
</view>
<view class="cart">
<view class="data" bindtap="showCartDetail">
<view class="icon">
<image src="/imgs/shop/cart.png"></image>
<view class="count">{{cart.count}}</view>
</view>
<view class="total">¥{{cart.total}}</view>
</view>
<form bindsubmit="submit" report-submit="true">
<!--<view formType="submit" class="submit">去结算</view>-->
<button class="yellow {{cart.count?'':'disabled'}}" formType="submit" disabled="{{!cart.count}}">去结算</button>
</form>
</view>
</view>

到了这里,关于【微信小程序】外卖点餐效果展示的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于微信小程序的在线点餐外卖系统

    目 录 第1章 绪论 1 1.1 研究背景 1 1.2 研究目的和意义 1 1.2.1研究目的 1 1.2.2研究意义 2 1.3 国内外研究现状分析 2 1.3.1国外研究现状 2 1.3.2国内研究现状 3 1.4 研究内容及方法 3 1.4.1研究内容 3 1.4.2研究方法 4 1.4.3技术路线图 4 第2章 系统分析 6 2.1可行性分析 6 2.1.1技术可行性 6 2.1.

    2024年02月02日
    浏览(55)
  • 万能的微信小程序个人主页:商城系统个人主页、外卖系统个人主页、购票系统个人主页等等【全部源代码分享+页面效果展示+直接复制粘贴编译即可】

            以下给出来四个常见的小程序个人主页,分别是商城系统个人主页,外卖系统个人主页,挂号系统个人主页,电影购票系统个人主页。包括完整的页面布局代码,完整的样式代码。使用的时候,只需要将页面代码和样式代码复制到自己项目对应的页面即可。而且可

    2024年02月11日
    浏览(66)
  • 微信小程序毕业设计作品成品(06)微信小程序外卖点餐平台系统设计与实现

    博主介绍: 《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、PPT、论文模版

    2024年02月07日
    浏览(48)
  • 微信小程序毕业设计作品成品(75)微信小程序在线外卖点餐系统设计与实现

    博主介绍: 《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、PPT、论文模版

    2024年02月08日
    浏览(49)
  • 微信小程序毕业设计作品成品(49)微信小程序奶茶外卖点餐系统设计与实现

    博主介绍: 《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、PPT、论文模版

    2024年02月08日
    浏览(47)
  • 基于php微信小程序外卖点餐系统设计与实现

    开发概要 开发操作系统:windows10 + 4G内存 + 500G 小程序开发:微信开发者工具(MINA框架) 后台环境:IIS +PHP 后台开发语言:PHP 后台开发工具:Dreamweaver +PhpStorm 数据库:mysql8 数据库管理工具:navicat 其他开发语言:html + css +javascript

    2024年02月11日
    浏览(45)
  • java 基于微信小程序的饭店外卖点餐系统 uniapp小程序

    如今伴随着互联网的快速发展,这项技术被广泛的应用在各个领域中。因为互联网技术的进步,现如今各个行业中都在转型,传统的模式被新的时代所取代。互联网技术给人们带了极大的方便与便捷,改变了人们生活的变化尤其是在美食上面,人们现在甚至不需要出门直接就

    2024年02月09日
    浏览(61)
  • springboot+vue基本微信小程序的外卖点餐平台系统

    餐饮行业是一个传统的行业。根据当前发展现状,网络信息时代的全面普及,餐饮行业也在发生着变化,单就点餐这一方面,利用手机点单正在逐步进入人们的生活。传统的点餐方式,不仅会耗费大量的人力、时间,有时候还会出错。小程序系统伴随智能手机为我们提供了新

    2024年01月21日
    浏览(45)
  • 案例137:基于微信小程序的外卖点餐的设计与实现

    文末获取源码 开发语言:Java 框架:SSM JDK版本:JDK1.8 数据库:mysql 5.7 开发软件:eclipse/myeclipse/idea Maven包:Maven3.5.4 小程序框架:uniapp 小程序开发软件:HBuilder X 小程序运行软件:微信开发者 目录 目录 前言 系统展示 管理员模块的实现 菜品信息管理 订单配送管理  订单统计

    2024年01月19日
    浏览(41)
  • 微信小程序餐饮奶茶扫码点餐小程序堂食外卖桌台自助下单源码

    系统产品主要功能:【外卖】【堂食】【会员】【优惠券】【营销功能】【积分商城】【手机接单管理】【奶茶店】【餐饮店】【私房外卖】【酒吧/酒店】【小吃店】【便利店】【超市】全方位..... 餐饮5种场景 一、【桌台号/房问/包厢下单】扫码下单,服务员送餐上桌 二、

    2024年02月02日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包