wangshusheng / YOHOBUYPC · Commits

Go to a project

Authored by lore-w
Commit 73bab39a6321322118584f2d4f478dac0ea9ed09 1 parent 332a7be0

订单确认页面细节修改

Inline Side-by-side
Showing 6 changed files with 136 additions and 17 deletions
... ... @@ -16,10 +16,10 @@
<div class="order-selection address-list">
<h2>收货地址：<span>[不保存并关闭]</span></h2>
<div class="address-list-inner">
<ul>
<ul class="exist-address-list">
{{#each hasAddress}}
<li>
<input class="radio" type="radio" id="{{id}}" {{#if checked}}checked{{/if}}/>
<li class="active has-exist-address">
<input class="radio" type="radio" name="exist-address" id="{{id}}" {{#if checked}}checked{{/if}}/>
<label for="{{id}}">
<strong>{{user}}</strong>
<span>{{address}}</span>
... ... @@ -33,12 +33,12 @@
{{/each}}
<li class="use-new-address">
<input class="radio add-address" type="radio" name="address" id=""/>
<input class="radio add-address" type="radio" name="exist-address" id=""/>
<label for="">使用新地址</label>
</li>
</ul>
<div class="address-manage">
<div class="address-manage hide">
<ul>
<li>
<span class="address-legend"><i>*</i>收货人姓名：</span>
... ... @@ -92,34 +92,37 @@
<div class="order-selection pay-time">
<h2>支付及送货时间：<span>[修改]</span></h2>
<h2>支付及送货时间：<span class="switch-pay-modify">[修改]</span></h2>
<ul>
<li>付款方式：在线支付</li>
<li>送货时间：只工作日送货（双休日、节假日不用送）</li>
<li>送货前联系我：否</li>
</ul>
<div class="pay-time-modify">
<div class="pay-time-modify hide">
<h3>支付方式</h3>
<ul>
<li class="pay-dashed-hr">
<li class="pay-dashed-hr pay-recommend">
<div class="pay-type-legend">
<input checked class="radio" name="pay-type" type="radio" id=""/>
<label for="">在线支付（推荐）</label>
</div>
<span class="pay-type-legend">查看支持在线支付的银行和平台</span>
<div class="support-type">
<div class="support-type hide">
<h4>支持以下支付平台在线支付：</h4>
<ul>
{{#each supportLine}}
<img src="{{src}}" alt=""/>
<li><img src="{{src}}" alt=""/></li>
{{/each}}
</ul>
<h4>支持以下银行在线支付：</h4>
<ul>
{{#each supportBank}}
<img src="{{src}}" alt=""/>
<li><img src="{{src}}" alt=""/></li>
{{/each}}
</ul>
</div>
</li>
... ...
... ... @@ -110,7 +110,7 @@ function getUserInfo(id) {
if (data.hasOwnProperty[key]) {
if (!!data[key]) {
eval('$' + key).val(data[key]);
window('$' + key).val(data[key]);
}
}
}
... ...
... ... @@ -31,7 +31,12 @@ var Order = {
//请填写并核对一下信息
$orderSelectionSave: $('.address-list h2 span'),
$addAddress: $('.add-address'),
$addressManage: $('.address-manage')
$addressManage: $('.address-manage'),
$spanPayTypeLegend: $('span.pay-type-legend'),
$supportType: $('.support-type'),
$existAddressList: $('.exist-address-list').find('li'),
$payTimeModify: $('.pay-time-modify'),
$switchPayModify: $('.switch-pay-modify')
},
init: function() {
var e = this.e,
... ... @@ -121,6 +126,7 @@ var Order = {
});
//展开新地址填写表单
e.$addAddress.click(function() {
if (e.$addressManage.hasClass('hide')) {
... ... @@ -131,6 +137,28 @@ var Order = {
}
});
e.$spanPayTypeLegend.click(function() {
$(this).toggleClass('active');
e.$supportType.toggleClass('hide');
});
e.$existAddressList.click(function(event) {
e.$existAddressList.removeClass('active');
$(this).addClass('active');
if ($(this).hasClass('use-new-address')) {
e.$addAddress.attr('checked', true);// 必须在trigger前
e.$addAddress.trigger('click');
}
event.stopPropagation();
});
e.$switchPayModify.click(function() {
e.$payTimeModify.toggleClass('hide');
});
},
//渲染价格明细
... ...
... ... @@ -6,6 +6,7 @@
.order-edit {
width: 100%;
position: relative;
margin-bottom: 35px;
&:before {
content: '';
... ... @@ -124,6 +125,25 @@
cursor: pointer;
}
}
&.exist-address-list {
li {
border: 1px solid #fff;
&.active {
background: #dbedf7;
border: 1px solid #8fb8e0;
}
&.has-exist-address {
a {
color: #468fa2;
text-decoration: underline;
}
}
}
}
}
}
... ... @@ -246,21 +266,69 @@
div.pay-type-legend {
width: 130px;
display: inline-block;
padding: 0;
text-indent: 0;
}
span.pay-type-legend {
margin: 0;
color: #468fa2;
cursor: pointer;
&:after {
content: '';
width: 12px;
height: 12px;
background: image_url('order/icon_arrow.png');
display: inline-block;
@include transition(transform .3s);
}
&.active {
&:after {
@include rotate(180deg);
}
}
}
.support-type {
display: none;
display: block;
margin-left: 130px;
border-left: 1px dashed #ccc;
padding: 15px;
font-size: 12px;
h4 {
margin-bottom: 15px;
padding: 10px 0 10px 15px;
}
ul {
height: auto;
overflow: hidden;
margin: 0;
padding: 0;
li {
display: block;
float: left;
width: 105px;
height: 30px;
border: 1px solid #ccc;
margin: 0 0 10px 15px;
img {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
}
}
}
}
.pay-recommend {
font-size: 0;
.pay-type-legend, .support-type {
font-size: 12px;
}
}
}
... ... @@ -268,6 +336,8 @@
.select-express {
border-bottom: none;
.express-list {
padding-left: 15px;
margin: 10px 0;
... ...
... ... @@ -27,6 +27,24 @@ class SaveController extends AbstractAction
),
array(
'src' => 'http://static.yohobuy.com/images/pay/icon/zhifubao.png'
),
array(
'src' => 'http://static.yohobuy.com/images/pay/icon/zhifubao.png'
),
array(
'src' => 'http://static.yohobuy.com/images/pay/icon/zhifubao.png'
),
array(
'src' => 'http://static.yohobuy.com/images/pay/icon/zhifubao.png'
),
array(
'src' => 'http://static.yohobuy.com/images/pay/icon/zhifubao.png'
),
array(
'src' => 'http://static.yohobuy.com/images/pay/icon/zhifubao.png'
),
array(
'src' => 'http://static.yohobuy.com/images/pay/icon/zhifubao.png'
)
),
'supportBank' => array(
... ...