签入版本
This commit is contained in:
@@ -0,0 +1,226 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<!-- 引入头部 -->
|
||||
<header th:replace="~{./public/header :: header}"></header>
|
||||
<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>
|
||||
Reference in New Issue
Block a user