691 lines
24 KiB
PHP
691 lines
24 KiB
PHP
@extends('web.layouts.h5base')
|
||
@section('add_css')
|
||
<link href="{{ url('/style/web/h5/js/clipboard.min.js') }}" rel="stylesheet" media="screen">
|
||
<script type="text/javascript" src="{{ url('/style/web/') }}/h5/js/clipboard.min.js"></script>
|
||
<script src="{{ url('/style/web/') }}/h5/layer_mobile/layer.js"></script>
|
||
<style>
|
||
.expired {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
height: 100%;
|
||
width: 100%;
|
||
opacity: .95;
|
||
background: #fff url({{ url('/style/web/') }}/h5/images/expired.png) center center no-repeat;
|
||
}
|
||
|
||
.paid {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
height: 100%;
|
||
width: 100%;
|
||
opacity: .95;
|
||
background: #fff url({{ url('/style/web/') }}/h5//images/paid.png) center center no-repeat;
|
||
}
|
||
|
||
.hidden {
|
||
display: none;
|
||
}
|
||
|
||
.code_tan h3 .closer {
|
||
position: absolute;
|
||
top: 0.05rem;
|
||
right: 0.0rem;
|
||
font-size: .21rem;
|
||
color: #ccc !important;
|
||
background: #fff;
|
||
width: 0.28rem;
|
||
height: 0.28rem;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.tan_bg .code_tan {
|
||
border-radius: 0.1rem;
|
||
}
|
||
|
||
.tan-title h3 {
|
||
color: #666;
|
||
|
||
}
|
||
|
||
.tan-title {
|
||
border-bottom: 1px solid #ededed;
|
||
margin-bottom: 0.1rem;
|
||
}
|
||
|
||
.code_tan {
|
||
padding-bottom: 0.2rem;
|
||
height: auto;
|
||
}
|
||
|
||
.tan_button a {
|
||
margin: 0 0.27rem;
|
||
display: inline-block;
|
||
width: 3rem;
|
||
height: .4rem;
|
||
line-height: .4rem;
|
||
text-align: center;
|
||
border-radius: .05rem;
|
||
box-sizing: border-box;
|
||
box-shadow: none;
|
||
border: 0.01rem solid limegreen;
|
||
}
|
||
|
||
.bg_ccc {
|
||
background-color: #f8f9fc;
|
||
}
|
||
|
||
.impot-tip {
|
||
background: #e85453;
|
||
line-height: 0.4rem;
|
||
color: #fff;
|
||
text-align: center;
|
||
}
|
||
|
||
.fail_icon {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
height: 100%;
|
||
width: 100%;
|
||
opacity: .95;
|
||
background: #fff url(/style/web/h5/images/close.png) center center no-repeat;
|
||
}
|
||
|
||
.code .code_bg .code_img {
|
||
width: 2.2rem;
|
||
height: 2.2rem;
|
||
margin: 0 auto;
|
||
|
||
}
|
||
|
||
.code .code_bg .img, .code .code_bg img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.code .org_button2 .a, .code .org_button2 a {
|
||
display: inline-block;
|
||
width: 3.2rem;
|
||
height: 0.35rem;
|
||
background-color: #00a0e9;
|
||
color: #fff;
|
||
font-size: .16rem;
|
||
line-height: 0.35rem;
|
||
text-align: center;
|
||
border-radius: .05rem;
|
||
box-sizing: border-box;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.code .org_button2 .weixin {
|
||
display: inline-block;
|
||
width: 3.2rem;
|
||
height: 0.35rem;
|
||
background-color: #2ba245;
|
||
color: #fff;
|
||
font-size: .16rem;
|
||
line-height: 0.35rem;
|
||
text-align: center;
|
||
border-radius: .05rem;
|
||
box-sizing: border-box;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.p-t-20 {
|
||
padding-top: .1rem;
|
||
}
|
||
|
||
body {
|
||
background: #fff;
|
||
}
|
||
|
||
.pay-tip {
|
||
width: 0.5rem;
|
||
background: #e85453;
|
||
line-height: 1.5;
|
||
top: -0.0rem;
|
||
right: -0.72rem;
|
||
position: absolute;
|
||
color: #fff;
|
||
padding: 0.1rem;
|
||
border-radius: 0.1rem;
|
||
font-size: 0.14rem;
|
||
}
|
||
|
||
.pay-tip:after {
|
||
|
||
content: "";
|
||
position: absolute;
|
||
transform: rotate(-16deg);
|
||
left: -.06rem;
|
||
bottom: -2px;
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 0.2rem solid transparent;
|
||
border-right: 0 solid transparent;
|
||
border-bottom: .13rem solid #e85453;
|
||
|
||
|
||
}
|
||
|
||
.impot-top {
|
||
background: #fff;
|
||
line-height: 0.4rem;
|
||
color: #333;
|
||
text-align: center;
|
||
}
|
||
|
||
.exp {
|
||
text-align: left;
|
||
margin-left: 100px
|
||
}
|
||
|
||
.color {
|
||
color: #FF0000;
|
||
font-size: 32px;
|
||
}
|
||
|
||
.color1 {
|
||
color: #666;
|
||
font-size: 12px;
|
||
}
|
||
.bank-item
|
||
{
|
||
padding-top: 20px;
|
||
}
|
||
.code h4{
|
||
color: red;
|
||
text-align: right;
|
||
padding-right: 15px;
|
||
}
|
||
|
||
</style>
|
||
@endsection
|
||
@section('content')
|
||
|
||
<div id="app" style="position: relative">
|
||
@if(!in_array($pay_type,['tr_bank','tr_bank2']) )
|
||
<p class="impot-top fff tcenter" style="line-height: normal"><img
|
||
src="{{ url('/style/web/') }}/h5/images/{{ $pay_type }}.png" alt=""></p>
|
||
@endif
|
||
<p class="impot-tip fff tcenter">重复支付和修改金额无法到账，概不负责</p>
|
||
<div class="code">
|
||
<h5 class=" code_noti bg_color_white">
|
||
<span class="color_999 font-16 p-l-20 t-status">{{ $pay_status }}</span>
|
||
<div class="pull_right p-r-20 font-14 ">
|
||
<span class="color_999 p-r-05 f-w-400 color_666">支付倒计时</span>
|
||
@verbatim <span class="color_999" id="OnlyTime"></span>@endverbatim
|
||
</div>
|
||
</h5>
|
||
|
||
<h5 class="font-12 p-l-20 bg_color_white p-r-20 f-w-400 p-b-05">
|
||
<span class="color_999">订单编号：</span>
|
||
<span class="color_999">{{ $order->order_sn }}</span>
|
||
<span class="pull_right color_999 copy" data-clipboard-text="{{ $order->order_sn }}">复制订单编号</span>
|
||
</h5>
|
||
@if($pay_type=='tr_bank2')
|
||
<h4>转账时把订单编号填在备注里</h4>
|
||
@endif
|
||
<div class="code_bg m10 bg_ccc">
|
||
<h3 class="color_333 f-w-400 p-t-20 text-center">¥ <span
|
||
class="color">{{ $order->order_money }}</span><span class="color1">（请勿修改金额付款）</span></h3>
|
||
{{--<h3 class="color_333 f-w-400 exp p-b-10">付款备注：<span class="color">{{ $order->ewm_mark }}</span><span class="color1">（请在支付备注上填写）</h3>--}}
|
||
|
||
{{--<h3 class="color_red text-center font-20">
|
||
<span class="p-r-05">￥</span><span>{{ $order->order_money }}</span></h3>
|
||
<h3 class="color_red text-center font-20 p-b-10">付款备注：{{ $order->ewm_mark }}</h3>--}}
|
||
@if($pay_type=='tr_bank2')
|
||
|
||
<h5 class="font-12 bank-item p-l-20 bg_color_white p-r-20 f-w-400 p-b-05">
|
||
<span class="color_999">银行类型：</span>
|
||
<span class="color_999">{{ $gateway['bank_name'] }}</span>
|
||
|
||
</h5>
|
||
<h5 class="font-12 bank-item p-l-20 bg_color_white p-r-20 f-w-400 p-b-05">
|
||
<span class="color_999">收款姓名：</span>
|
||
<span class="color" style="font-size: 16px">{{ $gateway['username'] }}</span>
|
||
<span class="pull_right color_999 copy" data-clipboard-text="{{ $gateway['username'] }}">复制收款姓名</span>
|
||
</h5>
|
||
<h5 class="font-12 bank-item p-l-20 bg_color_white p-r-20 f-w-400 p-b-05">
|
||
<span class="color_999">卡号：</span>
|
||
<span class="color" style="font-size: 16px">{{ $gateway['mch_id'] }}</span>
|
||
<span class="pull_right color_999 copy" data-clipboard-text="{{ $gateway['mch_id'] }}">复制卡号</span>
|
||
</h5>
|
||
<h5 class="font-12 bank-item p-l-20 bg_color_white p-r-20 f-w-400 p-b-05">
|
||
<span class="color_999">开户行：</span>
|
||
<span class="color_999">{{ $gateway['source'] }}</span>
|
||
<span class="pull_right color_999 copy" data-clipboard-text="{{ $gateway['source'] }}">复制开户行</span>
|
||
</h5>
|
||
<div class="" style="clear: both"></div>
|
||
|
||
@else
|
||
<div class="bg_color_white code_img trade-order-detail" style="position: relative">
|
||
<img class="" src="{{ url($bank['thumb']) }}"/>
|
||
<div class="expired hidden"></div>
|
||
<div class="paid hidden"></div>
|
||
<div class="hidden fail_icon"></div>
|
||
</div>
|
||
@endif
|
||
|
||
{{-- <h5 class="color_333 f-w-400 text-center p-t-20">
|
||
<span class="p-r-05">付款页面备注请填写</span>
|
||
<span>(</span>
|
||
<span class="color_FF0000">必填</span>
|
||
<span>)</span>
|
||
</h5>
|
||
<h3 class="color_red text-center font-20 p-b-10">{{ $order->ewm_mark }}</h3>--}}
|
||
|
||
</div>
|
||
@if($pay_type=='tr_wxalbank')
|
||
<h3 class="color_red text-center font-20 p-b-10" style="font-size: 16px;margin-top: 20px">使用支付宝或微信或银行支付</h3>
|
||
|
||
|
||
|
||
|
||
@endif
|
||
@if($pay_type=='tr_wxal')
|
||
<h3 class="color_red text-center font-20 p-b-10" style="font-size: 16px;margin-top: 20px">使用支付宝或者微信支付</h3>
|
||
|
||
|
||
|
||
|
||
@endif
|
||
@if($pay_type=='tr_alipay')
|
||
@if($bank['url'])
|
||
<div class="org_button2 p-t-10i" id="goPay">
|
||
<a href="javascript:void(0)">打开支付宝跳转付款页面</a>
|
||
</div>
|
||
@endif
|
||
|
||
@endif
|
||
@if($pay_type=='tr_weixin')
|
||
<div class="org_button2 p-t-10i" id="tips-button">
|
||
<a href="#" class="weixin">1.长按二维码保存到相册</a>
|
||
</div>
|
||
<div class="org_button2 p-t-10i" id="tips-button">
|
||
<a href="weixin://scanqrcode" class="weixin">2.打开微信扫一扫</a>
|
||
</div>
|
||
@endif
|
||
|
||
|
||
|
||
</div>
|
||
<div class="none"></div>
|
||
<div class="code_footer" style="{{ !$is_mobile?'position: static':'' }}">
|
||
<a href="javascript:void(0)" onclick="payOk()"
|
||
style="background-color: {{ $pay_type=='tr_alipay'?'#00a0e9':'' }}">
|
||
<span>我已付款</span>
|
||
<span>{{ $order->order_money }}</span>
|
||
<span>元</span>
|
||
</a>
|
||
<a href="javascript:void(0)" id="cancleOrder">取消此交易</a>
|
||
</div>
|
||
<div class="pay_tan tan_bg hide">
|
||
<div class="code_tan bg_color_white"
|
||
style="position:fixed; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%);">
|
||
<div class="tan-title">
|
||
<h3 class="font-18 text-center f-w-400">付款填写
|
||
<i class="fa fa-close closer"></i>
|
||
</h3>
|
||
</div>
|
||
<p class="work-break p-l-20 p-r-20 color_333">填写转账信息，方便核实订单，请填写。</p>
|
||
<div class="list-input"><label>付款账号</label> <input name="pay_account" placeholder="请输入付款账号"></div>
|
||
<div class="list-input"><label>备注</label> <input name="ewm_mark" placeholder="请输入备注"></div>
|
||
|
||
|
||
<div class="tan_button p-t-10i">
|
||
<a class="color-white font-14 pay_sen_msg" href="javascript:void(0)"
|
||
style="background-color: {{ $pay_type=='tr_alipay'?'#00a0e9':'#32cd32' }};border-color: {{ $pay_type=='tr_alipay'?"#00a0e9":"" }}"><span
|
||
class=" "></span> 提交转账信息 </a>
|
||
|
||
</div>
|
||
|
||
|
||
{{--<div class="tan_button p-t-10i">
|
||
<a class="color_666 font-14" href="">查看充值教程</a>
|
||
</div>--}}
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="first_tan tan_bg hide">
|
||
<div class="code_tan bg_color_white"
|
||
style="position:fixed; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%);">
|
||
<div class="tan-title">
|
||
<h3 class="font-18 text-center f-w-400">重要通知
|
||
<i class="fa fa-close closer"></i>
|
||
</h3>
|
||
</div>
|
||
|
||
|
||
<p class="work-break p-l-20 p-r-20 color_333">
|
||
1.付款金额一定要精确到小数点后两位。比如：<span
|
||
style="color:#f00">界面提醒付款金额为{{ $order->order_money }}元</span>，您支付的时候<span
|
||
style="color:#f00">一定要支付{{ $order->order_money }}，一分不能少</span>。
|
||
|
||
|
||
</p>
|
||
<p class="m-t-15"></p>
|
||
|
||
<p class="work-break p-l-20 p-r-20 color_333"> 2.注意如修改金额支付，或没有填写支付备注，支付后无法查证，不补不退，概不负责。</p>
|
||
<p class="m-t-35"></p>
|
||
<p class="work-break p-l-20 p-r-20 color_333">
|
||
3.<span style="color:#f00">订单超过15分钟订单自动取消,请勿付款之前的码</span>，补单2小时内有效，补单2小时内有效，补单2小时内有效，超过补单时间自行负责。</p>
|
||
<p class="m-t-35"></p>
|
||
|
||
|
||
<div class="tan_button p-t-10i">
|
||
<a class="bg_limegreen color-white font-14 closer2 copy2" href="javascript:void(0)"
|
||
style="background-color: {{ $pay_type=='tr_alipay'?'#00a0e9':'' }};border-color: {{ $pay_type=='tr_alipay'?"#00a0e9":"" }}"><span
|
||
class="only_time"></span> 我已知晓，继续支付 </a>
|
||
{{--data-clipboard-text="{{ $order->order_money }}"--}}
|
||
</div>
|
||
|
||
|
||
{{--<div class="tan_button p-t-10i">
|
||
<a class="color_666 font-14" href="">查看充值教程</a>
|
||
</div>--}}
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
@endsection
|
||
@section('header')
|
||
|
||
@endsection
|
||
@section('footer')
|
||
|
||
@endsection
|
||
@section('foot_js')
|
||
|
||
<script type="text/javascript">
|
||
$(document).ready(function () {
|
||
var back_url = "{{ route('web.pay.scan.return',['order_sn'=>$order->order_sn]) }}";
|
||
var clipboard = new Clipboard('.copy');
|
||
$('.first_tan').show();
|
||
var only_times = 3;
|
||
$('.only_time').text('(' + only_times + 's)');
|
||
var only_timer_interval = setInterval(function () {
|
||
if (only_times <= 0) {
|
||
clearInterval(only_timer_interval);
|
||
|
||
$('.only_time').text('');
|
||
} else {
|
||
$('.only_time').text('(' + only_times + 's)');
|
||
only_times--;
|
||
}
|
||
|
||
}, 1000)
|
||
$('.closer2').click(function () {
|
||
if (only_times <= 0) {
|
||
$('.first_tan').hide();
|
||
}
|
||
|
||
|
||
});
|
||
|
||
$('.closer').click(function () {
|
||
|
||
$('.tan_bg').hide();
|
||
|
||
|
||
});
|
||
var clipboard2 = new Clipboard('.copy2');
|
||
clipboard2.on('success', function () {
|
||
layer.open({
|
||
content: '复制金额成功'
|
||
, skin: 'msg'
|
||
, time: 2 //2秒后自动关闭
|
||
});
|
||
})
|
||
clipboard.on('success', function () {
|
||
layer.open({
|
||
content: '复制订单号成功'
|
||
, skin: 'msg'
|
||
, time: 2 //2秒后自动关闭
|
||
});
|
||
})
|
||
|
||
|
||
/* $('.org_button2').click(function () {
|
||
$('.tan_bg').show();
|
||
});*/
|
||
//取消订单
|
||
$("#cancleOrder").click(function () {
|
||
$.ajax({
|
||
method: 'post',
|
||
url: '{{ route('web.api.pay_cancle.order') }}',
|
||
data: {
|
||
order_sn: addon.order_sn
|
||
},
|
||
success: function (res) {
|
||
//订单取消，进行跳转
|
||
if (res.error == 0) {
|
||
if (res.backurl) {
|
||
// window.location.href = res.backurl;
|
||
}
|
||
updateTips('取消支付');
|
||
$(".fail_icon").show();
|
||
$(".code_footer").hide();
|
||
clearTimeout(ci);
|
||
layer.open({
|
||
content: '取消支付成功'
|
||
, skin: 'msg'
|
||
, time: 2 //2秒后自动关闭
|
||
});
|
||
|
||
} else {
|
||
|
||
layer.open({
|
||
content: res.msg
|
||
, skin: 'msg'
|
||
, time: 2 //2秒后自动关闭
|
||
});
|
||
}
|
||
|
||
|
||
},
|
||
error: function () {
|
||
|
||
}
|
||
})
|
||
})
|
||
});
|
||
|
||
</script>
|
||
<script>
|
||
var addon = {
|
||
successtips: "支付成功!请关闭当前窗口以便于继续操作!",
|
||
expiretips: "二维码已过期,请重新发起订单支付!",
|
||
jumptips: "支付成功!2秒后将自动跳转!",
|
||
order_sn: "{{ $order->order_sn }}"
|
||
}
|
||
var remainseconds = "{{ $only_time }}";
|
||
var checktime = 3000;
|
||
var queryurl = "{{ route('web.api.pay_check') }}";
|
||
var timer, minutes, seconds, ci, qi;
|
||
timer = parseInt(remainseconds) - 1;
|
||
|
||
//启动支付宝打开
|
||
$("#goPay").on('click', function () {
|
||
$('.first_tan').hide();
|
||
var a = location.href = "alipays://platformapi/startapp?appId=20000067&url={{ urlencode($bank['url']) }}";
|
||
});
|
||
//提交付款信息
|
||
$(".pay_sen_msg").click(function () {
|
||
var pay_account = $('[name="pay_account"]').val();
|
||
var pay_mark=$('[name="ewm_mark"]').val();
|
||
if(pay_account=='' && pay_mark=='')
|
||
{
|
||
layer.open({
|
||
content: '请输入转账账号或备注'
|
||
, skin: 'msg'
|
||
, time: 2 //2秒后自动关闭
|
||
});
|
||
return false;
|
||
}
|
||
$.ajax({
|
||
method:'post',
|
||
url: "{{ route('web.api.update.order') }}",
|
||
data: {
|
||
order_sn: addon.order_sn,
|
||
pay_account:pay_account,
|
||
pay_mark:pay_mark
|
||
},
|
||
success: function (res) {
|
||
console.log(res);
|
||
//如果没有支付成功，继续执行
|
||
if (res.error == 1) {
|
||
|
||
layer.open({
|
||
content: res.msg
|
||
, skin: 'msg'
|
||
, time: 2 //2秒后自动关闭
|
||
});
|
||
} else {
|
||
//支付成功
|
||
|
||
/* setTimeout(function () {
|
||
location.href = res.backurl;
|
||
}, 2000);*/
|
||
//updateTips(res.msg)
|
||
|
||
layer.open({
|
||
content: res.msg
|
||
, skin: 'msg'
|
||
, time: 2 //2秒后自动关闭
|
||
});
|
||
$(".code_footer").hide();
|
||
$(".pay_tan").hide();
|
||
|
||
}
|
||
|
||
|
||
},
|
||
error: function () {
|
||
|
||
}
|
||
})
|
||
});
|
||
|
||
function payOk() {
|
||
$(".pay_tan").show();
|
||
}
|
||
|
||
function payOk1() {
|
||
$.ajax({
|
||
url: queryurl + '?times=' + new Date().getTime(),
|
||
data: {
|
||
order_sn: addon.order_sn
|
||
},
|
||
success: function (res) {
|
||
console.log(res);
|
||
//如果没有支付成功，继续执行
|
||
if (res.error == 1) {
|
||
|
||
layer.open({
|
||
content: res.msg
|
||
, skin: 'msg'
|
||
, time: 2 //2秒后自动关闭
|
||
});
|
||
} else {
|
||
//支付成功
|
||
|
||
/* setTimeout(function () {
|
||
location.href = res.backurl;
|
||
}, 2000);*/
|
||
updateTips(res.msg)
|
||
|
||
layer.open({
|
||
content: res.msg
|
||
, skin: 'msg'
|
||
, time: 2 //2秒后自动关闭
|
||
});
|
||
|
||
}
|
||
|
||
|
||
},
|
||
error: function () {
|
||
|
||
}
|
||
})
|
||
}
|
||
|
||
function updateTips(msg) {
|
||
$(".t-status").text(msg);
|
||
}
|
||
|
||
//定时查询订单状态
|
||
var checkOrderStatus = function () {
|
||
clearTimeout(qi);
|
||
if (timer <= 0) {
|
||
$(".expired").show();
|
||
$(".code_footer").hide();
|
||
return false;
|
||
}
|
||
$.ajax({
|
||
url: queryurl + '?times=' + new Date().getTime(),
|
||
data: {
|
||
order_sn: addon.order_sn
|
||
},
|
||
success: function (res) {
|
||
//如果没有支付成功，继续执行
|
||
if (res.error == 1) {
|
||
qi = setTimeout(function () {
|
||
checkOrderStatus();
|
||
}, checktime);
|
||
} else {
|
||
//支付成功
|
||
clearTimeout(ci);
|
||
updateTips(res.msg)
|
||
$(".paid").removeClass("hidden");
|
||
|
||
layer.open({
|
||
content: res.msg
|
||
, skin: 'msg'
|
||
, time: 2 //2秒后自动关闭
|
||
});
|
||
/* setTimeout(function () {
|
||
location.href = res.backurl;
|
||
}, 2000);*/
|
||
|
||
|
||
}
|
||
|
||
|
||
},
|
||
error: function () {
|
||
qi = setTimeout(function () {
|
||
checkOrderStatus();
|
||
}, checktime);
|
||
}
|
||
})
|
||
|
||
};
|
||
checkOrderStatus();
|
||
|
||
ci = setInterval(function () {
|
||
minutes = parseInt(timer / 60, 10)
|
||
seconds = parseInt(timer % 60, 10);
|
||
minutes = minutes < 10 ? "0" + minutes : minutes;
|
||
seconds = seconds < 10 ? "0" + seconds : seconds;
|
||
$("#OnlyTime").text(minutes + ':' + seconds);
|
||
|
||
if (--timer < 0) {
|
||
$(".expired").removeClass("hidden");
|
||
clearInterval(ci);
|
||
clearInterval(qi);
|
||
|
||
}
|
||
}, 1000);
|
||
|
||
</script>
|
||
@endsection
|