Authored by biao

update for order detail and fix some bugs

... ... @@ -84,7 +84,9 @@ const _getUserOrder = (uid, type, page) => {
item.createTime = _convertUnixTime(item.createTime);
// 隐藏结束了的剩余时间
if (parseInt(item.payLefttime, 10) !== 0 && item.isCancel === 'N') {
if (parseInt(item.payLefttime, 10) !== 0 &&
item.isCancel === 'N' &&
st === 0) {
item.showPayButton = true;
}
... ... @@ -99,6 +101,10 @@ const _getUserOrder = (uid, type, page) => {
item.showGetBtn = st === 4 || st === 5;
item.showBuyBtn = item.isCancel === 'Y';
if (item.statusStr === '已付款') {
item.statusStr = '备货中';
}
});
return {
... ... @@ -136,7 +142,7 @@ const getOrderData = (uid, type, page) => {
return _getUserOrder(uid, type, page).then(result => {
const basicData = {
title: '我的订单',
showSearch: type === 1,
showSearch: false, // type === 1,
total: result.total,
type: type
};
... ... @@ -199,6 +205,12 @@ const getOrderDetail = (uid, code) => {
detail.createTime = _convertUnixTime(detail.createTime);
detail.amount = detail.amount.replace('¥', '');
if (parseInt(detail.status, 10) !== 0 && detail.isCancel !== 'Y') {
detail.showPaid = true;
}
detail.expressInfo = express;
detail.expressInfo.addressList = _convertAddress(express.expressDetail);
... ...
... ... @@ -4,5 +4,6 @@
{{> order/detail/order-status}}
{{> order/detail/order-express}}
{{> order/detail/info-box}}
{{> order/detail/goods-list}}
</div>
{{/ orderDetail}}
... ...
<div class="goods-list info-box">
<h4 class="status-title">商品清单</h4>
<div class="table">
<ul class="header">
<li class="first">商品信息</li>
<li>价格</li>
<li>数量</li>
<li>小记</li>
</ul>
<div class="table-body">
{{> order/goods-box}}
</div>
</div>
</div>
<div class="payment-info info-box">
<p>
<span class="tip">商品金额:</span>
<span class="amount">{{amount}}</span>
</p>
<p>
<span class="tip">有货币:</span>
<span class="amount">{{yohoGiveCoin}}</span>
</p>
<p>
<span class="tip">运费:</span>
<span class="amount">{{yohoGiveCoin}}</span>
</p>
<p class="payment-amount">
<span class="tip">实付金额:</span>
<span class="amount">{{paymentAmount}}</span>
</p>
{{#if showPaid}}
<p class="paid">
<span class="iconfont">&#xe60b;</span>订单已支付
</p>
{{/if}}
</div>
... ...
<div class="user-info info-box">
<h4 class="status-title">收货人信息</h4>
<p>收货人:{{userName}}</p>
<p>收货地址:{{address}}</p>
<p>联系电话:{{mobile}}</p>
<p class="text">收货人:{{userName}}</p>
<p class="text">收货地址:{{address}}</p>
<p class="text">联系电话:{{mobile}}</p>
</div>
<div class="payment-info info-box">
<div class="info-box">
<h4 class="status-title">支付及配送方式</h4>
<p>支付类型:{{paymentType}}</p>
<p>支付方式:{{paymentName}}</p>
<p>送货时间:{{deliveryTime}}</p>
<p class="text">支付类型:{{paymentType}}</p>
<p class="text">支付方式:{{paymentName}}</p>
<p class="text">送货时间:{{deliveryTime}}</p>
</div>
<div class="invoice-info info-box">
<div class="info-box">
<h4 class="status-title">发票信息</h4>
<p>发票类型:{{paymentType}}</p>
<p>发票抬头:{{paymentName}}</p>
<p>发票内容:{{deliveryTime}}</p>
<p class="text">发票类型:{{paymentType}}</p>
<p class="text">发票抬头:{{paymentName}}</p>
<p class="text">发票内容:{{deliveryTime}}</p>
</div>
<div class="remark-info info-box">
{{#if remark}}
<div class="info-box">
<h4 class="status-title">备注</h4>
<p>{{remark}}</p>
<p class="text">{{remark}}</p>
</div>
{{/if}}
... ...
<div class="goods-container special-border">
{{#orderGoods}}
<div class="good-info {{#if @last}}last{{/if}}">
<img src="{{image goodsImage 65 90}}">
<div class="detail">
<p class="with-bottom-space">{{productName}}</p>
<span class="with-space">颜色:{{colorName}}</span>
<span>尺码:
<span class="bold">{{sizeName}}</span>
</span>
<p class="bold buy-number">{{> icon/error-round}}{{buyNumber}}</p>
</div>
</div>
<div class="sub-column right-border bold">
<p class="{{#if @last}}last{{/if}}">{{goodsPrice}}</p>
</div>
<div class="sub-column right-border special-column bold">
<p class="bold">{{buyNumber}}</p>
</div>
<div class="sub-column special-column bold">
<p class="bold">{{goodsAmount}}</p>
</div>
{{/orderGoods}}
</div>
... ...
... ... @@ -10,25 +10,7 @@
{{/if}}
</ul>
<div class="table-body">
<div class="goods-container special-border">
{{#orderGoods}}
<div class="good-info {{#if @last}}last{{/if}}">
<img src="{{image goodsImage 65 90}}">
<div class="detail">
<p class="with-bottom-space">{{productName}}</p>
<span class="with-space">颜色:{{colorName}}</span>
<span>尺码:
<span class="bold">{{sizeName}}</span>
</span>
<p class="bold">{{> icon/error-round}}{{buyNumber}}</p>
</div>
</div>
<div class="price bold">
<p class="{{#if @last}}last{{/if}}">{{goodsAmount}}</p>
</div>
{{/orderGoods}}
</div>
{{> order/goods-box}}
<div class="common-column special-border">
<p class="bold">{{amount}}</p>
<p class="subtext">{{paymentTypeStr}}</p>
... ...

3.14 KB | W: | H:

8.8 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
... ... @@ -153,11 +153,34 @@ function setOrderTotal() {
}
}
function getCurrentTabType() {
return $('.order-nav .active').data('type');
}
function getCurrentPage() {
var $pageEl = $('.blk-pagination .active a');
var page;
if ($pageEl.length) {
page = $pageEl.text();
}
return page;
}
function updateTableContent($el) {
$el.find('.status .status-str').text('已取消');
$el.find('.pay-operation').remove();
$el.find('.buy-operation').removeClass('hide');
setOrderTotal();
var type = getCurrentTabType();
var page = getCurrentPage();
if (type === 'all') {
$el.find('.status .status-str').text('已取消');
$el.find('.pay-operation').remove();
$el.find('.buy-operation').removeClass('hide');
setOrderTotal();
} else {
type = typeMap[type];
getOrderList(type, page);
}
}
// 绑定分页点击事件
... ...
... ... @@ -73,14 +73,100 @@
}
.info-box {
$w: 516px;
margin: $bigSpace 0;
padding-bottom: calc($space - $smallSpace);
border-bottom: 1px solid $borderColor;
p {
.text {
font-size: $normalSize;
margin: $smallSpace 0;
}
.table {
.header {
li {
width: $normalWidth;
text-align: center;
}
.first {
width: calc($goodImgWidth + 2 * $space + $w - $normalWidth + $space / 2);
text-align: left;
}
}
}
.goods-container {
width: calc($w + 3 * $normalWidth);
.special-column {
display: inline-block !important;
}
.right-border {
border-right: 1px solid $borderColor;
}
.buy-number {
display: none;
}
.detail {
width: calc($w - $goodImgWidth - 2 * $space - 3px) !important;
}
}
&.goods-list {
margin-bottom: 0;
border-bottom: none;
}
&.payment-info {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
text-align: right;
p {
font-size: $normalSize;
margin-bottom: $smallSpace;
}
.payment-amount {
margin-top: $bigSpace;
.amount {
font-size: $bigSize;
font-weight: bold;
}
}
.paid {
margin-top: $bigSpace;
font-size: $normalSize;
color: $skyBlue;
.iconfont {
font-size: $normalSize;
border: 1px solid $skyBlue;
border-radius: 100%;
margin-right: 5px;
}
}
.tip {
display: inline-block;
width: 200px;
text-align: left;
}
.amount {
display: inline-block;
min-width: 100px;
}
}
}
.status-title {
... ... @@ -108,7 +194,7 @@
margin-bottom: $space;
p {
width: 30%;
min-width: 15%;
display: inline-block;
font-size: $normalSize;
margin: 0;
... ... @@ -135,4 +221,3 @@
}
}
... ...
... ... @@ -105,7 +105,7 @@
}
}
.price {
.sub-column {
width: calc($normalWidth - 4px);
display: inline-block;
text-align: center;
... ... @@ -123,6 +123,10 @@
}
}
}
.special-column {
display: none;
}
}
.special-border {
... ...