页面路径：
\template\pc\default\home\store\cart.html
HTML代码：
{template "header.html"}
<!-- end header -->
<link href="{THEME_PATH}assets/global/plugins/bootstrap-touchspin/bootstrap.touchspin.css" rel="stylesheet" type="text/css" />
<script src="{THEME_PATH}assets/global/plugins/fuelux/js/spinner.min.js" type="text/javascript"></script>
<script src="{THEME_PATH}assets/global/plugins/bootstrap-touchspin/bootstrap.touchspin.js" type="text/javascript"></script>
<!-- 加载商城模块css -->
<link href="{dr_get_app_css('store')}style.css" rel="stylesheet" type="text/css" />
<script src="{dr_get_app_css('store')}js/mall.js"></script>
<script src="{dr_get_app_css('store')}js/jquery.counterup.min.js"></script>
<script>
$(function () {
dr_cart_nums();
});
</script>
<script type="text/javascript" src="{THEME_PATH}assets/js/sku.js"></script>
<script type="text/javascript">
$(function () {
$(".dr_buy_num").TouchSpin({
step: 1,
min: 1,
max: 9999999
});
$(".dr_buy_num").change(function () {
var num = $(this).val();
var iid = $(this).attr('iid');
$.ajax({
type: "GET",
url: '/index.php?s=store&c=cart&m=update&id='+iid+'&num='+num,
dataType: "jsonp",
success: function (json) {
dr_cmf_tips(json.code, json.msg);
if (json.code) {
$('#dr_cart_nums').html(json.data.nums);
$('#dr_total_'+iid).html(json.data.total);
}
},
error: function(HttpRequest, ajaxOptions, thrownError) {
alert(HttpRequest.responseText);
}
});
});
});
function dr_delete_cart_all() {
$('.checkboxes').each(function() {
var checked = jQuery(this).is(":checked");
if (checked) {
dr_cart_del(jQuery(this).val());
}
});
}
// ajax提交
function dr_ajax_order_submit() {
var loading = layer.load(2, {
shade: [0.3,'#fff'], //0.1透明度的白色背景
time: 100000000
});
$.ajax({
type: "POST",
dataType: "json",
url: "{dr_url('store/cart/order')}",
data: $("#myform").serialize(),
success: function(json) {
layer.close(loading);
if (json.code == 1) {
dr_cmf_tips(1, json.msg);
setTimeout("___window.location.href = '"+json.data.url+"'", 2000);
} else {
dr_cmf_tips(0, json.msg);
$('#dr_row_'+json.data.id).addClass('has-error');
}
},
error: function(HttpRequest, ajaxOptions, thrownError) {
layer.closeAll('loading');
alert(HttpRequest.responseText);
}
});
}
</script>
<section class="main-content-area" style="background: #f7f7f7; padding-bottom: 30px;">
<div class="wrap">
<!-- bradcame start -->
<div class="pd1 bgwhite bdrls">
<a href="{SITE_URL}"><img class="middle mr10" src="{HOME_THEME_PATH}images/home_03.png"/>首页</a> / 购物车
</div>
<!-- bradcame end -->
<form method="post" role="form" id="myform">
{dr_form_hidden()}
<div class="">
<div class="portlet-body " style="background: #fff; margin-top: 30px; padding:30px 15px;">
<!--更新替换-->
<div class="portlet_a table-checkable">
<dd class="portlet_dd_1">
<label class="mt-table mt-checkbox mt-checkbox-single mt-checkbox-outline">
<input checked="checked" type="checkbox" class="group-checkable" data-set=".checkboxes" />
<span></span>
</label>
</dd>
<dd class="portlet_dd_2">商品</dd>
<dd class="portlet_dd_3">详情</dd>
<dd class="portlet_dd_4">单价</dd>
<dd class="portlet_dd_5">数量</dd>
<dd class="portlet_dd_6">总价</dd>
<dd class="portlet_dd_7">操作</dd>
</div>
<div class="portlet_b">
{loop $list $i $t}
{php $sku_name=dr_string2array($t.sku_name);}
<ul id="dr_row_{$t.id}">
<li class="portlet_li_1">
<label class="mt-table mt-checkbox mt-checkbox-single mt-checkbox-outline">
<input type="checkbox" checked="checked" class="checkboxes" name="ids[]" value="{$t.id}" />
<span></span>
</label>
</li>
<li class="portlet_li_2">
<a href="{$t.url}" title="{$t.title}"><img src="{dr_thumb($t.thumb, 70, 70)}"></a>
</li>
<li class="portlet_li_3">
<p class="product-name"> <a href="{$t.url}" title="{$t.title}">{dr_strcut($t.title, 50)}</a></p>
{loop $sku_name $i $c}
<small class="cart_ref">{$i}: {$c} </small>/
{/loop}
</li>
<li class="portlet_li_4">
<div class="wap-title">单价：</div>
<div>
{if $t.yuan}
<p>￥<span class="regular-price">{number_format($t.price, 2)}</span>元</p>
<p class="pyuan">￥<span>{number_format($t.yuan, 2)}</span>元</p>
<p>{$t.p_info}</p>
{else}
￥<span class="regular-price">{number_format($t.price, 2)}</span>元
{/if}
</div>
</li>
<li class="portlet_li_5 qty_num">
<div class="wap-title">数量：</div>
<div class="wap-num-w">
<input class="dr_buy_num" iid="{$t.id}" type="text" value="{$t.quantity}">
</div>
</li>
<li class="portlet_li_6">
<div class="wap-title">总价：</div>
<div>
￥<span id="dr_total_{$t.id}" class="regular-price">{number_format($t.price * $t.quantity, 2)}</span>元
</div>
</li>
<li class="portlet_li_7">
<a href="javascript:dr_cart_del('{$t.id}');">删除</a>
</li>
</ul>
{/loop}
</div>
</div>
<!--更新替换 end-->
<table class="table table-checkable " style="background: #fff; margin-bottom: 0;">
<tfoot>
<tr>
<td class="action but_color_action" style="width: 50px;border-top:0">
<label class="mt-table mt-checkbox mt-checkbox-single mt-checkbox-outline">
<input checked="checked" type="checkbox" class="group-checkable" data-set=".checkboxes" />
<span></span>
</label>
</td>
<td colspan="7" style="border-top:0" class="text-left but_color_ys">
<label><button type="button" onclick="dr_delete_cart_all()" class="btn btn-red btn-sm"> <i class="fa fa-trash"></i> {dr_lang('删除')}</button></label>
<label><button type="button" onclick="dr_ajax_submit('{FC_NOW_URL}', 'myform', 1000, '{FC_NOW_URL}')" class="btn btn-red2 btn-sm"> <i class="fa fa-refresh"></i> {dr_lang('刷新')}</button></label>
<label><button type="button" onclick="dr_ajax_order_submit()" class="btn btn-red2 btn-sm"> <i class="fa fa-rmb"></i> {dr_lang('立即下单结算')}</button></label>
</td>
</tr>
</tfoot>
</table>
</div>
</form>
</div>
</section>
{template "footer.html"}css样式：
/*购物车样式*/
.portlet_a{
width: 100%;
border: solid 1px #e7ecf1;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.portlet_a dd{
border-right: solid 1px #e7ecf1;
padding: 8px;
text-align: center;
font-weight: bold;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.portlet_a dd:last-child{ border-right: none;}
.portlet_dd_1{ width: 3.65%;}
.portlet_dd_2{ width: 6.6%;}
.portlet_dd_3{ width: 46%;}
.portlet_dd_4{ width: 13.1%;}
.portlet_dd_5{ width: 13.2%;}
.portlet_dd_6{ width: 13.15%;}
.portlet_dd_7{ width: 4.3%;}
.portlet_b{ width: 100%; float: left;
border: solid 1px #e7ecf1;
border-top: 0;
border-bottom: none;
}
.portlet_b ul{ width: 100%;
border-bottom: solid 1px #e7ecf1;
float: left;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.portlet_b li{ float: left;
border-right: solid 1px #e7ecf1;
position: relative;
padding: 8px;
}
.portlet_b li:last-child{ border-right: none;}
.portlet_li_1{ width: 3.65%;}
.portlet_li_2{ width: 6.6%;}
.portlet_li_2 img{ width: 70px; height: 70px;}
.portlet_li_3{ width: 46%; word-break:break-all;}
.portlet_li_3 .product-name a{ font-weight: bold;}
.portlet_li_3 .product-name a:hover{ color: #E60012;}
.portlet_li_4{ width: 13.1%; color: #f65656; font-weight: bold;}
.portlet_li_5{ width: 13.2%;}
.portlet_li_6{ width: 13.15%; color: #f65656; font-weight: bold;}
.portlet_li_7{ width: 4.3%;}
.portlet_li_7 a:hover{ color: #E60012;}
.portlet_li_2,.portlet_li_4,.portlet_li_5,.portlet_li_6,.portlet_li_7{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.but_color_action{ background: #fff;}
.but_color_ys{ background: #fff;}
.wap-title{ display: none;}
@media only screen and (max-width:1024px) {
.portlet_dd_1{ width: 4%;}
.portlet_dd_2{ width: 11%;}
.portlet_dd_3{ width: 35%;}
.portlet_dd_4{ width: 13%;}
.portlet_dd_5{ width: 18%;}
.portlet_dd_6{ width: 13%;}
.portlet_dd_7{ width: 6%;}
.portlet_li_1{ width: 4%;}
.portlet_li_2{ width: 11%;}
.portlet_li_3{ width: 35%;}
.portlet_li_4{ width: 13%;}
.portlet_li_5{ width: 18%;}
.portlet_li_6{ width: 13%;}
.portlet_li_7{ width: 6%;}
}
@media only screen and (max-width:768px) {
.portlet_a dd .mt-checkbox, .mt-radio{ padding-left:0; margin-bottom: 0;}
.portlet_dd_1{ width: 5%; padding: 8px 0;}
.portlet_dd_1 span{ display: inline-block; position: relative; top: auto; left: auto;}
.portlet_dd_2{ width: 11%;}
.portlet_dd_3{ width: 30%;}
.portlet_dd_4{ width: 15%;}
.portlet_dd_5{ width: 18%;}
.portlet_dd_6{ width: 13%;}
.portlet_dd_7{ width: 8%;}
.portlet_b li .mt-checkbox, .mt-radio{ padding-left:0; margin-bottom: 0;}
.portlet_li_1{ width: 5%; padding: 8px 0;}
.portlet_li_2{ width: 11%;}
.portlet_li_3{ width: 30%;}
.portlet_li_4{ width: 15%;}
.portlet_li_5{ width: 18%;}
.portlet_li_6{ width: 13%;}
.portlet_li_7{ width: 8%;}
}
@media only screen and (max-width:576px) {
.wap-title{ display: block; font-weight: bold; color: #000;}
.portlet_dd_3,.portlet_dd_4,.portlet_dd_5,.portlet_dd_6,.portlet_dd_7{ display: none!important;}
.portlet_dd_1{ width: 10%;}
.portlet_dd_2{ width: 90%; border-right: none!important;}
.portlet_li_1{
width: 10%;
border-bottom:none;
}
.portlet_li_2{
width: 90%;
border-bottom: solid 1px #e7ecf1;
border-right: none!important;
}
.portlet_li_3{
width: 90.2%;
margin-left: 9.8%;
border-bottom: solid 1px #e7ecf1;
border-left: solid 1px #e7ecf1;
border-right: none!important;
}
.portlet_li_4{
width: 90.2%;
margin-left: 9.8%;
border-bottom: solid 1px #e7ecf1;
border-left: solid 1px #e7ecf1;
border-right: none!important;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.portlet_li_5{
width: 90.2%;
margin-left: 9.8%;
border-bottom: solid 1px #e7ecf1;
border-left: solid 1px #e7ecf1;
border-right: none!important;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.wap-num-w{ width: 50%;}
.portlet_li_6{
width: 90.2%;
margin-left: 9.8%;
border-bottom: solid 1px #e7ecf1;
border-left: solid 1px #e7ecf1;
border-right: none!important;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.portlet_li_7{
width: 90.2%;
margin-left: 9.8%;
border-bottom: solid 1px #e7ecf1;
border-left: solid 1px #e7ecf1;
border-bottom: none;
border-right: none!important;
}
}页面效果：
pc
wap
