|
|
<!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>
|
|
|
{% load static %}
|
|
|
<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' %}">
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="header_con">
|
|
|
<div class="header">
|
|
|
<div class="welcome fl">欢迎来到天天生鲜!</div>
|
|
|
<div class="fr">
|
|
|
{% if user.is_authenticated %}
|
|
|
<div class="login_btn fl">
|
|
|
欢迎您：<em>{{ user.username }}</em>
|
|
|
<span>|</span>
|
|
|
<a href="{% url 'user:logout' %}">退出</a>
|
|
|
</div>
|
|
|
{% else %}
|
|
|
<div class="login_btn fl">
|
|
|
<a href="{% url 'user:login' %}">登录</a>
|
|
|
<span>|</span>
|
|
|
<a href="{% url 'user:register' %}">注册</a>
|
|
|
</div>
|
|
|
{% endif %}
|
|
|
<div class="user_link fl">
|
|
|
<span>|</span>
|
|
|
<a href="{% url 'user:user' %}">用户中心</a>
|
|
|
<span>|</span>
|
|
|
<a href="{% url 'cart:show' %}">我的购物车</a>
|
|
|
<span>|</span>
|
|
|
<a href="{% url 'user:order' 1 %}">我的订单</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="search_bar clearfix">
|
|
|
<a href="{% url 'goods:index' %}" class="logo fl"><img src="{% static 'images/logo.png' %}"></a>
|
|
|
<div class="search_con fl">
|
|
|
<form action="/search" method="get">
|
|
|
<input type="text" class="input_text fl" name="q" placeholder="搜索商品">
|
|
|
<input type="submit" class="input_btn fr" name="" value="搜索">
|
|
|
</form>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="total_count">全部商品<em>{{ total_count }}</em>件</div>
|
|
|
<ul class="cart_list_th clearfix">
|
|
|
<li class="col01">商品名称</li>
|
|
|
<li class="col02">商品单位</li>
|
|
|
<li class="col03">商品价格</li>
|
|
|
<li class="col04">数量</li>
|
|
|
<li class="col05">小计</li>
|
|
|
<li class="col06">操作</li>
|
|
|
</ul>
|
|
|
<form method="post" action="/order/place">
|
|
|
{% for sku in skus %}
|
|
|
<ul class="cart_list_td clearfix">
|
|
|
<li class="col01"><input type="checkbox" name="sku_ids" value="{{ sku.id }}" checked=""></li>
|
|
|
<li class="col02"><img src="{{ sku.image.url }}"></li>
|
|
|
<li class="col03">{{ sku.name }}<br><em>{{ sku.price }}元/{{ sku.unite }}</em></li>
|
|
|
<li class="col04">{{ sku.unite }}</li>
|
|
|
<li class="col05">{{ sku.price }}元</li>
|
|
|
<li class="col06">
|
|
|
<div class="num_add">
|
|
|
<a href="javascript:;" class="add fl">+</a>
|
|
|
<input sku_id={{ sku.id }} type="text" class="num_show fl" value="{{ sku.count }}">
|
|
|
<a href="javascript:;" class="minus fl">-</a>
|
|
|
</div>
|
|
|
</li>
|
|
|
<li class="col07">{{ sku.amount }}元</li>
|
|
|
<li class="col08"><a href="javascript:;">删除</a></li>
|
|
|
</ul>
|
|
|
{% endfor %}
|
|
|
|
|
|
|
|
|
<ul class="settlements">
|
|
|
{% csrf_token %}
|
|
|
<li class="col01"><input type="checkbox" name="" checked=""></li>
|
|
|
<li class="col02">全选</li>
|
|
|
<li class="col03">合计(不含运费)：<span>¥</span><em>{{ total_price }}</em><br>共计<b>{{ total_count }}</b>件商品</li>
|
|
|
<li class="col04"><input type="submit" value="去结算"/></li>
|
|
|
</ul>
|
|
|
</form>
|
|
|
<div class="footer">
|
|
|
<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 © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
|
|
|
<p>电话：010-****888 京ICP备*******8号</p>
|
|
|
</div>
|
|
|
<script src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
|
|
|
<script >
|
|
|
// 计算被选中的商品和总价格
|
|
|
function update_page_info(){
|
|
|
// 获取所有被选中的checkbox，再获取他们的ul
|
|
|
total_count = 0
|
|
|
total_price = 0
|
|
|
$('.cart_list_td').find(':checked').parents('ul').each(function () {
|
|
|
// 获取商品的数目和小计
|
|
|
count = $(this).find('.num_show').val()
|
|
|
amount = $(this).children('.col07').text()
|
|
|
// 累加计算总数目和总价格
|
|
|
total_count += parseInt(count)
|
|
|
total_price += parseFloat(amount)
|
|
|
})
|
|
|
// 设置被选中的商品的总数量和总价格
|
|
|
$('.settlements').find('em').text(total_price.toFixed(2))
|
|
|
$('.settlements').find('b').text(total_count)
|
|
|
}
|
|
|
|
|
|
// 计算商品的小计
|
|
|
function update_goods_amount(sku_ul){
|
|
|
// 获取商品单价和数量
|
|
|
var price = sku_ul.children('.col05').text();
|
|
|
var count = sku_ul.find('.num_show').val();
|
|
|
// 计算商品小计
|
|
|
price = parseFloat(price);
|
|
|
count = parseInt(count);
|
|
|
amount = price*count;
|
|
|
alert(amount);
|
|
|
// 设置商品的小计
|
|
|
sku_ul.children('.col07').html(amount.toFixed(2)+'元');
|
|
|
}
|
|
|
|
|
|
// 更购物车中商品的数量
|
|
|
error_update = false
|
|
|
total = 0
|
|
|
function update_remote_cart_info(sku_id, count){
|
|
|
csrf = $('input[name="csrfmiddlewaretoken"]').val()
|
|
|
//组织参数
|
|
|
params = {
|
|
|
'sku_id': sku_id,
|
|
|
'count': count,
|
|
|
'csrfmiddlewaretoken': csrf,
|
|
|
}
|
|
|
// 发起ajax请求
|
|
|
// 默认发起异步的，改变为同步
|
|
|
$.ajaxSettings.async = false
|
|
|
|
|
|
$.post('/cart/update', params, function (data) {
|
|
|
if (data.res == 5){
|
|
|
// 更新成功
|
|
|
error_update = false
|
|
|
total = data.total_count
|
|
|
}
|
|
|
else{
|
|
|
error_update = true
|
|
|
alert(data.errmsg)
|
|
|
}
|
|
|
})
|
|
|
$.ajaxSettings.async = true
|
|
|
}
|
|
|
|
|
|
// 商品的全选和全不选
|
|
|
$('.settlements').find(':checkbox').change(function () {
|
|
|
// 获取全选的checkbox的选择状态
|
|
|
is_check = $(this).prop('checked')
|
|
|
// 遍历商品的checkbox，设置与全选一致
|
|
|
$('.cart_list_td').find(':checkbox').each(function () {
|
|
|
$(this).prop('checked', is_check)
|
|
|
})
|
|
|
update_page_info()
|
|
|
})
|
|
|
|
|
|
// 商品的checkbox改变时，设置全选checkbox的状态
|
|
|
$('.cart_list_td').find(':checkbox').change(function () {
|
|
|
// 获取页面上被选中的商品数目
|
|
|
checked_len = $('.cart_list_td').find(':checked').length
|
|
|
// 获取总数目
|
|
|
all_len = $('.cart_list_td').length
|
|
|
is_check = true
|
|
|
if (checked_len < all_len){
|
|
|
is_check = false
|
|
|
}
|
|
|
$('.settlements').find(':checkbox').prop('checked', is_check)
|
|
|
// 更新页面信息
|
|
|
update_page_info()
|
|
|
})
|
|
|
|
|
|
// 购物车商品数量的增加
|
|
|
$('.add').click(function () {
|
|
|
// 获取商品的id和数量
|
|
|
count = $(this).next().val()
|
|
|
sku_id = $(this).next().attr('sku_id')
|
|
|
|
|
|
// 更购物车中商品的数量
|
|
|
count = parseInt(count) + 1
|
|
|
update_remote_cart_info(sku_id, count)
|
|
|
|
|
|
// 判断更新是否成功
|
|
|
if (error_update == false){
|
|
|
// 重新设置商品的数目
|
|
|
$(this).next().val(count)
|
|
|
// 计算商品的小计
|
|
|
update_goods_amount($(this).parents('ul'))
|
|
|
// 获取商品对应的checkbox的选择状态，如果被选中，更新页面
|
|
|
is_checked = $(this).parents('ul').find(':checkbox').prop('checked')
|
|
|
if (is_checked){
|
|
|
update_page_info()
|
|
|
}
|
|
|
// 更新总件数
|
|
|
$('.total_count').children('em').text(total)
|
|
|
}
|
|
|
})
|
|
|
|
|
|
// 购物车商品数量的减少
|
|
|
$('.minus').click(function () {
|
|
|
// 获取商品的id和数量
|
|
|
count = $(this).prev().val()
|
|
|
sku_id = $(this).prev().attr('sku_id')
|
|
|
|
|
|
count = parseInt(count) - 1
|
|
|
if(count <= 0){
|
|
|
return
|
|
|
}
|
|
|
update_remote_cart_info(sku_id, count)
|
|
|
// 判断更新是否成功
|
|
|
if (error_update == false){
|
|
|
// 重新设置商品的数目
|
|
|
$(this).prev().val(count)
|
|
|
// 计算商品的小计
|
|
|
update_goods_amount($(this).parents('ul'))
|
|
|
// 获取商品对应的checkbox的选择状态，如果被选中，更新页面
|
|
|
is_checked = $(this).parents('ul').find(':checkbox').prop('checked')
|
|
|
if (is_checked){
|
|
|
update_page_info()
|
|
|
}
|
|
|
// 更新总件数
|
|
|
$('.total_count').children('em').text(total)
|
|
|
}
|
|
|
})
|
|
|
|
|
|
//记录用户输入之前的商品数目
|
|
|
pre_count = 0
|
|
|
$('.num_show').focus(function () {
|
|
|
pre_count = $(this).val()
|
|
|
})
|
|
|
|
|
|
// 手动输入购物车商品的数量
|
|
|
$('.num_show').blur(function () {
|
|
|
// 获取商品的id和数量
|
|
|
count = $(this).val()
|
|
|
sku_id = $(this).attr('sku_id')
|
|
|
|
|
|
// 校验用户输入的是否合法
|
|
|
if (isNaN(count) || count.trim().length==0 || parseInt(count) <= 0){
|
|
|
// 设置商品的数目为用户输入之前的商品数目
|
|
|
$(this).val(pre_count)
|
|
|
return
|
|
|
}
|
|
|
count = parseInt(count)
|
|
|
update_remote_cart_info(sku_id, count)
|
|
|
// 判断更新是否成功
|
|
|
if (error_update == false){
|
|
|
// 重新设置商品的数目
|
|
|
$(this).prev().val(count)
|
|
|
// 计算商品的小计
|
|
|
update_goods_amount($(this).parents('ul'))
|
|
|
// 获取商品对应的checkbox的选择状态，如果被选中，更新页面
|
|
|
is_checked = $(this).parents('ul').find(':checkbox').prop('checked')
|
|
|
if (is_checked){
|
|
|
update_page_info()
|
|
|
}
|
|
|
// 更新总件数
|
|
|
$('.total_count').children('em').text(total)
|
|
|
}
|
|
|
else{
|
|
|
// 设置商品的数目为用户输入之前的商品数目
|
|
|
$(this).val(pre_count)
|
|
|
}
|
|
|
})
|
|
|
|
|
|
// 删除购物车中记录
|
|
|
$('.cart_list_td').find('.col08').children('a').click(function () {
|
|
|
sku_id = $(this).parents('ul').find('.num_show').attr('sku_id')
|
|
|
csrf = $('input[name="csrfmiddlewaretoken"]').val()
|
|
|
//组织参数
|
|
|
params = {
|
|
|
'sku_id': sku_id,
|
|
|
'csrfmiddlewaretoken': csrf,
|
|
|
}
|
|
|
sku_ul = $(this).parents('ul')
|
|
|
// 发起ajax post请求
|
|
|
$.post('/cart/delete', params, function (data) {
|
|
|
if (data.res == 3){
|
|
|
// 删除成功, 移除页面上的商品所在的ul元素
|
|
|
sku_ul.remove()
|
|
|
// 获取sku_ul中商品checkbox选中状态
|
|
|
is_checked = sku_ul.find(':checkbox').prop('checked')
|
|
|
if (is_checked){
|
|
|
// 更新页面信息
|
|
|
update_page_info()
|
|
|
}
|
|
|
// 更新总件数
|
|
|
$('.total_count').children('em').text(data.total_count)
|
|
|
}
|
|
|
else{
|
|
|
alert(data.errmsg)
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
