237 lines
8.8 KiB
HTML
237 lines
8.8 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<!-- saved from url=(0040)http://localhost:8081/#/secKillDetail/26 -->
|
|||
|
|
<html lang="en">
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|||
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|||
|
|
|
|||
|
|
<title>秒杀订单确认页</title>
|
|||
|
|
<link rel="stylesheet" type="text/css" href="order.css">
|
|||
|
|
<link rel="stylesheet" type="text/css" href="common.css">
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<noscript>
|
|||
|
|
<strong>We're sorry but mall doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
|
|||
|
|
<div id="app">
|
|||
|
|
|
|||
|
|
<div class="header">
|
|||
|
|
<div class="nav-topbar">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="topbar-menu">
|
|||
|
|
<a href="javascript:;">图灵商城</a></div>
|
|||
|
|
<div class="topbar-user">
|
|||
|
|
<a href="javascript:;">admin</a>
|
|||
|
|
<!---->
|
|||
|
|
<a href="javascript:;">退出</a>
|
|||
|
|
<a href="http://localhost:8081/#/order/list">我的订单</a>
|
|||
|
|
<a href="javascript:;" class="my-cart">
|
|||
|
|
<span class="icon-cart"></span>购物车</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="nav-header">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="header-logo">
|
|||
|
|
<a href="http://localhost:8081/#/index"></a>
|
|||
|
|
</div>
|
|||
|
|
<div class="header-search">
|
|||
|
|
<div class="wrapper">
|
|||
|
|
<input type="text" name="keyword" placeholder="请输入产品关键字">
|
|||
|
|
<a href="javascript:;" class="fa fa-search fa-2x"></a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="order-pay">
|
|||
|
|
<div class="wrapper">
|
|||
|
|
<div class="order-wrap">
|
|||
|
|
<div class="item-order">
|
|||
|
|
<div class="icon-succ"></div>
|
|||
|
|
<div class="order-info">
|
|||
|
|
<h4>订单号：{{orderSn}}</h4>
|
|||
|
|
<h2>秒杀成功！去付款咯～</h2>
|
|||
|
|
<p>请在<span>30分</span>内完成支付, 超时后将取消订单</p>
|
|||
|
|
<p>收货信息：{{addressInfo}}</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="order-total">
|
|||
|
|
<p>应付总额：</p>
|
|||
|
|
<input id="calcAmount" type="text" readonly>
|
|||
|
|
<p>订单详情<em class="icon-down" :class="{'up':showDetail}" @click="showDetail=!showDetail"></em></p>
|
|||
|
|
<input id="cartPromotionItemList" type="textarea" readonly autoHeight="true">
|
|||
|
|
<span><em>订单详情ID：</em></span>
|
|||
|
|
<input id="orderItemId" type="text" readonly>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="item-detail" v-if="showDetail">
|
|||
|
|
<div class="item">
|
|||
|
|
<div class="detail-title">订单号：</div>
|
|||
|
|
<div class="detail-info theme-color">
|
|||
|
|
<input id="orderId" type="text" readonly>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="item">
|
|||
|
|
<div class="detail-title">收货信息：</div>
|
|||
|
|
<div class="detail-info">
|
|||
|
|
<input id="memberReceiveAddressList" type="textarea" readonly autoHeight="true">
|
|||
|
|
<span><em>实际使用用户地址：</em></span>
|
|||
|
|
<input id="factAddress" type="text" readonly>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="item good">
|
|||
|
|
<div class="detail-title">商品名称：</div>
|
|||
|
|
<div class="detail-info">
|
|||
|
|
<ul>
|
|||
|
|
<li v-for="(item,index) in orderDetail" :key="index">
|
|||
|
|
<img v-lazy="item.productImage" />{{item.productName}}
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="item">
|
|||
|
|
<div class="detail-title">发票信息：</div>
|
|||
|
|
<div class="detail-info">电子发票 个人</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="subpay">
|
|||
|
|
<a href="javascript:;" class="btn btn-large " onclick="submitOrder()">提交订单</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- <div id="showOrder">
|
|||
|
|
<div>
|
|||
|
|
<span><em>订单ID：</em></span>
|
|||
|
|
<input id="orderId" type="text" readonly>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<span><em>购买商品：</em></span>
|
|||
|
|
<input id="cartPromotionItemList" type="textarea" readonly autoHeight="true">
|
|||
|
|
<span><em>订单详情ID：</em></span>
|
|||
|
|
<input id="orderItemId" type="text" readonly>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<span><em>用户地址：</em></span>
|
|||
|
|
<input id="memberReceiveAddressList" type="textarea" readonly autoHeight="true">
|
|||
|
|
<span><em>实际使用用户地址：</em></span>
|
|||
|
|
<input id="factAddress" type="text" readonly>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<span><em>金额：</em></span>
|
|||
|
|
<input id="calcAmount" type="text" readonly>
|
|||
|
|
</div>
|
|||
|
|
</div> -->
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div data-v-b07fc4c4="" class="footer">
|
|||
|
|
<div data-v-b07fc4c4="" class="footer-logo">
|
|||
|
|
<p data-v-b07fc4c4="">图灵商城</p></div>
|
|||
|
|
<div data-v-b07fc4c4="" class="footer-link">
|
|||
|
|
<a data-v-b07fc4c4="" href="http://www.tulingxueyuan.cn/" target="_blank">图灵学院</a>
|
|||
|
|
<span data-v-b07fc4c4="">|</span>
|
|||
|
|
<a data-v-b07fc4c4="" href="https://ke.qq.com/course/231516?tuin=a6505b53" target="_blank">腾讯课堂java架构师培训</a>
|
|||
|
|
<span data-v-b07fc4c4="">|</span>
|
|||
|
|
<a data-v-b07fc4c4="" href="https://ke.qq.com/course/429988" target="_blank">数据结构与算法</a>
|
|||
|
|
<span data-v-b07fc4c4="">|</span>
|
|||
|
|
<a data-v-b07fc4c4="" href="https://tuling.ke.qq.com/" target="_blank">腾讯课堂图灵学院</a></div>
|
|||
|
|
<div data-v-b07fc4c4="" class="copyright">Copyright ©2019
|
|||
|
|
<span data-v-b07fc4c4="" class="domain">图灵学院</span>All Rights Reserved.</div></div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var lProductId="";
|
|||
|
|
var lFlashPromotionId="";
|
|||
|
|
var lMemberId="";
|
|||
|
|
var lmemberReceiveAddress;
|
|||
|
|
|
|||
|
|
function submitOrder(){
|
|||
|
|
var data = {
|
|||
|
|
orderId: $("#orderId").val(),
|
|||
|
|
orderItemId: $("#orderItemId").val(),
|
|||
|
|
flashPromotionId: lFlashPromotionId,
|
|||
|
|
memberReceiveAddress: lmemberReceiveAddress,
|
|||
|
|
payType: "1",
|
|||
|
|
productId: lProductId
|
|||
|
|
};
|
|||
|
|
$.ajax({
|
|||
|
|
type: "post",
|
|||
|
|
headers: {"memberId": lMemberId},//设置请求头
|
|||
|
|
url: "/seckillOrder/generateOrder",
|
|||
|
|
contentType:"application/json",
|
|||
|
|
dataType: "json",
|
|||
|
|
data: JSON.stringify(data),
|
|||
|
|
success: function(result){
|
|||
|
|
if(result.code==200){
|
|||
|
|
console.log("下订单成功！");
|
|||
|
|
window.location.href = "secKillPay.html";
|
|||
|
|
}else{
|
|||
|
|
alert("下订单失败！");
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
error:function(result){
|
|||
|
|
alert("下订单错误！");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function showConfirmOrder(){
|
|||
|
|
lProductId=localStorage.getItem("productId");
|
|||
|
|
lMemberId=localStorage.getItem("memberId");
|
|||
|
|
lFlashPromotionId=localStorage.getItem("flashPromotionId");
|
|||
|
|
$.ajax({
|
|||
|
|
type: "post",
|
|||
|
|
headers:{"memberId": lMemberId},//设置请求头
|
|||
|
|
url:"/skcart/generateConfirmOrder?" +
|
|||
|
|
"productId="+lProductId
|
|||
|
|
+"&flashPromotionId="+lFlashPromotionId,
|
|||
|
|
success:function(commonresult){
|
|||
|
|
if(commonresult.code == 200){
|
|||
|
|
console.log("成功获得秒杀确认单！");
|
|||
|
|
var data = commonresult.data;
|
|||
|
|
console.log(commonresult);
|
|||
|
|
$("#orderId").val(data.orderId);
|
|||
|
|
localStorage.setItem("orderId",data.orderId);
|
|||
|
|
var calcAmount = data.calcAmount;
|
|||
|
|
$("#calcAmount").val(calcAmount.totalAmount);
|
|||
|
|
var cartPromotionItem = data.cartPromotionItemList;
|
|||
|
|
var productN = "";
|
|||
|
|
$.each(cartPromotionItem,function (i,item) {
|
|||
|
|
productN = productN + item.productName + "&&";
|
|||
|
|
$("#orderItemId").val(item.orderItemId);
|
|||
|
|
});
|
|||
|
|
$("#cartPromotionItemList").val(productN);
|
|||
|
|
var umsMemberReceiveAddress = data.memberReceiveAddressList;
|
|||
|
|
var addrs = "";
|
|||
|
|
$.each(umsMemberReceiveAddress,function (i,item) {
|
|||
|
|
addrs = addrs + item.detailAddress + "&&";
|
|||
|
|
lmemberReceiveAddress = item;
|
|||
|
|
$("#factAddress").val(item.detailAddress);
|
|||
|
|
});
|
|||
|
|
$("#memberReceiveAddressList").val(addrs);
|
|||
|
|
}else{
|
|||
|
|
console.log(commonresult);
|
|||
|
|
alert("获得秒杀确认单失败！");
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
error:function(data){
|
|||
|
|
console.log(data);
|
|||
|
|
alert("获得秒杀确认单异常！");
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
showConfirmOrder();
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|