sheep/tlmall-v5-single
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化提交

Browse Source
This commit is contained in:
USER-20221017CE\Administrator
2022-11-01 12:14:54 +08:00
commit d31fad2aa9
1733 changed files with 370203 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

441
doc/htmljss/common.css Normal file
View File

@@ -0,0 +1,441 @@
body,
div,
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
dl,
dt,
a,
input,
button,
textarea,
select {
margin: 0;
padding: 0;
outline: none;
}
html,
body {
font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
color: #333333;
background-color: #ffffff;
min-width: 1226px;
font-size: 12px;
}
a {
text-decoration: none;
}
ul,
li {
list-style: none;
}
input {
font: normal;
}
input:focus,
a:focus {
outline: none;
}
.container {
position: relative;
width: 1226px;
margin-right: auto;
margin-left: auto;
}
input {
outline: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 14px;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clearfix:before,
.clearfix:after {
content: ' ';
display: table;
}
.clearfix:after {
clear: both;
}
.header-logo {
display: inline-block;
width: 55px;
height: 55px;
background-color: #FF6600;
}
.header-logo a {
display: inline-block;
width: 110px;
height: 55px;
}
.header-logo a:before {
content: ' ';
display: inline-block;
width: 55px;
height: 55px;
background: url("/imgs/mi-logo.png") no-repeat center;
background-size: 55px;
-webkit-transition: margin .2s;
transition: margin .2s;
}
.header-logo a:after {
content: ' ';
display: inline-block;
width: 55px;
height: 55px;
background: url("/imgs/mi-home.png") no-repeat center;
background-size: 55px;
}
.header-logo a:hover:before {
margin-left: -55px;
-webkit-transition: margin .2s;
transition: margin .2s;
}
/* 样式规范表 */
.header .nav-topbar {
height: 39px;
line-height: 39px;
background-color: #333333;
color: #B0B0B0;
}
.header .nav-topbar .container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.header .nav-topbar .container a {
display: inline-block;
color: #B0B0B0;
margin-right: 17px;
}
.header .nav-topbar .container .my-cart {
width: 110px;
background-color: #FF6600;
text-align: center;
color: #ffffff;
margin-right: 0;
}
.header .nav-topbar .container .my-cart .icon-cart {
display: inline-block;
width: 16px;
height: 12px;
background: url("/imgs/icon-cart-checked.png") no-repeat center;
background-size: contain;
margin-right: 4px;
}
.header .nav-header .container {
position: relative;
height: 112px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.header .nav-header .container .header-menu {
display: inline-block;
width: 643px;
padding-left: 209px;
}
.header .nav-header .container .header-menu .item-menu {
display: inline-block;
color: #333333;
font-weight: bold;
font-size: 16px;
line-height: 112px;
margin-right: 20px;
}
.header .nav-header .container .header-menu .item-menu span {
cursor: pointer;
}
.header .nav-header .container .header-menu .item-menu:hover {
color: #FF6600;
}
.header .nav-header .container .header-menu .item-menu:hover .children {
height: 220px;
opacity: 1;
}
.header .nav-header .container .header-menu .item-menu .children {
position: absolute;
top: 112px;
left: 0;
width: 1226px;
height: 0;
opacity: 0;
overflow: hidden;
border-top: 1px solid #E5E5E5;
-webkit-box-shadow: 0px 7px 6px 0px rgba(0, 0, 0, 0.11);
box-shadow: 0px 7px 6px 0px rgba(0, 0, 0, 0.11);
z-index: 10;
-webkit-transition: all .5s;
transition: all .5s;
background-color: #ffffff;
}
.header .nav-header .container .header-menu .item-menu .children .product {
position: relative;
float: left;
width: 16.6%;
height: 220px;
font-size: 12px;
line-height: 12px;
text-align: center;
}
.header .nav-header .container .header-menu .item-menu .children .product a {
display: inline-block;
}
.header .nav-header .container .header-menu .item-menu .children .product img {
width: auto;
height: 111px;
margin-top: 26px;
}
.header .nav-header .container .header-menu .item-menu .children .product .pro-img {
height: 137px;
}
.header .nav-header .container .header-menu .item-menu .children .product .pro-name {
font-weight: bold;
margin-top: 19px;
margin-bottom: 8px;
color: #333333;
}
.header .nav-header .container .header-menu .item-menu .children .product .pro-price {
color: #FF6600;
}
.header .nav-header .container .header-menu .item-menu .children .product:before {
content: ' ';
position: absolute;
top: 28px;
right: 0;
border-left: 1px solid #d7d7d7;
height: 100px;
width: 1px;
}
.header .nav-header .container .header-menu .item-menu .children .product:last-child:before {
display: none;
}
.header .nav-header .container .header-search {
width: 319px;
}
.header .nav-header .container .header-search .wrapper {
height: 50px;
border: 1px solid #E0E0E0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.header .nav-header .container .header-search .wrapper input {
border: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-right: 1px solid #E0E0E0;
width: 264px;
height: 50px;
padding-left: 14px;
}
.header .nav-header .container .header-search .wrapper a {
color: #333333;
background-color: #ffffff;
display: block;
width: 57px;
height: 100%;
line-height: 50px;
text-align: center;
}
.header .nav-header .container .header-search .wrapper a:hover {
color: #ffffff;
background-color: #FF6600;
}
.footer[data-v-b07fc4c4] {
height: 234px;
border-top: 4px solid #FF6600;
background-color: #333333;
color: #999999;
font-size: 16px;
text-align: center;
}
.footer .footer-logo[data-v-b07fc4c4] {
margin-top: 46px;
margin-bottom: 31px;
}
.footer .footer-logo img[data-v-b07fc4c4] {
width: 53px;
height: 36px;
margin-bottom: 13px;
}
.footer .footer-link[data-v-b07fc4c4] {
margin-bottom: 13px;
}
.footer .footer-link a[data-v-b07fc4c4] {
color: #999999;
display: inline-block;
}
.footer .footer-link span[data-v-b07fc4c4] {
margin: 0 10px;
}
.footer .copyright .domain[data-v-b07fc4c4] {
color: #FF6600;
}
/* 样式规范表 */
.btn {
display: inline-block;
width: 110px;
line-height: 30px;
text-align: center;
background-color: #FF6600;
color: #ffffff;
border: none;
cursor: pointer;
}
.btn-default {
background-color: #B0B0B0;
color: #ffffff;
}
.btn-large {
width: 202px;
height: 50px;
line-height: 50px;
font-size: 18px;
}
.btn-huge {
width: 300px;
height: 54px;
line-height: 54px;
font-size: 16px;
}
.btn-group .btn {
margin-right: 20px;
}
.btn-group .btn:last-child {
margin-right: 0;
}
/* 样式规范表 */
.nav-bar {
height: 70px;
line-height: 70px;
border-top: 1px solid #e5e5e5;
background-color: #ffffff;
z-index: 10;
}
.nav-bar.is_fixed {
position: fixed;
top: 0;
width: 100%;
-webkit-box-shadow: 0 5px 5px #cccccc;
box-shadow: 0 5px 5px #cccccc;
}
.nav-bar .container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.nav-bar .container .pro-title {
font-size: 18px;
color: #333333;
font-weight: bold;
}
.nav-bar .container .pro-param {
font-size: 14px;
}
.nav-bar .container .pro-param span {
margin: 0 10px;
}
.nav-bar .container .pro-param a {
color: #666666;
}

BIN
doc/htmljss/ewm.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

3
doc/htmljss/jquery-1.9.1.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

136
doc/htmljss/order.css Normal file
View File

@@ -0,0 +1,136 @@
.order-pay .wrapper {
background-color: #F5F5F5;
padding-top: 30px;
padding-bottom: 61px;
}
.order-pay .wrapper .order-wrap {
padding: 62px 50px;
background-color: #fff;
font-size: 14px;
margin-bottom: 30px;
width: 1028px;
margin: 0px auto;
}
.order-pay .wrapper .order-wrap .item-order {
display: flex;
align-items: center;
}
.order-pay .wrapper .order-wrap .item-order .icon-succ {
width: 90px;
height: 90px;
border-radius: 50%;
background: url("/imgs/icon-gou.png") #80c58a no-repeat center;
background-size: 60px;
margin-right: 40px;
}
.order-pay .wrapper .order-wrap .item-order .order-info {
margin-right: 248px;
}
.order-pay .wrapper .order-wrap .item-order .order-info h2 {
font-size: 24px;
color: #333333;
margin-bottom: 20px;
}
.order-pay .wrapper .order-wrap .item-order .order-info p {
color: #666666;
}
.order-pay .wrapper .order-wrap .item-order .order-info p span {
color: #FF6700;
}
.order-pay .wrapper .order-wrap .item-order .order-total > p:first-child {
margin-bottom: 30px;
}
.order-pay .wrapper .order-wrap .item-order .order-total span {
font-size: 28px;
color: #FF6700;
}
.order-pay .wrapper .order-wrap .item-order .order-total .icon-down {
display: inline-block;
width: 14px;
height: 10px;
background: url("/imgs/icon-down.png") no-repeat center;
background-size: contain;
margin-left: 9px;
transition: all 0.5s;
cursor: pointer;
}
.order-pay .wrapper .order-wrap .item-order .order-total .icon-down.up {
transform: rotate(180deg);
}
.order-pay .wrapper .order-wrap .item-order .order-total .icon-up {
transform: rotate(180deg);
}
.order-pay .wrapper .order-wrap .item-detail {
border-top: 1px solid #D7D7D7;
padding-top: 47px;
padding-left: 130px;
font-size: 14px;
margin-top: 45px;
}
.order-pay .wrapper .order-wrap .item-detail .item {
margin-bottom: 19px;
}
.order-pay .wrapper .order-wrap .item-detail .item .detail-title {
float: left;
width: 100px;
}
.order-pay .wrapper .order-wrap .item-detail .item .detail-info {
display: inline-block;
}
.order-pay .wrapper .order-wrap .item-detail .item .detail-info img {
width: 30px;
vertical-align: middle;
}
.order-pay .wrapper .item-pay {
padding: 26px 50px 72px;
background-color: #ffffff;
color: #333333;
}
.order-pay .wrapper .item-pay h3 {
font-size: 20px;
font-weight: 200;
color: #333333;
padding-bottom: 24px;
border-bottom: 1px solid #D7D7D7;
margin-bottom: 26px;
}
.order-pay .wrapper .item-pay .pay-way {
font-size: 18px;
}
.order-pay .wrapper .item-pay .pay-way .pay {
display: inline-block;
width: 188px;
height: 64px;
border: 1px solid #D7D7D7;
cursor: pointer;
}
.order-pay .wrapper .item-pay .pay-way .pay:last-child {
margin-left: 20px;
}
.order-pay .wrapper .item-pay .pay-way .pay.checked {
border: 1px solid #FF6700;
}
.order-pay .wrapper .item-pay .pay-way .pay-ali {
background: url("/imgs/pay/icon-ali.png") no-repeat center;
background-size: 103px 38px;
margin-top: 19px;
}
.order-pay .wrapper .item-pay .pay-way .pay-wechat {
background: url("/imgs/pay/icon-wechat.png") no-repeat center;
background-size: 103px 38px;
}
.subpay{
text-align: center;
margin: 20px;
}
.pay {
padding: 62px 50px;
background-color: #fff;
font-size: 14px;
margin-bottom: 30px;
width: 1028px;
margin: 0px auto;
height: 400px;
}

22293
doc/htmljss/product.css Normal file
View File

File diff suppressed because it is too large Load Diff

220
doc/htmljss/product.ftl Normal file
View File

@@ -0,0 +1,220 @@
<!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="static/product.css">
<link rel="stylesheet" type="text/css" href="static/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>
<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="detail">
<div class="nav-bar">
<div class="container">
<div class="pro-title">${fpp.name}</div>
<div class="pro-param">
<a href="javascript:;">概述</a>
<span>|</span>
<a href="javascript:;">参数</a>
<span>|</span>
<a href="javascript:;">用户评价</a></div>
</div>
</div>
<div class="wrapper">
<div class="container clearfix">
<div class="swiper">
<div class="swiper-container swiper-container-initialized swiper-container-horizontal">
<div class="swiper-wrapper" style="transform: translate3d(-1284px, 0px, 0px); transition-duration: 0ms;">
<#list imageList as image>
<img src="${image}"/><br>
</#list>
</div>
<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets">
<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 1"></span>
<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span>
<span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 3"></span>
</div>
<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
</div>
</div>
<div class="content">
<h2 class="item-title">${fpp.name}</h2>
<p class="item-info">AI智慧全面屏 6GB +64GB 亮黑色 全网通版 移动联通电信4G手机 双卡双待手机 双卡双待</p>
<div class="item-price">${fpp.flashPromotionPrice}元</div>
<div class="line"></div>
<div class="item-version clearfix">
<h2>选择规格</h2>
<div skuid="143" class="phone fl">金色16G</div>
<div skuid="144" class="phone fl">金色32G</div>
<div skuid="145" class="phone fl">银色16G</div>
<div skuid="146" class="phone fl">银色32G</div></div>
<div class="item-total">
<div class="phone-info clearfix">
<div class="stock">
<i aria-hidden="true" class="fa fa-exclamation-triangle f2"></i>请选择规格</div>
<!----></div>
<!----></div>
<div class="btn-group">
<a href="javascript:;" class="btn btn-huge fl" onclick="secKill()" disabled="true" id="secKillbtn">立即秒杀</a></div>
<div class="btn-group">
<span>
<em>库存数量</em>
</span>
<span>
<input id="flashPromotionCount" type="text" readonly value="${fpp.flashPromotionCount}">
</span>
</div>
<div class="input" id="verifyCodeArea" hidden="true">
<img id="verifyCodeImg" src="">
<input id="verifyCodeText" type="text" placeholder="请输入验证码">
</div>
<div class="after-sale-info">
<span>
<a href="javascript:void(0);" class="support">
<i aria-hidden="true" class="fa fa-check-circle-o f2"></i>
<em>无忧退货</em></a>
</span>
<span>
<a href="javascript:void(0);" class="support">
<i aria-hidden="true" class="fa fa-check-circle-o f2"></i>
<em>快速退款</em></a>
</span>
<span>
<a href="javascript:void(0);" class="support">
<i aria-hidden="true" class="fa fa-check-circle-o f2"></i>
<em>免费包邮</em></a>
</span>
</div>
</div>
</div>
</div>
<div class="price-info">
<div class="container">
<h2>商品介绍</h2>
<div class="desc">
<p>
<!--{* detailHtml *}-->
</p>
</div>
</div>
</div>
<div class="service">
<div class="container">
<ul>
<li>
<span class="icon-setting"></span>预约维修服务</li>
<li>
<span class="icon-7day"></span>7天无理由退货</li>
<li>
<span class="icon-15day"></span>15天免费换货</li>
<li>
<span class="icon-post"></span>满150元包邮</li>
</ul>
</div>
</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>
<input id="memberId" type="hidden" value="{* memberId *}">
<input id="productId" type="hidden" value="{* productId *}">
<input id="flashPromotionId" type="hidden" value="{* flashPromotionId *}">
</div>
<script type="text/javascript" src="static/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function secKill(){
if ($("#verifyCodeText").val() == "") {
console.log("请输入验证码！");
showVerifyCode();
} else {
$.post("skcart/checkCode?verifyCode="+$("#verifyCodeText").val(),function (data) {
console.log(data);
if(data.code == 200){
console.log("验证码通过，提交请求！");
localStorage.setItem("productId", $("#productId").val());
localStorage.setItem("flashPromotionId", $("#flashPromotionId").val());
localStorage.setItem("memberId", $("#memberId").val());
window.location.href = "static/secKillConfirmOrder.html";
}else{
alert("验证码不正确！");
$("#verifyCodeText").val("");
}
})
}
}
function showVerifyCode(){
$("#verifyCodeImg").attr("src","skcart/verifyCode");
$("#verifyCodeArea").attr("hidden",false);
}
function getProductStock(){
console.log("productId:" + $("#productId").val());
console.log("flashPromotionId:" + $("#flashPromotionId").val());
console.log("memberId:" + $("#memberId").val());
$.get("cache/stock?productId="+$("#productId").val(),function (data) {
console.log(data);
if(data > 0){
$("#secKillbtn").disabled=false;
$("#flashPromotionCount").val(data);
}else{
console.log("秒杀商品已无库存，秒杀结束！");
$("#secKillbtn").disabled=true;
}
})
}
getProductStock();
</script>
</body>
</html>

41
doc/htmljss/product.js Normal file
View File

@@ -0,0 +1,41 @@
function secKill(){
if ($("#verifyCodeText").val() == "") {
console.log("请输入验证码！");
showVerifyCode();
} else {
$.post("skcart/checkCode?verifyCode="+$("#verifyCodeText").val(),function (data) {
console.log(data);
if(data.code == 200){
console.log("验证码通过，提交请求！");
localStorage.setItem("productId", $("#productId").val());
localStorage.setItem("flashPromotionId", $("#flashPromotionId").val());
localStorage.setItem("memberId", $("#memberId").val());
window.location.href = "secKillConfirmOrder.html";
}else{
alert("验证码不正确！");
$("#verifyCodeText").val("");
}
})
}
}
function showVerifyCode(){
$("#verifyCodeImg").src="skcart/verifyCode";
$("#verifyCodeArea").attr("hidden",false);
}
function getProductStock(){
console.log("productId:" + $("#productId").val());
console.log("flashPromotionId:" + $("#flashPromotionId").val());
console.log("memberId:" + $("#memberId").val());
$.get("cache/stock?productId="+$("#productId").val(),function (data) {
console.log(data);
if(data > 0){
$("#secKillbtn").disabled=false;
$("#flashPromotionCount").val(data);
}else{
console.log("秒杀商品已无库存，秒杀结束！");
$("#secKillbtn").disabled=true;
}
})
}

219
doc/htmljss/product.noftl Normal file
View File

@@ -0,0 +1,219 @@
<!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="static/product.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>
<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="detail">
<div class="nav-bar">
<div class="container">
<div class="pro-title">${fpp.name}</div>
<div class="pro-param">
<a href="javascript:;">概述</a>
<span>|</span>
<a href="javascript:;">参数</a>
<span>|</span>
<a href="javascript:;">用户评价</a></div>
</div>
</div>
<div class="wrapper">
<div class="container clearfix">
<div class="swiper">
<div class="swiper-container swiper-container-initialized swiper-container-horizontal">
<div class="swiper-wrapper" style="transform: translate3d(-1284px, 0px, 0px); transition-duration: 0ms;">
<#list imageList as image>
<img src="${image}"/><br>
</#list>
</div>
<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets">
<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 1"></span>
<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span>
<span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 3"></span>
</div>
<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
</div>
</div>
<div class="content">
<h2 class="item-title">${fpp.name}</h2>
<p class="item-info">AI智慧全面屏 6GB +64GB 亮黑色 全网通版 移动联通电信4G手机 双卡双待手机 双卡双待</p>
<div class="item-price">${fpp.flashPromotionPrice}元</div>
<div class="line"></div>
<div class="item-version clearfix">
<h2>选择规格</h2>
<div skuid="143" class="phone fl">金色16G</div>
<div skuid="144" class="phone fl">金色32G</div>
<div skuid="145" class="phone fl">银色16G</div>
<div skuid="146" class="phone fl">银色32G</div></div>
<div class="item-total">
<div class="phone-info clearfix">
<div class="stock">
<i aria-hidden="true" class="fa fa-exclamation-triangle f2"></i>请选择规格</div>
<!----></div>
<!----></div>
<div class="btn-group">
<a href="javascript:;" class="btn btn-huge fl" onclick="secKill()" disabled="true" id="secKillbtn">立即秒杀</a></div>
<div class="btn-group">
<span>
<em class="item-price">库存数量</em>
</span>
<span>
<input id="flashPromotionCount" type="text" readonly value="${fpp.flashPromotionCount}">
</span>
</div>
<div class="input" id="verifyCodeArea" hidden="true">
<img id="verifyCodeImg" src="">
<input id="verifyCodeText" type="text" placeholder="请输入验证码">
</div>
<div class="after-sale-info">
<span>
<a href="javascript:void(0);" class="support">
<i aria-hidden="true" class="fa fa-check-circle-o f2"></i>
<em>无忧退货</em></a>
</span>
<span>
<a href="javascript:void(0);" class="support">
<i aria-hidden="true" class="fa fa-check-circle-o f2"></i>
<em>快速退款</em></a>
</span>
<span>
<a href="javascript:void(0);" class="support">
<i aria-hidden="true" class="fa fa-check-circle-o f2"></i>
<em>免费包邮</em></a>
</span>
</div>
</div>
</div>
</div>
<div class="price-info">
<div class="container">
<h2>商品介绍</h2>
<div class="desc">
<p>
<!--{* detailHtml *}-->
</p>
</div>
</div>
</div>
<div class="service">
<div class="container">
<ul>
<li>
<span class="icon-setting"></span>预约维修服务</li>
<li>
<span class="icon-7day"></span>7天无理由退货</li>
<li>
<span class="icon-15day"></span>15天免费换货</li>
<li>
<span class="icon-post"></span>满150元包邮</li>
</ul>
</div>
</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>
<input id="memberId" type="hidden" value="{* memberId *}">
<input id="productId" type="hidden" value="{* productId *}">
<input id="flashPromotionId" type="hidden" value="{* flashPromotionId *}">
</div>
<script type="text/javascript" src="static/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function secKill(){
if ($("#verifyCodeText").val() == "") {
console.log("请输入验证码！");
showVerifyCode();
} else {
$.post("skcart/checkCode?verifyCode="+$("#verifyCodeText").val(),function (data) {
console.log(data);
if(data.code == 200){
console.log("验证码通过，提交请求！");
localStorage.setItem("productId", $("#productId").val());
localStorage.setItem("flashPromotionId", $("#flashPromotionId").val());
localStorage.setItem("memberId", $("#memberId").val());
window.location.href = "static/secKillConfirmOrder.html";
}else{
alert("验证码不正确！");
$("#verifyCodeText").val("");
}
})
}
}
function showVerifyCode(){
$("#verifyCodeImg").attr("src","skcart/verifyCode");
$("#verifyCodeArea").attr("hidden",false);
}
function getProductStock(){
console.log("productId:" + $("#productId").val());
console.log("flashPromotionId:" + $("#flashPromotionId").val());
console.log("memberId:" + $("#memberId").val());
$.get("cache/stock?productId="+$("#productId").val(),function (data) {
console.log(data);
if(data > 0){
$("#secKillbtn").disabled=false;
$("#flashPromotionCount").val(data);
}else{
console.log("秒杀商品已无库存，秒杀结束！");
$("#secKillbtn").disabled=true;
}
})
}
getProductStock();
</script>
</body>
</html>

237
doc/htmljss/secKillConfirmOrder.html Normal file
View File

@@ -0,0 +1,237 @@
<!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>

128
doc/htmljss/secKillConfirmOrder.nohtml Normal file
View File

@@ -0,0 +1,128 @@
<!DOCTYPE html>
<!-- saved from url=(0040)http://localhost:8081/#/secKillDetail/26 -->
<html lang="en">
<head>
<title>秒杀订单确认页</title>
</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 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>
<a href="javascript:;" onclick="submitOrder()">提交订单</a>
</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>

120
doc/htmljss/secKillPay.html Normal file
View File

@@ -0,0 +1,120 @@
<!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="pay">
<div id="payImage" hidden="true">
<h2>请扫码支付，以下为模拟演示图片</h2>
<img src="ewm.jpg" alt="">
</div>
<div id="showProgress">
<h2>请稍候，订单正在生成....</h2>
</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=localStorage.getItem("productId");
var lFlashPromotionId=localStorage.getItem("memberId");
var lMemberId=localStorage.getItem("flashPromotionId");
var orderId=localStorage.getItem("orderId");
var timer;
var checkCount = 0;
function checkOrder(){
if(checkCount == 10){
alert("检查秒杀订单生成情况已达最大次数，请稍后再试！");
clearInterval(timer);
return;
}
$.ajax({
type: "post",
headers:{"memberId": lMemberId},//设置请求头
url:"/seckillOrder/checkOrder?" + "orderId="+orderId,
success:function(commonresult){
if(commonresult.code==200){
console.log("秒杀订单已生成！");
$("payImage").attr("hidden",false);
$("showProgress").attr("hidden",true);
}else if(commonresult.code==202){
console.log("秒杀订单还未生成，继续检查！");
checkCount++;
}else{
alert("检查秒杀订单生成情况失败！");
}
},
error:function(data){
alert("检查秒杀订单生成情况异常！");
}
});
}
timer = setInterval(checkOrder,5000);
</script>
</body>
</html>

64
doc/htmljss/secKillPay.nohtml Normal file
View File

@@ -0,0 +1,64 @@
<!DOCTYPE html>
<!-- saved from url=(0040)http://localhost:8081/#/secKillDetail/26 -->
<html lang="en">
<head>
<title>秒杀支付</title>
</head>
<body>
<noscript>
<strong>We're sorry but mall doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
<div>
<div id="payImage" hidden="true">
<h2>请扫码支付，以下为模拟演示图片</h2>
<img src="ewm.jpg" alt="">
</div>
<div id="showProgress">
<h2>请稍候，订单正在生成....</h2>
</div>
</div>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
var lProductId=localStorage.getItem("productId");
var lFlashPromotionId=localStorage.getItem("memberId");
var lMemberId=localStorage.getItem("flashPromotionId");
var orderId=localStorage.getItem("orderId");
var timer;
var checkCount = 0;
function checkOrder(){
if(checkCount == 10){
alert("检查秒杀订单生成情况已达最大次数，请稍后再试！");
clearInterval(timer);
return;
}
$.ajax({
type: "post",
headers:{"memberId": lMemberId},//设置请求头
url:"/seckillOrder/checkOrder?" + "orderId="+orderId,
success:function(commonresult){
if(commonresult.code==200){
console.log("秒杀订单已生成！");
$("payImage").attr("hidden",false);
$("showProgress").attr("hidden",true);
}else if(commonresult.code==202){
console.log("秒杀订单还未生成，继续检查！");
checkCount++;
}else{
alert("检查秒杀订单生成情况失败！");
}
},
error:function(data){
alert("检查秒杀订单生成情况异常！");
}
});
}
timer = setInterval(checkOrder,5000);
</script>
</body>
</html>