目前位置: 首頁 > ECSHOP響應式模版 > 22、RWD響應式網頁設計- Ecshop 結算中心

22、RWD響應式網頁設計- Ecshop 結算中心 超大 稍大 微大

ECSHOP 繁體中文版-響應式模板-虛擬主機::ECSHOP2.7.3繁體中文全支援-原來如此 發表於: 2017-02-04
結算中心包涵商品列表、收貨人訊息、商品包裝、祝福賀卡、寄件方式、付款方式、 附言、餘額、紅包、缺貨處理、費用總計 多個區塊,為了避免頁面過於冗長,我將相同性質的功能以TAB形式表現,你也可以將用不到的區塊隱藏或乾脆刪除,讓整個頁面更簡潔:
<!-- 開始訂單確認界面 -->
<style type="text/css">
.modify {color: yellow;}
input[type=radio] {margin-right: 10px;}
.flow_name {position: relative;cursor: pointer;}
.flow_desc {width: 100%;position: absolute;max-height: 200px;overflow: auto;border: 1px solid #aaa;padding: 5px;border-radius: 6px;background: #FFF;box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.2);z-index: 999;}
</style>
<script type="text/javascript">
var flow_no_payment = "{$lang.flow_no_payment}";
var flow_no_shipping = "{$lang.flow_no_shipping}";
</script>
<form action="flow.php" method="post" name="theForm" id="theForm" onsubmit="return checkOrderForm(this)">

<div class="col-md-6">
{include file='library/flow_checkout_list.lbi'}
</div>
<div class="col-md-6">
{include file='library/flow_checkout_option.lbi'}
</div>
<div class="clearfix"></div>
<div class="col-md-6">
{include file='library/flow_checkout_sip.lbi'}
</div>
<div class="col-md-6">
{include file='library/flow_checkout_pay.lbi'}
</div>
<div class="clearfix"></div>
<div class="col-md-6">
{include file='library/flow_checkout_orther.lbi'}
</div>
<div class="col-md-6">
<table class="table table-striped table-hover">
<tr>
<th>
<i class="fa fa-calculator"></i> {$lang.fee_total}
</th>
</tr>
<tr>
<td>
<div id="ECS_ORDERTOTAL" class="text-center">
{include file='library/order_total.lbi'}
</div>
</td>
</tr>
<tr>
<td class="text-center">
<a href="javascript:void();" onclick="document.theForm.submit();" class="btn btn-danger btn-lg" /><i class="fa fa-calculator"></i> 完成訂單</a>
<input type="hidden" name="step" value="done" />
</td>
</tr>
</table>
</div>
</form>





每人的習慣都不同,只要能做出你想要的效果就可以,我的習慣還是先各個區塊獨立出來,再個別編輯,底下列出了這個頁面所有區塊的程式碼,僅供參考:
<!-- flow_checkout_list.lbi -->
<div class="">
<ul id="gtabs" class="nav nav-tabs" role="tablist">
<!-- 購買列表-->
<li role="presentation" class="active">
<a href="#goods_list" id="goods_list-tab" role="tab" data-toggle="tab" aria-controls="goods_list" aria-expanded="false" title="購買列表" class="pull-left">
<i class="fa fa-list"></i> {$lang.goods_list}
<!-- {if $allow_edit_cart} 是否允許修改購物車 -->
<span data-url="flow.php" class="btn_modify">
   <i class="fa fa-pencil-square-o"></i> 更改
</span>
<!-- {/if} -->
</a>
</li>

<!-- 收件地址 -->
<li role="presentation" class="">
<a href="#consignee_info" id="consignee_info-tab" role="tab" data-toggle="tab" aria-controls="consignee_info" aria-expanded="false" title="收件地址" class="pull-left">
<i class="fa fa-list-alt"></i> {$lang.consignee_info}
<span class="btn_modify" data-url="flow.php?step=consignee">
   <i class="fa fa-pencil-square-o"></i> 更改
</span>
</a>
</li>
</ul>
</div>
<div id="tabContent" class="tab-content">
<div role="tabpanel" class="tab-pane fade active in" id="goods_list" aria-labelledby="goods_list-tab">
<table class="table">
<!-- {foreach from=$goods_list item=goods} -->
<tr>
<td>
<!-- {if $goods.goods_id gt 0 && $goods.extension_code eq 'package_buy'} -->
<a href="javascript:void(0)" onclick="setSuitShow({$goods.goods_id})">
{$goods.goods_name}
<span>
({$lang.remark_package})
</span>
</a>
<div id="suit_{$goods.goods_id}" style="display:none">
<!-- {foreach from=$goods.package_goods_list item=package_goods_list} -->
<a href="goods.php?id={$package_goods_list.goods_id}" target="_blank">
{$package_goods_list.goods_name}
</a><br />
<!-- {/foreach} -->
</div>
<!-- { else } -->
<a href="goods.php?id={$goods.goods_id}" target="_blank" class="">
{$goods.goods_name}
</a>
<div>
<!-- {if $goods.parent_id > 0} -->
<span>({$lang.accessories})</span>
<!-- {elseif $goods.is_gift} -->
<span>({$lang.largess})</span>
<!-- {/if} -->
<!-- {/if} -->
<!-- {if $goods.is_shipping} -->
(<span>
{$lang.free_goods}
</span>)
<!-- {/if} -->
<div class="text-success">
{$goods.goods_attr}
<span class="text-info">
<strong>{$goods.formated_goods_price}</strong> X <strong>{$goods.goods_number}</strong> =
</span>
<span class="text-danger">
{$goods.formated_subtotal}
</span>
</div>
</div>
</td>
</tr>
<!-- {/foreach} -->
<!-- {if !$gb_deposit} 團購且有保證金時不顯示 -->
<tr>
<td>
<!-- {if $discount gt 0} -->
{$your_discount}<br />
<!-- {/if} -->
{$shopping_money}
<!-- {if $show_marketprice} -->
,{$market_price_desc}<!--{/if}-->
</td>
</tr>
<!-- {/if} -->
</table>
</div>
<!-- 收件地址 -->
<div role="tabpanel" class="tab-pane fade" id="consignee_info" aria-labelledby="consignee_info-tab">
<li><i class="fa fa-dot-circle-o text-warning"></i> {$lang.consignee_name}:{$consignee.consignee|escape}</li>
<li><i class="fa fa-dot-circle-o text-warning"></i> {$lang.email_address}:{$consignee.email|escape}</li>
<!-- {if $total.real_goods_count gt 0} -->
<li><i class="fa fa-dot-circle-o text-warning"></i> {$lang.detailed_address}:{$consignee.address|escape} </li>
<li><i class="fa fa-dot-circle-o text-warning"></i> {$lang.postalcode}:{$consignee.zipcode|escape}</li>
<!-- {/if} -->
<li><i class="fa fa-dot-circle-o text-warning"></i> {$lang.phone}:{$consignee.tel} </li>
<li><i class="fa fa-dot-circle-o text-warning"></i> {$lang.backup_phone}:{$consignee.mobile|escape}</li>
<!-- {if $total.real_goods_count gt 0} -->
<!-- {if $consignee.sign_building} -->
<li><i class="fa fa-dot-circle-o text-warning"></i> {$lang.sign_building}:{$consignee.sign_building|escape} </li>
<!-- {/if} -->
<!-- {if $consignee.best_time} -->
<li><i class="fa fa-dot-circle-o text-warning"></i> {$lang.deliver_goods_time}:{$consignee.best_time|escape}</li>
<!-- {/if} -->
<!-- {/if} -->
</div>
</div>

<!-- flow_checkout_option.lbi -->
<div class="">
<ul id="option_tabs" class="nav nav-tabs" role="tablist">
<!-- {if $pack_list} 包裝-->
<li role="presentation" class="active">
<a href="#pack_list" id="pack_list-tab" role="tab" data-toggle="tab" aria-controls="pack_list" aria-expanded="false" title="購買列表" class="pull-left">
<i class="fa fa-suitcase"></i> {$lang.goods_package}
</a>
</li>
<!-- {/if} -->
<!-- {if $card_list} 是否有禮卡 -->
<li role="presentation" class="">
<a href="#card_list" id="card_list-tab" role="tab" data-toggle="tab" aria-controls="card_list" aria-expanded="false" title="禮卡" class="pull-left">
<i class="fa fa-file-word-o"></i> {$lang.goods_card}
</a>
</li>
<!-- {/if} -->
</ul>
</div>
<div id="option_tabs-Content" class="tab-content">
<!-- {if $pack_list} -->
<div role="tabpanel" class="tab-pane fade active in" id="pack_list" aria-labelledby="pack_list-tab">
<table class="table table-striped table-hover">
<tr>
<td colspan="3">
<input type="radio" name="pack" id="pack0" class="pull-left" value="0" {if $order.pack_id eq 0}checked="true"{/if} onclick="selectPack(this)" /><label for="pack0"><strong>{$lang.no_pack}</strong></label>
</td>
</tr>
<!-- {foreach from=$pack_list item=pack} 循環包裝 -->
<tr>
<td width="110">
<input type="radio" name="pack" id="pack{$pack.pack_id}" class="pull-left" value="{$pack.pack_id}" {if $order.pack_id eq $pack.pack_id}checked="true"{/if} onclick="selectPack(this)" />
<label for="pack{$pack.pack_id}"><strong>{$pack.pack_name}</strong></label>
</td>
<td>
<span class="text-info">費用:<strong>{$pack.format_pack_fee}</strong></span>
<span class="text-danger">滿:<strong>{$pack.format_free_money}</strong>免費</span>
</td>
<td>
<!-- {if $pack.pack_img} 是否有圖片 -->
<a href="data/packimg/{$pack.pack_img}" target="_blank" title="{$lang.view}{$lang.img}"><i class="fa fa-eye"></i></a>
<!-- {else} -->
{$lang.no}
<!-- {/if} -->
</td>
</tr>
<!-- {/foreach} 循環包裝 -->
</table>
</div>
<!-- {/if} 是否使用包裝 -->
<!-- 禮卡 -->
<div role="tabpanel" class="tab-pane fade" id="card_list" aria-labelledby="card_list-tab">
<!-- {if $card_list} 是否有禮卡 -->
<table class="table table-striped table-hover">
<tr>
<td colspan="3">
<input type="radio" name="card" id="card0" class="pull-left" value="0" {if $order.card_id eq 0}checked="true"{/if} onclick="selectCard(this)" /><label for="card0"><strong>{$lang.no_card}</strong></label>
</td>
</tr>
<!-- {foreach from=$card_list item=card} 循環禮卡 -->
<tr>
<td>
<input type="radio" name="card" id="card{$card.card_id}" class="pull-left" value="{$card.card_id}" {if $order.card_id eq $card.card_id}checked="true"{/if} onclick="selectCard(this)" />
<label for="card{$card.card_id}"><strong>{$card.card_name}</strong></label>
</td>
<td>
<span class="text-info">費用:{$card.format_card_fee}</span>
<span class="text-danger">滿:<strong>{$card.format_free_money}</strong>免費</span>
</td>
<td>
<!-- {if $card.card_img} 是否有圖片 -->
<a href="data/cardimg/{$card.card_img}" target="_blank" title="{$lang.view}"><i class="fa fa-eye"></i></a>
<!-- {else} -->
{$lang.no}
<!-- {/if} -->
</td>
</tr>
<!-- {/foreach} 循環禮卡 -->
<tr>
<td width="110">
{$lang.bless_note}:
</td>
<td colspan="2">
<textarea name="card_message" cols="60" rows="3" class="form-control" placeholder="請輸入{$lang.bless_note}">{$order.card_message|escape}</textarea>
</td>
</tr>
</table>
<!-- {/if} 是否使用禮卡 -->
</div>
</div>

<!-- flow_checkout_sip.lbi -->
<!--{if $total.real_goods_count neq 0} 寄件方式-->
<table class="table table-striped table-hover">
<tr>
<th>
<i class="fa fa-truck"></i> {$lang.shipping_method}
</th>
</tr>
<!-- {foreach from=$shipping_list item=shipping} 循環寄件方式 -->
<tr>
<td valign="top">
<input name="shipping" type="radio" id="radio{$shipping.shipping_id}" value="{$shipping.shipping_id}" {if $order.shipping_id eq $shipping.shipping_id}checked="true"{/if} supportCod="{$shipping.support_cod}" insure="{$shipping.insure}" onclick="selectShipping(this)" class="pull-left" />
<div class="flow_name" onmouseover="$('#shipping{$shipping.shipping_id}').show()" onmouseout="$('#shipping{$shipping.shipping_id}').hide()">
<label for="radio{$shipping.shipping_id}"><strong>{$shipping.shipping_name}</strong></label>
<div id="shipping{$shipping.shipping_id}" style="display: none;" class="flow_desc">{$shipping.shipping_desc}</div>
</div>
<span class="text-info">運費:<strong>{$shipping.format_shipping_fee}</strong></span>
<span class="text-danger">滿:<strong>{$shipping.free_money}</strong>免運費</span>
</td>
</tr>
<!-- {/foreach} 循環寄件方式 -->
</table>
<!--{else}-->
<input name = "shipping" type="radio" value = "-1" checked="checked" style="display:none"/>
<!--{/if}-->

<!-- flow_checkout_pay.lbi -->
<!--{if $total.real_goods_count neq 0} 付款方式-->
<table class="table table-striped table-hover">

<tr>
<th><i class="fa fa-credit-card"></i> {$lang.payment_method}</th>
</tr>
<!-- {foreach from=$payment_list item=payment} -->
<!-- 循環付款方式 -->
<tr>
<td valign="top">
<input type="radio" name="payment" id="pay{$payment.pay_id}" value="{$payment.pay_id}" {if $order.pay_id eq $payment.pay_id}checked{/if} isCod="{$payment.is_cod}" onclick="selectPayment(this)" {if $cod_disabled and $payment.is_cod eq "1"}disabled="true"{/if} class="pull-left" />
<div class="flow_name" onmouseover="$('#payment{$payment.pay_id}').show()" onmouseout="$('#payment{$payment.pay_id}').hide()">
<label for="pay{$payment.pay_id}"><strong>{$payment.pay_name}</strong></label>
<div id="payment{$payment.pay_id}" style="display: none;" class="flow_desc">{$payment.pay_desc}</div>
<span class="text-danger">手續費:<strong>{$payment.format_pay_fee}</strong></span>
</td>
</tr>
<!-- {/foreach} 循環付款方式 -->
</table>
<!--{else}-->
<input name = "payment" type="radio" value = "-1" checked="checked" style="display:none"/>
<!--{/if}-->

<!-- flow_checkout_orther.lbi -->
<div class="">
<ul id="option_tabs" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#order_postscript" id="order_postscript-tab" role="tab" data-toggle="tab" aria-controls="order_postscript" aria-expanded="false" title="附言" class="pull-left">
<i class="fa fa-commenting"></i> 附言
</a>
</li>

<!-- {if $allow_use_surplus} 是否使用餘額 -->
<li role="presentation" class="">
<a href="#other_info" id="other_info-tab" role="tab" data-toggle="tab" aria-controls="other_info" aria-expanded="false" title="購買列表" class="pull-left">
<i class="fa fa-exclamation-circle"></i> 餘額
</a>
</li>
<!-- {/if} -->
<!-- {if $allow_use_integral} 是否使用積點 -->
<li role="presentation" class="">
<a href="#allow_use_integral" id="allow_use_integral-tab" role="tab" data-toggle="tab" aria-controls="allow_use_integral" aria-expanded="false" title="禮卡" class="pull-left">
<i class="fa fa-database"></i> 積點
</a>
</li>
<!-- {/if} -->
<!-- {if $allow_use_bonus} 是否使用紅包 -->
<li role="presentation" class="">
<a href="#allow_use_bonus" id="allow_use_bonus-tab" role="tab" data-toggle="tab" aria-controls="allow_use_bonus" aria-expanded="false" title="紅包" class="pull-left">
<i class="fa fa-envelope-square text-danger"></i> 紅包
</a>
</li>
<!-- {/if} -->
<!-- {if $inv_content_list} 能否開發票 -->
<li role="presentation" class="">
<a href="#inv_content_list" id="inv_content_list-tab" role="tab" data-toggle="tab" aria-controls="inv_content_list" aria-expanded="false" title="發票" class="pull-left">
<i class="fa fa-sticky-note"></i> 發票
</a>
</li>
<!-- {/if} -->

<!-- {if $how_oos_list} 是否使用缺貨處理 -->
<li role="presentation" class="">
<a href="#how_oos_list" id="how_oos_list-tab" role="tab" data-toggle="tab" aria-controls="how_oos_list" aria-expanded="false" title="{$lang.booking_process}" class="pull-left">
<i class="fa fa-cubes"></i> {$lang.booking_process}
</a>
</li>
<!-- {/if} 缺貨處理結束 -->
</ul>
</div>
<div id="option_tabs-Content" class="tab-content">
<!-- {if $allow_use_surplus} 是否使用餘額 -->
<div role="tabpanel" class="tab-pane fade" id="allow_use_surplus" aria-labelledby="allow_use_surplus-tab">
<table class="table table-striped table-hover">
<tr>
<td class="td_title">
{$lang.use_surplus}:
</td>
<td>
<input name="surplus" type="text" id="ECS_SURPLUS" class="form-control" placeholder="請輸入{$lang.use_surplus}" value="{$order.surplus|default:0}" onblur="changeSurplus(this.value)" {if $disable_surplus}disabled="disabled"{/if} />
</td>
<td>
{$lang.your_surplus}{$your_surplus|default:0}<span id="ECS_SURPLUS_NOTICE"></span>
</td>
</tr>
</table>
</div>
<!-- {/if} 是否使用餘額 -->
<!-- {if $allow_use_bonus} 是否使用紅包 -->
<div role="tabpanel" class="tab-pane fade" id="allow_use_bonus" aria-labelledby="allow_use_bonus-tab">
<table class="table table-striped table-hover">
<tr>
<td>
<table width="100%">
<tr>
<td>
{$lang.select_bonus}:
</td>
<td>
<select name="bonus" onchange="changeBonus(this.value)" id="ECS_BONUS">
<option value="0" {if $order.bonus_id eq 0}selected{/if}>{$lang.please_select}:</option>
<!-- {foreach from=$bonus_list item=bonus} -->
<option value="{$bonus.bonus_id}" class="form-control" placeholder="請輸入{$lang.use_surplus}" {if $order.bonus_id eq $bonus.bonus_id}selected{/if}>{$bonus.type_name}[{$bonus.bonus_money_formated}]</option>
<!-- {/foreach} -->
</select>
</td>
</tr>
<tr>
<td class="td_title">
{$lang.input_bonus_no}:
</td>
<td>
<input name="bonus_sn" type="text" class="form-control" placeholder="請輸入紅包序號" value="{$order.bonus_sn}"/>
</td>
</tr>
</table>
</td>
<td>
<input name="validate_bonus" type="button" value="{$lang.validate_bonus}" onclick="validateBonus(document.forms['theForm'].elements['bonus_sn'].value)" class="btn btn-danger" />
</td>
</tr>
</table>
</div>
<!-- {/if} 是否使用紅包 -->
<!-- {if $inv_content_list} 能否開發票 -->
<div role="tabpanel" class="tab-pane fade" id="inv_content_list" aria-labelledby="inv_content_list-tab">
<table class="table table-striped table-hover">
<tr>
<td>
<input name="need_inv" type="checkbox" id="ECS_NEEDINV" onclick="changeNeedInv()" class="form-control" value="1" {if $order.need_inv}checked="true"{/if} />
</td>
<td>
<!-- {if $inv_type_list} -->
{$lang.invoice_type}:<select name="inv_type" id="ECS_INVTYPE" {if $order.need_inv neq 1}disabled="true"{/if} onchange="changeNeedInv()">
{html_options options=$inv_type_list selected=$order.inv_type}</select>
<!-- {/if} -->
{$lang.invoice_title}:
<input name="inv_payee" type="text" id="ECS_INVPAYEE" size="20" {if !$order.need_inv}disabled="true"{/if} value="{$order.inv_payee}" onblur="changeNeedInv()" />
{$lang.invoice_content}:
<select name="inv_content" id="ECS_INVCONTENT" {if $order.need_inv neq 1}disabled="true"{/if} onchange="changeNeedInv()">
{html_options values=$inv_content_list output=$inv_content_list selected=$order.inv_content}
</select>
</td>
</tr>
</table>
</div>
<!-- {/if} -->

<div role="tabpanel" class="tab-pane fade active in" id="order_postscript" aria-labelledby="order_postscript-tab">
<div>
<textarea name="postscript" cols="80" rows="3" class="form-control" placeholder="請輸入{$lang.order_postscript}" id="postscript">{$order.postscript|escape}</textarea>
</div>
</div>
<!-- {if $how_oos_list} 是否使用缺貨處理 -->
<div role="tabpanel" class="tab-pane fade" id="how_oos_list" aria-labelledby="how_oos_list-tab">
<div>
<!-- {foreach from=$how_oos_list key=how_oos_id item=how_oos_name} -->
<!-- {if $how_oos_id > 0} --><br><!-- {/if} -->
<label>
<input name="how_oos" type="radio" value="{$how_oos_id}" {if $order.how_oos eq $how_oos_id}checked{/if} onclick="changeOOS(this)" />
{$how_oos_name}</label>
<!-- {/foreach} -->
</div>
</div>
<!-- {/if} 缺貨處理結束 -->
</div>

<!-- order_total.lbi -->
{insert_scripts files='transport.js,utils.js'}
<div class="text-success">
<!-- {if $smarty.session.user_id > 0 and ($config.use_integral or $config.use_bonus)} -->
{$lang.complete_acquisition}
<!-- {if $config.use_integral} 是否使用積點-->
{$total.will_get_integral} {$points_name}
<!-- {/if} -->
<!-- {if $config.use_integral and $config.use_bonus} 是否同時使用積點折價券-->,{$lang.with_price} <!-- {/if} -->
<!-- {if $config.use_bonus} 是否使用折價券-->
{$total.will_get_bonus}{$lang.de}{$lang.bonus}
<!-- {/if} -->
</div>
<!-- {/if} -->
<div class="text-info">
{$lang.goods_all_price}: {$total.goods_price_formated}
<!-- {if $total.discount gt 0} 折扣 -->
- {$lang.discount}:{$total.discount_formated}
<!-- {/if} -->
<!-- {if $total.tax gt 0} 稅 -->
+ {$lang.tax}:{$total.tax_formated}
<!-- {/if} -->
<!-- {if $total.shipping_fee > 0} 寄件費用 -->
+ {$lang.shipping_fee}:{$total.shipping_fee_formated}
<!-- {/if} -->
<!-- {if $total.shipping_insure > 0} 保值費用 -->
+ {$lang.insure_fee}:{$total.shipping_insure_formated}
<!-- {/if} -->
<!-- {if $total.pay_fee > 0} 付款費用 -->
+ {$lang.pay_fee}:{$total.pay_fee_formated}
<!-- {/if} -->
<!-- {if $total.pack_fee > 0} 包裝費用-->
+ {$lang.pack_fee}:{$total.pack_fee_formated}
<!-- {/if} -->
<!-- {if $total.card_fee > 0} 禮卡費用-->
+ {$lang.card_fee}:{$total.card_fee_formated}
<!-- {/if} -->
</div>
<!-- {if $total.surplus > 0 or $total.integral > 0 or $total.bonus > 0} 使用餘額或積點或折價券 -->
<div class="text-warning">
<!-- {if $total.surplus > 0} 使用餘額 -->
- {$lang.use_surplus}:{$total.surplus_formated}
<!-- {/if} -->
<!-- {if $total.integral > 0} 使用積點 -->
- {$lang.use_integral}:{$total.integral_formated}
<!-- {/if} -->
<!-- {if $total.bonus > 0} 使用折價券 -->
- {$lang.use_bonus}:{$total.bonus_formated}
<!-- {/if} -->
</div>
<!-- {/if} 使用餘額或積點或折價券 -->
<h3 class="">
<div class="text-danger">{$lang.total_fee}:<strong>{$total.amount_formated}</strong></div>
{if $is_group_buy}<span class="text-success">
{$lang.notice_gb_order_amount}</span>{/if}
<!--{if $total.exchange_integral }消耗積點--><br />
{$lang.notice_eg_integral}<span class="text-info">{$total.exchange_integral}</span>
<!--{/if}-->
</h3>

只有本站虛擬主機會員才能對文章發表問題
如果你是本站虛擬主機會員請先至會員中心首頁綁定主機帳號
其他會員請至留言板提問!