标签：sku count 01 url 32 Django amount static id
文章目录
一、订单页面设计
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)
二、页面效果
标签：sku,count,01,url,32,Django,amount,static,id 来源： https://blog.csdn.net/aa2528877987/article/details/122784690
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。