256 lines
10 KiB
HTML
256 lines
10 KiB
HTML
{extend name="base"/}
|
||
{block name="resources"}
|
||
<style type="text/css">
|
||
.order-details{width: 1200px;margin: 35px auto;}
|
||
.layui-layer-page .layui-layer-content{overflow: auto!important;}
|
||
.order-details .product-info{display: flex;align-items: center;}
|
||
.order-details .product-info .info-img{display: flex;justify-content: center;align-items: center;margin-right: 10px;width: 65px;height: 65px;}
|
||
.order-details .product-info .info-img img{max-width: 100%;max-height: 100%;}
|
||
.order-details .product-info span{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
|
||
.order-details .order-info{display: flex;}
|
||
.order-details .order-info > span{margin-right: 40px; color:#666;}
|
||
.order-details .order-operation{display: flex;align-items: flex-end;flex-direction: column;margin-top: 50px;padding: 15px 30px;line-height: 1.8;background-color: #f7f7f7;}
|
||
.order-details .order-operation span span{display: inline-block;width: 120px;text-align: right;}
|
||
.order-details .order-operation span:nth-of-type(2){font-weight: bold;}
|
||
.order-details .order-operation span:nth-of-type(2) span{font-weight: 400;font-size: 20px;}
|
||
.order-details .order-operation button{margin-top: 8px;}
|
||
.wechat{display: flex;flex-direction: column;align-items: center;}
|
||
.wechat .wechat-img{display: flex;justify-content: space-between;align-items: center;width: 125px;height: 125px;border: 1px solid #e5e5e5;}
|
||
.wechat .wechat-img img{max-height: 100%;max-width: 100%;}
|
||
.wechat .wechat-desc{height: 20px;line-height: 20px;margin-top: 11px;color: #646566;}
|
||
.wechat .wechat-btns{display: flex;justify-content: center;margin-top: 20px;}
|
||
.wechat .wechat-btns span{margin: 0 6px;width: 106px;height: 35px;line-height: 35px;text-align: center;border: 1px solid #e5e5e5;cursor: pointer;color: #333;}
|
||
.pay-finish{color: #fff;}
|
||
</style>
|
||
{/block}
|
||
{block name="main"}
|
||
<div class="order-details">
|
||
<div class="order-info">
|
||
<span>订购单号：{$detail.out_trade_no}</span>
|
||
<span>创建时间：<span class="time"></span></span>
|
||
<span>订单类型：{$detail.order_type_name}</span>
|
||
</div>
|
||
<table class="layui-table">
|
||
<colgroup>
|
||
<col width="300">
|
||
<col>
|
||
<col>
|
||
<col>
|
||
<col>
|
||
</colgroup>
|
||
<!-- 套餐 -->
|
||
{if $detail.group_id > 0 && $detail.group_num > 0}
|
||
<thead>
|
||
<tr>
|
||
<th>套餐信息</th>
|
||
<th>单价</th>
|
||
<th>时长</th>
|
||
<th>小计</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>
|
||
<div class="product-info">
|
||
<div class="info-img">
|
||
<img src="{:img($detail.group_image)}" onerror=src="SHOP_IMG/shop.png" alt="">
|
||
</div>
|
||
<span>{$detail.group_name}</span>
|
||
</div>
|
||
</td>
|
||
<td>{$detail.group_period_price}</td>
|
||
<td>{$detail.group_num}{if $detail.group_period_unit == 'week'} 周 {elseif $detail.group_period_unit == 'month'} 月 {elseif $detail.group_period_unit == 'year'} 年 {/if}</td>
|
||
<td>{$detail.order_money}</td>
|
||
</tr>
|
||
</tbody>
|
||
{/if}
|
||
<!-- 短信 -->
|
||
{if $detail.sms_package_id > 0 && $detail.sms_num > 0}
|
||
<thead>
|
||
<tr>
|
||
<th>短信信息</th>
|
||
<th>单价</th>
|
||
<th>数量</th>
|
||
<th>小计</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>
|
||
<div class="product-info">
|
||
<div class="info-img">
|
||
<img src="{:img($detail.sms_package_image)}" onerror=src="SHOP_IMG/sms.png" alt="">
|
||
</div>
|
||
<span>{$detail.sms_package_name}</span>
|
||
</div>
|
||
</td>
|
||
<td>{$detail.sms_package_price}</td>
|
||
<td>{$detail.sms_package_num}</td>
|
||
<td>{$detail.sms_money}</td>
|
||
</tr>
|
||
{/if}
|
||
</tbody>
|
||
</table>
|
||
<div class="order-operation">
|
||
<span>合计：<span class="price">￥{$detail.order_money}</span></span>
|
||
<span>应付款：<span class="price red-color">￥{$detail.order_money}</span></span>
|
||
<button class="layui-btn bg-color buy-immediately">立即支付</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/block}
|
||
{block name="script"}
|
||
<script type="text/html" id="payment">
|
||
<div class="layui-form">
|
||
<input type="hidden" name="out_trade_no" value="{$detail.out_trade_no}">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label mid">套餐名称：</label>
|
||
<div class="layui-input-inline">
|
||
{$detail.order_name}
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label mid">支付金额：</label>
|
||
<div class="layui-input-inline">
|
||
{$detail.order_money}
|
||
</div>
|
||
</div>
|
||
<input type="hidden" name="pay_model" value="2"/>
|
||
<div class="layui-form-item mode-payment">
|
||
<label class="layui-form-label mid">支付方式：</label>
|
||
<div class="layui-input-block">
|
||
<div class="layui-input-inline">
|
||
支付宝支付
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 表单操作 -->
|
||
<div class="form-row mid">
|
||
<button class="layui-btn bg-color" lay-submit lay-filter="submit">提交</button>
|
||
<button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
|
||
</div>
|
||
</div>
|
||
</script>
|
||
|
||
<script type="text/html" id="payQrcode">
|
||
<div class="wechat">
|
||
<div class="wechat-img">
|
||
<img src="{{d.img}}" alt="">
|
||
</div>
|
||
<span class="wechat-desc">使用{{d.name}}扫码支付</span>
|
||
<div class="wechat-btns">
|
||
<span class="pay-finish border-color bg-color">支付完成</span>
|
||
<span class="pay-payagain">重新支付</span>
|
||
</div>
|
||
</div>
|
||
</script>
|
||
<script>
|
||
var form,laytpl,createTime = "{$detail.create_time}",
|
||
paymentMethodIndex,alipayIndex,wethatIndex,paymentIndex = 1,
|
||
repeat_flag = false;
|
||
$(".order-info .time").text(ns.time_to_date(createTime));
|
||
|
||
/* 立即购买 */
|
||
layui.use(['form', 'laytpl'], function() {
|
||
form = layui.form;
|
||
laytpl = layui.laytpl;
|
||
var upload;
|
||
$("body").on("click",".buy-immediately",function(){
|
||
modePayment();
|
||
});
|
||
function modePayment(){
|
||
laytpl($("#payment").html()).render({}, function(html) {
|
||
paymentMethodIndex = layer.open({
|
||
type: 1,
|
||
title: '选择付款方式',
|
||
area: ['750px','650px'],
|
||
content: html,
|
||
success(){
|
||
if (!parseInt("{$pay_type_count}")){
|
||
paymentIndex = 2;
|
||
$(".offline-payment [lay-verify]").attr("lay-verify","required");
|
||
}
|
||
}
|
||
});
|
||
});
|
||
form.render();
|
||
form.on('radio(type_payment)', function(data){
|
||
paymentIndex = data.value;
|
||
//1 是线上支付 2是线下支付
|
||
if (data.value == 1){
|
||
$(".mode-payment").removeClass("layui-hide");
|
||
$(".offline-payment").addClass("layui-hide");
|
||
$(".offline-payment [lay-verify]").attr("lay-verify","");
|
||
}else{
|
||
$(".mode-payment").addClass("layui-hide");
|
||
$(".offline-payment").removeClass("layui-hide");
|
||
$(".offline-payment [lay-verify]").attr("lay-verify","required");
|
||
}
|
||
});
|
||
//上传支付凭证
|
||
upload = new Upload({
|
||
elem: '#voucher',
|
||
post:"home"
|
||
});
|
||
}
|
||
form.on('submit(submit)', function(data){
|
||
if (repeat_flag) return false;
|
||
repeat_flag = true;
|
||
if (paymentIndex == 1){
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: ns.url("shop/SiteOrder/pay"),
|
||
data: {out_trade_no: "{$detail.out_trade_no}", pay_type:'alipay'},
|
||
dataType: 'JSON',
|
||
success: function(res) {
|
||
repeat_flag = false;
|
||
if (res.code == 0) {
|
||
payQrcode(res.data.data.qrcode,'支付宝')
|
||
} else {
|
||
layer.msg(res.message);
|
||
location.reload();
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
/* 微信支付 */
|
||
function payQrcode(imgUrl,name){
|
||
layer.close(paymentMethodIndex);
|
||
laytpl($("#payQrcode").html()).render({img: imgUrl,name}, function(html) {
|
||
wethatIndex = layer.open({
|
||
type: 1,
|
||
title: name+'支付',
|
||
area: ['550px', '300px'],
|
||
content: html,
|
||
});
|
||
});
|
||
}
|
||
//重新支付
|
||
$("body").on("click",".pay-payagain",function(){
|
||
layer.close(wethatIndex);
|
||
modePayment();
|
||
});
|
||
//支付完成
|
||
$("body").on("click",".pay-finish",function(){
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: ns.url("shop/SiteOrder/verifyIsPay"),
|
||
data: {out_trade_no: "{$detail.out_trade_no}"},
|
||
dataType: 'JSON',
|
||
success: function(res) {
|
||
if (res.code >= 0){
|
||
layer.close(wethatIndex);
|
||
location.href= ns.url("shop/account/order");
|
||
} else{
|
||
layer.msg(res.message);
|
||
}
|
||
}
|
||
});
|
||
});
|
||
});
|
||
function back() {
|
||
layer.closeAll();
|
||
}
|
||
</script>
|
||
{/block} |