fe / YOHOBUYPC · Commits

Go to a project

Authored by uedxwg
Commit 4c02d47197ee2736cf6250f5f544da692ee8ae82 1 parent 5d03d003

订单ul重构

Inline Side-by-side
Showing 11 changed files with 60 additions and 41 deletions

9.08 KB | W: | H:

9.05 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

6.28 KB | W: | H:

7.16 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
@@ -6,26 +6,21 @@ @@ -6,26 +6,21 @@
6 6
7 var $ = require('jquery'), 7 var $ = require('jquery'),
8 lazyLoad = require('yoho.lazyload'), 8 lazyLoad = require('yoho.lazyload'),
9 - // Hammer = require('yoho.hammer'),  
10 - Handlebars = require('yoho.handlebars'),  
11 tip = require('../plugin/tip'), 9 tip = require('../plugin/tip'),
12 loading = require('../plugin/loading'), 10 loading = require('../plugin/loading'),
13 order = require('./order-info'); 11 order = require('./order-info');
14 12
15 -var dispatchModeHammer,  
16 - dispatchTimeHammer,  
17 - $invoice = $('.invoice'),  
18 - $price = $('.price-cal'), 13 +var $invoice = $('.invoice'),
19 $couponUse = $('.coupon-use.used'), 14 $couponUse = $('.coupon-use.used'),
20 $addressWrap = $('.address-wrap'), 15 $addressWrap = $('.address-wrap'),
21 $coinCheck = $('.coin-check'), 16 $coinCheck = $('.coin-check'),
22 $coinUsed = $('.coin .used'), 17 $coinUsed = $('.coin .used'),
23 $subBlock = $('.sub-block'), 18 $subBlock = $('.sub-block'),
24 payType, 19 payType,
25 - // priceTmpl = Handlebars.compile($('#tmpl-price').html()),  
26 queryString = $.queryString(), 20 queryString = $.queryString(),
27 orderInfo = order.orderInfo, 21 orderInfo = order.orderInfo,
28 - isSubmiting; 22 + isSubmiting,
  23 + dispatchInfo;
29 24
30 require('../common'); 25 require('../common');
31 26
@@ -72,7 +67,7 @@ isLimitGood() && (function() { @@ -72,7 +67,7 @@ isLimitGood() && (function() {
72 67
73 var data = getQueryParam(); 68 var data = getQueryParam();
74 69
75 - data['type'] = 'limitcode'; 70 + data.type = 'limitcode';
76 71
77 a.push(data); 72 a.push(data);
78 orderInfo('skuList', JSON.stringify(a)); 73 orderInfo('skuList', JSON.stringify(a));
@@ -94,12 +89,6 @@ function dispacthTapEvt(e) { @@ -94,12 +89,6 @@ function dispacthTapEvt(e) {
94 $cur.addClass('chosed'); 89 $cur.addClass('chosed');
95 } 90 }
96 91
97 -// dispatchModeHammer = new Hammer(document.getElementsByClassName('dispatch-mode')[0]);  
98 -// dispatchModeHammer.on('tap', dispacthTapEvt);  
99 -  
100 -// dispatchTimeHammer = new Hammer(document.getElementsByClassName('dispatch-time')[0]);  
101 -// dispatchTimeHammer.on('tap', dispacthTapEvt);  
102 -  
103 $('.checkbox').on('touchstart', function() { 92 $('.checkbox').on('touchstart', function() {
104 var $this = $(this); 93 var $this = $(this);
105 94
@@ -139,7 +128,6 @@ function orderCompute() { @@ -139,7 +128,6 @@ function orderCompute() {
139 skuList: isLimitGood() ? orderInfo('skuList') : undefined 128 skuList: isLimitGood() ? orderInfo('skuList') : undefined
140 } 129 }
141 }).then(function(res) { 130 }).then(function(res) {
142 - var priceHtml;  
143 131
144 if ($.type(res) !== 'object') { 132 if ($.type(res) !== 'object') {
145 window.location.reload(); 133 window.location.reload();
@@ -153,12 +141,6 @@ function orderCompute() { @@ -153,12 +141,6 @@ function orderCompute() {
153 $coinCheck.find('em').show(); 141 $coinCheck.find('em').show();
154 $coinUsed.show(); 142 $coinUsed.show();
155 } 143 }
156 - // priceHtml = priceTmpl({  
157 - // cartPayData: res.promotion_formula_list,  
158 - // price: res.last_order_amount  
159 - // });  
160 -  
161 - // $price.html(priceHtml);  
162 } 144 }
163 }).fail(function() { 145 }).fail(function() {
164 window.location.reload(); 146 window.location.reload();
@@ -305,7 +287,6 @@ $('.pay-mode').on('click', 'li', function() { @@ -305,7 +287,6 @@ $('.pay-mode').on('click', 'li', function() {
305 orderInfo('paymentTypeId', $this.data('pay-id')); 287 orderInfo('paymentTypeId', $this.data('pay-id'));
306 orderInfo('paymentType', $this.data('pay-type')); 288 orderInfo('paymentType', $this.data('pay-type'));
307 payType = $this.data('pay-type'); 289 payType = $this.data('pay-type');
308 - // submitOrder();  
309 }); 290 });
310 291
311 $('form').on('submit', function() { 292 $('form').on('submit', function() {
@@ -339,8 +320,15 @@ $subBlock.on('touchstart', 'i', function() { @@ -339,8 +320,15 @@ $subBlock.on('touchstart', 'i', function() {
339 }); 320 });
340 321
341 322
342 -$('.bill a').on('touchstart', function(){ 323 +$('.bill a').on('touchstart', function() {
343 orderInfo('paymentTypeId', $('.delivery-id .icon-cb-radio').data('id')); 324 orderInfo('paymentTypeId', $('.delivery-id .icon-cb-radio').data('id'));
344 orderInfo('paymentType', $('.delivery-time .icon-cb-radio').data('id')); 325 orderInfo('paymentType', $('.delivery-time .icon-cb-radio').data('id'));
345 submitOrder(); 326 submitOrder();
346 -})  
  327 +});
  328 +
  329 +function phoneHidden(phone) {
  330 + return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
  331 +}
  332 +
  333 +$('.info-phone').html(phoneHidden($('.info-phone').html()));
  334 +
@@ -40,3 +40,11 @@ $confim.on('touchend', '.confim', function() { @@ -40,3 +40,11 @@ $confim.on('touchend', '.confim', function() {
40 orderInfo('address', null); 40 orderInfo('address', null);
41 } 41 }
42 }); 42 });
  43 +
  44 +function phoneHidden(phone) {
  45 + return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
  46 +}
  47 +
  48 +$('.tel').each(function(index) {
  49 + $('.tel').eq(index).html(phoneHidden($('.tel').html()));
  50 +});
@@ -208,3 +208,19 @@ if (chinaAddressList) { @@ -208,3 +208,19 @@ if (chinaAddressList) {
208 tip.show('获取省市区列表失败'); 208 tip.show('获取省市区列表失败');
209 }); 209 });
210 } 210 }
  211 +
  212 +function phoneHidden(phone) {
  213 + return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
  214 +}
  215 +
  216 +$('.phone').html(phoneHidden($('.phone').html()));
  217 +
  218 +$('.phone').on('touchend', function() {
  219 + $(this).css('display', 'none');
  220 + $('input[name = "mobile"]').attr('type', 'text');
  221 +});
  222 +
  223 +$('input[name = "mobile"]').on('blur', function() {
  224 + $('.phone').css('display', 'block');
  225 + $('input[name = "mobile"]').attr('type', 'hidden');
  226 +});
@@ -215,10 +215,10 @@ @@ -215,10 +215,10 @@
215 margin-bottom: 10rem / $pxConvertRem; 215 margin-bottom: 10rem / $pxConvertRem;
216 } 216 }
217 217
218 - .dispatch .sub-block:first-child {  
219 - border-bottom: 1px solid #f7f7f7;  
220 - margin-bottom: 15rem / $pxConvertRem;  
221 - } 218 + // .dispatch .sub-block:first-child {
  219 + // border-bottom: 1px solid #f7f7f7;
  220 + // margin-bottom: 15rem / $pxConvertRem;
  221 + // }
222 222
223 // .dispatch-mode li, 223 // .dispatch-mode li,
224 // .dispatch-time li { 224 // .dispatch-time li {
@@ -171,7 +171,16 @@ @@ -171,7 +171,16 @@
171 border: none; 171 border: none;
172 -webkit-appearance: none; 172 -webkit-appearance: none;
173 } 173 }
174 - 174 + p{
  175 + position: absolute;
  176 + top: 0;
  177 + right: pxToRem(40px);
  178 + width: pxToRem(360px);
  179 + height: pxToRem(88px);
  180 + color: #444;
  181 + padding: 0;
  182 + border: none;
  183 + }
175 .address { 184 .address {
176 height: pxToRem(88px) * 2; 185 height: pxToRem(88px) * 2;
177 } 186 }
@@ -8,7 +8,7 @@ @@ -8,7 +8,7 @@
8 height: pxToRem(28px); 8 height: pxToRem(28px);
9 margin-left: pxToRem(50px); 9 margin-left: pxToRem(50px);
10 background: image-url('product/service.png') no-repeat; 10 background: image-url('product/service.png') no-repeat;
11 - background-size: cover; 11 + background-size: 100% auto;
12 } 12 }
13 .detail{ 13 .detail{
14 margin-bottom: 1px; 14 margin-bottom: 1px;
@@ -18,14 +18,12 @@ @@ -18,14 +18,12 @@
18 <i class="iconfont">&#xe616;</i> 18 <i class="iconfont">&#xe616;</i>
19 </h3> 19 </h3>
20 <ul> 20 <ul>
21 - <li>  
22 - <span>在线支付 (推荐)</span>  
23 - <i class="right iconfont {{#if isSelected}}icon-cb-radio{{else}}icon-radio{{/if}}" data-id="1"></i>  
24 - </li>  
25 - <li>  
26 - <span>货到付款</span>  
27 - <i class="right iconfont {{#if isSelected}}icon-cb-radio{{else}}icon-radio{{/if}}" data-id="2"></i> 21 + {{#each dispatchMode}}
  22 + <li {{#if isSelected}}class="chosed"{{/if}}>
  23 + <span>{{name}}</span>
  24 + <i class="right iconfont {{#if isSelected}}icon-cb-radio{{else}}icon-radio{{/if}}" data-id="{{id}}"></i>
28 </li> 25 </li>
  26 + {{/each}}
29 </ul> 27 </ul>
30 </div> 28 </div>
31 <div class="sub-block delivery-id"> 29 <div class="sub-block delivery-id">
@@ -46,7 +44,7 @@ @@ -46,7 +44,7 @@
46 <div class="sub-block delivery-time"> 44 <div class="sub-block delivery-time">
47 <h3> 45 <h3>
48 <p>送货时间</p> 46 <p>送货时间</p>
49 - <span>只在工作日送</span> 47 + <span>工作日、双休日和节假日均送货</span>
50 <i class="iconfont">&#xe616;</i> 48 <i class="iconfont">&#xe616;</i>
51 </h3> 49 </h3>
52 <ul> 50 <ul>
@@ -9,7 +9,8 @@ @@ -9,7 +9,8 @@
9 </label> 9 </label>
10 <label class="mobile"> 10 <label class="mobile">
11 手机号码 11 手机号码
12 - <input type="text" name="mobile" value="{{address.mobile}}"> 12 + <p class="phone">{{address.mobile}}</p>
  13 + <input type="hidden" name="mobile" value="{{address.mobile}}">
13 </label> 14 </label>
14 <label class="area"> 15 <label class="area">
15 省市区 16 省市区
@@ -329,7 +329,6 @@ class IndexController extends AbstractAction @@ -329,7 +329,6 @@ class IndexController extends AbstractAction
329 329
330 $this->setTitle('确认订单'); 330 $this->setTitle('确认订单');
331 $this->setNavHeader('确认订单', $returnUrl, false); // 不显示右上角home按钮 331 $this->setNavHeader('确认订单', $returnUrl, false); // 不显示右上角home按钮
332 -  
333 $this->_view->display('order-ensure', $data); 332 $this->_view->display('order-ensure', $data);
334 } 333 }
335 334