Authored by biao

update for optmise user order and init for order detail

... ... @@ -15,7 +15,7 @@ const orderModel = require('../models/order');
const index = (req, res) => {
const type = req.query.type;
const page = req.query.page;
const uid = global.yoho.uid || '8688835';
const uid = global.yoho.uid || '10931021';
orderModel.getOrderData(uid, type, page).then(result => {
res.render('index', {
... ... @@ -30,10 +30,26 @@ const index = (req, res) => {
});
};
const detail = (req, res) => {
const code = req.query.code;
const uid = global.yoho.uid || '10931021';
orderModel.getOrderDetail(uid, code).then(result => {
res.render('index', {
isMe: true,
content: Object.assign({
nav: mcHandler.getMeCrumb(),
navigation: mcHandler.getSideMenu('订单详情'),
banner: 'http://placehold.it/{width}x{height}'
}, result)
});
});
};
const getOrderList = (req, res) => {
const type = req.query.type;
const page = req.query.page;
const uid = global.yoho.uid || '8688835';
const uid = global.yoho.uid || '10931021';
orderModel.getOrderData(uid, type, page).then(result => {
res.render('order-table', {
... ... @@ -48,7 +64,7 @@ const getOrderList = (req, res) => {
const getOrderTotal = (req, res) => {
const type = req.query.type;
const uid = global.yoho.uid || '8688835';
const uid = global.yoho.uid || '10931021';
orderModel.getOrderData(uid, type).then(result => {
... ... @@ -61,7 +77,7 @@ const getOrderTotal = (req, res) => {
};
const cancelOrder = (req, res) => {
const uid = global.yoho.uid || '8688835';
const uid = global.yoho.uid || '10931021';
const code = req.query.orderCode;
orderModel.cancelOrder(uid, code).then(result => {
... ... @@ -70,7 +86,7 @@ const cancelOrder = (req, res) => {
};
const deleteOrder = (req, res) => {
const uid = global.yoho.uid || '8688835';
const uid = global.yoho.uid || '10931021';
const code = req.query.orderCode;
orderModel.deleteOrder(uid, code).then(result => {
... ... @@ -79,7 +95,7 @@ const deleteOrder = (req, res) => {
};
const getExpressInfo = (req, res) => {
const uid = global.yoho.uid || '8688835';
const uid = global.yoho.uid || '10931021';
const code = req.query.orderCode;
orderModel.getExpressInfo(uid, code).then(result => {
... ... @@ -89,6 +105,7 @@ const getExpressInfo = (req, res) => {
module.exports = {
index: index,
detail: detail,
getOrderList: getOrderList,
getOrderTotal: getOrderTotal,
cancelOrder: cancelOrder,
... ...
... ... @@ -4,6 +4,8 @@ const api = global.yoho.API;
const camelCase = global.yoho.camelCase;
const moment = require('moment');
const _ = require('lodash');
const pageSize = 10;
const typeActiveIndexMap = {
... ... @@ -11,12 +13,17 @@ const typeActiveIndexMap = {
2: 1,
3: 2
};
const _convertUnixTime = (src) => {
return moment.unix(src).format('YYYY-MM-DD hh:mm:ss');
};
const deleteOrder = (uid, code) => {
return api.get('', {
method: 'app.SpaceOrders.delOrderByCode',
uid: uid,
order_code: code
}, {
cache: true
});
};
... ... @@ -25,6 +32,8 @@ const cancelOrder = (uid, code) => {
method: 'app.SpaceOrders.close',
uid: uid,
order_code: code
}, {
cache: true
});
};
... ... @@ -33,13 +42,22 @@ const getExpressInfo = (uid, code) => {
method: 'app.express.get',
uid: uid,
order_code: code
}, {
cache: true
});
};
const _getDetail = (uid, code) => {
return api.get('', {
method: 'app.SpaceOrders.detail',
uid: uid,
order_code: code
}, {
cache: true
});
};
const _getUserOrder = (uid, type, page) => {
const convertUnitTime = (src) => {
return moment.unix(src).format('YYYY-MM-DD hh:mm:ss');
};
return api.get('', {
method: 'app.SpaceOrders.get',
... ... @@ -58,12 +76,12 @@ const _getUserOrder = (uid, type, page) => {
curPage = result.data.page;
}
orderList.forEach(function(item) {
orderList.forEach(item => {
const ot = parseInt(item.orderType, 10);
const st = parseInt(item.status, 10);
// 转换订单创建时间
item.createTime = convertUnitTime(item.createTime);
item.createTime = _convertUnixTime(item.createTime);
// 隐藏结束了的剩余时间
if (parseInt(item.payLefttime, 10) !== 0 && item.isCancel === 'N') {
... ... @@ -143,8 +161,57 @@ const getOrderData = (uid, type, page) => {
});
};
const _convertAddress = addressList => {
let addrList = [];
addressList.forEach(addr => {
let address = {
time: '',
city: '',
action: ''
};
address.time = addr.acceptTime;
addr = addr.acceptAddress.split(' ');
if (addr.length > 1 && /市/.test(addr[0])) {
address.city = addr[0].replace('市', '');
addr.splice(0, 1);
address.action = addr.join('');
} else {
address.action = addr.join('');
}
addrList.push(address);
});
return _.reverse(addrList);
};
const getOrderDetail = (uid, code) => {
return api.all([_getDetail(uid, code), getExpressInfo(uid, code)]).then(result => {
let detail = result[0] && camelCase(result[0].data);
let express = result[1] && camelCase(result[1].data);
const basicData = {
title: '订单详情'
};
detail.createTime = _convertUnixTime(detail.createTime);
detail.expressInfo = express;
detail.expressInfo.addressList = _convertAddress(express.expressDetail);
return {
orderDetail: Object.assign(basicData, detail)
};
});
};
module.exports = {
getOrderData: getOrderData,
getOrderDetail: getOrderDetail,
cancelOrder: cancelOrder,
deleteOrder: deleteOrder,
getExpressInfo: getExpressInfo
... ...
... ... @@ -15,6 +15,7 @@ const address = require(`${cRoot}/address`);
// 个人中心首页/订单
router.get(['/', '/order'], order.index);
router.get(['/', '/order/detail'], order.detail);
router.get('/getOrderList', order.getOrderList);
router.get('/getOrderTotal', order.getOrderTotal);
router.get('/deleteOrder', order.deleteOrder);
... ...
... ... @@ -26,6 +26,11 @@
{{> order}}
{{/if}}
{{!-- 订单详情 --}}
{{#if orderDetail}}
{{> order-detail}}
{{/if}}
{{!-- 我的退换货 --}}
{{#if return}}
{{> return}}
... ...
{{# orderDetail}}
<div class="user-order order-detail">
{{> common/subtitle}}
{{> order/detail/order-status}}
{{> order/detail/order-express}}
{{> order/detail/info-box}}
</div>
{{/ orderDetail}}
... ...
<div class="user-info info-box">
<h4 class="status-title">收货人信息</h4>
<p>收货人:{{userName}}</p>
<p>收货地址:{{address}}</p>
<p>联系电话:{{mobile}}</p>
</div>
<div class="payment-info info-box">
<h4 class="status-title">支付及配送方式</h4>
<p>支付类型:{{paymentType}}</p>
<p>支付方式:{{paymentName}}</p>
<p>送货时间:{{deliveryTime}}</p>
</div>
<div class="invoice-info info-box">
<h4 class="status-title">发票信息</h4>
<p>发票类型:{{paymentType}}</p>
<p>发票抬头:{{paymentName}}</p>
<p>发票内容:{{deliveryTime}}</p>
</div>
<div class="remark-info info-box">
<h4 class="status-title">备注</h4>
<p>{{remark}}</p>
</div>
... ...
{{# expressInfo}}
<div class="order-express info-box">
<h4 class="status-title">订单跟踪</h4>
<div class="express-basic">
<p>物流公司:{{caption}}</p>
<p>运单号:{{expressNumber}}</p>
</div>
<div class="express-detail">
<div class="table">
<ul class="header">
<li class="column time">处理时间</li>
<li class="column city">接受地点</li>
<li class="column action">物流信息</li>
</ul>
<div class="table-body">
<ul class="column time">
{{# addressList}}
<li class="text">{{time}}</li>
{{/ addressList}}
</ul>
<ul class="column city">
{{# addressList}}
<li class="text">{{city}}</li>
{{/ addressList}}
</ul>
<ul class="column action">
{{# addressList}}
<li class="text">{{action}}</li>
{{/ addressList}}
</ul>
</div>
</div>
</div>
</div>
{{/ expressInfo}}
... ...
<div class="order-status">
<div class="basic">
<p>订单号:{{orderCode}}</p>
<p>订单状态:{{statusStr}}</p>
<div class="edit-btns">
<span class="btn black">确认收货</span>
</div>
</div>
<div class="time-line">
<ul>
<li class="first active">1.提交订单</li>
<li class="active last-active">2.商品出库</li>
<li class="">3.等待收货</li>
<li class="last">4.交易完成</li>
</ul>
<p>{{createTime}}</p>
</div>
</div>
... ...
<div class="table table-body{{#unless orderList}} empty{{/unless}}">
{{#if orderList}}
{{#orderList}}
<div class="order">
<div class="order" data-code="{{orderCode}}">
<ul class="header">
<li class="content">下单时间:{{createTime}}</li>
<li class="content">订单编号:{{orderCode}}</li>
... ... @@ -33,28 +33,32 @@
<p class="bold">{{amount}}</p>
<p class="subtext">{{paymentTypeStr}}</p>
</div>
<div class="common-column special-border">
<p class="bold">{{statusStr}}</p>
<p class="subtext">查看详情</p>
<div class="common-column special-border status">
<p class="bold status-str">{{statusStr}}</p>
<p class="subtext check-detail">查看详情</p>
</div>
<div class="common-column special-border">
<div class="common-column special-border operation">
{{#if showPayButton}}
<p class="left-time" data-left="{{payLefttime}}"></p>
<span class="btn red">立即付款</span>
<p class="subtext cancel" data-code="{{orderCode}}">取消订单</p>
<div class="pay-operation">
<p class="left-time" data-left="{{payLefttime}}"></p>
<span class="btn red">立即付款</span>
<p class="subtext cancel">取消订单</p>
</div>
{{/if}}
{{#if showEditOption}}
<p class="subtext">申请换货</p>
<p class="subtext delete" data-code="{{orderCode}}">删除订单</p>
<p class="subtext delete">删除订单</p>
{{/if}}
{{#if showGetBtn}}
<span class="btn black">确认收货</span>
<p class="subtext express" data-code="{{orderCode}}">物流进度</p>
{{/if}}
{{#if showBuyBtn}}
<span class="btn black">再次购买</span>
<p class="subtext delete" data-code="{{orderCode}}">删除订单</p>
<p class="subtext express">物流进度</p>
{{/if}}
<div class="buy-operation{{#unless showBuyBtn}} hide{{/unless}}">
<span class="btn black">再次购买</span>
<p class="subtext delete">删除订单</p>
</div>
</div>
</div>
</div>
... ...
... ... @@ -7,8 +7,6 @@
var dialog = require('../plugins/dialog');
var _dialog = dialog.Dialog;
// var camelCase = require('yoho-node-lib').lib.camelCase;
var expressTpl = require('../../tpl/me/express.hbs');
// 更新表格
... ... @@ -125,25 +123,6 @@ function getQueryString() {
return query;
}
// 绑定分页点击事件
function bindPaginationClick() {
$('.blk-pagination li').off('click').on('click', function(e) {
var $this = $(this);
var page = $this.find('a').attr('href').split('=')[1];
var type = getQueryString().type;
e.preventDefault();
if (!$this.hasClass('active')) {
$('.blk-pagination li.active').removeClass('active');
$this.addClass('active');
$(window).scrollTop(0);
getOrderList(type, page);
}
});
}
// 获取订单总数
function getOrderTotal(type, key) {
... ... @@ -157,6 +136,8 @@ function getOrderTotal(type, key) {
if (!$navItme.hasClass('active') && result.total !== 0) {
$navItme.find('.badge').text(result.total);
} else if (!$navItme.hasClass('active')) {
$navItme.find('.badge').text('');
}
});
}
... ... @@ -172,29 +153,72 @@ function setOrderTotal() {
}
}
function updateTableContent($el) {
$el.find('.status .status-str').text('已取消');
$el.find('.pay-operation').remove();
$el.find('.buy-operation').removeClass('hide');
setOrderTotal();
}
// 绑定分页点击事件
function bindPaginationClick() {
$('.blk-pagination li').off('click').on('click', function(e) {
var $this = $(this);
var page = $this.find('a').attr('href').split('=')[1];
var type = getQueryString().type;
e.preventDefault();
if (!$this.hasClass('active')) {
$('.blk-pagination li.active').removeClass('active');
$this.addClass('active');
$(window).scrollTop(0);
getOrderList(type, page);
}
});
}
// 删除订单
function deleteOrder(code) {
function deleteOrder(code, $el) {
$.ajax({
url: 'deleteOrder',
data: {
orderCode: code
}
}).done(function(result) {
console.log(result);
}).done(function() {
$el.remove();
}).fail(function(err) {
console.log(err);
});
}
// 取消订单
function cancelOrder(code) {
function cancelOrder(code, $el) {
$.ajax({
url: 'cancelOrder',
data: {
orderCode: code
}
}).done(function(result) {
console.log(result);
}).done(function() {
var tip = new _dialog({
className: 'order-dialog',
content: '<h1>订单修改</h1>' +
'<span>您已成功取消了该订单</span>',
closeCb: updateTableContent.bind(null, $el.closest('.order')),
btns: [
{
id: 'cancel-complete',
btnClass: ['confirm'],
name: '确定',
cb: function() {
tip.close(updateTableContent.bind(null, $el.closest('.order')));
}
}
]
}).show();
}).fail(function(err) {
console.log(err);
});
... ... @@ -224,6 +248,8 @@ function getExpressInfo(code, $el) {
});
}
// tab切换处理
$('.tabs li').on('click', function() {
var $this = $(this);
... ... @@ -252,9 +278,10 @@ $('.tabs li').on('click', function() {
function bindDeleteEvent() {
$('.delete').on('click', function() {
var code = $(this).data('code');
var $this = $(this);
var code = $this.closest('.order').data('code');
var tip = new _dialog({
className: 'delete-dialog',
className: 'order-dialog delete-dialog',
content: '<h1>您确定要永久删除该订单么</h1>' +
'<p>永久删除后,订单将无法恢复,</p>' +
'<p>您将无法对该订单的商品申请售后服务,请谨慎操作。</p>',
... ... @@ -264,13 +291,13 @@ function bindDeleteEvent() {
btnClass: ['confirm'],
name: '确认',
cb: function() {
deleteOrder(code);
deleteOrder(code, $this.closest('.order'));
tip.close();
}
},
{
id: 'delete-cancel',
btnClass: ['cancel'],
btnClass: ['cancel-btn'],
name: '取消',
cb: function() {
tip.close();
... ... @@ -283,9 +310,11 @@ function bindDeleteEvent() {
function bindCancelEvent() {
$('.cancel').on('click', function() {
var code = $(this).data('code');
var $this = $(this);
var code = $this.closest('.order').data('code');
var tip = new _dialog({
className: 'cancel-dialog',
className: 'order-dialog cancel-dialog',
content: '<h1>取消订单</h1>' +
'<span class="tip">您取消订单的原因是:</span>' +
'<div class="reason">' +
... ... @@ -314,22 +343,22 @@ function bindCancelEvent() {
'</div>' +
'</div>' +
'<span class="tip">温馨提示:</span>' +
'<p><span>*</span>订单成功取消后无法恢复</p>' +
'<p><span>*</span>该订单已付金额将原路返回</p>' +
'<p><span>*</span>取消订单后,存在促销关系的子订单及优惠可能会一并取消</p>',
'<p class="tip-item"><span class="asterisk">*</span>订单成功取消后无法恢复</p>' +
'<p class="tip-item"><span class="asterisk">*</span>该订单已付金额将原路返回</p>' +
'<p class="tip-item"><span class="asterisk">*</span>取消订单后,存在促销关系的子订单及优惠可能会一并取消</p>',
btns: [
{
id: 'cancel-confirm',
btnClass: ['confirm'],
name: '确定并取消订单',
cb: function() {
cancelOrder(code);
cancelOrder(code, $this.closest('.order'));
tip.close();
}
},
{
id: 'cancel-stop',
btnClass: ['cancel'],
btnClass: ['cancel-btn'],
name: '暂不取消',
cb: function() {
tip.close();
... ... @@ -342,11 +371,12 @@ function bindCancelEvent() {
type: 'radio',
group: 'reason',
onChange: function(ele, checked) {
var $this = $(ele);
var $ele = $(ele);
var $input = $('.cancel-dialog .reason input');
if (checked && $this.parent('.other').length) {
if (checked && $ele.parent('.other').length) {
$input.prop('disabled', false);
$input.focus();
} else {
$input.val('');
$input.prop('disabled', true);
... ... @@ -359,7 +389,7 @@ function bindCancelEvent() {
function bindExpressEvent() {
$('.express').on('click', function() {
var $this = $(this);
var code = $this.data('code');
var code = $this.closest('.order').data('code');
var $info = $this.find('.express-info');
if ($info.length) {
... ...
... ... @@ -9,7 +9,8 @@ var $ = require('yoho-jquery'),
var defaultOptions = {
mask: true,
closeIcon: true
closeIcon: true,
closeCb: null
};
var tpl =
... ... @@ -68,7 +69,7 @@ function Dialog(options) {
// 绑定x关闭事件
that.$el.find('.close').click(function() {
that.close();
that.close(opt.closeCb);
});
function bindBtnEvt(index) {
... ... @@ -85,10 +86,14 @@ function Dialog(options) {
}
}
Dialog.prototype.close = function() {
Dialog.prototype.close = function(cb) {
this.$mask && this.$mask.addClass('hide');
this.$el.remove();
if (cb && typeof cb === 'function') {
cb(); // eslint-disable-line
}
return this;
};
... ...
.order-status {
$basicHeight: 90px;
.basic {
height: $basicHeight;
line-height: $basicHeight;
border-top: 1px solid $borderColor;
position: relative;
p {
width: 20%;
display: inline-block;
color: $black;
font-weight: bold;
}
.edit-btns {
display: inline-block;
position: absolute;
right: 0;
top: 50%;
margin-top: -13px;
}
}
.time-line {
padding-bottom: 10px;
border-bottom: 1px solid $borderColor;
ul {
width: 100%;
height: 18px;
}
li {
width: 25%;
height: 18px;
line-height: 18px;
float: left;
text-align: center;
background-color: #eee;
color: $black;
font-size: $smallSize;
font-weight: normal;
&.active {
background-color: $black;
color: #fff;
&.last-active {
border-top-right-radius: 9px;
border-bottom-right-radius: 9px;
}
}
&.first {
border-radius: 9px 0 0 9px;
}
&.last {
border-radius: 0 9px 9px 0;
}
}
p {
width: 25%;
margin: $space 0;
text-align: center;
font-size: $normalSize;
color: $black;
}
}
}
.info-box {
margin: $bigSpace 0;
padding-bottom: calc($space - $smallSpace);
border-bottom: 1px solid $borderColor;
p {
font-size: $normalSize;
margin: $smallSpace 0;
}
}
.status-title {
font-weight: bold;
font-size: $bigSize;
margin-bottom: $space;
}
.order-express {
border-bottom: none;
.header {
padding-right: $space;
}
.table-body {
width: 100%;
padding: $space $space 0;
border: 1px solid $borderColor;
border-top: none;
}
.express-basic {
margin-bottom: $space;
p {
width: 30%;
display: inline-block;
font-size: $normalSize;
margin: 0;
}
}
.column {
display: inline-block;
text-align: left !important;
.text {
margin-bottom: $space;
}
&.time {
width: 30%;
}
&.city {
width: 30%;
}
&.action {
width: 40%;
}
}
}
... ...
.delete-dialog {
.content {
h1 {
font-size: 24px;
font-weight: bold;
margin-bottom: 24px;
.order-dialog {
.cancel-btn {
background-color: #fff;
color: #1b1b1b;
border: 1px solid #1b1b1b;
}
&.delete-dialog {
.content {
h1 {
font-size: 24px;
font-weight: bold;
margin-bottom: 24px;
}
p {
height: 18px;
font-size: 12px;
color: #ccc;
}
}
p {
height: 18px;
font-size: 12px;
color: #ccc;
.btns {
margin-top: 5px;
}
}
.btns {
margin-top: 5px;
.cancel {
background-color: #fff;
&.cancel-dialog {
* {
text-align: left;
color: #1b1b1b;
border: 1px solid #1b1b1b;
}
}
}
.cancel-dialog {
* {
text-align: left;
color: #1b1b1b;
}
.btn {
&.confirm {
color: #fff;
}
}
h1 {
padding-bottom: 20px;
border-bottom: 1px solid #f1f1f1;
font-size: 16px;
}
h1 {
padding-bottom: 20px;
border-bottom: 1px solid #f1f1f1;
font-size: 16px;
}
.tip {
display: block;
margin: 20px 0 10px;
font-size: 12px;
font-weight: bold;
}
.tip {
display: block;
margin: 20px 0 10px;
font-size: 12px;
font-weight: bold;
}
.row {
height: 30px;
line-height: 30px;
.tip-item {
height: 20px;
line-height: 20px;
font-size: 14px;
&.other {
p {
width: 20%;
}
input {
height: 25px;
width: 30%;
padding: 5px;
.asterisk {
position: relative;
top: 2px;
margin-right: 5px;
color: #c71814;
}
}
p {
width: 50%;
display: inline-block;
box-sizing: border-box;
font-size: 14px;
}
.row {
height: 30px;
line-height: 30px;
.iconfont {
display: inline-block;
margin-right: 3px;
font-size: 14px;
cursor: pointer;
&.other {
p {
width: 20%;
}
input {
height: 25px;
width: 30%;
padding: 5px;
}
}
p {
width: 50%;
display: inline-block;
box-sizing: border-box;
font-size: 14px;
}
.iconfont {
display: inline-block;
margin-right: 3px;
font-size: 14px;
cursor: pointer;
}
}
}
}
... ...
.user-order {
$headerHeight: 40px;
$headerColor: #f5f5f5;
$borderColor: #f1f1f1;
$fontColor: #616161;
$bigWidth: 355px;
$normalWidth: 138px;
$goodImgWidth: 65px;
$goodImgHeight: 90px;
$smallSize: 12px;
$normalSize: 14px;
$bigSize: 16px;
$smallSpace: 8px;
$space: 20px;
$bigSpace: 30px;
$skyBlue: #379ed6;
$black: #1b1b1b;
@import "nav";
@import "table";
@import "express";
@import "detail";
}
@import "dialog";
... ...
.table {
$headerHeight: 40px;
$headerColor: #f5f5f5;
$borderColor: #f1f1f1;
$fontColor: #616161;
$bigWidth: 355px;
$normalWidth: 138px;
$goodImgWidth: 65px;
$goodImgHeight: 90px;
$normalSize: 14px;
$bigSize: 16px;
$smallSpace: 8px;
$space: 20px;
$bigSpace: 30px;
margin-bottom: $space;
color: $fontColor;
... ... @@ -23,6 +6,10 @@
color: #222;
}
.order {
margin-bottom: $space;
}
.table-header {
margin: $space 0;
}
... ...