14. 项目实战前台之个人中心
(1). 个人中心简介：
会员个人中心模块：浏览个人信息、修改个人信息、密码重置、查看个人订单和处理订单等处理操作。
由于个人中心的信息操作大部分都是在网站后台锻炼过，所以本节重点讲解个人中心的订单管理。
(2). 项目urls路由信息配置
- 打开根路由文件：myobject/web/urls.py路由文件，编辑路由配置信息:
from django.conf.urls import url
from web.views import index,cart,orders,vip
urlpatterns = [
#网站前台
# ... ...
# 会员及个人中心等路由配置
# ... ...
# 购物车路由
# ... ...
# 订单处理
# ... ...
# 会员中心
url(r'^vip/orders$', vip.viporders,name='vip_orders'), #会员中心我的订单
url(r'^vip/odstate$', vip.odstate,name='vip_odstate'), #修改订单状态（确认收货）
#url(r'^vip/info$', vip.info,name='vip_info'), #会员中心的个人信息
#url(r'^vip/update$', vip.update,name='vip_update'), #执行修改会员信息
#url(r'^vip/resetps$', vip.resetps,name='vip_resetps'), #重置密码表单
#url(r'^vip/doresetps$', vip.doresetps,name='vip_doresetps'), #执行重置密码
]
(3). 编辑视图文件
- 新建视图文件：myobject/web/views/vip.py 视图文件，并进行编辑
from django.shortcuts import render
from django.http import HttpResponse
from django.shortcuts import redirect
from django.core.urlresolvers import reverse
from common.models import Users,Goods,Types,Orders,Detail
# 公共信息加载
def loadinfo(request):
'''公共信息加载'''
context = {}
lists = Types.objects.filter(pid=0)
context['typelist'] = lists
return context
# 我的订单
def viporders(request):
'''当前用户订单'''
context = loadinfo(request)
# 获取当前用户的所有订单信息
odlist = Orders.objects.filter(uid=request.session['vipuser']['id'])
# 遍历当前用户的所有订单，添加他的订单详情
for od in odlist:
delist = Detail.objects.filter(orderid=od.id)
# 遍历每个商品详情，从Goods中获取对应的图片
for og in delist:
og.picname = Goods.objects.only('picname').get(id=og.goodsid).picname
od.detaillist = delist
# 将整理好的订单信息放置到模板遍历中
context['orderslist'] = odlist
return render(request,"web/viporders.html",context)
def odstate(request):
''' 修改订单状态 '''
try:
oid = request.GET.get("oid",'0')
ob = Orders.objects.get(id=oid)
ob.state = request.GET['state']
ob.save()
return redirect(reverse('vip_orders'))
except Exception as err:
print(err)
return HttpResponse("订单处理失败！")
(4). 编写模板文件
- 4.1. 新建订单信息显示模板：/templates/web/viporders.html。
{% extends "web/base.html" %}
{% load static from staticfiles %}
{% block mylink %}
<link rel="stylesheet" type="text/css" href="{% static 'web/css/order.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'web/css/order-app.css' %}">
{% endblock %}
{% block mainbody %}
<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="index.html">首页</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="order.html" 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">
<!-- 每个订单信息 -->
{% for orders in orderslist %}
<div class="ui-load-content" style="margin-top: 20px">
<table class="orderItem">
<tbody>
<tr class="trHead hidden-xs hidden-sm">
<td colspan="4" class="title clearfix">
<div class="f-fl">
订单号：<span class="time">201700{{ orders.id }}</span>
收货人：<span class="orderNumber">{{ orders.linkman }}</span>
收货地址：<span class="orderNumber">{{ orders.address }}</span>
联系电话：<span class="orderNumber">{{ orders.phone }}</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 detail in orders.detaillist %}
<div class="item b-t clearfix j-item j-iamMain" style="height:110px;">
<a class="productDetail nameWidth col-xs-4 col-sm-4" href="{% url 'detail' detail.goodsid %}" target="_blank">
<img src="/static/goods/s_{{detail.picname}}" style="width:75px;height:75px" 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>{{ detail.name }}</i></a>
<p>
￥{{ detail.price}}×{{ detail.num}}
</p>
</span>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</td>
<td class="b-r w125 center price b-t hidden-xs hidden-sm">
<div class="priceDiv">
￥ {{ orders.total }} 元
</div>
</td>
<td class="b-r w125 center state b-t hidden-xs hidden-sm">
<div class="stateDiv">
<div>
{% if orders.state == 0 %}
新订单 <br/><br/><br/>
【<a href="{% url 'vip_odstate' %}?oid={{orders.id}}&state=3">撤销订单</a>】
{% elif orders.state == 1 %}
已发货 <br/><br/>
【<a href="{% url 'vip_odstate' %}?oid={{orders.id}}&state=2">确认收货</a>】
{% elif orders.state == 2 %}
已完成
{% elif orders.state == 3 %}
无效订单
{% else %}
未知
{% endif %}
</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>
</tbody>
</table>
</div>
{% endfor %}
<!-- 每个订单信息 end-->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 主内容区域 E-->
{% endblock %}