264 lines
9.6 KiB
HTML
264 lines
9.6 KiB
HTML
{extend name="base"/}
|
|
{block name="resources"}
|
|
<link rel="stylesheet" href="SHOP_SUPPLY_LOCAL_CSS/pay.css">
|
|
{/block}
|
|
{block name="body"}
|
|
<!-- 顶部html文件-->
|
|
<div class="ns-supply-wrap">
|
|
<div class="ns-supply-wrap-con">
|
|
{include file="addon/supply/shop/view/market_head.html"/}
|
|
|
|
<div class="ns-supply-pay">
|
|
<div class="item-block">
|
|
<div class="payment-detail">
|
|
<div class="payment-media">
|
|
<div class="layui-row">
|
|
<div class="layui-col-md2">
|
|
<div class="media-left"><span><i class="iconfont iconduihao ns-text-color"></i></span></div>
|
|
</div>
|
|
<div class="layui-col-md8">
|
|
<div class="media-body">
|
|
<div class="payment-text">您的订单已提交成功，正在等待处理！</div>
|
|
<div>
|
|
<span>应付金额：</span>
|
|
<span
|
|
class="payment-money ns-text-color">￥{$info.data.pay_money}元</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md2">
|
|
<div class="media-right">
|
|
<div class="ns-text-color">
|
|
订单信息
|
|
<i class="iconfont iconunfold"></i>
|
|
<i class="iconfont iconfold layui-hide"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="order-info layui-hide">
|
|
<div class="layui-row">
|
|
<div class="layui-col-md2 order-info-left"></div>
|
|
<div class="layui-col-md10">
|
|
<div class="line"></div>
|
|
<div class="order-item">
|
|
<div class="item-label">交易单号：</div>
|
|
<div class="item-value">{$info.data.out_trade_no}</div>
|
|
</div>
|
|
<div class="order-item">
|
|
<div class="item-label">订单内容：</div>
|
|
<div class="item-value ns-line-hiding" title="{$info.data.pay_detail}">{$info.data.pay_detail}</div>
|
|
</div>
|
|
<div class="order-item">
|
|
<div class="item-label">订单金额：</div>
|
|
<div class="item-value">￥{$info.data.pay_money}</div>
|
|
</div>
|
|
<div class="order-item">
|
|
<div class="item-label">创建时间：</div>
|
|
<div class="item-value">{:time_to_date($info.data.create_time)}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item-block">
|
|
<div class="block-text">支付方式</div>
|
|
<div class="pay-type-list">
|
|
{foreach $pay_type as $pay_k => $pay_v}
|
|
<div class="pay-type-item">
|
|
{$pay_v.pay_type_name}
|
|
<input type="hidden" value="{$pay_v.pay_type}" class="selected-pay" />
|
|
</div>
|
|
{/foreach}
|
|
|
|
<div class="clear"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item-block layui-form">
|
|
<input type="hidden" value="{$info.data.out_trade_no}" name="out_trade_no">
|
|
<input type="hidden" value="" name="pay_type" lay-verify="required">
|
|
|
|
<div class="order-submit">
|
|
<button class="layui-btn ns-bg-color" lay-submit lay-filter="pay">立即支付</button>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<!-- <el-dialog title="请确认支付是否完成" :visible.sync="dialogVisible" width="23%" top="30vh" class="confirm-pay-wrap">
|
|
<div class="info-wrap">
|
|
<i class="el-message-box__status el-icon-warning"></i>
|
|
<span>完成支付前请根据您的情况点击下面的按钮</span>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="goIndex" size="small">返回首页</el-button>
|
|
<el-button type="primary" @click="goOrderList" size="small">已完成支付</el-button>
|
|
</span>
|
|
</el-dialog> -->
|
|
|
|
<!-- 微信支付弹框 -->
|
|
<!-- <el-dialog title="请用微信扫码支付" :visible.sync="openQrcode" width="300px" center>
|
|
<div class="wechatpay-box"><img :src="payQrcode" /></div>
|
|
</el-dialog> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/block}
|
|
|
|
{block name="script"}
|
|
<script src="__STATIC__/js/qrcode.min.js"></script>
|
|
<script>
|
|
var obj = {}, repeat_flag = false;
|
|
layui.use(['form', 'laytpl'], function() {
|
|
var form = layui.form, laytpl = layui.laytpl;
|
|
|
|
$(".media-right").click(function() {
|
|
if ($(this).find(".iconunfold").hasClass("layui-hide")) {
|
|
$(this).find(".iconunfold").removeClass("layui-hide");
|
|
$(this).find(".iconfold").addClass("layui-hide");
|
|
$(".order-info").addClass("layui-hide");
|
|
} else {
|
|
$(this).find(".iconunfold").addClass("layui-hide");
|
|
$(this).find(".iconfold").removeClass("layui-hide");
|
|
$(".order-info").removeClass("layui-hide");
|
|
}
|
|
})
|
|
|
|
$(".pay-type-item").click(function() {
|
|
if (!$(this).hasClass("active")) {
|
|
$(this).addClass("active");
|
|
$(this).siblings().removeClass("active");
|
|
$("input[name='pay_type'").val($(this).find(".selected-pay").val());
|
|
}
|
|
})
|
|
|
|
form.on('submit(pay)', function(data) {
|
|
var out_trade_no = data.field.out_trade_no;
|
|
|
|
payAjax(out_trade_no, data.field.pay_type);
|
|
console.log(obj);
|
|
|
|
if (obj.type == "url") {
|
|
window.open(obj.data);
|
|
laytpl($("#alipay").html()).render([], function(html) {
|
|
layer_pass = layer.open({
|
|
title: '支付宝支付',
|
|
skin: 'layer-tips-class',
|
|
type: 1,
|
|
area: ['500px'],
|
|
content: html,
|
|
});
|
|
});
|
|
} else if (obj.type == "qrcode") {
|
|
laytpl($("#wechat").html()).render(obj, function(html) {
|
|
layer_pass = layer.open({
|
|
title: '微信支付',
|
|
skin: 'layer-tips-class',
|
|
type: 1,
|
|
area: ['500px', '325px'],
|
|
content: html,
|
|
});
|
|
});
|
|
}
|
|
})
|
|
|
|
form.verify({
|
|
required: function(val) {
|
|
if (val == "") {
|
|
return "请选择支付方式";
|
|
}
|
|
}
|
|
})
|
|
});
|
|
|
|
function payAjax(out_trade_no, pay_type) {
|
|
if (repeat_flag) return;
|
|
repeat_flag = true;
|
|
|
|
$.ajax({
|
|
url: ns.url("supply://shop/pay/pay"),
|
|
data: {
|
|
"out_trade_no": out_trade_no,
|
|
"pay_type": pay_type
|
|
},
|
|
dataType: 'JSON',
|
|
type: 'POST',
|
|
async: false,
|
|
success: function (res) {
|
|
repeat_flag = false;
|
|
if (res.code == 0) {
|
|
obj = res.data;
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
function payStatus() {
|
|
$.ajax({
|
|
url: ns.url("supply://shop/pay/status"),
|
|
data: {"out_trade_no": $("input[name='out_trade_no']").val()},
|
|
dataType: 'JSON',
|
|
type: 'POST',
|
|
success: function(res) {
|
|
console.log(res);
|
|
if (res.code == 0) {
|
|
if(res.data.pay_status == 0) {
|
|
layer.msg("支付失败，请重新支付！")
|
|
} else {
|
|
location.href = ns.url("supply://shop/order/lists");
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
function successPay() {
|
|
payStatus();
|
|
}
|
|
|
|
function repay() {
|
|
var out_trade_no = $("input[name='out_trade_no']").val();
|
|
payAjax(out_trade_no, "alipay");
|
|
window.open(obj.data);
|
|
}
|
|
|
|
function wechatRepay() {
|
|
$(".wx-ewm").html('<img class="popup-qrcode-loadimg" src="__STATIC__/loading/loading.gif" />');
|
|
var out_trade_no = $("input[name='out_trade_no']").val();
|
|
payAjax(out_trade_no, "wechatpay");
|
|
setTimeout(function() {
|
|
$(".wx-ewm").html('<img src="'+ ns.img(obj.qrcode) +'" />')
|
|
}, 1000);
|
|
}
|
|
</script>
|
|
|
|
<!-- 支付宝支付 -->
|
|
<script type="text/html" id="alipay">
|
|
<div class="ns-pay-success">
|
|
<div class="ns-success">
|
|
<div class="wx-ewm">
|
|
<i class="iconfont iconzhifubaozhifu-"></i>
|
|
</div>
|
|
<button class="layui-btn ns-bg-color" onclick="successPay()">我已支付</button>
|
|
<button class="layui-btn layui-btn-primary" onclick="repay()">重新支付</button>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<!-- 微信支付 -->
|
|
<script type="text/html" id="wechat">
|
|
<div class="ns-pay-success">
|
|
<div class="ns-success">
|
|
<div class="wx-ewm" id="qrcode">
|
|
<img src="{{ns.img(d.qrcode)}}" />
|
|
</div>
|
|
<button class="layui-btn ns-bg-color" onclick="successPay()">我已支付</button>
|
|
<button class="layui-btn layui-btn-primary" onclick="wechatRepay()">重新支付</button>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
{/block} |