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> |