# Django框架之前台订单界面
# index.html
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>订单-确认订单</title>
<link href="/static/myweb/public/img/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="/static/myweb/public/img/favicon.ico" rel="icon" type="image/x-icon">
<!-- Bootstrap -->
<link href="/static/myweb/public/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="/static/myweb/public/js/jquery-1.12.4.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/static/myweb/public/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="/static/myweb/public/css/global.css">
<link rel="stylesheet" type="text/css" href="/static/myweb/public/css/app.css">
<link rel="stylesheet" type="text/css" href="/static/myweb/public/css/cart.css">
<link rel="stylesheet" type="text/css" href="/static/myweb/public/css/cart-app.css">
<script type="text/javascript" src="/static/myweb/public/js/rem.js"></script>
<script type="text/javascript" src="/static/myweb/public/js/topNav.js"></script>
</head>
<body class="cart-app">
<!-- 导航 -->
<div class="layout-header" id="scroll-wrap">
<nav class="navbar navbar-default header hidden-xs hidden-sm">
<div class="container clearfix">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="layout-header-logo navbar-left">
<a target="_blank" href="./index.html" class="layout-header-logo-link" alt="魅族科技">
<img src="/static/myweb/public/img/logo.png">
</a>
</div>
<div class="navbar-left">
<ol class="breadcrumb">
<li >购物车</li>
<li class="active">确认订单</li>
<li>在线支付</li>
<li>完成 </li>
</ol>
</div>
</div>
</div>
</nav>
</div>
<!-- 导航 E-->
<!-- 主内容区域 -->
<div class="mainbody cart">
<div class="container">
<!-- 购物车详情头 -->
<table class="cart-header">
<tbody>
<tr>
<td class="cart-col-select col-md-3 col-xs-3 col-sm-3">
商品图片
</td>
<td class="cart-col-name col-md-3 hidden-xs hidden-sm">商品</td>
<td class="cart-col-price col-md-2 hidden-xs hidden-sm">单价(元)</td>
<td class="cart-col-number col-md-2 hidden-xs hidden-sm">数量</td>
<td class="cart-col-total col-md-1 hidden-xs hidden-sm">小计(元)</td>
</tr>
</tbody>
</table><!-- 购物车详情头 E-->
<!-- 购物清单信息列表 -->
<div class="cart-merchant-list">
<div class="cart-merchant">
<table class="cart-merchant-body">
<tbody>
{% for v in goods %}
<tr class="cart-product" id="pro5">
<td class="cart-col-select col-md-3 col-xs-4 col-sm-4">
<a href="meilanx.html" class="cart-product-link" target="_blank">
<img src="/static/goods/{{ v.picname }}" class="cart-product-img" alt="魅蓝 X">
</a>
</td>
<td class="cart-col-name col-md-3 col-xs-8 col-sm-8">
<a href="meilanx.html" class="cart-product-link" target="_blank">
<span class="cart-product-desc">{{ v.title }}</span>
</a>
</td>
<td class="cart-col-price col-md-2 hidden-xs hidden-sm">
<p>
<span class="cart-product-price">{{ v.price }}</span>
</p>
</td>
<td class="cart-col-number col-md-2 hidden-xs hidden-sm">
<div class="cart-product-number-adder">
<p class="cart-product-number-max show"></p>
<p>{{ v.num }}</p>
</div>
</td>
<td class="cart-col-total col-md-1 hidden-xs hidden-sm">
<span class="cart-product-price total">{% widthratio v.num 1 v.price %}</span>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div><!-- 购物清单信息列表 E-->
</div>
<br>
<form action="{% url 'ordercreate' %}" method="post">
{% csrf_token %}
<div class="container" >
<div class="row">
<div class="col-md-10" style="background:#f5f5f5">
收货人: <input type="text" name="uname">
收货地址:<input type="text" name="address">
收货电话:<input type="text" name="phone">
邮编:<input type="text" name="pcode">
<input type="hidden" name="total" value="{{ total }}">
</div>
</div>
</div>
<br>
<!-- 结算详情 -->
<div class="cart-footer" id="cartFooter">
<div class="container">
<div class="cart-footer-left col-md-6 col-xs-4 col-sm-4">
<!-- <span class="cart-remove-selected" id="removeSelected">删除选中的商品</span> -->
<span class="cart-footer-count">
共
<span class="cart-footer-num" id="totalCount">{{ subnum }}</span>
件商品
</span>
</div>
<div class="cart-footer-right col-md-5 col-md-offset-1 col-sm-offset-2 col-xs-8 col-sm-6">
<span class="cart-footer-sum">
<span class="cart-footer-text">已优惠</span>
<span class="cart-footer-num red" id="totalDiscount">0.00</span>
<span class="cart-footer-text">元， 合计(不含运费)：</span>
<span class="cart-footer-total" id="totalPrice">{{ total }}</span>
</span>
<button class="mz-btn success" id="cartSubmit">提交订单</button>
</div>
</div>
</div><!-- 结算详情 E-->
</form>
</div>
<!-- 主内容区域 E-->
</body>
</html># buy.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>支付页面</title>
</head>
<body>
<center>
<div style="width:500px;height:500px;border:1px solid red">
<h3>订单号:{{ order.id }}</h3>
<h3>总价:{{ order.total }}</h3>
<div>
<img src="/static/ma.jpg">
</div>
</div>
</center>
</body>
</html># myorder.html
<!DOCTYPE html>
<html lang="en" class="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>我的订单-魅族商城</title>
<meta name="description" content="魅族商城是魅族面向全国服务的官方电子商务平台,提供魅族PRO系列、魅族MX系列和魅蓝系列等产品的预约和购买.官方正品,全国联保.">
<meta name="keywords" content="魅族官方在线商店、魅族在线商城、魅族官网在线商店、魅族商城">
<link href="/static/myweb/public/img/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="/static/myweb/public/img/favicon.ico" rel="icon" type="image/x-icon">
<!-- Bootstrap -->
<link href="/static/myweb/public/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="/static/myweb/public/js/jquery-1.12.4.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/static/myweb/public/js/bootstrap.min.js"></script>
<!-- 兼任ie9以下 -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- 自定义 -->
<link rel="stylesheet" type="text/css" href="/static/myweb/public/css/global.css">
<link rel="stylesheet" type="text/css" href="/static/myweb/public/css/app.css">
<link rel="stylesheet" type="text/css" href="/static/myweb/public/css/order.css">
<link rel="stylesheet" type="text/css" href="/static/myweb/public/css/order-app.css">
<script type="text/javascript" src="/static/myweb/public/js/rem.js"></script>
<script type="text/javascript" src="/static/myweb/public/js/topNav.js"></script>
</head>
<body class="order-app">
<!-- 主内容区域 -->
<div class="mainbody order">
<div class="container">
<!-- 面包屑导航 -->
<div class="crumbs col-xs-12 col-sm-12">
<ol class="breadcrumb">
<li class="hidden-xs hidden-sm"><a href="{% url 'index' %}" class="layout-header-nav-link">首页</a></li>
<li class="hidden-xs hidden-sm"><a href="member.html">我的商城</a></li>
<li class="active">我的订单</li>
</ol>
</div><!-- 面包屑导航 E-->
<div class="main clearfix">
<!-- 左侧导航 -->
<div class="left-nav f-fl col-md-4 hidden-xs hidden-sm">
<div class="nav-main">
<a href="javascript:;" class="type-title"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>订单中心</a>
<a href="#" class="ml active" >我的订单</a>
<a href="#" class="ml " >我的回购单</a>
<a href="#" class="ml " >我的意外保</a>
<a href="javascript:;" class="type-title"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>个人中心</a>
<a href="#" class="ml " >地址管理</a>
<a href="#" class="ml " >我的收藏</a>
<a href="#" class="ml " >消息提醒</a>
<a href="#" class="ml " >建议反馈</a>
</div>
</div><!-- 左侧导航 E-->
<!-- 右侧内容展示 -->
<div class="right-content f-fr col-md-8 col-xs-12 col-sm-12">
<div class="order-main">
<div class="type-tab-btn">
<a href="javascript:;" class="allOrder active col-20" data-type="-1">全部订单</a><i class="line hidden-xs hidden-sm">|</i>
<a class="waitPay col-20" href="javascript:;" data-type="0">待付款<span class="amount _actAmount"></span></a><i class="line hidden-xs hidden-sm">|</i>
<a class="waitDeliver col-20" href="javascript:;" data-type="1">待发货</a><i class="line hidden-xs hidden-sm">|</i>
<a class="hasDeliver col-20" href="javascript:;" data-type="2">已发货</a><i class="line hidden-xs hidden-sm">|</i>
<a class="other col-20" href="javascript:;" data-type="99">其他</a>
</div>
<div class="list-head hidden-xs hidden-sm">
<ul class="clearfix">
<li class="w50">
<select id="checkType" class="check-type">
<option value="0">近三个月的订单</option>
<option value="1">全部订单</option>
</select>
订单明细
</li>
<li class="w125">售后</li>
<li class="w125">金额</li>
<li class="w125">状态</li>
<li class="w125">操作</li>
</ul>
</div>
<div id="tableList" class="type-contain ui-load-container">
<div class="ui-load-content"><input id="unPayNum" value="0" type="hidden">
<table class="orderItem">
<tbody>
{% for v in myorders%}
<tr class="trHead hidden-xs hidden-sm">
<td colspan="4" class="title clearfix">
<div class="f-fl">
下单时间：<span class="time">{{ v.addtime }}</span>
订单号：<span class="orderNumber">{{ v.id }}</span>
</div>
</td>
</tr>
<tr class="list-box b-l b-r b-b">
<td class="list b-r j-iamCart">
<div class="cart-wrap j-CartWrap">
<div class="shop j-shop j-amLight">
{% for vv in v.sub %}
<div class="item b-t clearfix j-item j-iamMain">
<a class="productDetail nameWidth col-xs-4 col-sm-4" href="#" target="_blank">
<img src="/static/goods/{{ vv.picname }}" class="f-fl">
</a>
<div class="describe f-fl col-xs-8 col-sm-8">
<div class="vertic clearfix">
<span class="clearfix">
<a class="productDetail nameWidth" href="#" target="_blank">
<i>{{ vv.title }}</i> </a>
<p>
￥{{ vv.price }}×{{vv.num}}
</p>
</span>
</div>
</div>
<input class="orderSn" value="51090244361541573081" type="hidden">
<input class="isCart" value="1" type="hidden">
<input class="orderSnSon" value="21090244361541575081" type="hidden">
</div>
{% endfor %}
</div>
</div>
</td>
<td class="b-r w125 center price b-t hidden-xs hidden-sm">
<div class="priceDiv">
￥ {{ v.total }}
</div>
</td>
<td class="b-r w125 center state b-t hidden-xs hidden-sm">
<div class="stateDiv">
<div>
{% if v.status == 0%}
已完成
{% elif v.status == 1%}
待收货
{% elif v.status == 2%}
未支付
{% elif v.status == 3%}
已取消
{% endif %}
<br></div>
</div>
</td>
<td class="w125 center opreat b-t hidden-xs hidden-sm">
<ul>
<li class="more"><a href="#" target="_blank">查看详情</a></li>
</ul>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 主内容区域 E-->
<!-- 底部区域 -->
<footer class="layout-footer hidden-xs hidden-sm">
<div class="container">
<div class="layout-footer-top clearfix">
<ul class="layout-footer-services clearfix">
<li class="layout-footer-services-item">
<a href="#" class="layout-footer-services-link" target="_blank">
<span class="layout-footer-service-wrap">
<i class="glyphicon glyphicon-sd-video"></i>
</span>
<span class="layout-footer-services-text">顺丰包邮</span></a>
</li>
<li class="layout-footer-services-item">
<a href="#" class="layout-footer-services-link" target="_blank">
<span class="layout-footer-service-wrap">
<i class="glyphicon glyphicon-flash"></i>
</span>
<span class="layout-footer-services-text">100+ 城市次日送达</span></a>
</li>
<li class="layout-footer-services-item">
<a href="#" class="layout-footer-services-link" target="_blank">
<span class="layout-footer-service-wrap">
<i class="glyphicon glyphicon-repeat"></i>
</span>
<span class="layout-footer-services-text">7 天无理由退货</span></a>
</li>
<li class="layout-footer-services-item">
<a href="#" class="layout-footer-services-link" target="_blank">
<span class="layout-footer-service-wrap">
<i class="glyphicon glyphicon-refresh"></i>
</span>
<span class="layout-footer-services-text">15 天换货保障</span></a>
</li>
<li class="layout-footer-services-item">
<a href="#" class="layout-footer-services-link" target="_blank">
<span class="layout-footer-service-wrap">
<i class="glyphicon glyphicon-wrench"></i>
</span>
<span class="layout-footer-services-text">1 年免费保修</span></a>
</li>
<li class="layout-footer-services-item">
<a href="#" class="layout-footer-services-link" target="_blank">
<span class="layout-footer-service-wrap">
<i class="glyphicon glyphicon-map-marker"></i>
</span>
<span class="layout-footer-services-text">2300+ 线下体验店</span></a>
</li>
<li class="layout-footer-services-item">
<a href="#" class="layout-footer-services-link" target="_blank">
<span class="layout-footer-service-wrap">
<i class="glyphicon glyphicon-sort"></i>
</span>
<span class="layout-footer-services-text">远程支持服务</span></a>
</li>
<li class="layout-footer-services-item">
<a href="#" class="layout-footer-services-link" target="_blank" data-mtype="wmz_public_foot_homerepair">
<span class="layout-footer-service-wrap">
<i class="glyphicon glyphicon-home"></i>
</span>
<span class="layout-footer-services-text">上门快修</span></a>
</li>
</ul>
<div class="layout-footer-contact">
<p class="layout-footer-contact-desc">24小时全国服务热线</p>
<a href="tel:400-788-3333" class="layout-footer-contact-tel">400-788-3333</a>
<p>
<a href="javascript:void(0);" class="layout-footer-contact-online">
<i class="layout-font layout-font-talk1"></i>
<span class="text">在线客服</span>
</a>
</p>
</div>
</div>
<div class="layout-footer-bottom clearfix">
<ul class="layout-footer-interlock clearfix">
<li class="layout-footer-interlock-item">
<a href="#" target="_blank" class="layout-footer-interlock-link">了解魅族</a></li>
<li class="layout-footer-interlock-item">
<a href="#" target="_blank" class="layout-footer-interlock-link">加入我们</a></li>
<li class="layout-footer-interlock-item">
<a href="#" target="_blank" class="layout-footer-interlock-link">联系我们</a></li>
<li class="layout-footer-interlock-item">
<a href="#" target="_blank" class="layout-footer-interlock-link">Flyme</a></li>
<li class="layout-footer-interlock-item">
<a href="#" target="_blank" class="layout-footer-interlock-link">魅族社区</a></li>
<li class="layout-footer-interlock-item">
<a href="#" target="_blank" class="layout-footer-interlock-link">天猫旗舰店</a></li>
<li class="layout-footer-interlock-item">
<a href="#" target="_blank" class="layout-footer-interlock-link">问题反馈</a></li>
<li class="layout-footer-interlock-item">
<a href="#" target="_blank" class="layout-footer-interlock-link">线上销售授权名单公示</a>
</li>
</ul>
<div class="layout-footer-copyright clearfix">
<span class="layout-footer-copyright-left">
<a class="layout-footer-copyright-link copyright-text">©2017 Meizu Telecom Equipment Co., Ltd. All rights reserved.</a>
<a class="layout-footer-copyright-link" hidefocus="true" href="#" target="_blank">粤ICP备13003602号-2</a>
<a class="layout-footer-copyright-link" hidefocus="true" href="#" target="_blank">合字B2-20170010</a>
<a class="layout-footer-copyright-link" hidefocus="true" href="#" target="_blank">营业执照</a>
<a class="layout-footer-copyright-link" hidefocus="true" href="3" target="_blank">法律声明</a>
<a class="layout-footer-copyright-link">粤公网安备 44049102496009 号</a>
<a class="layout-footer-copyright-link" hidefocus="true" href="#" rel="nofollow" target="_blank">
<i class="layout-icon layout-icon-license"></i>
</a>
<a class="layout-footer-copyright-link" hidefocus="true" href="#" rel="nofollow" target="_blank">
<i class="layout-icon layout-icon-wel"></i>
</a>
<a class="layout-footer-copyright-link" hidefocus="true" href="#" rel="nofollow" target="_blank">
<i class="layout-icon layout-icon-trust"></i>
</a>
</span>
<ul class="layout-footer-media clearfix">
<li class="layout-footer-media-item">
<a href="http://weibo.com/meizumobile" class="layout-footer-media-link">
<i class="layout-font layout-font-weibo"></i>
</a>
</li>
<li class="layout-footer-media-item">
<a href="javascript:void(0);" class="layout-footer-media-link wechat">
<i class="layout-font layout-font-wechat"></i>
<div class="layout-footer-media-wechat-qrcode">
<img class="layout-footer-media-wechat-img" src="" alt="微信二维码">
</div>
</a>
</li>
<li class="layout-footer-media-item">
<a href="#" class="layout-footer-media-link">
<i class="layout-font layout-font-qzone"></i>
</a>
</li>
</ul>
</div>
</div>
</footer>
<!-- 底部区域 E -->
<!-- 返回顶部 -->
<div class="layout-magnet layout-magnet-show">
<div class="layout-magnet-item layout-magnet-item-top">
<a href="javascript:void(0);" class="layout-magnet-link" data-mtype="wmz_public_cbxf_top">
<div class="layout-magnet-icon">
<i class="glyphicon glyphicon-menu-up"></i>
</div>
</a>
</div>
</div>
<!-- 返回顶部 E-->
<script type="text/javascript">//回顶部
backTop();
</script>
</body>
</html>
兄弟连学python
Python学习交流、资源共享群：563626388 QQ
237
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
