【愚公系列】2022年01月 Django商城项目 32-订单页面设计
2022/2/4 23:44:16
本文主要是介绍【愚公系列】2022年01月 Django商城项目 32-订单页面设计,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
文章目录
- 一、订单页面设计
- 1.HTML
- 2.JS
- 3.后端业务逻辑
- 二、页面效果
一、订单页面设计
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)
二、页面效果
这篇关于【愚公系列】2022年01月 Django商城项目 32-订单页面设计的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-26解决google chrome helper 内存占用较高!
- 2024-04-01got an unexpected keyword argument
- 2024-03-30维多利亚的秘密 golang入坑系统
- 2024-03-29mongodb sort by date
- 2024-03-29go swagger
- 2024-03-25mongodb cdc
- 2024-03-25how to use go in vscode
- 2024-03-22mongooseserverselectionerror: connect econnrefused ::1:27017
- 2024-03-21pymongo insert_many
- 2024-03-18projection mongodb