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 @@
"gulp-postcss": "^6.1.0",
"gulp-sourcemaps": "^2.0.0-alpha",
"gulp-util": "^3.0.7",
"handlebars-loader": "^1.3.0",
"husky": "^0.11.4",
"nodemon": "1.9.2",
"nyc": "^6.6.1",
... ...
... ... @@ -7,6 +7,9 @@
var dialog = require('../plugins/dialog');
var _dialog = dialog.Dialog;
// var camelCase = require('yoho-node-lib').lib.camelCase;
var expressTpl = require('../../tpl/me/express.hbs');
// 更新表格
var tableOperation = {
... ... @@ -100,7 +103,7 @@ function getOrderList(type, page) {
}
}).done(function(res) {
tableOperation.appendBody(res);
bindPaginationClick(); // eslint-disable-line
bindEvent(); // eslint-disable-line
countDown.start();
}).fail(function(err) {
console.log(err);
... ... @@ -198,14 +201,24 @@ function cancelOrder(code) {
}
// 取消订单
function getExpressInfo(code) {
function getExpressInfo(code, $el) {
$.ajax({
url: 'getExpressInfo',
data: {
orderCode: code
}
}).done(function(result) {
console.log(result);
var tpl;
var data = {};
if (result.code === 200) {
data = result.data;
data.sub_express_deatil = data.express_detail.slice(0, 2);
tpl = expressTpl(data);
$(tpl).appendTo($el);
}
}).fail(function(err) {
console.log(err);
});
... ... @@ -237,116 +250,135 @@ $('.tabs li').on('click', function() {
});
$('.delete').on('click', function() {
var code = $(this).data('code');
var tip = new _dialog({
className: 'delete-dialog',
content: '<h1>您确定要永久删除该订单么</h1>' +
'<p>永久删除后，订单将无法恢复，</p>' +
'<p>您将无法对该订单的商品申请售后服务，请谨慎操作。</p>',
btns: [
{
id: 'delete-confirm',
btnClass: ['confirm'],
name: '确认',
cb: function() {
deleteOrder(code);
tip.close();
function bindDeleteEvent() {
$('.delete').on('click', function() {
var code = $(this).data('code');
var tip = new _dialog({
className: 'delete-dialog',
content: '<h1>您确定要永久删除该订单么</h1>' +
'<p>永久删除后，订单将无法恢复，</p>' +
'<p>您将无法对该订单的商品申请售后服务，请谨慎操作。</p>',
btns: [
{
id: 'delete-confirm',
btnClass: ['confirm'],
name: '确认',
cb: function() {
deleteOrder(code);
tip.close();
}
},
{
id: 'delete-cancel',
btnClass: ['cancel'],
name: '取消',
cb: function() {
tip.close();
}
}
},
{
id: 'delete-cancel',
btnClass: ['cancel'],
name: '取消',
cb: function() {
tip.close();
}
}
]
}).show();
});
]
}).show();
});
}
$('.cancel').on('click', function() {
var code = $(this).data('code');
var tip = new _dialog({
className: 'cancel-dialog',
content: '<h1>取消订单</h1>' +
'<span class="tip">您取消订单的原因是：</span>' +
'<div class="reason">' +
'<div class="row">' +
'<p><span class="iconfont raido checked">&#xe603;</span>支付不成功</p>' +
'<p><span class="iconfont raido">&#xe604;</span>现在不想购买</p>' +
'</div>' +
'<div class="row">' +
'<p><span class="iconfont raido">&#xe604;</span>订单架构有问题</p>' +
'<p><span class="iconfont raido">&#xe604;</span>修改订单信息</p>' +
'</div>' +
'<div class="row">' +
'<p><span class="iconfont raido">&#xe604;</span>错误或重复下单</p>' +
'<p><span class="iconfont raido">&#xe604;</span>忘记使用优惠券或YOHO币</p>' +
'</div>' +
'<div class="row">' +
'<p><span class="iconfont raido">&#xe604;</span>等待发货时间过长</p>' +
'<p><span class="iconfont raido">&#xe604;</span>商品价格较贵</p>' +
'</div>' +
'<div class="row">' +
'<p><span class="iconfont raido">&#xe604;</span>运费较高</p>' +
'</div>' +
'<div class="row other">' +
'<p><span class="iconfont raido">&#xe604;</span>其他原因</p>' +
'<input type="text" disabled placeholder="50个字以内"/>' +
'</div>' +
'</div>' +
'<span class="tip">温馨提示：</span>' +
'<p><span>*</span>订单成功取消后无法恢复</p>' +
'<p><span>*</span>该订单已付金额将原路返回</p>' +
'<p><span>*</span>取消订单后，存在促销关系的子订单及优惠可能会一并取消</p>',
btns: [
{
id: 'cancel-confirm',
btnClass: ['confirm'],
name: '确定并取消订单',
cb: function() {
cancelOrder(code);
tip.close();
function bindCancelEvent() {
$('.cancel').on('click', function() {
var code = $(this).data('code');
var tip = new _dialog({
className: 'cancel-dialog',
content: '<h1>取消订单</h1>' +
'<span class="tip">您取消订单的原因是：</span>' +
'<div class="reason">' +
'<div class="row">' +
'<p><span class="iconfont raido checked">&#xe603;</span>支付不成功</p>' +
'<p><span class="iconfont raido">&#xe604;</span>现在不想购买</p>' +
'</div>' +
'<div class="row">' +
'<p><span class="iconfont raido">&#xe604;</span>订单架构有问题</p>' +
'<p><span class="iconfont raido">&#xe604;</span>修改订单信息</p>' +
'</div>' +
'<div class="row">' +
'<p><span class="iconfont raido">&#xe604;</span>错误或重复下单</p>' +
'<p><span class="iconfont raido">&#xe604;</span>忘记使用优惠券或YOHO币</p>' +
'</div>' +
'<div class="row">' +
'<p><span class="iconfont raido">&#xe604;</span>等待发货时间过长</p>' +
'<p><span class="iconfont raido">&#xe604;</span>商品价格较贵</p>' +
'</div>' +
'<div class="row">' +
'<p><span class="iconfont raido">&#xe604;</span>运费较高</p>' +
'</div>' +
'<div class="row other">' +
'<p><span class="iconfont raido">&#xe604;</span>其他原因</p>' +
'<input type="text" disabled placeholder="50个字以内"/>' +
'</div>' +
'</div>' +
'<span class="tip">温馨提示：</span>' +
'<p><span>*</span>订单成功取消后无法恢复</p>' +
'<p><span>*</span>该订单已付金额将原路返回</p>' +
'<p><span>*</span>取消订单后，存在促销关系的子订单及优惠可能会一并取消</p>',
btns: [
{
id: 'cancel-confirm',
btnClass: ['confirm'],
name: '确定并取消订单',
cb: function() {
cancelOrder(code);
tip.close();
}
},
{
id: 'cancel-stop',
btnClass: ['cancel'],
name: '暂不取消',
cb: function() {
tip.close();
}
}
},
{
id: 'cancel-stop',
btnClass: ['cancel'],
name: '暂不取消',
cb: function() {
tip.close();
]
}).show();
$('.cancel-dialog .reason p').check({
type: 'radio',
group: 'reason',
onChange: function(ele, checked) {
var $this = $(ele);
var $input = $('.cancel-dialog .reason input');
if (checked && $this.parent('.other').length) {
$input.prop('disabled', false);
} else {
$input.val('');
$input.prop('disabled', true);
}
}
]
}).show();
$('.cancel-dialog .reason p').check({
type: 'radio',
group: 'reason',
onChange: function(ele, checked) {
var $this = $(ele);
var $input = $('.cancel-dialog .reason input');
if (checked && $this.parent('.other').length) {
$input.prop('disabled', false);
} else {
$input.val('');
$input.prop('disabled', true);
}
}
});
});
});
}
$('.express').on('click', function() {
var code = $(this).data('code');
function bindExpressEvent() {
$('.express').on('click', function() {
var $this = $(this);
var code = $this.data('code');
var $info = $this.find('.express-info');
getExpressInfo(code);
});
if ($info.length) {
$info.toggleClass('hide');
} else {
getExpressInfo(code, $this);
}
});
}
function bindEvent() {
bindPaginationClick();
bindDeleteEvent();
bindCancelEvent();
bindExpressEvent();
}
bindPaginationClick();
bindEvent();
countDown.start();
setOrderTotal();
... ...
... ... @@ -103,4 +103,3 @@
@import "address";
@import "order/index";
@import "order/dialog";
... ...
.express-info {
width: 315px;
max-height: 255px;
border: 2px solid #ccc;
padding: 20px;
box-sizing: border-box;
position: absolute;
top: 90px;
right: 0;
z-index: 10;
text-align: left;
background-color: #fff;
.triangle {
width: 0;
height: 0;
display: inline-block;
border-style: solid;
border-width: 0 5px 5px;
border-color: transparent transparent #ccc;
line-height: 0;
_border-color: #fff #fff #ccc; /* stylelint-disable-line */
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#fff'); /* stylelint-disable-line */
position: absolute;
top: -7px;
right: 61px;
&.inside {
right: 63px;
top: -3px;
border-width: 0 3px 3px;
border-color: transparent transparent #ccc;
_border-color: #ccc #ccc #fff; /* stylelint-disable-line */
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#ccc'); /* stylelint-disable-line */
}
}
.basic {
border-bottom: 1px solid #f1f1f1;
margin-bottom: 20px;
p {
width: 49%;
display: inline-block;
margin-bottom: 15px;
}
}
.detail {
margin-bottom: 15px;
p {
margin-bottom: 2px;
line-height: 1.4;
}
&.sky-blue {
color: $skyBlue;
}
}
.tip {
p {
margin-bottom: 0;
}
a {
position: relative;
left: 3px;
}
}
}
... ...
@import "nav";
@import "table";
.user-order {
$skyBlue: #379ed6;
@import "nav";
@import "table";
@import "express";
}
@import "dialog";
... ...
... ... @@ -13,11 +13,11 @@
min-width: 16px;
line-height: 16px;
display: inline-block;
padding: 0px 5px;
padding: 0 5px;
position: absolute;
top: 0;
right: 14px;
background-color: #379ed6;
background-color: $skyBlue;
color: #fff;
border-radius: 9px;
font-size: 12px;
... ...
... ... @@ -149,6 +149,7 @@
text-align: center;
vertical-align: top;
padding-top: $bigSpace;
position: relative;
.left-time {
min-height: $normalSize;
... ...
<div class="express-info">
<span class="triangle"></span>
<span class="triangle inside"></span>
<div class="basic">
<p>物流公司：{{caption}}</p>
<p>运单号：{{express_number}}</p>
</div>
{{# sub_express_deatil}}
<div class="detail{{#if @first}} sky-blue{{/if}}">
<p>{{acceptTime}}</p>
<p>{{accept_address}}</p>
</div>
{{/ sub_express_deatil}}
<div class="tip">
<p>以上为最新跟踪信息<a href='#'>查看全部</a></p>
</div>
</div>
... ...
... ... @@ -35,6 +35,14 @@ module.exports = {
path: path.join(__dirname, 'bundle'), // absolute path
filename: '[name].js'
},
module: {
loaders: [
{
test: /\.hbs$/,
loader: 'handlebars-loader'
}
]
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.CommonsChunkPlugin({
... ...