fe / yohobuywap-node · Commits

Go to a project

Authored by 郝肖肖
Commit 743ee7d4e2a3cc0efb85796fa4cd7430d052f588 1 parent ead9e1fa

订单详情页按钮组

Inline Side-by-side
Showing 9 changed files with 223 additions and 324 deletions
... ... @@ -50,129 +50,90 @@ const _assignExpressInfo = (showLogistics, order) => {
* @private
*/
const _getOrderStatus = (order, showLogistics) => {
let result = {};
let orderBtn = [];
if (order.isCancel === 'Y') {
return {
canceled: true
};
if (!order) {
return {};
}
order.status = parseInt(order.status, 10);
// 先判断订单付款方式，根据不同的付款方式计算订单状态。（注:货到付款没有待付款状态）
// 支付方式为非货到付款时，计算订单状态。
if (parseInt(order.paymentType, 10) !== 2) {
Object.assign(result, {
isPayonline: true
if (parseInt(order.attribute, 10) === 9) {
/* 预售商品，不能进行任何操作 */
orderBtn.push({
isAdvance: true
});
return {orderBtn: orderBtn};
}
let isPayaly = order.paymentName === '' ? false : true;
switch (order.status) {
case 0:
/* 倒计时时间 订单详情页倒计时不在同一级*/
if (order.counterFlag === 'Y' && parseInt(order.payLefttime, 10)) {
orderBtn.push({
leftTimeTop: order.payLefttime * 1000
});
}
/* 待付款 */
Object.assign(result, {
unpaid: true,
payUrl: helpers.urlFormat('/home/orders/paynew', {order_code: order.orderCode})
_.each(order.links, function(val) {
switch (val) {
case 'refundApply':// 申请退款
orderBtn.push({
refundApply: true
});
break;
case 1:
case 2:
case 3:
/* 已付款状态不给查看物流 URL */
Object.assign(result, {
unreceived: true,
payAly: isPayaly
case 'modifyAddress':// 修改收货地址
orderBtn.push({
modifyAddress: true,
link: helpers.urlFormat('/home/orders/addressModify', {
orderCode: order.orderCode,
areaCode: _.get(order, 'delivery_address.area_code', ''),
provinceAreaCode: order.isSupportChangeProvince !== 'Y' &&
_.get(order, 'delivery_address.province_area_code', '') || ''// 如果不允许修改省
})
});
break;
case 4:
case 5:
/* 已发货状态，给查看物流或二维码URL */
Object.assign(result, {
unreceived: true,
payAly: isPayaly
case 'buyNow':// 立即付款
orderBtn.push({
buyNow: true,
link: helpers.urlFormat('/home/orders/paynew', {order_code: order.orderCode}),
});
/* 是否门票 */
if (order.virtualType && parseInt(order.virtualType, 10) === 3) {
Object.assign(result, {
qrcode: helpers.urlFormat(`/home/QRcode/${order.orderCode}`)
});
} else {
Object.assign(result, _assignExpressInfo(showLogistics, order));
}
break;
case 6:
/* 已成功订单，给查看物流或二维码URL */
Object.assign(result, {
completed: true,
payAly: isPayaly
case 'closeOrder':// 取消订单
orderBtn.push({
closeOrder: true
});
/* 是否门票 */
if (order.virtual_type && parseInt(order.virtual_type, 10) === 3) {
Object.assign(result, {
qrcode: helpers.urlFormat(`/home/QRcode/${order.orderCode}`)
});
} else {
Object.assign(result, _assignExpressInfo(showLogistics, order));
}
break;
default:
case 'confirm':// 订单确认
break;
}
} else {
Object.assign(result, {
payAly: true,
paymentName: (order.paymentName !== '') ? order.paymentName : '货到付款'
});
/* 订单为货到付款订单时，计算订单状态。(货到付款没有待付款状态) */
switch (order.status) {
case 0:
/* 备货中 */
Object.assign(result, {
unpaid: true
});
case 'getExpress':// 查看物流
orderBtn.push(Object.assign(
{getExpress: true},
_assignExpressInfo(showLogistics, order)
));
break;
case 1:
case 2:
case 3:
/* 已付款状态不给查看物流URL */
Object.assign(result, {
unreceived: true
case 'shareOrder':// 晒单评价
break;
case 'delOrder':// 删除订单
orderBtn.push({
delOrder: true,
});
break;
case 4:
case 5:
/* 待收货状态，给查看物流 url */
Object.assign(result, {
unreceived: true
case 'lookQrcode':// 查看二维码
orderBtn.push({
lookQrcode: true,
link: helpers.urlFormat(`/home/QRcode/${order.orderCode}`),
});
Object.assign(result, _assignExpressInfo(showLogistics, order));
break;
case 6:
/* 待收货状态，给查看物流 url */
Object.assign(result, {
completed: true
case 'afterService':// 售后服务
break;
case 'readd':// 再次购买
orderBtn.push({
readd: true
});
Object.assign(result, _assignExpressInfo(showLogistics, order));
break;
default:
break;
}
}
});
return result;
return {orderBtn: orderBtn};
};
... ... @@ -202,12 +163,6 @@ const orderDetailData = (uid, orderCode) => {
addressAll: orderDetail.area + orderDetail.address
});
if (orderDetail.counterFlag && orderDetail.counterFlag === 'Y') {
orderDetail = _.assign(orderDetail, {
leftTime: parseInt(orderDetail.payLefttime, 10) * 1000
});
}
_.forEach(orderDetail.orderGoods, function(data) {
let obj = {};
let count = +data.buyNumber;
... ... @@ -253,12 +208,6 @@ const orderDetailData = (uid, orderCode) => {
orderDetail.goods = goods;
if (orderDetail.paymentStatus === 'Y') {
orderDetail = _.assign(orderDetail, {
isPay: true
});
}
// 判断是否可以修改地址
if (orderDetail.canUpdateDeliveryAddress === 'Y' && orderDetail.isSupportChangeProvince === 'Y') {
orderDetail = _.assign(orderDetail, {
... ... @@ -272,24 +221,6 @@ const orderDetailData = (uid, orderCode) => {
});
}
// 判断是否有关联订单
if (orderDetail.relateOrderCode === 'Y') {
orderDetail = _.assign(orderDetail, {
relation: true
});
} else {
orderDetail = _.assign(orderDetail, {
relation: false
});
}
// 定金预售
if (orderDetail.attribute * 1 === 9) {
orderDetail = _.assign(orderDetail, {
isDepositAdvance: true
});
}
orderDetail = _.assign(orderDetail, {
goodsAmount: orderDetail.paymentAmount,
newUrl: helpers.urlFormat('/home/orders/addressModify', {
... ... @@ -308,18 +239,15 @@ const orderDetailData = (uid, orderCode) => {
}
// 为支付的拆单配送信息
if (orderDetail.isMultiPackage && orderDetail.isMultiPackage === 'Y') {
let jitInfo = {
deliveryId: orderDetail.deliveryId,
paymentType: orderDetail.paymentType,
couponCode: orderDetail.couponCode,
yohoCoin: orderDetail.yohoCoin,
cartType: 'ordinary'
};
if (orderDetail.isMultiPackage === 'Y') {
orderDetail = _.assign(orderDetail, {
isJit: true,
jitDetailUrl: helpers.urlFormat('/cart/index/new/jitDetail', jitInfo)
jitDetailUrl: helpers.urlFormat('/cart/index/new/jitDetail', {
deliveryId: orderDetail.deliveryId,
paymentType: orderDetail.paymentType,
couponCode: orderDetail.couponCode,
yohoCoin: orderDetail.yohoCoin,
cartType: 'ordinary'
})
});
}
... ... @@ -327,15 +255,6 @@ const orderDetailData = (uid, orderCode) => {
orderDetail.invoice.type = (orderDetail.invoice.type + '' === '2');
}
/* 申请退款 */
if (_.find(orderDetail.links, o => {
return o === 'refundApply';
})) {
Object.assign(orderDetail, {
refundApply: true
});
}
return orderDetail;
} else {
logger.error('detail info return no 200');
... ...
... ... @@ -21,8 +21,6 @@
<p class="address">
{{addressAll}}
</p>
<div class="rest">其他地址<span class="iconfont icon-address">&#xe614;</span></div>
</div>
</section>
... ... @@ -36,8 +34,8 @@
<span class="sub-title">订单编号：{{orderCode}}</span>
<span >订单状态：{{statusStr}}</span>
<span>下单时间：<b class="createTime">{{createTime}}</b></span>
{{#if payAly}}
<span>支付方式：{{paymentName}}</span>
{{#if paymentName}}
<span>支付方式：{{paymentName}}</span>
{{/if}}
</p>
<a href="{{serviceUrl}}" target="_blank" class="iconfont icon-right">&#xe63c;</a>
... ... @@ -59,11 +57,11 @@
</section>
<section class="goods block">
{{#if isJit}}
{{> jit-more}}
{{/if}}
{{# goods}}
{{> order/good}}
{{> order/good}}
{{/ goods}}
</section>
... ... @@ -108,65 +106,19 @@
</ul>
{{/invoice}}
{{#if unpaid}}
<div class="clock">
<ul class="count-down hide">
<li>
<span class="iconfont count-down-icon">&#xe64a;</span>
</li>
<li>
<span class="hours">{{leftTime}}</span>
</li>
</ul>
</div>
{{/if}}
<div class="opt block">
{{!-- 修改地址 --}}
{{#if addressModify}}
<a href="{{newUrl}}" class="btn">修改地址</a>
{{/if}}
{{#if isDepositAdvance}}
<div class="order-opt">
<span class="order-opt-info">请到App完成订单相关操作</span>
{{# orderBtn}}
{{#if leftTimeTop}}
<div class="clock">
<ul class="count-down hide">
<li><span class="iconfont count-down-icon">&#xe64a;</span></li>
<li><span class="hours">{{leftTimeTop}}</span></li>
</ul>
</div>
{{else}}
{{#unless unreceived}}
{{#unless unpaid}}
<span class="btn btn-del">删除订单</span>
{{#if isVirtual}}
<!--虚拟商品-->
{{else}}
{{#unless useLimitCode}}<span class="btn btn-rebuy">再次购买</span>{{/unless}}
{{/if}}
{{/unless}}
{{/unless}}
{{#if unpaid}}
<span class="btn btn-cancel">取消订单</span>
{{#if payUrl}}
<a class="btn btn-pay" href="{{payUrl}}">立即付款</a>
{{/if}}
{{/if}}
{{#if logisticsUrl}}
<a href="{{logisticsUrl}}">
<span class="btn btn-check-logistics">查看物流</span>
</a>
{{/if}}
{{#if qrcode}}
<a href="{{qrcode}}">
<span class="btn btn-check-logistics">查看二维码</span>
</a>
{{/if}}
{{!-- 申请退款 --}}
{{#if refundApply}}
<span class="btn btn-refund">申请退款</span>
{{/if}}
{{/if}}
</div>
{{/orderBtn}}
{{!--按钮组--}}
{{> order/order-btns}}
</div>
<div class="reason-mask">
... ...
<section class="block more-jit">
<a href="{{jitDetailUrl}}">
<div class="more-jit">
<span>{{packageTitle}}</span>
<span class="iconfont icon-right-arrow">&#xe614;</span>
</div>
</a>
</section>
{{#if jitDetailUrl}}
<section class="block more-jit">
<a href="{{jitDetailUrl}}">
<div class="more-jit">
<span>{{packageTitle}}</span>
<span class="iconfont icon-right-arrow">&#xe614;</span>
</div>
</a>
</section>
{{/if}}
... ...
... ... @@ -10,10 +10,15 @@ const isProduction = process.env.NODE_ENV === 'production';
const isTest = process.env.NODE_ENV === 'test';
const domains = {
api: 'http://api-test3.yohops.com:9999/',
service: 'http://service-test3.yohops.com:9999/',
liveApi: 'http://testapi.live.yohops.com:9999/',
singleApi: 'http://api-test3.yohops.com:9999/',
// api: 'http://api-test3.yohops.com:9999/',
// service: 'http://service-test3.yohops.com:9999/',
// liveApi: 'http://testapi.live.yohops.com:9999/',
// singleApi: 'http://api-test3.yohops.com:9999/',
api: 'http://api.yoho.yohoops.org/',
service: 'http://service.yoho.yohoops.org/',
liveApi: 'http://api.live.yoho.cn/',
singleApi: 'http://single.yoho.cn/',
imSocket: 'ws://socket.yohobuy.com:10240',
imCs: 'https://im.yohobuy.com/api',
... ...
<div class="order-opt">
{{# orderBtn}}
{{#if leftTime}}
<ul class="count-down hide">
<li><span class="iconfont count-down-icon">&#xe64a;</span></li>
<li><span class="hours">{{leftTime}}</span></li>
</ul>
{{else if isAdvance}}
<span class="order-opt-info">*定金预售订单只能在APP端操作</span>
{{else if refundApply}}
<span class="btn refund">申请退款</span>
{{else if modifyAddress}}
<a class="btn modify-address" href="{{link}}">
<span>修改地址</span>
</a>
{{else if buyNow}}
<a class="locHref" href="{{link}}">
<span class="btn pay">立即付款</span>
</a>
{{else if closeOrder}}
<span class="btn cancel">取消订单</span>
{{else if confirm}}
{{else if getExpress}}
<a class="locHref" href="{{logisticsUrl}}">
<span class="btn check-logistics">查看物流</span>
</a>
{{else if shareOrder}}
{{else if delOrder}}
<span class="btn del">删除订单</span>
{{else if lookQrcode}}
<a class="locHref" href="{{link}}">
<span class="btn check-logistics">查看二维码</span>
</a>
{{else if afterService}}
{{else if readd}}
<span class="btn rebuy">再次购买</span>
{{/if}}
{{/orderBtn}}
</div>
... ...
... ... @@ -13,46 +13,6 @@
{{#shippingCost}}(含运费¥{{.}}){{/shippingCost}}
</footer>
<div class="order-opt">
{{# orderBtn}}
{{#if leftTime}}
<ul class="count-down hide">
<li><span class="iconfont count-down-icon">&#xe64a;</span></li>
<li><span class="hours">{{leftTime}}</span></li>
</ul>
{{else if isAdvance}}
<span class="order-opt-info">*定金预售订单只能在APP端操作</span>
{{else if refundApply}}
<span class="btn refund">申请退款</span>
{{else if modifyAddress}}
<a class="btn" href="{{link}}">
<span>修改地址</span>
</a>
{{else if buyNow}}
<a class="locHref" href="{{link}}">
<span class="btn pay">立即付款</span>
</a>
{{else if closeOrder}}
<span class="btn cancel">取消订单</span>
{{else if confirm}}
{{else if getExpress}}
<a class="locHref" href="{{logisticsUrl}}">
<span class="btn check-logistics">查看物流</span>
</a>
{{else if shareOrder}}
{{else if delOrder}}
<span class="btn del">删除订单</span>
{{else if lookQrcode}}
<a class="locHref" href="{{link}}">
<span class="btn check-logistics">查看二维码</span>
</a>
{{else if afterService}}
{{else if readd}}
<span class="btn rebuy">再次购买</span>
{{/if}}
{{/orderBtn}}
</div>
{{!--按钮组--}}
{{> order/order-btns}}
</div>
... ...
... ... @@ -14,7 +14,6 @@ var $ = require('yoho-jquery'),
var orderId = $('#order-detail').data('id'),
$countDownHours = $('.hours'),
$countdownContainer = $('.count-down'),
$ownerInfo = $('.owner-info'),
$reaMask = $('.reason-mask'),
$refundReaMask = $('.refund-reason-mask'),
reasonSwiper,
... ... @@ -22,8 +21,8 @@ var orderId = $('#order-detail').data('id'),
optHammer,
$createTime = new Date($('.createTime').text() * 1000);
var $sureClose = $('.btn-cancel'); // 取消订单按钮
var $sureRefund = $('.btn-refund'); // 申请退款按钮
var $sureClose = $('.order-opt').find('.cancel'); // 取消订单按钮
var $sureRefund = $('.order-opt').find('.refund'); // 申请退款按钮
require('home/order-detail-index.page.css');
... ... @@ -87,11 +86,11 @@ function downCount(options) {
downCount($countDownHours.text());
// 订单删除
optHammer = new Hammer(document.getElementsByClassName('opt')[0]);
optHammer = new Hammer(document.getElementsByClassName('order-opt')[0]);
optHammer.on('tap', function(e) {
var $cur = $(e.target);
if ($cur.hasClass('btn-del')) {
if ($cur.hasClass('del')) {
// 删除订单
dialog.showDialog({
... ... @@ -122,9 +121,9 @@ optHammer.on('tap', function(e) {
tip.show('网络错误');
});
});
} else if ($cur.hasClass('btn-cancel')) {
} else if ($cur.hasClass('cancel')) {
// $reaMask.css('visibility', 'visible');
} else if ($cur.hasClass('btn-refund')) {
} else if ($cur.hasClass('refund')) {
// $refundReaMask.css('visibility', 'visible');
/**
... ... @@ -139,7 +138,7 @@ optHammer.on('tap', function(e) {
})
}, true);
}
} else if ($cur.hasClass('btn-rebuy')) {
} else if ($cur.hasClass('rebuy')) {
$.ajax({
type: 'GET',
url: '/home/readd',
... ... @@ -154,15 +153,7 @@ optHammer.on('tap', function(e) {
tip.show(res.message);
}
});
}
});
if ($ownerInfo.data('changeable') === true) {
$ownerInfo.find('.rest').show();
$ownerInfo.on('touchend', function() {
/**
* 埋点
*/
} else if ($cur.hasClass('modify-address')) {
if (window._yas && window._yas.sendCustomInfo) {
window._yas.sendCustomInfo({
op: 'YB_ORDER_MODIFY_ADDRESS_C',
... ... @@ -172,10 +163,9 @@ if ($ownerInfo.data('changeable') === true) {
})
}, true);
}
location.href = $ownerInfo.data('url');
});
}
return true;
}
});
$(function() {
reasonSwiper = new Swiper('.box-main', {
... ...
... ... @@ -101,20 +101,6 @@
margin-top: 10px;
}
.rest {
display: none;
position: relative;
width: 100%;
text-align: right;
color: #f00;
font-size: 24px;
.icon-address {
position: static;
font-size: 24px;
}
}
.order-status {
margin: 20px 0;
border-top: 1px solid #e0e0e0;
... ... @@ -172,15 +158,6 @@
}
}
.opt {
text-align: right;
border-top: 1px solid #e0e0e0;
}
.order-opt-info {
color: #b6b6b6;
}
.btn {
display: inline-block;
box-sizing: border-box;
... ... @@ -193,14 +170,6 @@
border: 1px solid #000;
}
.btn-pay {
color: #fff;
border: none;
background: #d0021b;
margin-left: 10px;
font-size: 24px;
}
.clock {
width: 100%;
height: 52px;
... ... @@ -374,4 +343,66 @@
float: right;
}
}
.order-opt {
padding: 20px 0;
padding-right: 20px;
border-top: 1px solid #e0e0e0;
text-align: right;
background-color: #fff;
.btn {
display: inline-block;
box-sizing: border-box;
height: 60px;
line-height: 60px;
width: 140px;
font-size: 24px;
text-align: center;
border: 1px solid #000;
border-radius: 5PX;
margin-left: 15px;
margin-top: 5px;
}
.pay {
background: #d0021b;
color: #fff;
border: none;
}
.count-down {
list-style: none;
padding: 0;
display: inline-block;
text-align: right;
font-size: 24px;
color: #b0b0b0;
float: left;
margin-left: 30px;
margin-top: 20px;
.count-down-icon {
margin-top: -8px;
font-size: 30px;
}
&.hide {
display: none;
}
li {
display: inline-block;
}
li span {
font-size: 24px;
line-height: 24px;
}
}
.order-opt-info {
color: #b6b6b6;
}
}
}
... ...
... ... @@ -111,10 +111,11 @@
}
.order-opt {
padding: 30px 0;
padding-right: 30px;
padding: 20px 0;
padding-right: 20px;
border-top: 1px solid #e0e0e0;
text-align: right;
overflow: hidden;
.btn {
display: inline-block;
... ... @@ -126,13 +127,14 @@
text-align: center;
border: 1px solid #000;
border-radius: 5PX;
margin-left: 15px;
margin-top: 5px;
}
.pay {
background: #d0021b;
color: #fff;
border: none;
margin-left: 20px;
}
.count-down {
... ... @@ -165,10 +167,6 @@
}
}
.rebuy {
margin-left: 20px;
}
.order-opt-info {
color: #b6b6b6;
}
... ...