mirror of
https://gitee.com/coder-xiaomo/flashsale
synced 2025-11-04 06:03:13 +08:00
163 lines
5.7 KiB
HTML
163 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Title</title>
|
||
<link href="static/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
|
||
<link href="static/assets/global/css/components.css" rel="stylesheet" type="text/css"/>
|
||
<link href="static/assets/admin/pages/css/login.css" rel="stylesheet" type="text/css"/>
|
||
<script src="./static/assets/global/plugins/jquery-1.11.0.min.js" type="text/javascript"></script>
|
||
</head>
|
||
<body class="login">
|
||
<div class="content">
|
||
<h3 class="form-title">商品详情</h3>
|
||
<div id="promoStartDateContainer" class="from-group">
|
||
<label style="color: blue;" id="promoStatus" class="control-label"></label>
|
||
<div>
|
||
<label style="color: red;" class="control-label" id="promoStartDate">
|
||
</div>
|
||
</div>
|
||
<div class="from-group">
|
||
<div>
|
||
<label class="control-label" id="title">
|
||
</div>
|
||
</div>
|
||
<div class="from-group">
|
||
<label class="control-label">商品描述</label>
|
||
<div>
|
||
<label class="control-label" id="description">
|
||
</div>
|
||
</div>
|
||
<div class="from-group">
|
||
<label class="control-label">价格</label>
|
||
<div>
|
||
<label class="control-label" id="price">
|
||
</div>
|
||
</div>
|
||
<div id="promoPriceContainer" class="from-group">
|
||
<label class="control-label">秒杀价格</label>
|
||
<div>
|
||
<label style="color: red;" class="control-label" id="promoPrice">
|
||
</div>
|
||
</div>
|
||
<div class="from-group">
|
||
<img id="imgUrl" src="" style="width: 200px; height: auto;"/>
|
||
</div>
|
||
<div class="from-group">
|
||
<label class="control-label">库存</label>
|
||
<div>
|
||
<label class="control-label" id="stock">
|
||
</div>
|
||
</div>
|
||
<div class="from-group">
|
||
<label class="control-label">销量</label>
|
||
<div>
|
||
<label class="control-label" id="sales">
|
||
</div>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button class="btn blue" id="createorder" type="submit">
|
||
下单
|
||
</button>
|
||
<a href="listitem.html">返回</a>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
//获取url中的参数
|
||
function getUrlParam(name) {
|
||
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
|
||
var r = window.location.search.substring(1).match(reg); //匹配目标参数
|
||
if (r != null) return decodeURIComponent(r[2]);
|
||
return null; //返回参数值
|
||
}
|
||
|
||
var itemId = getUrlParam("id");
|
||
|
||
var g_itemVO = [];
|
||
|
||
jQuery(document).ready(function () {
|
||
// 获取商品详情
|
||
$.ajax({
|
||
type: "GET",
|
||
url: "http://localhost:8090/item/get",
|
||
data: {
|
||
"id": itemId,
|
||
},
|
||
xhrFields: {withCredentials: true},
|
||
success: function (data) {
|
||
if (data.status == "success") {
|
||
g_itemVO = data.data;
|
||
reloadDom();
|
||
setInterval(reloadDom, 300);
|
||
} else {
|
||
alert("获取信息失败，原因为" + data.data.errMsg);
|
||
}
|
||
},
|
||
error: function (data) {
|
||
alert("获取信息失败，原因为" + data.responseText);
|
||
}
|
||
})
|
||
|
||
// 下单
|
||
$("#createorder").on("click", function () {
|
||
$.ajax({
|
||
type: "POST",
|
||
contentType: "application/x-www-form-urlencoded",
|
||
url: "http://localhost:8090/order/createorder",
|
||
data: {
|
||
"itemId": g_itemVO.id,
|
||
"amount": 1, // 暂时写死，买1件
|
||
},
|
||
xhrFields: {withCredentials: true},
|
||
success: function (data) {
|
||
if (data.status == "success") {
|
||
alert("下单成功");
|
||
window.location.reload();
|
||
} else {
|
||
alert("下单失败，原因为" + data.data.errMsg);
|
||
if (data.data.errCode == "20003") {
|
||
window.location.href = "login.html";
|
||
}
|
||
}
|
||
},
|
||
error: function (data) {
|
||
alert("下单失败，原因为" + data.responseText);
|
||
}
|
||
})
|
||
});
|
||
})
|
||
|
||
function reloadDom() {
|
||
$("#title").text(g_itemVO.title);
|
||
$("#description").text(g_itemVO.description);
|
||
$("#stock").text(g_itemVO.stock);
|
||
$("#price").text(g_itemVO.price);
|
||
$("#imgUrl").attr("src", g_itemVO.imgUrl);
|
||
$("#sales").text(g_itemVO.sales);
|
||
if (g_itemVO.promoStatus == 1) {
|
||
// 秒杀活动还未开始
|
||
var startTime = g_itemVO.startDate.replace(new RegExp("-", "gm"), "/");
|
||
startTime = new Date(startTime).getTime();
|
||
var nowTime = Date.parse(new Date());
|
||
var delta = (startTime - nowTime) / 1000;
|
||
|
||
if (delta < 1) {
|
||
// 活动开始了
|
||
g_itemVO.promoStatus = 2;
|
||
reloadDom();
|
||
}
|
||
|
||
$("#promoStartDate").text("秒杀活动将于 " + g_itemVO.startDate + " 开始" +
|
||
"倒计时：" + delta + "s");
|
||
$("#promoPrice").text(g_itemVO.promoPrice);
|
||
$("#createorder").attr("disabled", true);
|
||
} else if (g_itemVO.promoStatus == 2) {
|
||
$("#promoStartDate").text("秒杀正在进行中");
|
||
$("#promoPrice").text(g_itemVO.promoPrice);
|
||
$("#createorder").attr("disabled", false);
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |