fe / YOHOBUYPC · Commits

Go to a project

Authored by lore-w
Commit 6c3ce08b0f7b4d94092015f2c5d3dd09449a381a 1 parent e9cf57c2

订单确认前台页面

Inline Side-by-side
Showing 9 changed files with 323 additions and 2 deletions
{{> layout/simple-header}}
<div class="order-save-page yoho-page clearfix">
{{# orderSave}}
<div class="order-edit"></div>
<div class="order-edit">
<div class="order-title">
<ul>
<li>查看购物车</li>
<li class="active">填写订单</li>
<li class="end">付款，完成购买</li>
</ul>
</div>
<div class="order-edit-main">
<h2 class="title">请填写并核对以下信息</h2>
<div class="order-content">
<div class="order-selection address-list">
<h2>收货地址：<span>[不保存并关闭]</span></h2>
<ul>
{{#each hasAddress}}
<li>
<input class="radio" type="radio" name="address" id="{{id}}" {{#if checked}}checked{{/if}}/>
<label for="{{id}}">
<strong>{{user}}</strong>
<span>{{address}}</span>
<a href="javascript:void(0);">设为默认地址</a>
<div class="order-modify-btn">
<span>[修改]</span>
<span>[删除]</span>
</div>
</label>
</li>
{{/each}}
<li>
<input class="radio" type="radio" name="" id="addAddress"/>
<label for="addAddress">使用新地址</label>
</li>
</ul>
</div>
<div class="order-selection address-manage hide">
<ul>
<li>
<span class="address-legend"><i>*</i>收货人姓名：</span>
<input type="text" name="name" class="name text-input"/>
<span>请填写您的真实姓名，最多5个汉字</span>
</li>
<li>
<span class="address-legend"><i>*</i>省市：</span>
<select name="" id="" class="text-input">
{{# province}}
<option value="{{value}}">{{name}}</option>
{{/ province}}
<option value="0">请选择省份</option>
</select>
<select name="" id="" class="text-input">
{{# city}}
<option value="{{value}}">{{name}}</option>
{{/ city}}
<option value="0">请选择城市</option>
</select>
<select name="" id="" class="text-input">
{{# county}}
<option value="{{value}}">{{name}}</option>
<option value="0">请选择区县</option>
{{/ county}}
</select>
<input type="text" class="text-input"/>
<span>标'*'的为支持加急送的地区，请输入收货的详细地址</span>
</li>
<li>
<span class="address-legend"><i>*</i>手机号码：</span>
<input type="text" class="text-input"/>
<span>填写正确手机号便于接收发货和收货通知</span>
</li>
<li>
<span class="address-legend">固定电话：</span>
<input type="text" class="text-input"/>—
<input type="text" class="text-input"/>
<span>如：010-12345678，固话和手机号至少填一项</span>
</li>
<li>
<span class="address-legend">电子邮件：</span>
<input type="text" class="text-input"/>
<span>用来接收订单提醒邮件，便于您及时了解订单状态</span>
</li>
<li>
<span class="address-legend">邮编：</span>
<input type="text" class="text-input"/>
<span>请填写准确的邮编，以确保商品尽快送达</span>
</li>
</ul>
</div>
<span class="save-btn">保存并送到这个地址</span>
<div class="order-selection pay-time">
<h2>支付及送货时间：<span>[修改]</span></h2>
<ul>
<li>付款方式：在线支付</li>
<li>送货时间：只工作日送货（双休日、节假日不用送）</li>
<li>送货前联系我：否</li>
</ul>
</div>
<div class="order-selection select-express">
<h2>选择快递：</h2>
<div class="express-list">
<input class="radio" type="radio" name="" id="common-express"/>
<label for="common-express">普通快递：&nbsp;&nbsp;运费 ￥0.00</label>
</div>
<div class="express-list">
<input class="radio" type="radio" name="" id="sf-express"/>
<label for="sf-express">顺丰速运：&nbsp;&nbsp;运费 ￥5.00　(仅支持顺丰可配送的地区)</label>
</div>
<div class="express-list express-tips">注：配送会由于天气，交通等不可抗拒的客观因素造成您收货时间延迟，请您知悉。</div>
</div>
</div>
</div>
</div>
<div class="order-pay"></div>
{{/ orderSave}}
</div>
... ...
$order: sprite-map("order/save/*.png", $spacing: 10px);
@import "save";
\ No newline at end of file
... ...
... ... @@ -5,6 +5,203 @@
// 填写订单
.order-edit {
width: 100%;
position: relative;
&:before {
content: '';
display: block;
background: sprite($order, cart_logo) no-repeat;
width: image-width(sprite-file($order, cart_logo));
height: image-height(sprite-file($order, cart_logo));
}
.order-title {
ul {
display: block;
background: sprite($order, cartnew_flow) no-repeat;
width: image-width(sprite-file($order, cartnew_flow));
height: image-height(sprite-file($order, cartnew_flow));
position: absolute;
right: 0;
top: 0;
li {
display: block;
width: 33.33333333%;
float: left;
font-size: 12px;
color: #999;
height: 50px;
line-height: 50px;
&.active {
color: #333;
text-align: center;
&:after {
display: block;
content: '';
background: sprite($order, cart_flow_black) no-repeat;
width: image-width(sprite-file($order, cart_flow_black));
height: image-height(sprite-file($order, cart_flow_black));
position: absolute;
left: 50%;
margin-left: image-width(sprite-file($order, cart_flow_black))/(-2);
top: 0;
}
}
&.end {
text-align: right;
}
}
}
}
.order-edit-main {
border: 1px solid #ccc;
margin-top: 30px;
h2.title {
height: 30px;
line-height: 30px;
background: #000000;
color: #fff;
font-size: 12px;
text-indent: 15px;
}
.order-content {
padding: 20px 30px;
font-size: 12px;
color: #333;
//public
.order-selection {
border-top: 1px dashed #ccc;
padding-top: 30px;
&.address-list {
border-top: none;
padding-top: 0;
}
h2 {
font-size: 14px;
color: #000;
span {
color: #e8044f;
text-decoration: underline;
cursor: pointer;
}
}
}
//end
.address-list {
ul {
padding: 15px 0;
li {
margin: 10px 0;
strong {
font-weight: bold;
margin-right: 15px;
}
input.radio {
margin: 0;
vertical-align: middle;
}
}
.order-modify-btn {
display: inline-block;
float: right;
color: #e8044f;
span {
text-decoration: underline;
margin: 0 10px;
cursor: pointer;
}
}
}
}
.address-manage {
li {
margin-bottom: 15px;
.address-legend {
width: 80px;
text-align: right;
display: inline-block;
height: 30px;
line-height: 30px;
color: #333;
i {
color: #e8044f;
}
}
.text-input {
height: 25px;
line-height: 25px;
}
}
}
.save-btn {
background: sprite($order, btn_sb) no-repeat;
width: image-width(sprite-file($order, btn_sb));
height: image-height(sprite-file($order, btn_sb));
line-height: image-height(sprite-file($order, btn_sb));
display: block;
font-size: 14px;
color: #fff;
font-weight: bold;
text-indent: 25px;
cursor: pointer;
margin-bottom: 30px;
}
.pay-time {
ul {
padding: 15px;
li {
margin: 10px 0;
}
}
}
.select-express {
.express-list {
padding-left: 15px;
margin: 10px 0;
input.radio {
margin: 0;
vertical-align: middle;
}
}
.express-tips {
color: #999;
}
}
}
}
}
//
... ...
... ... @@ -10,7 +10,15 @@ class SaveController extends AbstractAction
public function indexAction()
{
$data = array(
'orderSavePage' => true
'orderSavePage' => true,
'orderSave' => true,
'hasAddress' => array(
array(
'user' => '王成龙',
'address' => '江苏省南京市建邺区嘉陵江东街18号，国家广告产业园5栋17楼，YOHO 18605269243',
'checked' => true
)
)
);
$this->_view->display('index', $data);
... ...