文章目录
一、订单页面设计
1.HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>小徐商城-用户中心</title>
<link rel="stylesheet" type="text/css" href="{{ static('css/reset.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ static('css/main.css') }}" />
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script type="text/javascript">
let username = "{{ username }}";
let mobile = "{{ mobile }}";
let email = "{{ email }}";
let email_active = "{{ email_active }}";
</script>
</head>
<body>
<div id="app" v-cloak=v-cloak>
<div class="header_con">
<div class="header">
<div class="welcome fl">欢迎来到小徐商城!</div>
<div class="fr">
<div v-if="username" class="login_btn fl">
欢迎您：<em>[[ username ]]</em>
<span>|</span>
{# url 本质是 reverse#}
<a href="{{ url('users:logout') }}">退出</a>
</div>
<div v-else=v-else class="login_btn fl">
<a href="{{ url('users:login') }}">登录</a>
<span>|</span>
<a href="{{ url('users:register') }}">注册</a>
</div>
<div class="user_link fl">
<span>|</span>
<a href="{{ url('users:center') }}">用户中心</a>
<span>|</span>
<a href="/carts">我的购物车</a>
<span>|</span>
<a href="{{ url('orders:placeorder') }}">我的订单</a>
</div>
</div>
</div>
</div>
<div class="search_bar clearfix">
<a href="index.html" class="logo fl"><img src="{{ static('images/logo.png') }}" /></a>
<div class="search_wrap fl">
<form method="get" action="/search/" class="search_con">
<input type="text" class="input_text fl" name="q" placeholder="搜索商品" />
<input type="submit" class="input_btn fr" name="" value="搜索" />
</form>
<ul class="search_suggest fl">
<li><a href="#">索尼微单</a></li>
<li><a href="#">优惠15元</a></li>
<li><a href="#">美妆个护</a></li>
<li><a href="#">买2免1</a></li>
</ul>
</div>
</div>
<div class="main_con clearfix">
<div class="left_menu_con clearfix">
<h3>用户中心</h3>
<ul>
<li><a href="{{ url('users:center') }}" class="active">· 个人信息</a></li>
<li><a href="../static/user_center_order.html">· 全部订单</a></li>
<li><a href="{{ url('users:showaddress') }}" >· 收货地址</a></li>
<li><a href="{{ url('users:updatepass') }}">· 修改密码</a></li>
</ul>
</div>
<div class="right_content clearfix">
<div class="info_con clearfix">
<h3 class="common_title2">基本信息</h3>
<ul class="user_info_list">
<li><span>用户名：</span>[[ username ]]</li>
<li><span>联系方式：</span>[[ mobile ]]</li>
<li>
<span>Email：</span>
<div v-if="set_email">
<input v-model="email" @blur="check_email" type="email" name="email" class="email" />
<input @click="save_email" type="button" name="" value="保 存" />
<input @click="cancel_email" type="reset" name="" value="取 消" />
<div v-show="error_email" class="error_email_tip">邮箱格式错误</div>
</div>
<div v-else=v-else>
<input v-model="email" type="email" name="email" class="email" readonly=readonly />
<div v-if="email_active">
已验证
</div>
<div v-else=v-else>
待验证<input @click="save_email" :disabled="send_email_btn_disabled" type="button" :value="send_email_tip" />
</div>
</div>
</li>
</ul>
</div>
<h3 class="common_title2">最近浏览</h3>
<div class="has_view_list">
<ul class="goods_type_list clearfix">
<li>
<a href="../static/detail.html"><img src="{{ static('images/goods/goods003.jpg') }}" /></a>
<h4><a href="../static/detail.html">360手机 N6 Pro 全网通</a></h4>
<div class="operate">
<span class="price">￥2699.00</span>
<span class="unit">台</span>
<a href="#" class="add_goods" title="加入购物车"></a>
</div>
</li>
<li>
<a href="../static/detail.html"><img src="{{ static('images/goods/goods004.jpg') }}" /></a>
<h4><a href="#">360手机 N6 Pro 全网通</a></h4>
<div class="operate">
<span class="price">￥2699.00</span>
<span class="unit">台</span>
<a href="#" class="add_goods" title="加入购物车"></a>
</div>
</li>
<li>
<a href="../static/detail.html"><img src="{{ static('images/goods/goods005.jpg') }}" /></a>
<h4><a href="#">360手机 N6 Pro 全网通</a></h4>
<div class="operate">
<span class="price">￥2699.00</span>
<span class="unit">台</span>
<a href="#" class="add_goods" title="加入购物车"></a>
</div>
</li>
<li>
<a href="../static/detail.html"><img src="{{ static('images/goods/goods006.jpg') }}" /></a>
<h4><a href="#">360手机 N6 Pro 全网通</a></h4>
<div class="operate">
<span class="price">￥2699.00</span>
<span class="unit">台</span>
<a href="#" class="add_goods" title="加入购物车"></a>
</div>
</li>
<li>
<a href="../static/detail.html"><img src="{{ static('images/goods/goods007.jpg') }}" /></a>
<h4><a href="#">急速路由</a></h4>
<div class="operate">
<span class="price">￥64.5</span>
<span class="unit">6.45/500g</span>
<a href="#" class="add_goods" title="加入购物车"></a>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="footer no-mp">
<div class="foot_link">
<a href="#">关于我们</a>
<span>|</span>
<a href="#">联系我们</a>
<span>|</span>
<a href="#">招聘人才</a>
<span>|</span>
<a href="#">友情链接</a>
</div>
<p>CopyRight © 2022 福建小徐网络科技有限公司 All Rights Reserved</p>
<p>电话：13960699696 闽ICP备*******8号</p>
</div>
</div>
<script type="text/javascript" src="{{ static('js/host.js') }}"></script>
<script type="text/javascript" src="{{ static('js/common.js') }}"></script>
<script type="text/javascript" src="{{ static('js/user_center_info.js') }}"></script>
</body>
</html>
2.JS
var vm = new Vue({
el: '#app',
// 修改Vue变量的读取语法，避免和django模板语法冲突
delimiters: ['[[', ']]'],
data: {
host: host,
order_submitting: false, // 正在提交订单标志
pay_method: 2, // 支付方式,默认支付宝支付
nowsite: '', // 默认地址
payment_amount: '',
username: '',
},
mounted(){
// 初始化
this.payment_amount = payment_amount;
// 绑定默认地址
this.nowsite = 1;
this.username = getCookie('username');
console.log(getCookie('username'))
},
methods: {
}
});
3.后端业务逻辑
def get(self,request):
# 1.获取用户信息
user = request.user
# 2.获取登陆用户的地址信息
try:
addresses = Address.objects.filter(user=user,is_deleted=False)
except Exception as e:
logger.error(e)
return render(request,'place_order.html',context={'errmsg':'地址查询失败'})
# 3.获取登陆用户选中的商品信息redis
# 3.1 连接redis
redis_conn = get_redis_connection('carts')
# 3.2 hash(选中和未选中)
id_count=redis_conn.hgetall('carts_%s'%user.id)
# 3.3 set
selected_ids=redis_conn.smembers('selected_%s'%user.id)
# 3.4 对数据进行一下转换,同时我们重新组织数据,
# 这个数据只包含选中的商品id和数量
# {sku_id:count,sku_id:count}
selected_carts={}
for id in selected_ids:
selected_carts[int(id)]=int(id_count[id])
# 3.5 根据id查询商品的详细信息
ids = selected_carts.keys()
# [id,id,...]
skus = SKU.objects.filter(id__in=ids)
# [sku,sku,sku]
# 3.6 统计 总金额和总数量 运费信息
total_count=0 # 总数量
total_amount=0 # 总金额
freight=10 # 运费
# 循环变量 来添加 商品数量小计和金额 以及统计 总金额和总数量
for sku in skus:
# 每个商品的数量小计和金额小计
sku.count=selected_carts[sku.id]
sku.amount=(sku.count*sku.price)
# 总金额和总数量
total_count += selected_carts[sku.id]
total_amount += (sku.count*sku.price)
context = {
'addresses': addresses,
'skus': skus,
'total_count': total_count,
'total_amount': total_amount,
'freight': freight,
'payment_amount': total_amount + freight
}
return render(request,'place_order.html',context=context)
二、页面效果
