226 lines
9.6 KiB
HTML
226 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<!-- 引入头部 -->
|
|
<head th:replace="~{./public/header :: header}"></head>
|
|
<style>
|
|
.layer-pay-rstips {
|
|
padding: 25px 25px;
|
|
}
|
|
|
|
.layer-pay-rstips > p {
|
|
color: #666;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.layer-pay-rstips .layui-btn-fluid {
|
|
margin: 15px 0 0 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.layer-pay-rstips .layui-btn-primary.layui-btn-fluid {
|
|
background-color: transparent;
|
|
border: 1px solid rgba(111, 121, 122, 0.3);
|
|
box-sizing: border-box;
|
|
color: #727272;
|
|
}
|
|
</style>
|
|
<body>
|
|
<!-- header -->
|
|
<div th:replace="~{./public/common_header::common_header}"></div>
|
|
|
|
<!-- goods-card -->
|
|
<div class="layui-container body-card">
|
|
<div class="layui-card" style="max-width: 750px;margin: 0 auto;">
|
|
<div class="layui-card-header">
|
|
<span class="layui-breadcrumb">
|
|
<a href="/">首页</a>
|
|
<a href="/index.html#product">全部产品</a>
|
|
<a th:href="'/goods/detail/'+${product['id']}">产品详情</a>
|
|
<a><cite>确认订单</cite></a>
|
|
</span>
|
|
</div>
|
|
<div class="layui-card-body buy-card">
|
|
<div class="layui-row layui-col-space15 goods-info-group">
|
|
<div class="layui-col-md5 layui-hide-xs">
|
|
<div class="goods-cover" th:style="'background-image: url('+${productSku['skuCover']}+');'"></div>
|
|
</div>
|
|
<div class="layui-col-md7 goods-info">
|
|
<h1 class="goods-title" th:text="${product['productTitle']}"></h1>
|
|
<p class="goods-desc" th:text="${product['productDesc']}"></p>
|
|
<div class="goods-spec-group">
|
|
<div class="goods-spec-item">
|
|
<div class="goods-spec-item-title">商品规格：</div>
|
|
<div class="goods-spec-item-list">
|
|
<div class="goods-spec-item-text" th:text="${goodsSpecName}"></div>
|
|
</div>
|
|
</div>
|
|
<div class="goods-spec-item">
|
|
<div class="goods-spec-item-title">授权时长：</div>
|
|
<div class="goods-spec-item-list">
|
|
<div class="goods-spec-item-text" th:text="${validityName}"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="goods-price-group">
|
|
<div class="goods-price-label">商品价格：</div>
|
|
<div class="goods-price-text" th:inline="text"><span class="small">￥</span>[[${productSku['discountPrice']}]]</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h2 class="buy-card-title">可用优惠券</h2>
|
|
<div class="coupon-group">
|
|
<div th:each="item,itemStat:${couponList}" class="coupon-item" th:data-money="${item['couponAmount']}" th:data-id="${item['id']}">
|
|
<div class="coupon-item-body">
|
|
<h3 th:text="${item['couponTypeText']}+'优惠券'"></h3>
|
|
<p>[[${item['couponDisplay']}]]</p>
|
|
<p th:text="'有效期至' + ${#temporals.format(item['endTime'], 'yyyy-MM-dd HH:mm:ss')}"></p>
|
|
<div class="coupon-item-price">
|
|
<div><span class="small">￥</span>[[${item['couponAmount']}]]</div>
|
|
<!-- <p>无门槛</p>-->
|
|
</div>
|
|
</div>
|
|
<p th:text="'限'+${item['couponName']}"></p>
|
|
</div>
|
|
<div th:if="${#lists.isEmpty(couponList)}" class="ew-state-group" style="padding: 25px 0 35px 0;">
|
|
<img src="/static/assets/images/error_ic_empty.png" style="height: 90px;">
|
|
<p>没有可用优惠券</p>
|
|
</div>
|
|
</div>
|
|
<h2 class="buy-card-title">选择支付方式</h2>
|
|
<div class="pay-type-group">
|
|
<div class="pay-type-ali active" data-id="alipay">支付宝</div>
|
|
<div class="pay-type-wexin" data-id="wxpay">微信支付</div>
|
|
</div>
|
|
<div class="buy-price-gruop">
|
|
<div>订单总价：<span class="price" th:inline="text"><span class="small">￥</span>[[${productSku['discountPrice']}]]</span></div>
|
|
<div>支付金额：<span class="price" id="payMoney" th:inline="text"><span class="small">￥</span>[[${productSku['discountPrice']}]]</span></div>
|
|
</div>
|
|
<div class="buy-btn-group">
|
|
<a href="/" class="layui-btn layui-btn-primary layui-btn-lg">返回首页</a>
|
|
<button id="btnPay" class="layui-btn layui-btn-warm layui-btn-lg">立即支付</button>
|
|
</div>
|
|
<div class="text-right layui-text" style="margin-bottom: 15px;">
|
|
授权即代表您同意<a href="/copyright" style="color: #01aaed;" target="_blank">《小蚂蚁云企业级中台解决方案授权协议》</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 引入脚部 -->
|
|
<footer th:replace="~{./public/footer :: footer}"></footer>
|
|
|
|
<!--<!– 支付提示 –>-->
|
|
<!--<script type="text/html" id="payRsTips">-->
|
|
<!-- <div class="layer-pay-rstips">-->
|
|
<!-- <p>您是否已经完成了支付呢？</p>-->
|
|
<!-- <div>-->
|
|
<!-- <a href="/user/order" class="layui-btn layui-btn-fluid">已完成支付</a>-->
|
|
<!-- </div>-->
|
|
<!-- <div>-->
|
|
<!-- <a href="/user/order" class="layui-btn layui-btn-primary layui-btn-fluid">未完成支付</a>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!--</script>-->
|
|
|
|
<script th:inline="javascript">
|
|
layui.use(['layer'], function () {
|
|
var $ = layui.jquery;
|
|
var layer = layui.layer;
|
|
|
|
// 优惠券点击事件
|
|
var discountPrice = "[[${productSku['discountPrice']}]]";
|
|
$('.coupon-group>.coupon-item').click(function () {
|
|
if ($(this).hasClass('active')) {
|
|
$('.coupon-group>.coupon-item').removeClass('active');
|
|
$('#payMoney').html('<span class="small">￥</span>' + discountPrice + '</span>');
|
|
} else {
|
|
$('.coupon-group>.coupon-item').removeClass('active');
|
|
$(this).addClass('active');
|
|
var payPrice = numAdd(discountPrice + '', '-' + $(this).data('money'));
|
|
$('#payMoney').html('<span class="small">￥</span>' + payPrice + '</span>');
|
|
}
|
|
});
|
|
|
|
function numAdd(num1/*:String*/, num2/*:String*/) {
|
|
var baseNum, baseNum1, baseNum2;
|
|
try {
|
|
baseNum1 = num1.split(".")[1].length;
|
|
} catch (e) {
|
|
baseNum1 = 0;
|
|
}
|
|
try {
|
|
baseNum2 = num2.split(".")[1].length;
|
|
} catch (e) {
|
|
baseNum2 = 0;
|
|
}
|
|
baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
|
|
return (num1 * baseNum + num2 * baseNum) / baseNum;
|
|
}
|
|
|
|
// 支付方式点击事件
|
|
$('.pay-type-group>div').click(function () {
|
|
$('.pay-type-group>div').removeClass('active');
|
|
$(this).addClass('active');
|
|
});
|
|
|
|
// 立即支付
|
|
$('#btnPay').click(function () {
|
|
var $coupon = $('.coupon-group>.coupon-item.active');
|
|
if ($('.coupon-group>.coupon-item').length > 0 && $coupon.length <= 0) {
|
|
layer.confirm('您没有选择优惠券，确定前往支付吗？', {
|
|
skin: 'layui-layer-admin',
|
|
shade: .1
|
|
}, function (i) {
|
|
layer.close(i);
|
|
doPay();
|
|
});
|
|
return;
|
|
}
|
|
doPay($coupon.data('id'));
|
|
});
|
|
|
|
// 创建订单并支付
|
|
function doPay(userCouponId) {
|
|
// 支付方式
|
|
var paymentType = $('.pay-type-group>div.active').data('id');
|
|
if (!paymentType) {
|
|
layer.msg("请选择支付方式");
|
|
return false;
|
|
}
|
|
var loadIndex = layer.msg('订单创建中...', {icon: 16, shade: 0.01, time: false});
|
|
$.ajax({
|
|
type: "POST",
|
|
url: '/order/createOrder',
|
|
data: JSON.stringify({
|
|
productId: [[${product['id']}]],
|
|
skuAttribute: [[${productSku['skuAttribute']}]],
|
|
userCouponId: userCouponId,
|
|
paymentType: paymentType == "alipay" ? 1 : 2,
|
|
skuCode: [[${productSku['skuCode']}]],
|
|
}),
|
|
contentType: "application/json",
|
|
dataType: "json",
|
|
beforeSend: function () {
|
|
// TODO...
|
|
},
|
|
success: function (res) {
|
|
console.log(res);
|
|
layer.close(loadIndex);
|
|
if (res.code == 0) {
|
|
layer.msg(res.msg, {icon: 1, shade: 0.01, time: 2000}, function () {
|
|
// 跳转至支付页面
|
|
window.open('/pay/' + res.data);
|
|
});
|
|
} else {
|
|
layer.alert(res.msg, {title: '温馨提示', btn: '知道了', shade: .1, skin: 'layui-layer-admin'});
|
|
}
|
|
},
|
|
error: function () {
|
|
layer.msg("AJAX请求异常");
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |