精华内容
下载资源
问答
  • 微信小程序点餐系统

    2018-10-08 22:24:01
    微信小程序点餐系统界面无后台,里面还实现了地图,微信摇一摇等
  • 微信小程序点餐界面代码.zip
  • 微信小程序点餐效果制作,源代码下载,小程序制作 点餐效果制作
  • 主要介绍了微信小程序点餐系统开发常见问题汇总,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 顾客不用排队等待,打开微信扫一扫二维码,就能通过微信点餐支付,对于大部分餐厅来说,都已经成为常见...微信小程序点餐系统制作。 微信点餐小程序功能: 1、招牌菜谱:菜品分配清晰明了,让招牌好菜优势无限放大。...

    顾客不用排队等待,打开微信扫一扫二维码,就能通过微信点餐支付,对于大部分餐厅来说,都已经成为常见的现象,小程序彻底融入了我们的生活,小程序也已经成为餐饮行业必备的工具。通过餐饮小程序,不仅可以让用户获得更好的就餐体验,对老板来说也可以方便餐厅的管理、节省成本,提高收入。那么微信点餐小程序怎么做?微信小程序点餐系统制作。

    微信点餐小程序功能:

    1、招牌菜谱:菜品分配清晰明了,让招牌好菜优势无限放大。

    2、点餐就是快:无需服务员,微信餐饮小程序自助点餐,提升餐厅翻台率。

    3、就餐不等待:后台对接小票打印系统,订单清晰明了,实时监控,避免上错。

    4、结账好又快:微信在线转账方便快捷不用问,节省双方时间,避免错账。

    5、价格不怕调:微信小程序点餐系统,后台操作,实时更新,不怕调菜品、调价格。

    6、外卖配送系统:宅时代,客户远程微信下单,自动收单,拓展线上利润。

    7、更高的曝光率:小程序入口多、可分享好友,还可通过附近的小程序下单。

    8、会员积分系统:对接微信积分会员系统,包含积分抵现、会员折扣等,沉淀老用户。

    9、营销额顿顿爆:不压资金,不收取提成。优化客户服务流程,节约成本。

    微信小程序点餐系统优势:

    1、自助点餐,节省成本:用户通过点餐小程序在微信自助点餐、支付,不需要排队等待,节省收银时间,压缩餐厅的服务时间,提升换台率。

    2、自己的平台,留住客户:通过美团、饿了么等第三方外卖平台,用户都留在第三方,自己无法直接联系用户,而餐饮小程序属于自己的平台,用户数据自己把控。

    3、数据分析:通过餐饮小程序积累用户数据,让商户更加了解自己的顾客画像,可以针对性营销。

    4、会员管理:可以建立积分系统,留住老用户。家有余粮,心中不慌。

    5、顾客下单后:订单直接同步至后厨,省去沟通成本,控制出错率,降低用餐高峰期餐厅服务压力。

    6、强大的流量:利用餐饮小程序,将店铺搬到用户的微信里,背靠微信10亿流量,可以快速提升餐厅的线上销量。作为微信的力推产品,小程序的入口多,既可以通过附近的小程序查看,还可以通过微信下拉框快速使用,用户体验度高。

    转载于:https://juejin.im/post/5bbde5205188255c791b2304

    展开全文
  • 本课程是 Django+Xadmin打造微信小程序外卖点餐项目,不涉及前端小城部分,介意的话不要购买,只讲解后端接口和实现,使用Xadmin编写后端,同时使用redis编写购物车,完整的点餐项目,加开发api文档
  • Django Xadmin微信小程序点餐 多年软件开发工作经验,丰富的培训经...

    扫码下载「CSDN程序员学院APP」,1000+技术好课免费看

    APP订阅课程,领取优惠,最少立减5元 ↓↓↓

    订阅后:请点击此处观看视频课程

     

    视频教程-Django Xadmin微信小程序点餐-Python

    学习有效期:永久观看

    学习时长:269分钟

    学习计划:5天

    难度:

     

    口碑讲师带队学习,让你的问题不过夜」

    讲师姓名:章秀淞

    CTO/CIO/技术副总裁/总工程师

    讲师介绍:多年软件开发工作经验,丰富的培训经历,从2014年开始一直奋战在培训讲师行业的先锋队,培训期间不断制定出完整的培训课程体系,还承担大部分课程的讲解,不断培养学生的编程能力。从进入培训行业以来先后培训出2400多学员,分布于各大IT公司高级岗位。​学生学生年薪达到了20万以上,随着云计算大数据人工智能等技术的蓬勃发展,很多高校学生还处于盲目阶段,这些年的工作经历能更好的把握技术发展,从而实现学生高薪就业。

    ☛点击立即跟老师学习☚

     

    「你将学到什么?」

    本课程是 Django+Xadmin打造微信小程序外卖点餐项目,不涉及前端小城部分,介意的话不要购买,只讲解后端接口和实现,使用Xadmin编写后端,同时使用redis编写购物车,完整的点餐项目,加开发api文档

     

    「课程学习目录」

    1.项目介绍
    2.虚拟环境搭建和依赖模块安装
    3.创建项目和app
    4.项目配置
    5.数据库设计
    6.models设计
    7.生成迁移文件产生数据库脚本
    8.插入假数据
    9.小程序导入
    10.查询菜单
    11.根据菜单ID查询商户数据
    12.根据菜单ID查询商户数据
    13.根据菜单ID查询商户数据
    14.商户评价
    15.商户评价
    16.添加购物车
    17.查询购物车列表
    18.改变购物车状态
    19.加减购物车操作
    20.删除购物车
    21.查询商家信息
    22.添加地址
    23.查询用户地址
    24.修改默认地址
    25.根据地址id查询地址信息
    26.修改地址
    27.删除地址
    28.查询选中购物车信息
    29.查询默认地址
    30.提交订单
    31.查询所有订单
    32.修改订单状态
    33.订单的详细信息
    34.根据订单id查询商品信息
    35.订单评价
    36.xadmin配置
    37.xadmin配置
    38.xadmin配置
    39.xadmin后台模块开发
    40.其他模块编写
    41.新增小bug

     

    7项超值权益,保障学习质量」

    • 大咖讲解

    技术专家系统讲解传授编程思路与实战。

    • 答疑服务

    专属社群随时沟通与讲师答疑,扫清学习障碍,自学编程不再难。

    • 课程资料+课件

    超实用资料,覆盖核心知识,关键编程技能,方便练习巩固。(部分讲师考虑到版权问题,暂未上传附件,敬请谅解)

    • 常用开发实战

    企业常见开发实战案例,带你掌握Python在工作中的不同运用场景。

    • 大牛技术大会视频

    2019Python开发者大会视频免费观看,送你一个近距离感受互联网大佬的机会。

    • APP+PC随时随地学习

    满足不同场景,开发编程语言系统学习需求,不受空间、地域限制。

     

    「什么样的技术人适合学习?」

    • 想进入互联网技术行业,但是面对多门编程语言不知如何选择,0基础的你
    • 掌握开发、编程技术单一、冷门,迫切希望能够转型的你
    • 想进入大厂,但是编程经验不够丰富,没有竞争力,程序员找工作难。

     

    「悉心打造精品好课,5天学到大牛3年项目经验」

    【完善的技术体系】

    技术成长循序渐进,帮助用户轻松掌握

    掌握Python知识,扎实编码能力

    【清晰的课程脉络】

    浓缩大牛多年经验,全方位构建出系统化的技术知识脉络,同时注重实战操作。

    【仿佛在大厂实习般的课程设计】

    课程内容全面提升技术能力,系统学习大厂技术方法论,可复用在日后工作中。

     

    「你可以收获什么?」

    Xadmin

    前后分离开发

    Django

     

    展开全文
  • 微信小程序获取分类 菜品管理 后台管理(curd) 微信小程序获取商家推荐菜品 微信小程序根据分类id获取菜品 菜品评价管理(菜品id关联) 后台管理(curd) 微信小程序添加菜品评价 微信小程序根据菜品id分页获取菜品...
  • 微信小程序极大方便了广大用户的使用和方便,因为想开发一个微信小程序点餐系统,作为自己的毕业设计。 技术架构: 小程序端:原生微信小程序 后端:SpringBoot+mybatis+mysql+html+js+css 开发工具: eclipse/...

    需求背景:

    微信小程序极大方便了广大用户的使用和方便,因为想开发一个微信小程序点餐系统,作为自己的毕业设计。

    技术架构:

    小程序端:原生微信小程序

    后端:SpringBoot+mybatis+mysql+html+js+css

    开发工具:

    eclipse/IDEA     微信开发者工具   mysql

    用户角色:

    买家:搜索店铺并进行点餐

    商家:处理买家提交的订单并准备菜品,通知骑手送餐

    骑手:送餐

    管理员:负责后台管理

    涉及到的功能:

    注册、登录、买家点餐、提交订单、商家接单、骑手抢单、订单信息、留言等。

    后台部分功能代码:

    @Controller
    @RequestMapping(value = "/home")
    public class HomeController {    
        @RequestMapping(value = "/setSession", produces = "text/plain; charset=utf-8", method = { RequestMethod.GET,
                RequestMethod.POST })
        @ResponseBody
        public String setSession(HttpServletRequest req) {
            HttpSession session = req.getSession();
            String key = req.getParameter("key");
            String value = req.getParameter("value");
            session.setAttribute(key, value);
            
            return null;
        }
        
        @RequestMapping(value = "/getSession", produces = "text/plain; charset=utf-8", method = { RequestMethod.GET,
                RequestMethod.POST })
        @ResponseBody
        public String getSession(HttpServletRequest req) {
            HttpSession session = req.getSession();
            String key = req.getParameter("key");
            String value = session.getAttribute(key)==null?null:session.getAttribute(key).toString();
            return value;
        }
        
    }

    <!DOCTYPE html>
    <html>
    <head id="Head1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>点餐</title>
        <script type="text/javascript">
            var themetype = localStorage['easyuitheme']||"default";
            document.write('<link rel="stylesheet" type="text/css" href="__PUBLIC__/easyui/themes/'+themetype+'/easyui.css"/>')
        </script>
        <!--<link rel="stylesheet" type="text/css"
              href="__PUBLIC__/easyui/themes/default/easyui.css"/>-->
        <link rel="stylesheet" type="text/css" href="__PUBLIC__/easyui/themes/icon.css"/>
        <link rel="stylesheet" type="text/css" href="__PUBLIC__/easyui/themes/all.css"/>
        <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/index.css"/>
        <script type="text/javascript" src="__PUBLIC__/easyui/jquery.min.js"></script>
        <script type="text/javascript" src="__PUBLIC__/easyui/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="__PUBLIC__/easyui/locale/easyui-lang-zh_CN.js"></script>
        <script type="text/javascript" src="__PUBLIC__/js/ideaframe.js"></script>
        <script type="text/javascript" src="__PUBLIC__/js/common.js"></script>
        <script type="text/javascript">
        var _menus = "";
            $(function (){
                $.post("/home/getSession", {key:"userinfo"}, function(data) {
                    if (data) {
                        userinfo = JSON.parse(data);
                        $("#usernameshow").text(userinfo.username);
                        roletype = userinfo.roletype;
                        if(roletype){
                            if(roletype == "1"){
                                $("#iframepage").attr("src","user.html");
                            }else if(roletype == "3"){
                                $("#iframepage").attr("src","billshop.html");
                            }else if(roletype == "2"){
                                $("#iframepage").attr("src","xuanke.html");
                            }
                        }
                    }else{
                        window.location.href="login.html";
                    }
                    
                    if (roletype) {
                        if (roletype == "1") {
                            _menus = {
                                       "menus": [
                                           {"menuid": "1", "icon": "icon-magic", "menuname": "菜品管理",
                                               "menus": [
                                                   {"menuid": "12", "menuname": "菜品管理列表", "icon": "icon-database", "url": "good.html"}
                                               ]},
                                           {"menuid": "1", "icon": "icon-magic", "menuname": "类别管理",
                                               "menus": [
                                                   {"menuid": "12", "menuname": "类别列表", "icon": "icon-database", "url": "type.html"}
                                               ]},
                                         /*{"menuid": "1", "icon": "icon-magic", "menuname": "桌号管理",
                                             "menus": [
                                                 {"menuid": "12", "menuname": "桌号列表", "icon": "icon-database", "url": "room.html"}
                                             ]},
                                               {"menuid": "1", "icon": "icon-magic", "menuname": "城市管理",
                                                   "menus": [
                                                       {"menuid": "12", "menuname": "城市列表", "icon": "icon-database", "url": "<%= __APP__%>/Shop!shop"}
                                                   ]},*/
                                           {"menuid": "1", "icon": "icon-magic", "menuname": "订单管理",
                                               "menus": [
                                                   {"menuid": "12", "menuname": "订单管理", "icon": "icon-database", "url": "bill.html"}
                                               ]},
                                         {"menuid": "1", "icon": "icon-magic", "menuname": "统计",
                                             "menus": [
                                                 {"menuid": "12", "menuname": "统计图", "icon": "icon-database", "url": "tongji.html"}
                                             ]},
                                            {"menuid": "1", "icon": "icon-magic", "menuname": "餐厅管理",
                                                      "menus": [
                                                          {"menuid": "12", "menuname": "餐厅列表", "icon": "icon-database", "url": "shop.html"}
                                                      ]},
                                                {"menuid": "1", "icon": "icon-magic", "menuname": "留言建议管理",
                                                          "menus": [
                                                              {"menuid": "12", "menuname": "留言建议列表", "icon": "icon-database", "url": "notice.html"}
                                                          ]}, 
                              
                                           {"menuid": "56", "icon": "icon-role", "menuname": "用户管理",
                                               "menus": [
                                                   {"menuid": "31", "menuname": "用户列表", "icon": "icon-users", "url": "user.html"}
                                               ]
                              
                                           }
                                       ]};
                        }else if(roletype == "3"){
                            _menus = {
                                "menus": [
                                    {"menuid": "1", "icon": "icon-magic", "menuname": "菜品管理",
                                        "menus": [
                                            {"menuid": "12", "menuname": "菜品管理列表", "icon": "icon-database", "url": "goodshop.html"}
                                        ]},
                                    {"menuid": "1", "icon": "icon-magic", "menuname": "优惠券管理",
                                        "menus": [
                                            {"menuid": "12", "menuname": "优惠券列表", "icon": "icon-database", "url": "youhuijuan.html"}
                                        ]},
                                    {"menuid": "1", "icon": "icon-magic", "menuname": "类别管理",
                                        "menus": [
                                            {"menuid": "12", "menuname": "类别列表", "icon": "icon-database", "url": "type.html"}
                                        ]},
                                    {"menuid": "1", "icon": "icon-magic", "menuname": "兼职信息管理",
                                        "menus": [
                                            {"menuid": "12", "menuname": "兼职信息列表", "icon": "icon-database", "url": "notice2.html"},
                                            {"menuid": "12", "menuname": "兼职申请", "icon": "icon-database", "url": "notice3.html"}
                                        ]},
                                    {"menuid": "1", "icon": "icon-magic", "menuname": "订单管理",
                                        "menus": [
                                            {"menuid": "12", "menuname": "订单管理", "icon": "icon-database", "url": "billshop.html"}
                                        ]}
                                ]};
                        }else if(roletype == "2"){
                            
                        }
                        InitLeftMenu();
                        tabClose();
                        tabCloseEven();
                    }
                    
                });
                
            });


            


        </script>
        <style type="text/css">
            .themeblock{
                width: 10px;
                height: 10px;

                display: inline-block;
            }
        </style>
    </head>
    <body class="easyui-layout" style="overflow-y: hidden" scroll="no">
    <noscript>
        <div
                style="position: absolute; z-index: 100000; height: 2046px; top: 0px; left: 0px; width: 100%; background: white; text-align: center;">
            <img src="images/noscript.gif" alt='抱歉,请开启脚本支持!'/>
        </div>
    </noscript>
    <div region="north" split="true" style="height: 100px;background-color:#025483;color: #fff;font-size: 30px;text-align: center;line-height: 100px;overflow: hidden;">
        <span style="text-shadow: 0px 0px 3px #000;">点餐</span>
    </div>

    <div region="south" split="true"
         style="height: 30px;">
        <div>
            <table width="100%">
                <tr>
                    <td style="width: 20%;padding-right: 50px;" align="right">
                        <a href="#" οnclick="openPasswd();" id="usernameshow"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a
                            href="login.html">退出</a>
                    </td>
                    <td style="width: 80%" align="right">
                        主题&nbsp;&nbsp;&nbsp;&nbsp;:<a href="javascript:saveTheme('default');" style="color: #2571EB;">经典</a>&nbsp;&nbsp;
                        <!--<a href="__APP__/Index/changeThem/name/default">经典</a>&nbsp;&nbsp;&nbsp;&nbsp;-->
                        <!--<a href="__APP__/Index/changeThem/name/cupertino">清新蓝</a>&nbsp;&nbsp;&nbsp;&nbsp;-->
                        <a href="javascript:saveTheme('gray');" style="color: #585858;">灰色</a>&nbsp;&nbsp;
                        <a href="javascript:saveTheme('black');" style="color: #000000;">酷黑</a>&nbsp;&nbsp;
                        <a href="javascript:saveTheme('bootstrap');" style="color: #585858;">bootstrap</a>&nbsp;&nbsp;
                        <a href="javascript:saveTheme('ui-cupertino');" style="color: #008198;">清新蓝</a>&nbsp;&nbsp;
                        <a href="javascript:saveTheme('ui-dark-hive');" style="color: #000000;">深黑</a>&nbsp;&nbsp;
                        <a href="javascript:saveTheme('ui-pepper-grinder');" style="color: #ECC73B;">花布</a>&nbsp;&nbsp;
                        <a href="javascript:saveTheme('ui-sunny');" style="color: #BF570C;">阳光</a>&nbsp;&nbsp;
                        <a href="javascript:saveTheme('metro');" style="color: #585858;">metro</a>&nbsp;&nbsp;
                        <a href="javascript:saveTheme('metro-blue');" style="color: #00AEEF;">metroblue</a>&nbsp;&nbsp;
                        <a href="javascript:saveTheme('metro-gray');" style="color: #454545;">metrogray</a>&nbsp;&nbsp;
                        <a href="javascript:saveTheme('metro-green');" style="color: #008900;">metrogreen</a>&nbsp;&nbsp;
                        <a href="javascript:saveTheme('metro-orange');" style="color: #D14625;">metroorange</a>&nbsp;&nbsp;
                        <a href="javascript:saveTheme('metro-red');" style="color: #7A0000;">metrored</a>&nbsp;&nbsp;


                    </td>
                    <!--<td style="width: 20%" align="right">-->
                        <!--模式:&nbsp;&nbsp;&nbsp;&nbsp;<a href="__APP__/Index/changeModel?name=index">桌面</a>&nbsp;&nbsp;&nbsp;&nbsp;-->
                        <!--<a href="__APP__/Index/changeModel/name/index2">经典</a>&nbsp;&nbsp;&nbsp;&nbsp;-->
                    <!--</td>-->
                </tr>
            </table>

        </div>
    </div>
    <div region="west" hide="true" split="true" title="导航菜单"
         style="width: 180px;" id="west">
        <div id="nav" class="easyui-accordion" fit="true" border="false">
            <!--  导航内容 -->

        </div>
    </div>
    <div id="mainPanle" region="center"
         style="background: #eee; overflow-y: hidden">
        <div id="tabs" class="easyui-tabs" fit="true" border="false">
            <div title="欢迎使用" style="padding: 0px; color: red; overflow: hidden;"
                 closable="true">
                <iframe src="" id="iframepage" name="iframepage"
                        frameBorder=0 width="100%" height="100%" onLoad=""></iframe>
            </div>
        </div>
    </div>
    <div region="east" collapsed="true" id="datetool" title="日历"
         split="true" style="width: 180px; overflow: hidden;">
        <div class="easyui-calendar"></div>
        <embed width="160" height="70" align="middle" pluginspage="http://www.macromedia.com/go/getflashplayer"
               type="application/x-shockwave-flash" allowscriptaccess="always" name="honehoneclock" bgcolor="#ffffff"
               quality="high" src="__PUBLIC__/swf/honehone_clock_wh.swf" wmode="transparent">
        </embed>
    </div>

    <!--修改密码窗口-->
    <div id="passwdDialog" class="easyui-dialog" title="修改密码" style="width:550px;height:290px;" toolbar="#dlg-toolbar"
         buttons="#dlg-buttons2" resizable="true" modal="true" closed='true'>
        <form id="passwdForm" name="passwdForm" method="post">
            <table cellpadding="1" cellspacing="1" class="tb_custom1" style="width: 98%;">
                <tr>
                    <th align="right"><label>密码:</label></th>
                    <td>
                        <input id="passwd" name="passwd" value="" type="password" class="easyui-validatebox" required="true" validType="length[0,32]"
                               style="width:90%"/>
                    </td>
                </tr>
                <tr>
                    <th align="right"><label> 密码重复:</label></th>
                    <td>
                        <input id="passwd2" name="passwd2" value="" type="password" class="easyui-validatebox" required="true" validType="length[0,32]"
                               style="width:90%"/>
                    </td>
                </tr>
            </table>
        </form>
        <div id="dlg-buttons2">
            <a href="#" class="easyui-linkbutton" οnclick="savePasswd();">保存</a>
        </div>
    </div>

    <div id="mm" class="easyui-menu" style="width: 150px;">
        <div id="mm-tabupdate">刷新</div>
        <div class="menu-sep"></div>
        <div id="mm-tabclose">关闭</div>
        <div id="mm-tabcloseall">全部关闭</div>
        <div id="mm-tabcloseother">除此之外全部关闭</div>
        <div class="menu-sep"></div>
        <div id="mm-tabcloseright">当前页右侧全部关闭</div>
        <div id="mm-tabcloseleft">当前页左侧全部关闭</div>
    </div>
    </body>
    </html>

    项目演示地址:

    需要源码的小伙伴可以加qq:3083155908,相互交流学习技术,提供技术支持

    小程序演示地址:

    链接:https://pan.baidu.com/s/1Ih2SZyh86nSseA7GncXPIg 
    提取码:8ygl

    后台管理系统演示地址:

    链接:https://pan.baidu.com/s/1NBX0e9aDHN-Lld033JzjWw 
    提取码:9oo9

    展开全文
  • 微信小程序点餐页面实现完整版HTMLJSCSS总结 HTML <view class="page"> <view class="header-input" style="background:#efefef;height:40rpx;"> <!-- 搜索条 --> <view class="search-...

    微信小程序点餐页面实现完整版

    HTML

    <view class="page">
    	<view class="header-input" style="background:#efefef;height:40rpx;">
    		<!-- 搜索条 -->
    		<view class="search-input" style="background-color: white;" bindtap="searchNav">
    			<icon size='15' type='search'></icon>
    			<view style="padding-top:10rpx;">
    				<text class='search-key'>搜索商品</text>
    			</view>
    		</view>
    	</view>
    	<view class="body">
    		<!-- 左侧滚动栏 -->
    		<view style='float: left' class='left'>
    			<scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='scrollY'
    				style='height: {{winHeight}}px'>
    				<view class='all clear'>
    					<block wx:key="tabs" wx:for="{{tabs}}">
    						<view bindtap='jumpIndex' data-menuindex='{{index}}' data-ft_id='{{item.ft_id}}'>
    							<view class="text-style {{indexId==index?' activeView':''}}">
    								<text class="{{indexId==index?'active1':''}}">{{item.ft_name}}</text>
    							</view>
    						</view>
    					</block>
    				</view>
    			</scroll-view>
    		</view>
    		<view class="right" style='height: {{winHeight}}rpx;width:calc(100% - 200rpx);'>
    			<scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" bindscroll="scrollToLeft"
    				scroll-into-view="{{toTitle}}" class='scrollRight' style='height: {{winHeight}}px'>
    				<block wx:key="tabs" wx:for="{{tabs}}" wx:for-item="itemft"> 
    					<view id="view-{{itemft.ft_id}}">
    						<view class="title" id="title-{{itemft.ft_id}}">{{itemft.ft_name}}</view>
    						<view class="orders" wx:for="{{tabsList}}"  wx:for-item="itemf">
    							<view wx:if="{{itemf.ft_id==itemft.ft_id}}" style="height:180rpx;border-bottom:1rpx solid #F0F0F0;width:96%;margin:20rpx auto;">
    								<image src="{{itemf.food_Img}}" bindtap="toDetail" data-id="{{itemf.f_Cooks_Id}}" data-ft_id="{{itemf.ft_id}}"style="width:160rpx;height:160rpx;float:left;"></image>
    								<view style="width:calc(100% - 180rpx);float:right;height:160rpx;">
    									<view
    										style="height:40rpx;line-height:40rpx;margin-top:5rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
    										{{itemf.f_Name}}</view>
    									<view
    										style="height:40rpx;line-height:40rpx;margin-top:15rpx;font-size:24rpx;color:#c2c2c2;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
    										{{itemf.f_Description}}</view>
    									<view style="height:40rpx;line-height:40rpx;margin-top:15rpx;">
    										<text style="color:red;">¥{{itemf.f_DPrice}}</text>
    										<text
    											style="color:#c2c2c2;font-size:24rpx;margin-left:10rpx;text-decoration:line-through;">¥{{itemf.f_Price}}</text>
    										<!-- 加号 -->
    										<image src="../../../images/add.png" data-id="{{itemf.f_Cooks_Id}}" 
    											bindtap="addCart" style="float:right;height:40rpx;width:40rpx;"></image>
    										<!-- 数量 -->
    										<text style="float:right;height:40rpx;padding:0rpx 10rpx;" class="value"
    											hidden="{{itemf.quantity<=0}}" data-id="{{itemf.f_Cooks_Id}}"
    											data-num="{{itemf.quantity}}">{{itemf.quantity}}</text>
    										<!-- 减号 -->
    										<image src="../../../images/reduce.png" hidden="{{itemf.quantity<=0}}"
    											data-id="{{itemf.f_Cooks_Id}}" bindtap="delCart" style="float:right;height:40rpx;width:40rpx;"></image>
    									</view>
    								</view>
    							</view>
    						</view>
    					</view>
    				</block>
    			</scroll-view>
    		</view>
    	</view>
    	<!-- 底部下单 -->
    	<view class="bottom_box">
    		<view class="shop_cartBox" bindtap="cascadeToggle">
    			<image class="shopCart_img" src="../../../images/shopCart.png"></image>
    		</view>
    		<view class="all_money">总计:{{totalPrice}}元,{{totalNum}}件</view>
    		<view class="choose_ok color-block" bindtap="gotoOrder">下单</view>
    	</view>
    	<!--购物车弹窗  -->
    	<view hidden="{{maskFlag}}" class="modal-mask" bindtap="cascadeToggle"></view>
    	<view animation="{{animationData}}" class="cart_popup">
    		<view class="shopcart_title"><span class="shopcart_close" bindtap="cascadeToggle">返回</span>购物车<span
    				class="shopcart_deleteAll" bindtap="cleanList">清空购物车</span></view>
    		<scroll-view scroll-y style="height:250px;margin-top:35px">
    			<block wx:for="{{cartList}}" wx:key="">
    				<view class="cart_cells" wx:if="{{item.quantity > 0}}">
    					<view class="cells_name" style="font-size:28rpx;color:gray;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" data-index="{{index}}">{{item.f_Name}}</view>
    					<view class="cells_price" data-index="{{index}}">{{item.f_DPrice}}</view>
    					<view class="price-box">
    						<!-- 减号 -->
    						<image src="../../../images/reduce.png" hidden="{{item.quantity<=0}}"
    							data-id="{{item.f_Cooks_Id}}" bindtap="delCart" style="float:right;height:40rpx;width:40rpx;margin-top: 10rpx;"></image>
    						<!-- 数量 -->
    						<text style="float:right;height:40rpx;padding:0rpx 10rpx;margin-top: 10rpx;" class="value" hidden="{{item.quantity<=0}}"
    							data-id="{{item.f_Cooks_Id}}" data-num="{{item.quantity}}">{{item.quantity}}</text>
    						<!-- 加号 -->
    						<image src="../../../images/add.png" data-id="{{item.f_Cooks_Id}}" bindtap="addCart"
    							style="float:right;height:40rpx;width:40rpx;margin-top: 10rpx;"></image>
    					</view>
    					<icon class="shopcart_delete" type="clear" size="18" data-index="{{index}}" data-id="{{item.f_Cooks_Id}}" bindtap="deleteOne" />
    				</view>
    			</block>
    		</scroll-view>
    	</view>
    </view>
    

    JS

    var config = require('../../../utils/config.js');
    var http = require('../../../utils/request.js');
    Page({
      /**
       * 页面的初始数据
       */
      data: {
        tabs: [],
        tabsList: [],
        indexId: 0,
        toTitle: "title-0",
        scrollTop: 0,
        top: [],
        totalPrice: 0, //选中商品总价格
        totalNum: 0, //选中商品数量
        cartList: [], //选中商品列表
        // 购物车动画
        animationData: {},
        animationMask: {},
        maskVisual: "hidden",
        maskFlag: true,
      },
      // 左侧点击事件
      jumpIndex(e) {
        let index = e.currentTarget.dataset.menuindex;
        let ft_id = e.currentTarget.dataset.ft_id;
        let that = this
        that.setData({
          indexId: index,
          toTitle: "title-" + ft_id
        });
      },
      scrollToLeft(res) {
        console.log("scrollToLeft-res:" + JSON.stringify(res) + JSON.stringify(this.data.top));
        this.setData({
          scrollTop: res.detail.scrollTop
        })
        var length = this.data.top.length;
        for (var i = 0; i < this.data.top.length; i++) {
          if (this.data.top[i] - this.data.top[0] <= this.data.scrollTop && (i < length - 1 && this.data.top[i + 1] - this.data.top[0] > this.data.scrollTop)) {
            if (this.data.indexId != i) {
              this.setData({
                indexId: i,
              });
            }
          }
        }
      },
      onLoad: async function (options) {
        console.log(this.data.tabsList)
        var that = this;
        wx.showLoading({
          mask: true,
          title: '加载中…',
        })
        //获取分类
        await GetFoodType(that)
        //获取菜品
        await GetFoodCook(that)
        wx.hideLoading()
        console.log(that.data.tabsList)
        //赋值
        wx.getSystemInfo({
          success: function (res) {
            that.setData({
              winHeight: res.windowHeight - 100
            });
            var top2 = new Array();
            for (var i = 0; i < that.data.tabs.length; i++) {
              wx.createSelectorQuery().select('#view-' + that.data.tabs[i].ft_id).boundingClientRect(function (rect) {
                var isTop = Number(rect.top);
                top2.push(isTop);
                console.log("view-c:" + JSON.stringify(rect));
              }).exec();
            }
            that.setData({
              top: top2
            });
          }
        });
      },
      onShow: function (options) {
        var that = this;
        // 获取购物车缓存数据
        var arr = wx.getStorageSync('cart') || [];
        // 进入页面后判断购物车是否有数据,如果有,将菜单与购物车quantity数据统一
        if (arr.length > 0) {
          for (var i in arr) {
            for (var j in that.data.tabsList) {
              if (that.data.tabsList[j].f_Cooks_Id == arr[i].f_Cooks_Id) {
                that.data.tabsList[j].quantity = arr[i].quantity;
                break
              } else {
                that.data.tabsList[j].quantity = 0;
              }
            }
          }
        } else {
          for (var j in that.data.tabsList) {
            that.data.tabsList[j].quantity = 0;
          }
        }
        // 进入页面计算购物车总价、总数
        var totalPrice = 0;
        var totalNum = 0;
        if (arr.length > 0) {
          for (var i in arr) {
            totalPrice += arr[i].f_DPrice * arr[i].quantity;
            totalNum += Number(arr[i].quantity);
          }
        }
        // 赋值数据
        this.setData({
          cartList: arr,
          tabsList: that.data.tabsList,
          totalPrice: totalPrice.toFixed(2),
          totalNum: totalNum
        })
      },
      // 购物车增加数量
      addCart: function (e) {
        var id = e.currentTarget.dataset.id;
        var arr = wx.getStorageSync('cart') || [];
        var f = false;
        for (var i in this.data.tabsList) { // 遍历菜单找到被点击的菜品,数量加1
          if (this.data.tabsList[i].f_Cooks_Id == id) {
            this.data.tabsList[i].quantity += 1;
            if (arr.length > 0) {
              for (var j in arr) { // 遍历购物车找到被点击的菜品,数量加1
                if (arr[j].f_Cooks_Id == id) {
                  arr[j].quantity += 1;
                  f = true;
                  try {
                    wx.setStorageSync('cart', arr)
                  } catch (e) {
                    console.log(e)
                  }
                  break;
                }
              }
              if (!f) {
                arr.push(this.data.tabsList[i]);
              }
            } else {
              arr.push(this.data.tabsList[i]);
            }
            try {
              wx.setStorageSync('cart', arr)
            } catch (e) {
              console.log(e)
            }
            break;
          }
        }
        this.setData({
          cartList: arr,
          tabsList: this.data.tabsList
        })
        this.getTotalPrice();
      },
      // 购物车减少数量
      delCart: function (e) {
        var id = e.currentTarget.dataset.id;
        var arr = wx.getStorageSync('cart') || [];
        for (var i in this.data.tabsList) {
          if (this.data.tabsList[i].f_Cooks_Id == id) {
            this.data.tabsList[i].quantity -= 1;
            if (this.data.tabsList[i].quantity <= 0) {
              this.data.tabsList[i].quantity = 0;
            }
            if (arr.length > 0) {
              for (var j in arr) {
                if (arr[j].f_Cooks_Id == id) {
                  arr[j].quantity -= 1;
                  if (arr[j].quantity <= 0) {
                    this.removeByValue(arr, id) //77
                  }
                  if (arr.length <= 0) {
                    this.setData({
                      tabsList: this.data.tabsList,
                      cartList: [],
                      totalNum: 0,
                      totalPrice: 0,
                    })
                    this.cascadeDismiss()
                  }
                  try {
                    wx.setStorageSync('cart', arr)
                  } catch (e) {
                    console.log(e)
                  }
                }
              }
            }
          }
        }
        this.setData({
          cartList: arr,
          tabsList: this.data.tabsList
        })
        this.getTotalPrice();
      },
      // 定义根据id删除数组的方法
      removeByValue: function (array, val) {
        for (var i = 0; i < array.length; i++) {
          if (array[i].f_Cooks_Id == val) {
            array.splice(i, 1);
            break;
          }
        }
      },
      // 获取购物车总价、总数
      getTotalPrice: function () {
        var cartList = this.data.cartList; // 获取购物车列表
        var totalP = 0;
        var totalN = 0
        for (var i in cartList) { // 循环列表得到每个数据
          totalP += cartList[i].quantity * cartList[i].f_DPrice; // 所有价格加起来     
          totalN += cartList[i].quantity
        }
        this.setData({ // 最后赋值到data中渲染到页面
          cartList: cartList,
          totalNum: totalN,
          totalPrice: totalP.toFixed(2)
        });
      },
      // 清空购物车
      cleanList: function (e) {
        for (var t in this.data.tabs) {
          for (var j in this.data.tabsList) {
            this.data.tabsList[j].quantity = 0;
          }
        }
        try {
          wx.setStorageSync('cart', "")
        } catch (e) {
          console.log(e)
        }
        this.setData({
          tabsList: this.data.tabsList,
          cartList: [],
          cartFlag: false,
          totalNum: 0,
          totalPrice: 0,
        })
        this.cascadeDismiss()
      },
      //删除购物车单项
      deleteOne: function (e) {
        var id = e.currentTarget.dataset.id;
        var index = e.currentTarget.dataset.index;
        var arr = wx.getStorageSync('cart')
        for (var i in this.data.tabsList) {
          if (this.data.tabsList[i].f_Cooks_Id == id) {
            this.data.tabsList[i].quantity = 0;
          }
        }
        arr.splice(index, 1);
        if (arr.length <= 0) {
          this.setData({
            tabsList: this.data.tabsList,
            cartList: [],
            cartFlag: false,
            totalNum: 0,
            totalPrice: 0,
          })
          this.cascadeDismiss()
        }
        try {
          wx.setStorageSync('cart', arr)
        } catch (e) {
          console.log(e)
        }
        this.setData({
          cartList: arr,
          tabsList: this.data.tabsList
        })
        this.getTotalPrice()
      },
      //切换购物车开与关
      cascadeToggle: function () {
        var that = this;
        var arr = this.data.cartList
        if (arr.length > 0) {
          if (that.data.maskVisual == "hidden") {
            that.cascadePopup()
          } else {
            that.cascadeDismiss()
          }
        } else {
          that.cascadeDismiss()
        }
    
      },
      // 打开购物车方法
      cascadePopup: function () {
        var that = this;
        // 购物车打开动画
        var animation = wx.createAnimation({
          duration: 200,
          timingFunction: 'ease-in-out',
          delay: 0
        });
        that.animation = animation;
        animation.translate(0, -285).step();
        that.setData({
          animationData: that.animation.export(),
        });
        // 遮罩渐变动画
        var animationMask = wx.createAnimation({
          duration: 200,
          timingFunction: 'linear',
        });
        that.animationMask = animationMask;
        animationMask.opacity(0.8).step();
        that.setData({
          animationMask: that.animationMask.export(),
          maskVisual: "show",
          maskFlag: false,
        });
      },
      // 关闭购物车方法
      cascadeDismiss: function () {
        var that = this
        // 购物车关闭动画
        that.animation.translate(0, 285).step();
        that.setData({
          animationData: that.animation.export()
        });
        // 遮罩渐变动画
        that.animationMask.opacity(0).step();
        that.setData({
          animationMask: that.animationMask.export(),
        });
        // 隐藏遮罩层
        that.setData({
          maskVisual: "hidden",
          maskFlag: true
        });
      },
      // 跳转确认订单页面
      gotoOrder: function () {
        wx.navigateTo({
          url: '../confirmOrder/confirmOrder'
        })
      },
      //跳转搜索
      searchNav: function () {
        wx.navigateTo({
          url: '/pages/search/search'
        });
      },
      toDetail: function (e) {
        var id = e.currentTarget.dataset.id;
        var goodDetail = [];
        for (var i = 0; i < this.data.tabsList.length; i++) {
          if (this.data.tabsList[i].f_Cooks_Id == id) {
            goodDetail.push(this.data.tabsList[i]);
          }
        }
        wx.navigateTo({
          url: '../../category/goodDetail/goodDetail?goodDetail=' + JSON.stringify(goodDetail),
        })
      },
      gotoOrder: function () {
        wx.navigateTo({
          url: '../../category/previewOrder/previewOrder',
        })
      }
    })
    //获取商品信息
    function GetFoodCook(_this) {
      var that = _this
      return new Promise((resove, reject) => {
        //获取分类
        let data = {}
        let header = {}
        http.request(config.GetFoodCook_WXList, data, 'POST', header).then(function (res) {
          var e = res
          if (e.meta.Code == 200) {
            that.setData({
              tabsList: e.data.foodCookInfo == null ? [] : e.data.foodCookInfo
            })
            resove(true);
          } else {
            wx.showToast({
              title: res.Msg,
              duration: 2000,
              icon: "none",
              mask: true
            })
            reject(false)
          }
        }).catch((res) => {
          wx.showToast({
            title: res.Msg,
            duration: 2000,
            icon: "none",
            mask: true
          })
          reject(false)
        })
      })
    }
    //获取商品类别
    function GetFoodType(_this) {
      var that = _this
      return new Promise((resove, reject) => {
        let data = {
          pagenum: 1,
          pagesize: 100
        }
        let header = {}
        http.request(config.GetFoodTypeList, data, 'POST', header).then(function (res) {
          var e = res
          if (e.meta.Code == 200) {
            that.setData({
              tabs: e.data.foodTypeInfo == null ? [] : e.data.foodTypeInfo
            })
            resove(true);
          } else {
            wx.showToast({
              title: res.Msg,
              duration: 2000,
              icon: "none",
              mask: true
            })
            reject(false)
          }
        }).catch((res) => {
          wx.showToast({
            title: res.Msg,
            duration: 2000,
            icon: "none",
            mask: true
          })
          reject(false)
        })
      })
    }
    

    CSS

    /* pages/catering.wxss */
    .page {
      display: flex;
      flex-direction: column;
      width: 100%;
      /* background: #F7F4F8; */
      background-image: linear-gradient(90deg, #FCFCFC 0%, #FCFCFC 99%);
      /* padding-top: 16px; */
    }
    
    .under_line {
      width: 100%;
      border-top: 1rpx solid #efefef;
    }
    
    ::-webkit-scrollbar {
      width: 0;
      height: 0;
      color: transparent;
    }
    
    .body {
      margin-top: 100rpx;
      display: flex;
      width: 100%;
    }
    
    .scrollY {
      width: 200rpx;
      /* position: fixed;
     left: 0;
     top: 0; */
      background: #F5F5F5;
      /* border-right: 1rpx solid #efefef; */
    }
    
    /* scrollRight{
     flex: 1;
    } */
    .right {
      flex: 1;
      /* height: 200rpx; */
      /* background: #00FF00; */
    }
    
    .left {
      border-top: 1rpx solid #efefef;
      border-right: 1rpx solid #efefef;
    }
    
    .text-style {
      width: 200rpx;
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      font-size: 28rpx;
      font-family: PingFangSC-Semibold;
      color: rgba(51, 51, 51, 1);
    }
    
    .active1 {
      color: #FB4C22;
      /* background: #FFF; */
    }
    
    .activeView {
      background: #FFF;
    }
    
    .active {
      display: block;
      width: 50rpx;
      height: 6rpx;
      background: #FB4C22;
      position: relative;
      left: 75rpx;
      bottom: 30rpx;
    }
    
    .title {
      margin-left: 32rpx;
      padding-top: 16rpx;
      font-size: 28rpx;
      /* padding-bottom: 16rpx; */
    }
    
    
    /*底部  */
    
    .bottom_box {
      width: 100%;
      height: 80rpx;
      position: fixed;
      left: 0;
      bottom: 0px;
      z-index: 100;
      background-color: #fff;
    }
    
    .shop_cartBox {
      width: 100rpx;
      height: 100rpx;
      background-color: #FB4C22;
      border-radius: 50%;
      position: absolute;
      top: -40rpx;
      left: 20rpx;
    }
    
    .shopCart_img {
      width: 50rpx;
      height: 50rpx;
      position: absolute;
      top: 24rpx;
      left: 24rpx;
    }
    
    .all_money {
      position: absolute;
      width: 50%;
      height: 80rpx;
      top: 0;
      left: 25%;
      line-height: 80rpx;
      text-align: center;
      font-size: 32rpx;
    }
    
    .choose_ok {
      position: absolute;
      width: 25%;
      height: 80rpx;
      top: 0;
      right: 0;
      line-height: 80rpx;
      text-align: center;
      color: #fff;
      font-size: 40rpx;
    }
    
    .fontP {
      color: #FB4C22;
      font-size: 40rpx;
    }
    .color-block{
      color: #fff;
      font-size: 35rpx;
      background: #FB4C22;
    }
    
    /*弹窗遮罩层  */
    
    .modal-mask {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity:0.6;
      background: #000;
       z-index: 666; 
    }
    
    /*购物车弹窗  */
    
    .cart_popup {
      width: 100%;
      height: 285px;
      background: #fff;
      position: fixed;
      z-index: 999;
      left: 0;
      bottom: -285px;
      overflow: auto;
    }
    
    .shopcart_title {
      width: 100%;
      height: 70rpx;
      line-height: 80rpx;
      text-align: center;
      position: fixed;
      left: 0;
      background-color: #FB4C22;
      color: #fff;
    }
    
    /*关闭按钮  */
    
    .shopcart_close {
      position: absolute;
      left: 30rpx;
      font-size: 28rpx;
    }
    
    /*清空购物车  */
    
    .shopcart_deleteAll {
      position: absolute;
      right: 30rpx;
      font-size: 28rpx;
    }
    
    .margin_r {
      margin-right: 30rpx;
    }
    
    /*购物车列表  */
    
    .cart_cells {
      width: 100%;
      height: 98rpx;
      position: relative;
      border-bottom: 1px #dedede solid;
    }
    
    .cells_name {
      width: 40%;
      height: 50%;
      position: absolute;
      top: 0;
      left: 0;
      font-size: 14px;
      margin-left: 40rpx;
      padding-top: 10rpx;
    }
    
    .cells_price {
      width: 60%;
      height: 50%;
      position: absolute;
      top: 50rpx;
      left: 0;
      margin-left: 40rpx;
      font-size: 14px;
      padding-bottom: 10rpx;
      color: #FB4C22;
    }
    
    .price-box {
      padding-right: 20rpx;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 20%;
      position: absolute;
      left: 60%;
      top: 20rpx;
    }
    
    /*删除购物车某项  */
    
    .shopcart_delete {
      position: absolute;
      right: 40rpx;
      top: 32rpx;
    }
    
    /*我的订单  */
    
    .my_menu {
      width: 100%;
      overflow: auto;
      padding-top: 140rpx;
      background: #fff;
    }
    
    .weui_titleBox {
      height: 100rpx;
      line-height: 100rpx;
      padding: 0 30rpx;
      font-size: 32rpx;
      color: #000;
    }
    
    .weui_titleBox::after {
      border-bottom: none;
    }
    
    .weui_orderBox {
      height: 100rpx;
      line-height: 100rpx;
      padding: 0 30rpx;
      vertical-align: sub;
      border-top: 1rpx solid #e5e5e5;
    }
    
    .weui_orderBox::before {
      border-top: none;
    }
    
    .bd_radius {
      border-radius: 50%;
    }
    
    .order_img {
      vertical-align: sub;
    }
    
    /*合计  */
    
    .order_sum {
      height: 100rpx;
      padding: 0 30rpx;
      line-height: 100rpx;
      color: #000;
      font-size: 32rpx;
      overflow: hidden;
      border-bottom: 1rpx solid #e5e5e5;
    }
    
    .order_sum::after {
      border-bottom: none;
    }
    
    .order_sumMoney {
      float: left;
    }
    
    .order_Money {
      color: #FB4C22;
    }
    
    .order_payd {
      color: #01bf05;
      float: right;
      vertical-align: sub;
    }
    
    .paydIcon {
      vertical-align: sub;
      font-size: 48rpx;
      margin-right: 40rpx;
    }
    
    /*价格,份数  */
    
    .order_price {
      font-size: 28rpx;
    }
    
    .fenxi {
      width: 100%;
      height: 10rpx;
      background: #ddd;
    }
    

    总结

    这是一个完整的点餐页面,下载修改接口即可使用。如果对你有帮助希望能给个关注,我会继续分享更多的内容!

    展开全文
  • 微信小程序 老规矩先看效果图 管理后台 小程序下单完成后会有消息推送,如下 可以直接操作订单 小程序端 如上图,目前实现了如下功能。 扫码点餐 菜品分类显示 模拟支付 评论系统 下面说下使用流程 一,找老师索要...
  • 微信小程序点餐系统需求分析与建模 一.实验目的 (1)根据所选定应用软件的题目,完成整个需求分析工作; (2)通过实例掌握结构化数据流分析技术; (3)进行业务需求分析、用户需求、功能需求、非功能需求分析; (4)...
  • java后台相关问题一,程序包lombok不存在通常报这个错误,是因为,我们的开发者工具idea没有安装lombok库导致的解决办法如下:提示我们没有安装,我们就安装一个不就行了,下面来教大家如何安装。1,点击扳手进入...
  • 首先我们可以去微信小程序的开发者平台将其接口文档研读一遍,大致清楚上面图的流程后就可以下载小程序开发工具,然后导入项目的路径进入: 点击导入后,查看项目设置里有没有我们的信息以及点击编译,没有...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 518
精华内容 207
关键字:

微信小程序点餐

微信小程序 订阅