fe / yoho-blk · Commits

Go to a project

Authored by biao
Commit b3dd060c27ba0577a81a8fc487953e94d0ca946e 1 parent c658f97a

update for logistic info

Inline Side-by-side
Showing 9 changed files with 245 additions and 108 deletions
@@ -74,6 +74,7 @@ @@ -74,6 +74,7 @@
74 "gulp-postcss": "^6.1.0", 74 "gulp-postcss": "^6.1.0",
75 "gulp-sourcemaps": "^2.0.0-alpha", 75 "gulp-sourcemaps": "^2.0.0-alpha",
76 "gulp-util": "^3.0.7", 76 "gulp-util": "^3.0.7",
  77 + "handlebars-loader": "^1.3.0",
77 "husky": "^0.11.4", 78 "husky": "^0.11.4",
78 "nodemon": "1.9.2", 79 "nodemon": "1.9.2",
79 "nyc": "^6.6.1", 80 "nyc": "^6.6.1",
@@ -7,6 +7,9 @@ @@ -7,6 +7,9 @@
7 var dialog = require('../plugins/dialog'); 7 var dialog = require('../plugins/dialog');
8 var _dialog = dialog.Dialog; 8 var _dialog = dialog.Dialog;
9 9
  10 +// var camelCase = require('yoho-node-lib').lib.camelCase;
  11 +
  12 +var expressTpl = require('../../tpl/me/express.hbs');
10 13
11 // 更新表格 14 // 更新表格
12 var tableOperation = { 15 var tableOperation = {
@@ -100,7 +103,7 @@ function getOrderList(type, page) { @@ -100,7 +103,7 @@ function getOrderList(type, page) {
100 } 103 }
101 }).done(function(res) { 104 }).done(function(res) {
102 tableOperation.appendBody(res); 105 tableOperation.appendBody(res);
103 - bindPaginationClick(); // eslint-disable-line 106 + bindEvent(); // eslint-disable-line
104 countDown.start(); 107 countDown.start();
105 }).fail(function(err) { 108 }).fail(function(err) {
106 console.log(err); 109 console.log(err);
@@ -198,14 +201,24 @@ function cancelOrder(code) { @@ -198,14 +201,24 @@ function cancelOrder(code) {
198 } 201 }
199 202
200 // 取消订单 203 // 取消订单
201 -function getExpressInfo(code) { 204 +function getExpressInfo(code, $el) {
202 $.ajax({ 205 $.ajax({
203 url: 'getExpressInfo', 206 url: 'getExpressInfo',
204 data: { 207 data: {
205 orderCode: code 208 orderCode: code
206 } 209 }
207 }).done(function(result) { 210 }).done(function(result) {
208 - console.log(result); 211 + var tpl;
  212 + var data = {};
  213 +
  214 + if (result.code === 200) {
  215 + data = result.data;
  216 +
  217 + data.sub_express_deatil = data.express_detail.slice(0, 2);
  218 +
  219 + tpl = expressTpl(data);
  220 + $(tpl).appendTo($el);
  221 + }
209 }).fail(function(err) { 222 }).fail(function(err) {
210 console.log(err); 223 console.log(err);
211 }); 224 });
@@ -237,116 +250,135 @@ $('.tabs li').on('click', function() { @@ -237,116 +250,135 @@ $('.tabs li').on('click', function() {
237 250
238 }); 251 });
239 252
240 -$('.delete').on('click', function() {  
241 - var code = $(this).data('code');  
242 - var tip = new _dialog({  
243 - className: 'delete-dialog',  
244 - content: '<h1>您确定要永久删除该订单么</h1>' +  
245 - '<p>永久删除后，订单将无法恢复，</p>' +  
246 - '<p>您将无法对该订单的商品申请售后服务，请谨慎操作。</p>',  
247 - btns: [  
248 - {  
249 - id: 'delete-confirm',  
250 - btnClass: ['confirm'],  
251 - name: '确认',  
252 - cb: function() {  
253 - deleteOrder(code);  
254 - tip.close(); 253 +function bindDeleteEvent() {
  254 + $('.delete').on('click', function() {
  255 + var code = $(this).data('code');
  256 + var tip = new _dialog({
  257 + className: 'delete-dialog',
  258 + content: '<h1>您确定要永久删除该订单么</h1>' +
  259 + '<p>永久删除后，订单将无法恢复，</p>' +
  260 + '<p>您将无法对该订单的商品申请售后服务，请谨慎操作。</p>',
  261 + btns: [
  262 + {
  263 + id: 'delete-confirm',
  264 + btnClass: ['confirm'],
  265 + name: '确认',
  266 + cb: function() {
  267 + deleteOrder(code);
  268 + tip.close();
  269 + }
  270 + },
  271 + {
  272 + id: 'delete-cancel',
  273 + btnClass: ['cancel'],
  274 + name: '取消',
  275 + cb: function() {
  276 + tip.close();
  277 + }
255 } 278 }
256 - },  
257 - {  
258 - id: 'delete-cancel',  
259 - btnClass: ['cancel'],  
260 - name: '取消',  
261 - cb: function() {  
262 - tip.close();  
263 - }  
264 - }  
265 - ]  
266 - }).show();  
267 -}); 279 + ]
  280 + }).show();
  281 + });
  282 +}
268 283
269 -$('.cancel').on('click', function() {  
270 - var code = $(this).data('code');  
271 - var tip = new _dialog({  
272 - className: 'cancel-dialog',  
273 - content: '<h1>取消订单</h1>' +  
274 - '<span class="tip">您取消订单的原因是：</span>' +  
275 - '<div class="reason">' +  
276 - '<div class="row">' +  
277 - '<p><span class="iconfont raido checked">&#xe603;</span>支付不成功</p>' +  
278 - '<p><span class="iconfont raido">&#xe604;</span>现在不想购买</p>' +  
279 - '</div>' +  
280 - '<div class="row">' +  
281 - '<p><span class="iconfont raido">&#xe604;</span>订单架构有问题</p>' +  
282 - '<p><span class="iconfont raido">&#xe604;</span>修改订单信息</p>' +  
283 - '</div>' +  
284 - '<div class="row">' +  
285 - '<p><span class="iconfont raido">&#xe604;</span>错误或重复下单</p>' +  
286 - '<p><span class="iconfont raido">&#xe604;</span>忘记使用优惠券或YOHO币</p>' +  
287 - '</div>' +  
288 - '<div class="row">' +  
289 - '<p><span class="iconfont raido">&#xe604;</span>等待发货时间过长</p>' +  
290 - '<p><span class="iconfont raido">&#xe604;</span>商品价格较贵</p>' +  
291 - '</div>' +  
292 - '<div class="row">' +  
293 - '<p><span class="iconfont raido">&#xe604;</span>运费较高</p>' +  
294 - '</div>' +  
295 - '<div class="row other">' +  
296 - '<p><span class="iconfont raido">&#xe604;</span>其他原因</p>' +  
297 - '<input type="text" disabled placeholder="50个字以内"/>' +  
298 - '</div>' +  
299 - '</div>' +  
300 - '<span class="tip">温馨提示：</span>' +  
301 - '<p><span>*</span>订单成功取消后无法恢复</p>' +  
302 - '<p><span>*</span>该订单已付金额将原路返回</p>' +  
303 - '<p><span>*</span>取消订单后，存在促销关系的子订单及优惠可能会一并取消</p>',  
304 - btns: [  
305 - {  
306 - id: 'cancel-confirm',  
307 - btnClass: ['confirm'],  
308 - name: '确定并取消订单',  
309 - cb: function() {  
310 - cancelOrder(code);  
311 - tip.close(); 284 +function bindCancelEvent() {
  285 + $('.cancel').on('click', function() {
  286 + var code = $(this).data('code');
  287 + var tip = new _dialog({
  288 + className: 'cancel-dialog',
  289 + content: '<h1>取消订单</h1>' +
  290 + '<span class="tip">您取消订单的原因是：</span>' +
  291 + '<div class="reason">' +
  292 + '<div class="row">' +
  293 + '<p><span class="iconfont raido checked">&#xe603;</span>支付不成功</p>' +
  294 + '<p><span class="iconfont raido">&#xe604;</span>现在不想购买</p>' +
  295 + '</div>' +
  296 + '<div class="row">' +
  297 + '<p><span class="iconfont raido">&#xe604;</span>订单架构有问题</p>' +
  298 + '<p><span class="iconfont raido">&#xe604;</span>修改订单信息</p>' +
  299 + '</div>' +
  300 + '<div class="row">' +
  301 + '<p><span class="iconfont raido">&#xe604;</span>错误或重复下单</p>' +
  302 + '<p><span class="iconfont raido">&#xe604;</span>忘记使用优惠券或YOHO币</p>' +
  303 + '</div>' +
  304 + '<div class="row">' +
  305 + '<p><span class="iconfont raido">&#xe604;</span>等待发货时间过长</p>' +
  306 + '<p><span class="iconfont raido">&#xe604;</span>商品价格较贵</p>' +
  307 + '</div>' +
  308 + '<div class="row">' +
  309 + '<p><span class="iconfont raido">&#xe604;</span>运费较高</p>' +
  310 + '</div>' +
  311 + '<div class="row other">' +
  312 + '<p><span class="iconfont raido">&#xe604;</span>其他原因</p>' +
  313 + '<input type="text" disabled placeholder="50个字以内"/>' +
  314 + '</div>' +
  315 + '</div>' +
  316 + '<span class="tip">温馨提示：</span>' +
  317 + '<p><span>*</span>订单成功取消后无法恢复</p>' +
  318 + '<p><span>*</span>该订单已付金额将原路返回</p>' +
  319 + '<p><span>*</span>取消订单后，存在促销关系的子订单及优惠可能会一并取消</p>',
  320 + btns: [
  321 + {
  322 + id: 'cancel-confirm',
  323 + btnClass: ['confirm'],
  324 + name: '确定并取消订单',
  325 + cb: function() {
  326 + cancelOrder(code);
  327 + tip.close();
  328 + }
  329 + },
  330 + {
  331 + id: 'cancel-stop',
  332 + btnClass: ['cancel'],
  333 + name: '暂不取消',
  334 + cb: function() {
  335 + tip.close();
  336 + }
312 } 337 }
313 - },  
314 - {  
315 - id: 'cancel-stop',  
316 - btnClass: ['cancel'],  
317 - name: '暂不取消',  
318 - cb: function() {  
319 - tip.close(); 338 + ]
  339 + }).show();
  340 +
  341 + $('.cancel-dialog .reason p').check({
  342 + type: 'radio',
  343 + group: 'reason',
  344 + onChange: function(ele, checked) {
  345 + var $this = $(ele);
  346 + var $input = $('.cancel-dialog .reason input');
  347 +
  348 + if (checked && $this.parent('.other').length) {
  349 + $input.prop('disabled', false);
  350 + } else {
  351 + $input.val('');
  352 + $input.prop('disabled', true);
320 } 353 }
321 } 354 }
322 - ]  
323 - }).show();  
324 -  
325 - $('.cancel-dialog .reason p').check({  
326 - type: 'radio',  
327 - group: 'reason',  
328 - onChange: function(ele, checked) {  
329 - var $this = $(ele);  
330 - var $input = $('.cancel-dialog .reason input');  
331 -  
332 - if (checked && $this.parent('.other').length) {  
333 - $input.prop('disabled', false);  
334 - } else {  
335 - $input.val('');  
336 - $input.prop('disabled', true);  
337 - }  
338 - } 355 + });
339 }); 356 });
340 -}); 357 +}
341 358
342 -$('.express').on('click', function() {  
343 - var code = $(this).data('code'); 359 +function bindExpressEvent() {
  360 + $('.express').on('click', function() {
  361 + var $this = $(this);
  362 + var code = $this.data('code');
  363 + var $info = $this.find('.express-info');
344 364
345 - getExpressInfo(code);  
346 -}); 365 + if ($info.length) {
  366 + $info.toggleClass('hide');
  367 + } else {
  368 + getExpressInfo(code, $this);
  369 + }
  370 +
  371 + });
  372 +}
347 373
  374 +function bindEvent() {
  375 + bindPaginationClick();
  376 + bindDeleteEvent();
  377 + bindCancelEvent();
  378 + bindExpressEvent();
  379 +}
348 380
349 -bindPaginationClick(); 381 +bindEvent();
350 countDown.start(); 382 countDown.start();
351 setOrderTotal(); 383 setOrderTotal();
352 384
@@ -103,4 +103,3 @@ @@ -103,4 +103,3 @@
103 103
104 @import "address"; 104 @import "address";
105 @import "order/index"; 105 @import "order/index";
106 -@import "order/dialog";  
  1 +.express-info {
  2 + width: 315px;
  3 + max-height: 255px;
  4 + border: 2px solid #ccc;
  5 + padding: 20px;
  6 + box-sizing: border-box;
  7 + position: absolute;
  8 + top: 90px;
  9 + right: 0;
  10 + z-index: 10;
  11 + text-align: left;
  12 + background-color: #fff;
  13 +
  14 + .triangle {
  15 + width: 0;
  16 + height: 0;
  17 + display: inline-block;
  18 + border-style: solid;
  19 + border-width: 0 5px 5px;
  20 + border-color: transparent transparent #ccc;
  21 + line-height: 0;
  22 + _border-color: #fff #fff #ccc; /* stylelint-disable-line */
  23 + _filter: progid:DXImageTransform.Microsoft.Chroma(color='#fff'); /* stylelint-disable-line */
  24 + position: absolute;
  25 + top: -7px;
  26 + right: 61px;
  27 +
  28 + &.inside {
  29 + right: 63px;
  30 + top: -3px;
  31 + border-width: 0 3px 3px;
  32 + border-color: transparent transparent #ccc;
  33 + _border-color: #ccc #ccc #fff; /* stylelint-disable-line */
  34 + _filter: progid:DXImageTransform.Microsoft.Chroma(color='#ccc'); /* stylelint-disable-line */
  35 + }
  36 + }
  37 +
  38 + .basic {
  39 + border-bottom: 1px solid #f1f1f1;
  40 + margin-bottom: 20px;
  41 +
  42 + p {
  43 + width: 49%;
  44 + display: inline-block;
  45 + margin-bottom: 15px;
  46 + }
  47 + }
  48 +
  49 + .detail {
  50 + margin-bottom: 15px;
  51 +
  52 + p {
  53 + margin-bottom: 2px;
  54 + line-height: 1.4;
  55 + }
  56 +
  57 + &.sky-blue {
  58 + color: $skyBlue;
  59 + }
  60 + }
  61 +
  62 + .tip {
  63 + p {
  64 + margin-bottom: 0;
  65 + }
  66 +
  67 + a {
  68 + position: relative;
  69 + left: 3px;
  70 + }
  71 + }
  72 +}
1 -@import "nav";  
2 -@import "table"; 1 +.user-order {
  2 + $skyBlue: #379ed6;
  3 +
  4 + @import "nav";
  5 + @import "table";
  6 + @import "express";
  7 +}
  8 +
  9 +@import "dialog";
@@ -13,11 +13,11 @@ @@ -13,11 +13,11 @@
13 min-width: 16px; 13 min-width: 16px;
14 line-height: 16px; 14 line-height: 16px;
15 display: inline-block; 15 display: inline-block;
16 - padding: 0px 5px; 16 + padding: 0 5px;
17 position: absolute; 17 position: absolute;
18 top: 0; 18 top: 0;
19 right: 14px; 19 right: 14px;
20 - background-color: #379ed6; 20 + background-color: $skyBlue;
21 color: #fff; 21 color: #fff;
22 border-radius: 9px; 22 border-radius: 9px;
23 font-size: 12px; 23 font-size: 12px;
@@ -149,6 +149,7 @@ @@ -149,6 +149,7 @@
149 text-align: center; 149 text-align: center;
150 vertical-align: top; 150 vertical-align: top;
151 padding-top: $bigSpace; 151 padding-top: $bigSpace;
  152 + position: relative;
152 153
153 .left-time { 154 .left-time {
154 min-height: $normalSize; 155 min-height: $normalSize;
  1 +<div class="express-info">
  2 + <span class="triangle"></span>
  3 + <span class="triangle inside"></span>
  4 + <div class="basic">
  5 + <p>物流公司：{{caption}}</p>
  6 + <p>运单号：{{express_number}}</p>
  7 + </div>
  8 + {{# sub_express_deatil}}
  9 + <div class="detail{{#if @first}} sky-blue{{/if}}">
  10 + <p>{{acceptTime}}</p>
  11 + <p>{{accept_address}}</p>
  12 + </div>
  13 + {{/ sub_express_deatil}}
  14 + <div class="tip">
  15 + <p>以上为最新跟踪信息<a href='#'>查看全部</a></p>
  16 + </div>
  17 +</div>
@@ -35,6 +35,14 @@ module.exports = { @@ -35,6 +35,14 @@ module.exports = {
35 path: path.join(__dirname, 'bundle'), // absolute path 35 path: path.join(__dirname, 'bundle'), // absolute path
36 filename: '[name].js' 36 filename: '[name].js'
37 }, 37 },
  38 + module: {
  39 + loaders: [
  40 + {
  41 + test: /\.hbs$/,
  42 + loader: 'handlebars-loader'
  43 + }
  44 + ]
  45 + },
38 plugins: [ 46 plugins: [
39 new webpack.optimize.OccurenceOrderPlugin(), 47 new webpack.optimize.OccurenceOrderPlugin(),
40 new webpack.optimize.CommonsChunkPlugin({ 48 new webpack.optimize.CommonsChunkPlugin({