Authored by 郭成尧

modal-box

... ... @@ -62,3 +62,17 @@
</div>
</div>
{{!-- 申请退款确认框 --}}
<div class="ymodal ymodal-alert" id="refundModal">
<div class="ymodal-dialog">
<div class="ymodal-content">
<div class="ymodal-body">
申请退款后,本单享有的优惠可能会一并取消,确定申请吗?
</div>
<div class="modal-btn">
<button id="disMissBtn" data-dismiss="ymodal">返回</button>
<button id="sureRefund">确定</button>
</div>
</div>
</div>
</div>
... ...
... ... @@ -40,7 +40,7 @@
{{!-- 申请退款 --}}
{{#if refundApply}}
<span class="btn refund">申请退款</span>
<span class="btn refund" data-toggle="ymodal" data-target="#refundModal">申请退款</span>
{{/if}}
{{!-- 修改地址 --}}
... ...
... ... @@ -13,6 +13,9 @@ var $ = require('yoho-jquery'),
var $navLi = $('#order-nav > li'),
$orderContainer = $('#order-container');
var $sureRefund = $('#sureRefund'); // 确定申请退款
var $disMissBtn = $('#disMissBtn'); // 返回
var $curContainer = $orderContainer.children('.orders:not(.hide)');// 保存当前显示的order-container
var winH = $(window).height();
... ... @@ -40,6 +43,8 @@ var orderHammer,
var firstScreen = $('.firstscreen-orders').children().size() > 0;
require('../common');
require('../plugin/modal.alert');
require('../../scss/layout/_modal.css');
require('home/order-list.page.css');
... ... @@ -243,8 +248,9 @@ orderHammer.on('tap', function(e) {
// 取消订单
$reaMask.css('visibility', 'visible');
} else if ($cur.closest('.refund').length > 0) {
// 申请退款
$refundReaMask.css('visibility', 'visible');
// $refundReaMask.css('visibility', 'visible');
/**
* 埋点
... ... @@ -435,6 +441,12 @@ $reaMask.on('touchend', function(event) {
event.stopPropagation();
});
// 弹出申请退款提示框
$sureRefund.on('click', function() {
$disMissBtn.trigger('click');
$refundReaMask.css('visibility', 'visible');
});
// 申请退款
$refundReaMask.on('touchend', function(event) {
if (event.target.className !== 'reason-mask') {
... ...
... ... @@ -358,3 +358,30 @@
color: #f00;
}
}
.modal-btn {
width: 100%;
height: 60px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
display: inline-block;
button {
width: 268px;
border: 0;
float: left;
height: 68px;
background-color: #fff;
border-top: 1px solid #ccc;
}
button:first-child {
border-bottom-left-radius: 4px;
border-right: 1px solid #ccc;
}
button:last-child {
border-bottom-right-radius: 4px;
color: #d0021b;
}
}
... ...