• 本节完成会员移动端点餐应用，创建基本视图、配置路由、套用模板实现移动点餐端应用项目结构的搭建,主要就是把各种模板给套成功。

  • 此移动端的应用名称为 mobile，具体项目结构如下：

  • myobject/ 项目目录|   |--myadmin/ 后台管理应用|    |...||--web/ 前台应用（大堂点餐）|    |...||--mobile/ 移动端点餐应用\|    |-- __init__.py|    |--views/|    |    |--index.py 首页、店铺选择、下订单、登录，退出等路由|    |    |--cart.py  购物车信息管理视图|    |    |--member.py 个人中心管理视图|    |    |--......|    ||    |-- admin.py|    |-- apps.py|    |-- models.py|    |-- tests.py|    |-- urls.py 配置了移动端点餐应用的所有请求路由||--myobject/ 项目目录|    |-- __init__.py|    |-- settings.py|    |-- urls.py|    |-- wsgi.py||--static/ 静态资源目录|    |-- uploads/   上传文件存储目录|    |-- myadmin/   后台管理静态资源目录|    |-- web/       大堂点餐静态资源目录|    |-- mobile/    移动端管理静态资源目录|    |      |-- css/ css文件夹|    |      |-- font/ 字体文件夹|    |      |-- img/ 图片资源文件夹|    |      |-- js/ js文件夹||--templates/ 模板目录|    |-- mobile/  移动端管理模板目录|    |      |-- base.html 移动端父模板文件|    |      |-- register.html 注册/登录页面|    |      |-- shop.html 店铺选择页面|    |      |-- index.html 当前店铺菜品展示页面（首页）|    |      |-- add_order.html 准备下订单页|    |      |-- member.html 个人中心页面|    |      |-- member_orders.html 个人中心里的订单列表页面|    |      |-- member_detail.html 订单详情页|    ||    |-- myadmin/ 后台管理模板目录|    |-- web/     大堂点餐模板目录||--manage.py 入口文件

  • 项目展示效果如下：

    开发步骤：

  • 创建并编写视图文件index.py  ,member.py

  • 配置移动端应用urls路由文件

  • 套用模板文件

    • 注册/登录页

    • 店铺选择切换页

    • 店铺菜品展示页

    • 会员中心页

=========================================================================

  • （1）创建并编辑视图文件：

  • 进入 mobile/views/ 目录，并创建： index.py和member.py 两个视图文件.

  • 编辑移动端 mobile/views/index.py 视图文件，初始代码如下

  • from django.shortcuts import render
from django.http import HttpResponse
from django.shortcuts import redirect
from django.urls import reverse# Create your views here.
def index(request):'''移动端首页'''return render(request,"mobile/index.html")def register(request):'''加载注册/登录页面'''return render(request,"mobile/register.html")def doRegister(request):'''执行注册/登录'''# 登录成功后跳转到店铺选择页面passdef shop(request):''' 呈现店铺选择页面 '''return render(request,"mobile/shop.html")def selectShop(request):''' 执行店铺选择 '''# 选择好店铺后会跳转到移动端首页passdef addOrders(request):''' 加载准备下订单页，由会员确认 '''return render(request,"mobile/addOrders.html")

    编写移动端 mobile/views/member.py 会员中心视图文件，初始代码如下

    from django.shortcuts import render
from django.http import HttpResponse
from django.shortcuts import redirect
from django.urls import reverse# 移动端个人中心def index(request):'''个人中心首页'''return render(request,"mobile/member.html")def orders(request):'''浏览会员订单'''return render(request,"mobile/member_orders.html")def detail(request):'''浏览会员订单详情'''return render(request,"mobile/member_detail.html")def logout(request):'''执行会员退出'''return render(request,"mobile/register.html")

    （2）配置移动端应用路由信息：

  • 打开并编辑路由文件：mobile/urls.py：
  • from django.urls import pathfrom mobile.views import index
from mobile.views import memberurlpatterns = [path('', index.index, name="mobile_index"), #移动端首页#会员注册/登录path('register', index.register, name="mobile_register"), #移动端会员注册/登录表单页path('doregister', index.doRegister, name="mobile_doregister"), #执行注册或登录#店铺选择path('shop', index.shop, name="mobile_shop"), #移动端店铺选择页path('shop/select', index.selectShop, name="mobile_selectshop"), #执行移动端店铺选择#订单处理path('orders/add', index.addOrders, name="mobile_addorders"), #加载移动端订单页#会员中心path('member', member.index, name="mobile_member_index"), #会员中心首页path('member/orders', member.orders, name="mobile_member_orders"), #加载会员中心订单页path('member/detail', member.detail, name="mobile_member_detail"), #加载会员订单详情页path('member/logout', member.logout, name="mobile_member_logout"), #执行退出
]

（3）套用静态模板

  • 将事先准备好的移动点餐端静态模板素材文件下载并解压。

  • 进入素材文件夹内，将提前准备好模板目录中的静态资源目录的：css、js、img和fonts 复制到项目的static/mobile/目录下。（需要的可以留言或私信）

编写模板文件

  • 安装如下文件目录要求准备对应的模板文件，并进行套用，事先移动端页面的静态布局：
myobject/ 项目目录||--templates/ 模板目录|    |-- mobile/  移动端管理模板目录|    |      |-- base.html 移动端父模板文件|    |      |-- register.html 注册/登录页面|    |      |-- shop.html 店铺选择页面|    |      |-- index.html 当前店铺菜品展示页面（首页）|    |      |-- add_order.html 准备下订单页|    |      |-- member.html 个人中心页面|    |      |-- member_orders.html 个人中心里的订单列表页面|    |      |-- member_detail.html 订单详情页|    |      ...|    ......

  • 使用模板继承套用模板文件：base.html，这个文件是根据原来的index.html文件提出来的功能部分，作为父模板。

  • 移动端父模板：templates/mobile/base.html 代码： 
    
{% load static %}
<!doctype html>
<html>
<head>
<!-- 声明文档使用的字符编码 -->
<meta charset='utf-8'>
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- 页面描述 -->
<meta name="description" content="不超过150个字符"/>
<!-- 页面关键词 -->
<meta name="keywords" content=""/>
<!-- 网页作者 -->
<meta name="author" content="guo,1057540638@qq.com"/>
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow"/>
<!-- 为移动设备添加 viewport -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=3,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,target-densityDpi=medium-dpi, minimal-ui" />
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz --><!-- iOS 设备 begin -->
<meta name="apple-mobile-web-app-title" content="标题">
<!-- 添加到主屏后的标题（iOS 6 新增） -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 --><!--meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" -->
<!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no"/>
<!-- 忽略页面中的数字识别为电话，忽略email识别 --><!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 不让百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- iOS 图标 begin -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
<!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
<!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
<!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
<!-- iOS 图标 end --><!-- iOS 启动画面 begin -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="img/App-ios-logo-152x152.png"/>
<!-- iPad 竖屏 768 x 1004（标准分辨率） -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="img/App-ios-logo-152x152.png"/>
<!-- iPad 竖屏 1536x2008（Retina） -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="img/App-ios-logo-152x152.png"/>
<!-- iPad 横屏 1024x748（标准分辨率） -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="img/App-ios-logo-152x152.png"/>
<!-- iPad 横屏 2048x1496（Retina） --><link rel="apple-touch-startup-image" href="img/App-ios-logo-152x152.png"/>
<!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
<link rel="apple-touch-startup-image" sizes="640x960" href="img/App-ios-logo-152x152.png"/>
<!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x1136" href="img/App-ios-logo-152x152.png"/>
<!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
<!-- iOS 启动画面 end --><!-- iOS 设备 end -->
<meta name="msapplication-TileColor" content="#000"/>
<!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileImage" content="icon.png"/>
<!-- Windows 8 磁贴图标 --><link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
<!-- 添加 RSS 订阅 -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<!-- 添加 favicon icon -->
<!-- sns 社交标签 begin -->
<!-- 参考微博API -->
<meta property="og:type" content="类型" />
<meta property="og:url" content="URL地址" />
<meta property="og:title" content="标题" />
<meta property="og:image" content="图片" />
<meta property="og:description" content="描述" />
<!-- sns 社交标签 end -->
<title>首页</title>
<link rel="stylesheet" href="{% static 'mobile/css/common.css' %}">
<link rel="stylesheet" href="{% static 'mobile/css/font.css' %}">
<link rel="stylesheet" href="{% static 'mobile/css/header.css' %}">
<link rel="stylesheet" href="{% static 'mobile/css/footer.css' %}">
<link rel="stylesheet" href="{% static 'mobile/css/index.css' %}">
<link rel="stylesheet" href="{% static 'mobile/css/responsive.css' %}">
</head><body ontouchstart="return true;">
{% block mainbody %}{% endblock %}
</body>
</html>
<script type="text/javascript" src="{% static 'mobile/js/jquery-1.7.1.min.js' %}"></script>
<script type="text/javascript" src="{% static 'mobile/js/swipe-min.js' %}"></script>
<script type="text/javascript" src="{% static 'mobile/js/common.js' %}"></script>
{% block myjavascript %}{% endblock %}

    移动端首页模板：templates/mobile/index.html 代码：

  • {% extends 'mobile/base.html' %}
{% load static %}{% block mainbody %}<!--头部--><header class="search" id="search"><div class="header"><h1>田老师红烧肉-朝阳将台路店</h1></div><!--通知公告/客服电话--></header><!--搜索内容--><div class="search-content" id="search-content"><i class="icon-font"></i></div><!--内容区--><article class="main-container"><!--左侧栏目--><div class="sortNav" id="sortNav"><p class="icon-sort line">分类导航</p><a href="javascript:void(0);" onclick="doselectList(this,1)">双拼套餐</a><a href="javascript:void(0);" onclick="doselectList(this,2)" class="select">盖饭</a><a href="javascript:void(0);" onclick="doselectList(this,3)">小菜</a><a href="javascript:void(0);" onclick="doselectList(this,4)">汤/饮料</a></div><!--右侧产品--><div class="sortContent line"><!--产品列表--><ol class="list-content" id="list-content1" style="display:none;"><li class="line"><a href="#"><div class="pro-img"><img src="{% static 'mobile/img/img25.jpg' %}" alt=""></div><div class="pro-con"><h3>法国猪肋排 1kg/袋</h3><font>瘦肉多，绝对超值精排 </font><b>¥35.00</b><p>乐果派旗舰店</p></div></a><a href="javascript:doCartAdd(1)" class="list-cart"><i class="icon-cartadd"></i></a></li><li class="line"><a href="#"><div class="pro-img"><img src="{% static 'mobile/img/img05.jpg' %}" alt=""></div><div class="pro-con"><h3>乌拉圭进口牛肋条</h3><font>BTV推荐，全网独家热销</font><b>¥59.00</b><p>乐果派旗舰店</p></div></a><a href="javascript:doCartAdd(2)" class="list-cart"><i class="icon-cartadd"></i></a></li><li class="line"><a href="#"><div class="pro-img"><img src="{% static 'mobile/img/img12.jpg' %}" alt=""></div><div class="pro-con"><h3>智利肋排脆骨 1kg/袋</h3><b>¥56.60</b><p>乐果派旗舰店</p></div></a><a href="#" class="list-cart"><i class="icon-cartadd"></i></a></li><li class="line"><a href="#"><div class="pro-img"><img src="{% static 'mobile/img/img28.jpg' %}" alt=""></div><div class="pro-con"><h3>温氏 农养鸡 袋装 （800g）</h3><b>¥38.80</b><p>乐果派旗舰店</p></div></a><a href="#" class="list-cart"><i class="icon-cartadd"></i></a></li></ol><ol class="list-content" id="list-content2" style="display:none;"><li class="line"><a href="#"><div class="pro-img"><img src="{% static 'mobile/img/img29.jpg' %}" alt=""></div><div class="pro-con"><h3>江西萍乡土鸡蛋</h3><font>林地散养，原粮喂养，蛋黄大，蛋清粘稠</font><b>¥12.80</b><p>乐果派旗舰店</p></div></a><a href="#" class="list-cart"><i class="icon-cartadd"></i></a></li><li class="line"><a href="#"><div class="pro-img"><img src="{% static 'mobile/img/img30.jpg' %}" alt=""></div><div class="pro-con"><h3>台湾皮蛋，松花蛋</h3><font></font><b>¥28.00<s>¥31.90</s></b><p>乐果派旗舰店</p></div></a><a href="#" class="list-cart"><i class="icon-cartadd"></i></a></li></ol><ol class="list-content" id="list-content3" style="display:none;"><li class="line"><a href="#"><div class="pro-img"><img src="{% static 'mobile/img/img07.jpg' %}" alt=""></div><div class="pro-con"><h3>萍乡土鸡蛋</h3><font></font><b>¥28.00<s>¥31.90</s></b><p>乐果派旗舰店</p></div></a><a href="#" class="list-cart"><i class="icon-cartadd"></i></a></li><li class="line"><a href="#"><div class="pro-img"><img src="{% static 'mobile/img/img16.jpg' %}" alt=""></div><div class="pro-con"><h3>新鲜猪肉</h3><font></font><b>¥28.00<s>¥31.90</s></b><p>乐果派旗舰店</p></div></a><a href="#" class="list-cart"><i class="icon-cartadd"></i></a></li><li class="line"><a href="#"><div class="pro-img"><img src="{% static 'mobile/img/img27.jpg' %}" alt=""></div><div class="pro-con"><h3>鸡肉</h3><font></font><b>¥28.00<s>¥31.90</s></b><p>乐果派旗舰店</p></div></a><a href="#" class="list-cart"><i class="icon-cartadd"></i></a></li></ol><br><br></div><!--购物车--><div class="cartContent fadeInBottom100" id="cartContent"><div class="LayerHeader line"><button class="Del" onclick="doCartClear()"><i class="icon-delete"></i>清空</button><button class="close pl"><i class="icon-plus rot45"></i></button></div><div class="cartContentList"><ul class="line-li"><!--li><img src="img/img01.jpg" alt=""><p>家乐都有机里脊肉 500g</p><span>¥150.00</span><div class="D-BuyNum"><button><i class="icon-reduce"></i></button><input type="number" readonly class="line" value="9"><button><i class="icon-plus"></i></button></div></li><li><img src="img/img02.jpg" alt=""><p>法国猪肋排 1kg/袋</p><span>¥150.00</span><div class="D-BuyNum"><button><i class="icon-reduce"></i></button><input type="number" class="line" value="9"><button><i class="icon-plus"></i></button></div></li><li><img src="img/img03.jpg" alt=""><p>乌拉圭进口（无骨）牛肋条 约1kg</p><span>¥150.00</span><div class="D-BuyNum"><button><i class="icon-reduce"></i></button><input type="number" class="line" value="9"><button><i class="icon-plus"></i></button></div></li--></ul></div><div class="LayerFooter">共计：<span>¥0.00</span></div></div></article><!--底部栏目--><menu><a href="{% url 'mobile_shop' %}"><i class="icon-selectmore"></i>切换店铺</a><!--a href="member-order.html"><i class="icon-allorders"></i>订单</a--><a href="javascript:void(0)" id="orderCart"><i class="icon-cart"><span>0</span></i>购物车</a><a href="{% url 'mobile_member_index' %}"><i class="icon-head"></i>我的</a><a><button onclick="location.href='{% url 'mobile_addorders' %}'">去结算</button></a></menu><!--弹出圈圈loading--><div class="spinner" style="display:none;"><i></i></div>
{% endblock %}{% block myjavascript %}
<script>
function doselectList(ob,m){$("#sortNav a").removeClass("select");$(ob).addClass("select");$("ol.list-content").hide();$("#list-content"+m).show();return false;
}cartlist = [];function doCartAdd(id){shoplist = [{'id':1,'name':'法国猪肋排','cover_pic':'img/img25.jpg','price':35.00,'num':1},{'id':2,'name':'乌拉圭进口牛肋条','cover_pic':'img/img05.jpg','price':90.00,'num':1}];shop = shoplist[id-1];var b=true;for(var i=0;i<cartlist.length;i++){if(cartlist[i].id==id){b = false;cartlist[i].num += 1;break;}}if(b){cartlist.push(shop);}doShowCart();}function doCartClear(){cartlist = [];doShowCart();
}function doShowCart(){var cartContent = $("#cartContent div.cartContentList ul.line-li");cartContent.empty()var total = 0.0;for(var i=0;i<cartlist.length;i++){var str = "<li>";str += '<img src="'+cartlist[i].cover_pic+'" alt=""><p>'+cartlist[i].name+'</p><span>¥'+cartlist[i].price+'</span>';str += '<div class="D-BuyNum"><button><i class="icon-reduce"></i></button><input type="number" readonly class="line" value="'+cartlist[i].num+'"><button><i class="icon-plus"></i></button></div>'str += "</li>";cartContent.append(str);total += cartlist[i].price * cartlist[i].num;}$("#cartContent div.LayerFooter span").html("￥"+total);$("#orderCart i.icon-cart span").html(cartlist.length);
}</script>
{% endblock %}

    注册/登录模板：templates/mobile/register.html 代码：

    {% extends 'mobile/base.html' %}
{% load static %}{% block mainbody %}<!--头部-->
<header><div class="header"><h1>登录</h1><a href="#" class="return"><i></i></a></div>
</header><!--内容区-->
<article class="main-container loginContent"><div class="list"><ul class="line"><li><i class="icon-head"></i><input type="text" id="name" placeholder="手机号码"></li><li class="code"><i class="icon-sms"></i><input type="tel" id="code" placeholder="手机收到的校验码"><button>点击获取</button></li></ul></div><div class="button"><button onclick="location.href='{% url 'mobile_shop' %}'">快速登录</button></div></article>{% endblock %}{% block myjavascript %}
<script type="text/javascript">$("button:contains('点击获取')").click(function(){bt = $(this);if(bt.html() != "点击获取"){return;}var phone = $("#name").val();//$.get();bt = $(this);var t=60;bt.html(t+"秒")var mytime = setInterval(function(){t= t-1;bt.html(t+"秒")if(t <= 0){clearInterval(mytime)bt.html("点击获取");}},1000);});
</script>
{% endblock %}

    店铺选择模板：templates/mobile/shop.html 代码：

    {% extends 'mobile/base.html' %}
{% load static %}{% block mainbody %}<!--头部--><header><div class="header"><h1>切换店铺</h1><a href="register.html" class="return"><i></i></a></div></header><!--内容区--><article class="main-container"><!--产品--><div class="list-content cartlist order-Pro"><ul><li class="line select"><a href="{% url 'mobile_index' %}"><div class="pro-img"><img src="{% static 'mobile/img/12341234.jpg' %}" alt=""></div><div class="pro-con"><h3>田老师红烧肉-朝阳将台路店</h3><p>电话：12345678906</p><p>北京市朝阳区将台乡东八间房村西临8号</p></div></a></li><li class="line select"><a href="{% url 'mobile_index' %}"><div class="pro-img"><img src="{% static 'mobile/img/12341234.jpg' %}" alt=""></div><div class="pro-con"><h3>田老师红烧肉-朝阳将台路店</h3><p>电话：12345678906</p><p>北京市朝阳区将台乡东八间房村西临8号</p></div></a></li><li class="line select"><a href="{% url 'mobile_index' %}"><div class="pro-img"><img src="{% static 'mobile/img/12341234.jpg' %}" alt=""></div><div class="pro-con"><h3>田老师红烧肉-朝阳将台路店</h3><p>电话：12345678906</p><p>北京市朝阳区将台乡东八间房村西临8号</p></div></a></li></ul></div></article>
{% endblock %}

    会员中心模板：templates/mobile/member.html 代码：

    {% extends 'mobile/base.html' %}
{% load static %}{% block mainbody %}<!--内容区-->
<article class="main-container"><div class="member-header"><button class="button" onclick="location.href='{% url 'mobile_index' %}'"><span class="return"><i></i></span></button><p> &nbsp; &nbsp;</p><div class="memberhead"><img src="{% static 'mobile/img/head03.jpg' %}" alt=""><i class="icon-woman"></i></div><ul><li class="line-w"><b> &nbsp; </b><h1>12345678909</h1></li></ul><div class="waves1 icon-waves"></div><div class="waves2 icon-waves"></div><div class="waves3 icon-waves"></div></div><div class="list"><ul class="line"><li onclick="location.href='{% url 'mobile_member_orders' %}'"><i class="icon-allorders"></i>我的订单<span class="icon-arrowright"></span></li></ul><ul class="line"><li onclick="location.href='member-data.html'"><i class="icon-head"></i>我的资料<span class="icon-arrowright"></span></li><li onclick="location.href='member-pwd.html'"><i class="icon-pwd"></i>修改密码<span class="icon-arrowright"></span></li><li onclick="location.href='member-coupon.html'"><i class="icon-coupons"></i>优惠券<span class="icon-arrowright"></span></li><li onclick="location.href='member-Addrees.html'"><i class="icon-address"></i>收货地址<span class="icon-arrowright"></span></li></ul><ul class="line"><li onclick="location.href='{% url 'mobile_member_logout' %}'"><i class="icon-out"></i>退出</li></div></article>{% endblock %}

    我的订单模板：templates/mobile/member_orders.html 代码：

{% extends 'mobile/base.html' %}
{% load static %}{% block mainbody %}
<!--头部-->
<header><div class="header"><h1>我的订单</h1><a href="{% url 'mobile_member_index' %}" class="return"><i></i></a></div>
</header><!--内容区-->
<article class="main-container"><!--选项卡--><nav class="memberOrder-nav line"><a href="#" class="line select">全部</a><a href="#" class="line">排队中</a><a href="#">已完成</a></nav><div class="memberOrder-header"></div><!--列表--><div class="memberOrder-list line" onclick="location.href='{% url 'mobile_member_detail' %}' "><p>订单编号：201505101551<span>（排队中）</span></p><div class="order-product line"><ul><li><img src="{% static 'mobile/img/img02.jpg' %}" alt=""><img src="{% static 'mobile/img/img06.jpg' %}" alt=""><img src="{% static 'mobile/img/img07.jpg' %}" alt=""><img src="{% static 'mobile/img/img08.jpg' %}" alt=""></li></ul></div><p>共<span>9</span>件，总价：<span>￥117.00</span></p></div><div class="memberOrder-list line" onclick="location.href='{% url 'mobile_member_detail' %}'"><p>订单编号：201505101551<span>（已完成）</span></p><div class="order-product line"><ul><li><img src="{% static 'mobile/img/img01.jpg' %}" alt=""><img src="{% static 'mobile/img/img03.jpg' %}" alt=""><img src="{% static 'mobile/img/img04.jpg' %}" alt=""><img src="{% static 'mobile/img/img05.jpg' %}" alt=""></li></ul></div><p>共<span>9</span>件，总价：<span>￥117.00</span></p></div><div class="memberOrder-list line" onclick="location.href='{% url 'mobile_member_detail' %}'"><p>订单编号：201505101551<span>（已完成）</span></p><div class="order-product line"><ul><li><img src="{% static 'mobile/img/img09.jpg' %}" alt=""><img src="{% static 'mobile/img/img10.jpg' %}" alt=""><img src="{% static 'mobile/img/img11.jpg' %}" alt=""><img src="{% static 'mobile/img/img12.jpg' %}" alt=""></li></ul></div><p>共<span>9</span>件，总价：<span>￥117.00</span></p></div><div class="memberOrder-list line" onclick="location.href='{% url 'mobile_member_detail' %}'"><p>订单编号：201505101551<span>（已完成）</span></p><div class="order-product line"><ul><li><img src="{% static 'mobile/img/img13.jpg' %}" alt=""><img src="{% static 'mobile/img/img14.jpg' %}" alt=""><img src="{% static 'mobile/img/img15.jpg' %}" alt=""><img src="{% static 'mobile/img/img16.jpg' %}" alt=""></li></ul></div><p>共<span>9</span>件，总价：<span>￥117.00</span></p></div></article>
{% endblock %}

订单详情模板：templates/mobile/member_detail.html 代码：

{% extends 'mobile/base.html' %}
{% load static %}{% block mainbody %}
<!--头部-->
<header><div class="header"><h1>订单详情</h1><a href="{% url 'mobile_member_orders' %}" class="return"><i></i></a></div>
</header><!--内容区-->
<article class="main-container"><!--订单编号--><div class="memberDetailheader line">订单号：201506111025 (排队中)</div><!--购买商品--><div class="list-content cartlist order-Pro memberDetaillist"><ul class="line-li"><li><a href="#"><div class="pro-img"><img src="{% static 'mobile/img/img01.jpg' %}" alt=""></div></a><div class="pro-con"><h3>家乐都有机里脊肉 500g</h3><b>￥150.00<s>￥180.90</s></b><p>&times;1</p></div></li><li><a href="#"><div class="pro-img"><img src="{% static 'mobile/img/img02.jpg' %}" alt=""></div></a><div class="pro-con"><h3>江西赣南脐橙</h3><b>￥49.90<s>￥69.90</s></b><p>&times;1</p></div></li><li><a href="#"><div class="pro-img"><img src="{% static 'mobile/img/img04.jpg' %}" alt=""></div></a><div class="pro-con"><h3>花果山 智利蓝莓</h3><b>￥79.00<s>￥90.90</s></b><p>&times;1</p></div></li><li><a href="#"><div class="pro-img"><img src="{% static 'mobile/img/img01.jpg' %}" alt=""></div></a><div class="pro-con"><h3>家乐都有机里脊肉 500g</h3><b>￥150.00<s>￥180.90</s></b><p>&times;1</p></div></li><li><a href="#"><div class="pro-img"><img src="{% static 'mobile/img/img02.jpg' %}" alt=""></div></a><div class="pro-con"><h3>江西赣南脐橙</h3><b>￥49.90<s>￥69.90</s></b><p>&times;1</p></div></li><li><a href="#"><div class="pro-img"><img src="{% static 'mobile/img/img04.jpg' %}" alt=""></div></a><div class="pro-con"><h3>花果山 智利蓝莓</h3><b>￥79.00<s>￥90.90</s></b><p>&times;1</p></div></li></ul></div><!--价格、下单时间--><div class="memberDetailPrice line"><p>共计：6 个 金额：￥118.4</p><p>下单时间：2015-04-28 19:39</p></div></article>
{% endblock %}

提交订单   templates/mobile/addOrders.html 代码：

{% extends 'mobile/base.html' %}
{% load static %}{% block mainbody %}<!--头部--><header><div class="header"><h1>提交订单</h1><a href="javascript:window.history.back();" class="return"><i></i></a></div></header><!--内容区--><article class="main-container add-product"><!--产品--><div class="list-content cartlist order-Pro"><ul><li class="line"><a href="#"><div class="pro-img"><img src="{% static 'mobile/img/img01.jpg' %}" alt=""></div></a><div class="pro-con"><h3>家乐都有机里脊肉 500g</h3><b>￥150.00<s>￥180.90</s></b>&times;1</div></li><li class="line"><a href="#"><div class="pro-img"><img src="{% static 'mobile/img/img02.jpg' %}" alt=""></div></a><div class="pro-con"><h3>江西赣南脐橙</h3><b>￥49.90<s>￥69.90</s></b>&times;1</div></li><li class="line"><a href="#"><div class="pro-img"><img src="{% static 'mobile/img/img04.jpg' %}" alt=""></div></a><div class="pro-con"><h3>花果山 智利蓝莓</h3><b>￥79.00<s>￥90.90</s></b>&times;1</div></li><li class="line"><a href="#"><div class="pro-img"><img src="{% static 'mobile/img/img06.jpg' %}" alt=""></div></a><div class="pro-con"><h3>赣南脐橙 （箱）</h3><b>￥26.00<s>￥36.90</s></b>&times;1</div></li><li class="line"><a href="#"><div class="pro-img"><img src="{% static 'mobile/img/img09.jpg' %}" alt=""></div></a><div class="pro-con"><h3>新疆阿克苏冰糖心苹果 6只/盒</h3><b>￥28.80<s>￥35.90</s></b>&times;1</div></li><li class="line"><a href="#"><div class="pro-img"><img src="{% static 'mobile/img/img10.jpg' %}" alt=""></div></a><div class="pro-con"><h3>红心猕猴桃</h3><b>￥92.80<s>￥110.00</s></b>&times;1</div></li><li class="line"><a href="#"><div class="pro-img"><img src="{% static 'mobile/img/img13.jpg' %}" alt=""></div></a><div class="pro-con"><h3>营养健康 散皮蛋（无泥大）</h3><b>￥1.50<s>￥2.50</s></b>&times;1</div></li></ul></div><!--支付方式--><div class="order-Delivery line" id="orderPays"><p>支付方式</p><ol class="FilterContentList"></ol><div class="list"><ul class="line"><li class="select"><i class="icon-alipay"></i>支付宝支付<em class="icon-correct"></em></li><li><i class="icon-weixinpay"></i>微信支付<em class="icon-correct"></em></li></ul></div></div><br><br></article><!--底部栏目--><footer><div class="button"><button>提交订单</button></div><h4>实付款：¥9106.5</h4></footer>{% endblock %}{% block myjavascript %}
<script type="text/javascript">$(document).ready(function(){//配送方式$("#orderDelivery ol li").bind('click',function(){if($(this).index()==0){$("#orderPays").show();$("#orderDelivery ol li:nth-child(1) span").addClass("select icon-correct");$("#orderDelivery ol li:nth-child(2) span").removeClass();$("#orderDelivery .order-Delivery-Pick").hide();}else{$("#orderPays").hide();$("#orderDelivery ol li:nth-child(1) span").removeClass();$("#orderDelivery ol li:nth-child(2) span").addClass("select icon-correct");$("#orderDelivery .order-Delivery-Pick").show();}})//支付方式$("#orderPays ol li").bind('click',function(){if($(this).index()==0){$("#orderPays ol li:nth-child(1) span").addClass("select icon-correct");$("#orderPays ol li:nth-child(2) span").removeClass();$("#orderPays ul").show();}else{$("#orderPays ol li:nth-child(1) span").removeClass();$("#orderPays ol li:nth-child(2) span").addClass("select icon-correct");$("#orderPays ul").hide();}})//支付方式$("#orderPays ul li").bind('click',function(){if($(this).index()==0){$("#orderPays ul li:nth-child(1)").addClass("select");$("#orderPays ul li:nth-child(2)").removeClass();}else{$("#orderPays ul li:nth-child(1)").removeClass();$("#orderPays ul li:nth-child(2)").addClass("select");}})var o = document.getElementById('date');o.onfocus = function(){this.removeAttribute('placeholder');};o.onblur = function(){if(this.value == '') this.setAttribute('placeholder','配送日期');};var o = document.getElementById('time');o.onfocus = function(){this.removeAttribute('placeholder');};o.onblur = function(){if(this.value == '') this.setAttribute('placeholder','配送时间');};})</script>
{% endblock %}

18.移动点餐端搭建----点餐系统移动端相关推荐

  1. 医药/医疗/互联网医疗服务平台/问诊/挂号/开药/处方/医生/医院/问诊订单管理/移动端问诊医疗系统/医生端处方开药系统/web端医药服务平台管理/axure原型/rp源文件/健康咨询/视频问诊/统计

    医药/医疗/互联网医疗服务平台/问诊/挂号/开药/处方/医生/医院/问诊订单管理/移动端问诊医疗系统/医生端处方开药系统/web端医药服务平台管理/处方管理/axure原型/rp源文件/健康咨询/视频 ...

  2. PVE 天龙八部TLBB服务端搭建（二）--服务端配置运行

    继上一篇<PVE 天龙八部TLBB服务端搭建(一)--linux环境搭建>环境搭建好之后,开始服务端的运行. 服务端运行环境分为linux和windows,我这里从某宝花1块2买了一个一键 ...

  3. SRM系统移动端有哪些功能？

    几十年前一些大型企业就开始使用供应商关系管理SCM系统来管理供应链,在那个时候无论是采购,还是供应商,都只能使用PC网页端进行登录操作.随着智能手机的普及,各种移动应用软件也快速进入人们的生活及工作, ...

  4. 【项目】基于SaaS的餐掌柜项目实战 阶段一 基于SaaS的餐掌柜项目实战 第1章 基础架构搭建 1 餐掌柜需求分析

    [项目]基于SaaS的餐掌柜项目实战 文章目录 [项目]基于SaaS的餐掌柜项目实战 阶段一 基于SaaS的餐掌柜项目实战 第1章 基础架构搭建 1 餐掌柜需求分析 1.1 餐饮行业分析 1.2 餐饮 ...

  5. 2021最新外卖霸王餐小程序、外系统霸王餐H5/APP程序源码|美团/饿了么霸王餐系统 粉丝裂变分销源码分享

    2021最新外卖霸王餐小程序.外系统霸王餐H5/APP程序源码|美团/饿了么霸王餐系统 粉丝裂变分销源码 外卖霸王餐系统小程序/H5/APP源码 2021最新霸王餐小程序 霸王餐小程序源码地址 成品演 ...

  6. 点餐推荐系统_麦当劳智慧餐厅的微信小程序终究将取代人工点餐和自助点餐机...

    R e t n e w s | 第 384 期 "自助点餐机是一种过渡形态的产品,微信小程序将取代它成为麦当劳未来智慧餐厅的流量入口和自主点餐主平台.通过微信小程序的在线平台+庞大的线下门店 ...

  7. Ubuntu 18.04上使用snort3搭建NIDS（三）| ELK可视化篇

    为最近项目上要用到snort3,但是找了很多博客都是snort2.9.x的安装与配置,所以只能靠着官网文档和自己的反复摸索来学习snort3相关的内容.后面将会把snort3相关的发一个系列的博客,这 ...

  8. JAVA点餐系统设计计算机毕业设计Mybatis+系统+数据库+调试部署

    JAVA点餐系统设计计算机毕业设计Mybatis+系统+数据库+调试部署 JAVA点餐系统设计计算机毕业设计Mybatis+系统+数据库+调试部署 本源码技术栈: 项目架构:B/S架构 开发语言:Ja ...

  9. 代餐启示录：代餐奶昔，成年人的精装饲料？【姜太公公】

    人和猫貌似都一样--在喂猫粮的时候,我陷入了沉思.如果这只猫生活在大自然里面,会吃些什么?可能会自己抓鱼吃吧,新鲜美味.可是被驯化后呢,它吃的是一粒一粒的精装猫饲料,有点可怜哈.虽然能吃饱,但是丧失了 ...

最新文章

  1. 技术转管理的“苦”，我懂......
  2. C语言中二维数组名与数组地址、首行地址、首行首元素地址关系与区别详解（初学者必须掌握）
  3. IIS7的Gzip压缩模式和IIS6的Gzip压缩模式性能对比 【转】
  4. stl vector与list详细对比
  5. 深度学习论文: Learning to Resize Images for Computer Vision Tasks及其PyTorch实现
  6. 移动、联通、电信APN
  7. Jetty9开发（1）
  8. word段落每行首字怎么对齐_怎样使word文章段落乖乖对齐！一个设置就行！
  9. vue 使用table2excel导出excel表格（带图片）
  10. 【SemiDrive源码分析】【X9芯片启动流程】12 - freertos_safetyos目录Cortex-R5 DIL2.bin 之 sdm_display_init 显示初始化源码分析
  11. 【管理心得之八】通过现象看本质，小王和小张谁更胜任？
  12. 浏览器数据库 IndexedDB 介绍
  13. 每天一个小技巧———idea恢复误删文件
  14. weblogic Unable to obtain lock on
  15. 使用webgl(three.js)搭建一个3D建筑，3D消防模拟——第三课
  16. C语言算法之将十进制数转换成二进制数
  17. 07【字符串的扩展】
  18. ARP局域网断网攻击
  19. php扩展dio,php_dio.dll下载|
  20. 基于freeswitch+linphone客户端开发对讲系统

热门文章

  1. 淘宝API接口：item_search_seller -搜索店铺列表
  2. 酒仙网IPO被终止：曾拟募资10亿 红杉与东方富海是股东
  3. openwrt消息通知方式linux,openwrt路由器也享受时钟报时快感编码过程
  4. 微服务时代之2017年五军之战：Net PHP谁先死
  5. 数字电路3（逻辑函数的卡诺图化简法）
  6. lombok get/set 方法未生效,解决办法
  7. 高德地图PC版国内首发室内地图
  8. python数据分析 - T检验与F检验：二组数据那个更好？（一）
  9. python写一个简单的12306抢票
  10. Qt 实现录音在线转文字