fe / YOHOBUYWAP · 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 @@ @@ -16,10 +16,10 @@
16 <div class="order-selection address-list"> 16 <div class="order-selection address-list">
17 <h2>收货地址：<span>[不保存并关闭]</span></h2> 17 <h2>收货地址：<span>[不保存并关闭]</span></h2>
18 <div class="address-list-inner"> 18 <div class="address-list-inner">
19 - <ul> 19 + <ul class="exist-address-list">
20 {{#each hasAddress}} 20 {{#each hasAddress}}
21 - <li>  
22 - <input class="radio" type="radio" id="{{id}}" {{#if checked}}checked{{/if}}/> 21 + <li class="active has-exist-address">
  22 + <input class="radio" type="radio" name="exist-address" id="{{id}}" {{#if checked}}checked{{/if}}/>
23 <label for="{{id}}"> 23 <label for="{{id}}">
24 <strong>{{user}}</strong> 24 <strong>{{user}}</strong>
25 <span>{{address}}</span> 25 <span>{{address}}</span>
@@ -33,12 +33,12 @@ @@ -33,12 +33,12 @@
33 {{/each}} 33 {{/each}}
34 34
35 <li class="use-new-address"> 35 <li class="use-new-address">
36 - <input class="radio add-address" type="radio" name="address" id=""/> 36 + <input class="radio add-address" type="radio" name="exist-address" id=""/>
37 <label for="">使用新地址</label> 37 <label for="">使用新地址</label>
38 </li> 38 </li>
39 </ul> 39 </ul>
40 40
41 - <div class="address-manage"> 41 + <div class="address-manage hide">
42 <ul> 42 <ul>
43 <li> 43 <li>
44 <span class="address-legend"><i>*</i>收货人姓名：</span> 44 <span class="address-legend"><i>*</i>收货人姓名：</span>
@@ -92,34 +92,37 @@ @@ -92,34 +92,37 @@
92 92
93 93
94 <div class="order-selection pay-time"> 94 <div class="order-selection pay-time">
95 - <h2>支付及送货时间：<span>[修改]</span></h2> 95 + <h2>支付及送货时间：<span class="switch-pay-modify">[修改]</span></h2>
96 <ul> 96 <ul>
97 <li>付款方式：在线支付</li> 97 <li>付款方式：在线支付</li>
98 <li>送货时间：只工作日送货（双休日、节假日不用送）</li> 98 <li>送货时间：只工作日送货（双休日、节假日不用送）</li>
99 <li>送货前联系我：否</li> 99 <li>送货前联系我：否</li>
100 </ul> 100 </ul>
101 101
102 - <div class="pay-time-modify"> 102 + <div class="pay-time-modify hide">
103 <h3>支付方式</h3> 103 <h3>支付方式</h3>
104 104
105 <ul> 105 <ul>
106 - <li class="pay-dashed-hr"> 106 + <li class="pay-dashed-hr pay-recommend">
107 <div class="pay-type-legend"> 107 <div class="pay-type-legend">
108 <input checked class="radio" name="pay-type" type="radio" id=""/> 108 <input checked class="radio" name="pay-type" type="radio" id=""/>
109 <label for="">在线支付（推荐）</label> 109 <label for="">在线支付（推荐）</label>
110 </div> 110 </div>
111 <span class="pay-type-legend">查看支持在线支付的银行和平台</span> 111 <span class="pay-type-legend">查看支持在线支付的银行和平台</span>
112 - <div class="support-type"> 112 + <div class="support-type hide">
113 <h4>支持以下支付平台在线支付：</h4> 113 <h4>支持以下支付平台在线支付：</h4>
  114 + <ul>
114 {{#each supportLine}} 115 {{#each supportLine}}
115 116
116 - <img src="{{src}}" alt=""/> 117 + <li><img src="{{src}}" alt=""/></li>
117 {{/each}} 118 {{/each}}
118 - 119 + </ul>
119 <h4>支持以下银行在线支付：</h4> 120 <h4>支持以下银行在线支付：</h4>
  121 + <ul>
120 {{#each supportBank}} 122 {{#each supportBank}}
121 - <img src="{{src}}" alt=""/> 123 + <li><img src="{{src}}" alt=""/></li>
122 {{/each}} 124 {{/each}}
  125 + </ul>
123 </div> 126 </div>
124 </li> 127 </li>
125 128
@@ -110,7 +110,7 @@ function getUserInfo(id) { @@ -110,7 +110,7 @@ function getUserInfo(id) {
110 110
111 if (data.hasOwnProperty[key]) { 111 if (data.hasOwnProperty[key]) {
112 if (!!data[key]) { 112 if (!!data[key]) {
113 - eval('$' + key).val(data[key]); 113 + window('$' + key).val(data[key]);
114 } 114 }
115 } 115 }
116 } 116 }
@@ -31,7 +31,12 @@ var Order = { @@ -31,7 +31,12 @@ var Order = {
31 //请填写并核对一下信息 31 //请填写并核对一下信息
32 $orderSelectionSave: $('.address-list h2 span'), 32 $orderSelectionSave: $('.address-list h2 span'),
33 $addAddress: $('.add-address'), 33 $addAddress: $('.add-address'),
34 - $addressManage: $('.address-manage') 34 + $addressManage: $('.address-manage'),
  35 + $spanPayTypeLegend: $('span.pay-type-legend'),
  36 + $supportType: $('.support-type'),
  37 + $existAddressList: $('.exist-address-list').find('li'),
  38 + $payTimeModify: $('.pay-time-modify'),
  39 + $switchPayModify: $('.switch-pay-modify')
35 }, 40 },
36 init: function() { 41 init: function() {
37 var e = this.e, 42 var e = this.e,
@@ -121,6 +126,7 @@ var Order = { @@ -121,6 +126,7 @@ var Order = {
121 126
122 }); 127 });
123 128
  129 + //展开新地址填写表单
124 e.$addAddress.click(function() { 130 e.$addAddress.click(function() {
125 131
126 if (e.$addressManage.hasClass('hide')) { 132 if (e.$addressManage.hasClass('hide')) {
@@ -131,6 +137,28 @@ var Order = { @@ -131,6 +137,28 @@ var Order = {
131 } 137 }
132 138
133 }); 139 });
  140 +
  141 + e.$spanPayTypeLegend.click(function() {
  142 + $(this).toggleClass('active');
  143 +
  144 + e.$supportType.toggleClass('hide');
  145 + });
  146 +
  147 + e.$existAddressList.click(function(event) {
  148 + e.$existAddressList.removeClass('active');
  149 + $(this).addClass('active');
  150 +
  151 + if ($(this).hasClass('use-new-address')) {
  152 + e.$addAddress.attr('checked', true);// 必须在trigger前
  153 + e.$addAddress.trigger('click');
  154 + }
  155 +
  156 + event.stopPropagation();
  157 + });
  158 +
  159 + e.$switchPayModify.click(function() {
  160 + e.$payTimeModify.toggleClass('hide');
  161 + });
134 }, 162 },
135 163
136 //渲染价格明细 164 //渲染价格明细
@@ -6,6 +6,7 @@ @@ -6,6 +6,7 @@
6 .order-edit { 6 .order-edit {
7 width: 100%; 7 width: 100%;
8 position: relative; 8 position: relative;
  9 + margin-bottom: 35px;
9 10
10 &:before { 11 &:before {
11 content: ''; 12 content: '';
@@ -124,6 +125,25 @@ @@ -124,6 +125,25 @@
124 cursor: pointer; 125 cursor: pointer;
125 } 126 }
126 } 127 }
  128 +
  129 + &.exist-address-list {
  130 +
  131 + li {
  132 + border: 1px solid #fff;
  133 +
  134 + &.active {
  135 + background: #dbedf7;
  136 + border: 1px solid #8fb8e0;
  137 + }
  138 +
  139 + &.has-exist-address {
  140 + a {
  141 + color: #468fa2;
  142 + text-decoration: underline;
  143 + }
  144 + }
  145 + }
  146 + }
127 } 147 }
128 } 148 }
129 149
@@ -246,21 +266,69 @@ @@ -246,21 +266,69 @@
246 div.pay-type-legend { 266 div.pay-type-legend {
247 width: 130px; 267 width: 130px;
248 display: inline-block; 268 display: inline-block;
  269 + padding: 0;
  270 + text-indent: 0;
249 } 271 }
250 span.pay-type-legend { 272 span.pay-type-legend {
251 margin: 0; 273 margin: 0;
252 color: #468fa2; 274 color: #468fa2;
  275 + cursor: pointer;
  276 +
  277 + &:after {
  278 + content: '';
  279 + width: 12px;
  280 + height: 12px;
  281 + background: image_url('order/icon_arrow.png');
  282 + display: inline-block;
  283 + @include transition(transform .3s);
  284 + }
  285 +
  286 + &.active {
  287 + &:after {
  288 + @include rotate(180deg);
  289 + }
  290 + }
253 } 291 }
254 292
255 .support-type { 293 .support-type {
256 - display: none; 294 + display: block;
257 margin-left: 130px; 295 margin-left: 130px;
258 border-left: 1px dashed #ccc; 296 border-left: 1px dashed #ccc;
259 - padding: 15px;  
260 font-size: 12px; 297 font-size: 12px;
261 298
262 h4 { 299 h4 {
263 - margin-bottom: 15px; 300 + padding: 10px 0 10px 15px;
  301 + }
  302 +
  303 + ul {
  304 + height: auto;
  305 + overflow: hidden;
  306 + margin: 0;
  307 + padding: 0;
  308 +
  309 + li {
  310 + display: block;
  311 + float: left;
  312 + width: 105px;
  313 + height: 30px;
  314 + border: 1px solid #ccc;
  315 + margin: 0 0 10px 15px;
  316 +
  317 + img {
  318 + display: block;
  319 + width: 100%;
  320 + height: 100%;
  321 + overflow: hidden;
  322 + }
  323 + }
  324 + }
  325 + }
  326 +
  327 + .pay-recommend {
  328 + font-size: 0;
  329 +
  330 + .pay-type-legend, .support-type {
  331 + font-size: 12px;
264 } 332 }
265 } 333 }
266 } 334 }
@@ -268,6 +336,8 @@ @@ -268,6 +336,8 @@
268 336
269 .select-express { 337 .select-express {
270 338
  339 + border-bottom: none;
  340 +
271 .express-list { 341 .express-list {
272 padding-left: 15px; 342 padding-left: 15px;
273 margin: 10px 0; 343 margin: 10px 0;
@@ -27,6 +27,24 @@ class SaveController extends AbstractAction @@ -27,6 +27,24 @@ class SaveController extends AbstractAction
27 ), 27 ),
28 array( 28 array(
29 'src' => 'http://static.yohobuy.com/images/pay/icon/zhifubao.png' 29 'src' => 'http://static.yohobuy.com/images/pay/icon/zhifubao.png'
  30 + ),
  31 + array(
  32 + 'src' => 'http://static.yohobuy.com/images/pay/icon/zhifubao.png'
  33 + ),
  34 + array(
  35 + 'src' => 'http://static.yohobuy.com/images/pay/icon/zhifubao.png'
  36 + ),
  37 + array(
  38 + 'src' => 'http://static.yohobuy.com/images/pay/icon/zhifubao.png'
  39 + ),
  40 + array(
  41 + 'src' => 'http://static.yohobuy.com/images/pay/icon/zhifubao.png'
  42 + ),
  43 + array(
  44 + 'src' => 'http://static.yohobuy.com/images/pay/icon/zhifubao.png'
  45 + ),
  46 + array(
  47 + 'src' => 'http://static.yohobuy.com/images/pay/icon/zhifubao.png'
30 ) 48 )
31 ), 49 ),
32 'supportBank' => array( 50 'supportBank' => array(