出现问题：
因为订单的支付不是普通的微信支付，是第三方支付，而且由于该三方支付自己内部设置的一些情况，导致退款的时候，发起了退款申请，但是会在15~20秒左右，才会返回结果，不像微信支付，几秒内就会有返回结果。
解决办法：
订单发起请求之后，需要给操作者第一时间内返回状态，哪怕只是操作中的状态，然后需要每隔几秒轮训查询状态，然后即时给操作着反馈。
html代码：
//html代码,需要操作者填写的信息
<input type="hidden" name="order_id" id="order_id" {if condition="!empty($order['id'])"}value="{$order['id']}"{/if}>
<div class="layui-form-item">
<label for="L_isin" class="layui-form-label">退款状态：</label>
<div class="layui-input-inline">
<input type="radio" name="status" value="1" title="同意退款">
<input type="radio" name="status" value="2" title="拒绝退款" {if condition="$order['refund_status'] eq '1'"}disabled{/if}>
</div>
</div>
<div class="layui-form-item">
<label for="L_title" class="layui-form-label">拒绝原因：</label>
<div class="layui-input-inline">
<input type="text" id="refund_desc" name="refund_desc" class="layui-input"/>
</div>
</div>
//需要显示的遮罩层代码
<div id="overlay">
</div>
遮罩层的样式代码
<style>
.layui-form-label{width: 130px;padding: 5px 15px;}
.layui-form-item{margin-bottom: 0px;}
.content{margin-top: 7px;}
.layui-form-radio{ margin: 0px 10px 0 0;}
.progress-father {
display: flex;
flex-direction: column;
}
.progress-container {
display: flex;
align-items: center;
margin-bottom: 2px;
}
.progress-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #03c060;
margin-right: 10px;
}
.progress-line {
height: 20px;
width: 2px;
background-color: #FFF000;
margin-left: 4px;
}
.progress-node {
margin-left: 10px;
}
.activeCls {
position: relative;
margin-left: 14px;
margin-top: 16px;
margin-right: 6px;
&:before {
content: "";
position: absolute;
right: 0;
bottom: 0;
border: 9px solid #f90;
border-radius: 50%;
/*border-top-color: transparent;*/
/*border-left-color: transparent;*/
}
&:after {
content: "";
width: 5px;
height: 10px;
position: absolute;
right: 6px;
bottom: 5px;
border: 1px solid #fff;
border-top-color: transparent;
border-left-color: transparent;
transform: rotate(45deg);
}
}
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
display: none;
}
.overlay-content {
width: 300px;
height: 300px;
background-color: #fff;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10000;
display: none;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>js代码
<script>
$(document).ready(function(){
$('#show_overlay_btn').click(function() {
$('#overlay').show();
$('.overlay-content').show();
});
})
//关闭遮罩层按钮
$(document).on('click', '#show_overlay_btn_close', function() {
clearInterval(time_id);//清空轮询任务
//隐藏进度代码
$('#overlay').hide();
$('.overlay-content').hide();
//刷新页面
// window.location.reload();
window.parent.location.reload();
})
layui.use(['layer'], function() {
var layer = layui.layer;
// 在点击事件中调用 showOrderProgress 函数
$('#submit_but').on('click', function() {
//获取值
var order_id = $('#order_id').val();
var refund_desc = $('#refund_desc').val();
var status = $('input:radio:checked').val();
$.ajax({
url: '/admin/Order/mod_orderv2002',
type: 'post',
data: {
order_id:order_id,
refund_desc:refund_desc,
status:status
},
dataType: 'json',
success: function (info) {
console.log(info)
if (info.code == 1) {
if (info.next_flag == 1) {
getOrderRefundStatus();
window.time_id = setInterval(getOrderRefundStatus,4000);
}else{
layer.msg(info.msg,{time:2000});
}
}else{
layer.msg(info.msg,{time:2000});
}
}
});
});
function getOrderRefundStatus(order_id){
var order_id = $('#order_id').val();
$.ajax({
url: '/admin/Order/getOrderRefundStatus2',
type: 'post',
data: {
order_id:order_id
},
dataType: 'json',
success: function (info) {
console.log(info)
if (info.code === 1) {
if(info.status == 0){
info_data = `<div class="overlay-content">
<div class="progress-father">
<div class="progress-father">
<div class="progress-container">
<div class="progress-dot"></div>
<div class="progress-node">退款已申请</div>
</div>
<div class="progress-line"></div>
<div class="progress-container">
<div class="activeCls"></div>
<div class="progress-node">正在退款中</div>
</div>
<div class="progress-line"></div>
<div class="progress-container">
<div class="progress-dot"></div>
<div class="progress-node"><span style="color:grey;">退款已完成</span></div>
</div>
</div>
</div>
<button class="layui-btn" id="show_overlay_btn_close" style="margin-top: 30px;">关闭</button>
</div>`;
$('#overlay').show();
$('.overlay-content').show();
document.getElementById("overlay").innerHTML= info_data;
}
if(info.status == 1){
info_data = `<div class="overlay-content">
<div class="progress-father">
<div class="progress-father">
<div class="progress-container">
<div class="progress-dot"></div>
<div class="progress-node">退款已申请</div>
</div>
<div class="progress-line"></div>
<div class="progress-container">
<div class="progress-dot"></div>
<div class="progress-node">正在退款中</div>
</div>
<div class="progress-line"></div>
<div class="progress-container">
<div class="activeCls"></div>
<div class="progress-node">退款已完成</div>
</div>
</div>
</div>
<button class="layui-btn" id="show_overlay_btn_close" style="margin-top: 30px;">关闭</button>
</div>`;
$('#overlay').show();
$('.overlay-content').show();
document.getElementById("overlay").innerHTML= info_data;
clearInterval(time_id);//清空轮询任务
}
if(info.status == 2){
layer.msg(info.msg,{time:2000});
clearInterval(time_id);//清空轮询任务
}
}else{
layer.msg(info.msg,{time:2000});
clearInterval(time_id);//清空轮询任务
}
}
});
}
});
</script>PHP后端代码,因为后端代码涉及的逻辑复杂,因此,只是将返回值填写上,供前端调用调试
public function mod_orderv2002()
{
$return1 = ['code' => 0, 'msg' => '订单无操作', 'next_flag' => 0];
$return2 = ['code' => 1, 'msg' => '退款进行中', 'next_flag' => 1];
return $return2;
}
public function getOrderRefundStatus2()
{
$return1 = ['code' => 0, 'msg' => '订单不存在', 'status' => 0];
$return2 = ['code' => 1, 'msg' => '退款进行中', 'status' => 0];
$return3 = ['code' => 1, 'msg' => '退款已完成', 'status' => 1];
$return4 = ['code' => 1, 'msg' => '退款失败', 'status' => 2];
return $return2;
}使用效果
后端代码都是显示正在进行中
轮询的任务一直在跑,同时,弹框内容因为一直是进行中,然后就不会变
此时后台改为退款已完成
轮询任务停止,同时弹框内容变化
