页面路径：
\template\pc\default\home\store\order_checkout.html
Html代码：
{template "header.html"}
<!-- end header -->
<!-- 加载商城模块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">
// 获取运费和总价
function dr_order_address_price(city) {
$.ajax({
type: "GET",
url: '{FC_NOW_URL}&city='+city+'&is_ajax_get=1',
dataType: "json",
success: function (json) {
if (json.code) {
$('#dr_freight_value').html(json.data.freight);
$('#dr_pay_total_value').html(json.data.total);
} else {
dr_cmf_tips(json.code, json.msg);
}
},
error: function(HttpRequest, ajaxOptions, thrownError) {
alert(HttpRequest.responseText);
}
});
}
</script>
<!-- page wapper-->
<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 class="form-horizontal" method="post" role="form" id="myform">
{dr_form_hidden()}
{if $is_address}
<div class="portlet light bordered" style="box-shadow:0 0px 0px 0px rgba(0,0,0,.03); margin-top: 30px;">
<div class="portlet-title">
<div class="caption">
<span class="caption-subject ">收货地址</span>
</div>
</div>
<div class="portlet-body" >
<div class="box-border">
<ul>
{loop $address $t}
<li>
<label>
<input onclick="dr_order_address_price({$t.city})" type="radio" {if $t.default}checked{/if} name="address" value="{$t.id}">
<a href="javascript:;" onclick="dr_iframe('修改地址', '{dr_url('store/order/address')}&id={$t.id}', '50%', '60%')"><span>{$t.name}</span> <span>{dr_linkagepos(FC_ADDRESS_CITY, $t.city, '', '')}</span> <span>{$t.address}</span> <span>{$t.phone}</span></a>
</label>
</li>
{if $t.default}
<script type="text/javascript">
// 获取运费和总价
dr_order_address_price({$t.city})
</script>
{/if}
{/loop}
</ul>
<label style="margin-top: 10px"><a onclick="dr_iframe('新增地址', '{dr_url('store/order/address')}', '50%', '60%')" class=" btn btn-red btn-sm"><i class="fa fa-home"></i> 添加收货地址</a></label>
</div>
</div>
</div>
{/if}
<div class="portlet light bordered" style="box-shadow:0 0px 0px 0px rgba(0,0,0,.03)">
<div class="portlet-title">
<div class="caption">
<span class="caption-subject ">付款方式</span>
</div>
</div>
<div class="portlet-body">
<div class="box-border">
<ul>
{loop $pay_type $name $t}
<li>
<label>
<input type="radio" {if $pay_default == $name}checked{/if} name="paytype" value="{$name}">
<span>{$t['name']} {if $name == 'finecms'}（￥{$member.money}元）{/if}</span>
</label>
</li>
{/loop}
</ul>
</div>
</div>
</div>
<div class="portlet light bordered" style="box-shadow:0 0px 0px 0px rgba(0,0,0,.03)">
<div class="portlet-title">
<div class="caption">
<span class="caption-subject ">商品详情</span>
</div>
</div>
<div class="portlet-body">
<!--更新替换-->
<div class="portlet_jsa table-checkable">
<dd class="portlet_jsa_dd_1">商品</dd>
<dd class="portlet_jsa_dd_2">详情</dd>
<dd class="portlet_jsa_dd_3">活动</dd>
<dd class="portlet_jsa_dd_4">单价</dd>
<dd class="portlet_jsa_dd_5">数量</dd>
<dd class="portlet_jsa_dd_6">总价</dd>
</div>
<div class="portlet_jsb">
{loop $list $i $t}
{php $sku_name=dr_string2array($t.sku_name);}
<ul>
<li class="portlet_jsb_li_1">
<a href="{$t.url}" title="{$t.title}"><img src="{dr_thumb($t.thumb, 70, 70)}"></a>
</li>
<li class="portlet_jsb_li_2">
<p class="product-name"> <a href="{$t.url}" title="{$t.title}">{dr_strcut($t.title, 60)}</a></p>
{loop $sku_name $i $c}
<small class="cart_ref">{$i}: {$c} </small>
{/loop}
</li>
<li class="portlet_jsb_li_3">
{if $t.p_name}
<p>{$t.p_name}</p>
<p class="product-price-group"> <span class="promotion">{$t.p_info}</span></p>
{/if}
</li>
<li class="portlet_jsb_li_4">
<div class="wap-title">单价：</div>
<div>
{if $t.yuan > 0}
<p>￥<span class="regular-price">{number_format($t.price, 2)}</span>元</p>
<p class="pyuan">￥<span>{number_format($t.yuan, 2)}</span>元</p>
{else}
￥<span class="regular-price">{number_format($t.price, 2)}</span>元
{/if}
</div>
</li>
<li class="portlet_jsb_li_5">
<div class="wap-title">数量：</div>
<div>
x{$t.num}
</div>
</li>
<li class="portlet_jsb_li_6">
<div class="wap-title">总价：</div>
<div>
￥<span class="regular-price">{number_format($t.price * $t.num, 2)}</span>元
</div>
</li>
</ul>
{/loop}
</div>
<table class="table table-bordered table-checkable" >
<tfoot>
<tr>
<td colspan="" style="text-align: right"><strong>总商品金额：</strong></td>
<td colspan="">￥<span class="regular-price">{number_format($order_total, 2)}</span>元</td>
</tr>
<tr>
<td colspan="" style="text-align: right"><strong>运费：</strong></td>
<td colspan="">￥<span class="regular-price" id="dr_freight_value">0.00</span>元</td>
</tr>
{if $give_money > 0}
<tr>
<td colspan="" style="text-align: right"><strong>返现金额：</strong></td>
<td colspan="">￥<span class="regular-price">{number_format($give_money, 2)}</span>元</td>
</tr>
{/if}
{if $give_score}
<tr>
<td colspan="" style="text-align: right"><strong>赠送{SITE_SCORE}：</strong></td>
<td colspan=""><span class="regular-price">{$give_score}</span>{SITE_SCORE}</td>
</tr>
{/if}
{if $discount}
<tr>
<td colspan="" style="text-align: right"><strong>{$discount.title}：</strong></td>
<td colspan=""><span class="regular-price">{$discount.info}</span></td>
</tr>
{/if}
<tr>
<td colspan="" style="text-align: right"><strong>应付总额：</strong></td>
<td colspan="">￥<span class="regular-price" id="dr_pay_total_value">{number_format($pay_total, 2)}</span>元</td>
</tr>
</tfoot>
</table>
<!--更新替换 end-->
<div class="order-gbook">
<textarea style="width:100%;height: 100%" class="form-control" placeholder="买家留言" name="remark"></textarea>
</div>
<div class="text-right">
<button type="button" class="button btn btn-red btn-sm" onclick="dr_ajax_submit('{FC_NOW_URL}', 'myform', 1000)">提交订单</button>
</div>
</div>
</div>
</form>
</div>
</section>
{template "footer.html"}css代码：
/*订单结算*/
.portlet_jsa{
width: 100%;
border: solid 1px #e7ecf1;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.portlet_jsa 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_jsa dd:last-child{ border-right: none;}
.portlet_jsa_dd_1{ width: 5.9%;}
.portlet_jsa_dd_2{ width: 52.9%;}
.portlet_jsa_dd_3{ width: 11.1%;}
.portlet_jsa_dd_4{ width: 13.25%;}
.portlet_jsa_dd_5{ width: 3.7%;}
.portlet_jsa_dd_6{ width: 13.15%;}
.portlet_jsb{ width: 100%; float: left;
border: solid 1px #e7ecf1;
border-top: 0;
border-bottom: none;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 15px;
}
.portlet_jsb ul{ width: 100%;
border-bottom: solid 1px #e7ecf1;
float: left;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.portlet_jsb li{ float: left;
border-right: solid 1px #e7ecf1;
position: relative;
padding: 8px;
}
.portlet_jsb li:last-child{ border-right: none;}
.portlet_jsb_li_1{ width: 5.9%; text-align: center; padding: 8px 0!important; }
.portlet_jsb_li_1 img{ width: 70px; height: 70px; display: inline-block;}
.portlet_jsb_li_2{ width: 52.9%;}
.portlet_jsb_li_2 .product-name a{ font-weight: bold;}
.portlet_jsb_li_2 .product-name a:hover{ color: #E60012;}
.portlet_jsb_li_3{ width: 11.1%; word-break:break-all;}
.portlet_jsb_li_4{ width: 13.25%; color: #f65656; font-weight: bold;}
.portlet_jsb_li_5{ width: 3.7%;}
.portlet_jsb_li_6{ width: 13.15%; color: #f65656; font-weight: bold;}
.portlet_jsb_li_3,.portlet_jsb_li_4,.portlet_jsb_li_5,.portlet_jsb_li_6{
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;
}
@media only screen and (max-width:1366px) {
.portlet_jsa_dd_1{ width:8%;}
.portlet_jsa_dd_2{ width: 50.8%;}
.portlet_jsb_li_1{ width: 8%;}
.portlet_jsb_li_2{ width: 50.8%;}
}
@media only screen and (max-width:1024px) {
.portlet_jsa_dd_1{ width:8.8%;}
.portlet_jsa_dd_2{ width: 48%;}
.portlet_jsa_dd_5{ width: 5.7%;}
.portlet_jsb_li_1{ width: 8.8%;}
.portlet_jsb_li_2{ width: 48%;}
.portlet_jsb_li_5{ width: 5.7%;}
}
@media only screen and (max-width:768px) {
.portlet_jsa_dd_1{ width:12%;}
.portlet_jsa_dd_2{ width: 44.8%;}
.portlet_jsa_dd_5{ width: 5.7%;}
.portlet_jsb_li_1{ width: 12%;}
.portlet_jsb_li_2{ width: 44.8%;}
.portlet_jsb_li_5{ width: 5.7%;}
}
@media only screen and (max-width:576px) {
.portlet_jsa{ display: none;}
.portlet_jsb{ border: none; margin-bottom: 0;}
.portlet_jsb ul{ margin-bottom: 15px; float: left; border: solid 1px #e7ecf1;}
.portlet_jsb_li_1{ width: 30%; border-bottom: solid 1px #e7ecf1;}
.portlet_jsb_li_2{ width: 70%; border-right: none!important; border-bottom: solid 1px #e7ecf1;}
.portlet_jsb_li_3{ width: 100%; border-right: none!important; border-bottom: solid 1px #e7ecf1;}
.portlet_jsb_li_4{ width: 50%; border-bottom: solid 1px #e7ecf1;}
.portlet_jsb_li_5{ width: 50%; border-right: none!important; border-bottom: solid 1px #e7ecf1;}
.portlet_jsb_li_6{ width: 100%;}
.portlet_jsb_li_4,.portlet_jsb_li_5,.portlet_jsb_li_6{
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
}
}页面效果：
pc
wap
