睿乐购电商课程设计——商品模块
商品详情页商品搜索页购物车
商品详情页
detail.js
function getProduct(){
let id
= sessionStorage
.getItem("goodsId");
if (isNull(id
)){
return ;
}
$
.ajax({
type
: "GET",
dataType
: "json",
url
: "/goods/get/"+id
,
success
: function(result
) {
if (result
.status
== 200){
goodShow(result
.data
);
}else if(result
.status
== 404){
location
.href
="404.html";
return;
}else{
console
.log(result
.msg
);
return null;
}
},
error
: function() {
location
.href
="404.html";
return;
}
});
}
function goodShow(data
){
let mainImg
= data
.main_image
;
$("#item1 a").attr('href',mainImg
);
$("#item1 img").attr('src',mainImg
);
$("#item3 img").attr('src',mainImg
);
let subimg
= ('sub_image' in data
)?data
.sub_image
:mainImg
;
$("#item2 a").attr('href',subimg
);
$("#item2 img").attr('src',subimg
);
$("#item4 img").attr('src',subimg
);
$(".product-title").text(data
.name
);
$(".regular-price").text(data
.price
);
$(".product-description").text(data
.detail
);
$(".product_desc").text(data
.detail
);
$("#stock").text(data
.stock
);
$("#btnAddToCart").attr("onclick",`addCart(${data.id})`);
}
$(function (){
checkUsername();
checkCart();
getProduct();
});
detail.html部分
<div class="row">
<div class="col-xl-6 col-lg-7 col-12 mt-50">
<div class="vertical-tab-product vertical-tab-right">
<div class="product-slider-container arrow-center text-center float-left">
<div class="product-item detail1" id= "item1">
<a href="assets/images/product/product-details/product-details-1.jpg"><img src="assets/images/product/product-details/product-details-1.jpg" class="img-fluid" alt="" /></a>
</div >
<div class="product-item" id="item2">
<a href="assets/images/product/product-details/product-details-2.jpg"><img src="assets/images/product/product-details/product-details-2.jpg" class="img-fluid" alt="" /></a>
</div>
</div>
<div class="product-thumbnail-vertical float-right">
<div class="product-item-thumb detail2" id="item3">
<img src="assets/images/product/product-details/product-thumb-1.jpg" class="img-fluid" alt="" />
</div>
<div class="product-item-thumb" id="item4">
<img src="assets/images/product/product-details/product-thumb-2.jpg" class="img-fluid" alt="" />
</div>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-5 col-12 mt-45">
<div class="product-summery position-relative">
<div class="product-head">
<h1 class="product-title">Porro quisquam eget feugiat pretium
</h1>
<div class="product-arrows text-right">
<a href="#"><i class="fa fa-long-arrow-left"></i></a>
<a href="#"><i class="fa fa-long-arrow-right"></i></a>
</div>
</div>
<div class="rating-meta d-flex">
<div class="rating">
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
</div>
<ul class="meta d-flex">
<li>
<a href="#"><i class="fa fa-commenting-o"></i>Read reviews(3)
</a>
</li>
<li>
<a href="#"><i class="fa fa-edit"></i>Write a review
</a>
</li>
</ul>
</div>
<div class="price-box">
<span class="regular-price">$30.00
</span>
</div>
<div class="product-description">
<p>Porro first 4K UHD Camcorder, the GX10 has a compact and portable design that delivers outstanding video quality with remarkable detail. With a combination of incredible features and functionality, the GX10 is the ideal camcorder for aspiring filmmakers.
</p>
</div>
<div class="product-packeges">
<table>
<tbody>
<tr>
<td class="label"><span>大小
</span></td>
<td class="value">
<div class="product-sizes">
<a href="#">大
</a>
<a href="#">中等
</a>
<a href="#">小
</a>
</div>
</td>
</tr>
<tr>
<td class="label"><span>库存
</span></td>
<td class="value">
<span id="stock">10
</span>
</td>
</tr>
<tr>
<td class="label"><span>购买量
</span></td>
<td class="value">
<div class="product-quantity">
<span class="qty-btn minus"><i class="fa fa-angle-down"></i></span>
<input type="text" class="input-qty" value="1">
<span class="qty-btn plus"><i class="fa fa-angle-up"></i></span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="product-buttons grid_list">
<div class="action-link">
<a class="compare-add same-link" href="compare.html" title="Add to compare"><i class="zmdi zmdi-refresh-alt"></i></a>
<button class="btn-secondary" id="btnAddToCart">添加购物车
</button>
<a class="wishlist-add same-link" href="#" title="Add to wishlist"><i class="zmdi zmdi-favorite-outline zmdi-hc-fw"></i></a>
</div>
</div>
<div class="product-meta">
<div class="desc-content">
<div class="social_sharing d-flex">
<h5>分享给朋友:
</h5>
<ul>
<li><a href="#" title="facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" title="twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" title="pinterest"><i class="fa fa-pinterest"></i></a></li>
<li><a href="#" title="google+"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" title="linkedin"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
商品搜索页
shop.html 部分
<div class="col-lg-9 order-first order-lg-last">
<div class="single-banner mt-50 mb-50">
<a href="#"><img src="assets/images/banner/shop-banner-1.jpg" alt="" class="img-fluid"></a>
</div>
<div class="toolbar-shop mb-50">
<div class="shop_toolbar_btn">
<button data-role="grid_3" class="btn-grid-3"></button>
<button data-role="grid_list" class="btn-list active"></button>
</div>
<div class="nice-select select-option">
<select name="select">
<option value="1">按名称排序
</option>
<option value="2">按编号排序
</option>
<option value="3">按日期排序
</option>
<option value="4">按类别排序
</option>
</select>
</div>
</div>
<div class="row shop-wrapper grid_list">
<div class="col-12 mb-20">
<div class="item-product pt-0">
<div class="product-thumb">
<a href="#">
<img src="assets/images/product/product-12.jpg" alt="" class="img-fluid">
</a>
<div class="box-label">
<div class="label-product-new">
<span>New
</span>
</div>
</div>
<div class="action-link">
<a class="quick-view same-link" href="#" title="Quick view" data-toggle="modal"
data-target="#modal_box" data-original-title="quick view"><i
class="zmdi zmdi-eye zmdi-hc-fw"></i></a>
<a class="compare-add same-link" href="compare.html" title="Add to compare"><i
class="zmdi zmdi-refresh-alt"></i></a>
<a class="wishlist-add same-link" href="#" title="Add to wishlist"><i
class="zmdi zmdi-favorite-outline zmdi-hc-fw"></i></a>
</div>
</div>
<div class="product-caption">
<div class="product-name">
<a href="#">Natus erro at congue massa commodo sit dignissim
</a>
</div>
<div class="rating">
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
</div>
<div class="price-box">
<span class="regular-price">$320.00
</span>
<span class="old-price"><del>$350.50
</del></span>
</div>
<div class="cart">
<div class="add-to-cart">
<a href="shopping-cart.html" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus zmdi-hc-fw"></i></a>
</div>
</div>
</div>
<div class="grid-list-caption align-items-center">
<div class="product-name">
<a href="#">Natus erro at congue massa commodo sit dignissim
</a>
</div>
<div class="rating">
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
</div>
<div class="price-box">
<span class="regular-price">$30.00
</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis ad, iure
incidunt. Ab consequatur temporibus non eveniet inventore doloremque
necessitatibus sed
</p>
<div class="text-available">
<p><strong>Availabe:
</strong><span> 99 In Stock
</span></p>
</div>
<div class="action-link">
<a class="quick-view same-link" href="#" title="Quick view" data-toggle="modal"
data-target="#modal_box" data-original-title="quick view"><i
class="zmdi zmdi-eye zmdi-hc-fw"></i></a>
<a class="compare-add same-link" href="compare.html" title="Add to compare"><i
class="zmdi zmdi-refresh-alt"></i></a>
<a class="wishlist-add same-link" href="#" title="Add to wishlist"><i
class="zmdi zmdi-favorite-outline zmdi-hc-fw"></i></a>
</div>
<div class="cart-list-button">
<a href="shopping-cart.html" class="cart-btn">Add To Cart
</a>
</div>
</div>
</div>
</div>
<div class="col-12 mb-20">
<div class="item-product">
<div class="product-thumb">
<a href="#">
<img src="assets/images/product/product-11.jpg" alt="" class="img-fluid">
</a>
<div class="box-label">
<div class="label-product-new">
<span>New
</span>
</div>
</div>
<div class="action-link">
<a class="quick-view same-link" href="#" title="Quick view" data-toggle="modal"
data-target="#modal_box" data-original-title="quick view"><i
class="zmdi zmdi-eye zmdi-hc-fw"></i></a>
<a class="compare-add same-link" href="compare.html" title="Add to compare"><i
class="zmdi zmdi-refresh-alt"></i></a>
<a class="wishlist-add same-link" href="#" title="Add to wishlist"><i
class="zmdi zmdi-favorite-outline zmdi-hc-fw"></i></a>
</div>
</div>
<div class="product-caption">
<div class="product-name">
<a href="#">Mirum est notare tellus eu nibh iaculis pretium
</a>
</div>
<div class="rating">
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
</div>
<div class="price-box">
<span class="regular-price">$320.00
</span>
<span class="old-price"><del>$350.50
</del></span>
</div>
<div class="cart">
<div class="add-to-cart">
<a href="shopping-cart.html" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus zmdi-hc-fw"></i></a>
</div>
</div>
</div>
<div class="grid-list-caption align-items-center">
<div class="product-name">
<a href="#">Mirum est notare tellus eu nibh iaculis pretium
</a>
</div>
<div class="rating">
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
</div>
<div class="price-box">
<span class="regular-price">$30.00
</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis ad, iure
incidunt. Ab consequatur temporibus non eveniet inventore doloremque
necessitatibus sed
</p>
<div class="text-available">
<p><strong>Availabe:
</strong><span> 99 In Stock
</span></p>
</div>
<div class="action-link">
<a class="quick-view same-link" href="#" title="Quick view" data-toggle="modal"
data-target="#modal_box" data-original-title="quick view"><i
class="zmdi zmdi-eye zmdi-hc-fw"></i></a>
<a class="compare-add same-link" href="compare.html" title="Add to compare"><i
class="zmdi zmdi-refresh-alt"></i></a>
<a class="wishlist-add same-link" href="#" title="Add to wishlist"><i
class="zmdi zmdi-favorite-outline zmdi-hc-fw"></i></a>
</div>
<div class="cart-list-button">
<a href="shopping-cart.html" class="cart-btn">Add To Cart
</a>
</div>
</div>
</div>
</div>
<div class="col-12 mb-20">
<div class="item-product">
<div class="product-thumb">
<a href="#">
<img src="assets/images/product/product-10.jpg" alt="" class="img-fluid">
</a>
<div class="action-link">
<a class="quick-view same-link" href="#" title="Quick view" data-toggle="modal"
data-target="#modal_box" data-original-title="quick view"><i
class="zmdi zmdi-eye zmdi-hc-fw"></i></a>
<a class="compare-add same-link" href="compare.html" title="Add to compare"><i
class="zmdi zmdi-refresh-alt"></i></a>
<a class="wishlist-add same-link" href="#" title="Add to wishlist"><i
class="zmdi zmdi-favorite-outline zmdi-hc-fw"></i></a>
</div>
</div>
<div class="product-caption">
<div class="product-name">
<a href="#">Porro quisquam eget feugiat pretium sodales
</a>
</div>
<div class="rating">
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
</div>
<div class="price-box">
<span class="regular-price">$320.00
</span>
<span class="old-price"><del>$350.50
</del></span>
</div>
<div class="cart">
<div class="add-to-cart">
<a href="shopping-cart.html" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus zmdi-hc-fw"></i></a>
</div>
</div>
</div>
<div class="grid-list-caption align-items-center">
<div class="product-name">
<a href="#">Porro quisquam eget feugiat pretium sodales
</a>
</div>
<div class="rating">
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
</div>
<div class="price-box">
<span class="regular-price">$30.00
</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis ad, iure
incidunt. Ab consequatur temporibus non eveniet inventore doloremque
necessitatibus sed
</p>
<div class="text-available">
<p><strong>Availabe:
</strong><span> 99 In Stock
</span></p>
</div>
<div class="action-link">
<a class="quick-view same-link" href="#" title="Quick view" data-toggle="modal"
data-target="#modal_box" data-original-title="quick view"><i
class="zmdi zmdi-eye zmdi-hc-fw"></i></a>
<a class="compare-add same-link" href="compare.html" title="Add to compare"><i
class="zmdi zmdi-refresh-alt"></i></a>
<a class="wishlist-add same-link" href="#" title="Add to wishlist"><i
class="zmdi zmdi-favorite-outline zmdi-hc-fw"></i></a>
</div>
<div class="cart-list-button">
<a href="shopping-cart.html" class="cart-btn">Add To Cart
</a>
</div>
</div>
</div>
</div>
</div>
<div class="toolbar-shop toolbar-bottom">
<div class="page-amount">
<p>10条
</p>
</div>
<div class="pagination">
<ul>
<li class="previous"><a href="#"><i class="fa fa-angle-left"></i> Previous
</a></li>
<li class="current">1
</li>
<li><a href="#">2
</a></li>
<li><a href="#">3
</a></li>
<li class="next"><a href="#">Next
<i class="fa fa-angle-right"></i></a></li>
</ul>
</div>
</div>
</div>
shop,js
function getProduct(page
= 1, limit
= 9) {
let searchName
= sessionStorage
.getItem("searchName");
let searchId
= sessionStorage
.getItem("searchId");
console
.log(searchId
);
if (!isNull(searchName
)){
$("#searchName").val(searchName
);
}else{
searchName
= "";
}
if (!isNull(searchId
)){
$("#searchId").val(searchId
);
$(".list li[data-value=1]").removeClass("selected");
$(".top-cat .current").text($('#searchId').find('option:selected').text());
$(".list li[data-value='"+searchId
+"']").addClass("selected focus");
}
let data
= {
"page": page
,
"limit": limit
,
"name": searchName
,
"id": searchId
,
}
$
.ajax({
type
: "GET",
dataType
: "json",
url
: "/goods/list",
data
: data
,
success
: function (result
) {
if (result
.status
== 200) {
shouProduct(result
.data
.list
, result
.data
.totalCount
, result
.data
.currPage
, result
.data
.totalPage
);
} else if (result
.status
== 404) {
console
.log("getProduct: 404----"+result
.msg
);
return;
} else {
alert(result
.msg
);
}
},
error
: function () {
console
.log("接口异常");
return;
}
});
}
function getContent(goods
) {
return str
= `<div class="col-12 mb-20">
<div class="item-product pt-0">
<div class="product-thumb">
<a href="#">
<img src="${goods.main_image}" alt="" class="img-fluid">
</a>
<div class="action-link">
<a class="quick-view same-link" href="#" title="查看详情" οnclick="shopDetail(${goods.id})"><i class="zmdi zmdi-eye zmdi-hc-fw"></i></a>
<a class="compare-add same-link" href="#" title="查找类似产品"><i class="zmdi zmdi-refresh-alt"></i></a>
<a class="wishlist-add same-link" href="#" title="添加到心愿单"><i class="zmdi zmdi-favorite-outline zmdi-hc-fw"></i></a>
</div>
</div>
<div class="product-caption">
<div class="product-name">
<a href="#" οnclick="shopDetail(${goods.id})" >${goods.name}</a>
</div>
<div class="rating">
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
</div>
<div class="price-box">
<span class="regular-price">${goods.price}</span>
</div>
<div class="cart">
<div class="add-to-cart">
<a href="#" title="添加到购物车" οnclick="addCart(${goods.id})"><i class="zmdi zmdi-shopping-cart-plus zmdi-hc-fw"></i></a>
</div>
</div>
</div>
<div class="grid-list-caption align-items-center">
<div class="product-name">
<a href="#" οnclick="shopDetail(${goods.id})">${goods.name}</a>
</div>
<div class="rating">
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
<span class="yellow"><i class="fa fa-star"></i></span>
</div>
<div class="price-box">
<span class="regular-price">${goods.price}</span>
</div>
<p>${goods.detail}</p>
<div class="text-available">
<p><strong>库存量：</strong><span>${goods.stock}</span></p>
</div>
<div class="action-link">
<a class="quick-view same-link" href="#" title="查看详情" οnclick="shopDetail(${goods.id})"><i class="zmdi zmdi-eye zmdi-hc-fw"></i></a>
<a class="compare-add same-link" href="#" title="查找相似产品"><i class="zmdi zmdi-refresh-alt"></i></a>
<a class="wishlist-add same-link" href="#" title="添加到心愿单"><i class="zmdi zmdi-favorite-outline zmdi-hc-fw"></i></a>
</div>
<div class="cart-list-button">
<a href="#" class="cart-btn" οnclick="addCart(${goods.id})">添加到购物车</a>
</div>
</div>
</div>
</div>`
}
function shouProduct(data
, totalCount
, currPage
, totalPage
) {
$list
= $(".shop-wrapper");
$list
.empty();
for (let i
= 0, len
= data
.length
; i
< len
; ++i
) {
$list
.append(getContent(data
[i
]));
}
$(".page-amount p").text("共搜索到数据：" + totalCount
+ " 条");
$pagination
= $(".pagination ul");
$pagination
.empty();
if (currPage
== 1) {
$pagination
.append('<li class="previous"><a href="#" οnclick=><i class="fa fa-angle-left"></i>上一页</a></li>');
} else {
$pagination
.append(`<li class="previous"><a href="#" οnclick="getProduct(${currPage-1})"><i class="fa fa-angle-left"></i>上一页</a></li>`);
}
if (totalPage
<= 5||(currPage
<3)) {
for (let i
= 1; i
<= totalPage
&&i
<5; ++i
) {
if (i
== currPage
) {
$pagination
.append(`<li class="current">${i}</li>`);
} else {
$pagination
.append(`<li><a href="#" οnclick="getProduct(${i})">${i}</a></li>`);
}
}
} else if(currPage
>=3){
$pagination
.append(`<li><a href="#" οnclick="getProduct(${currPage-2})">${currPage-2}</a></li>`);
$pagination
.append(`<li><a href="#" οnclick="getProduct(${currPage-1})">${currPage-1}</a></li>`);
$pagination
.append(`<li class="current">${currPage}</li>`);
if(currPage
+1<=totalPage
){
$pagination
.append(`<li><a href="#" οnclick="getProduct(${currPage+1})">${currPage+1}</a></li>`);
}
if(currPage
+2<=totalPage
){
$pagination
.append(`<li><a href="#" οnclick="getProduct(${currPage+2})">${currPage+2}</a></li>`);
}
}
if (currPage
== totalPage
) {
$pagination
.append('<li class="previous"><a href="#" οnclick=><i class="fa fa-angle-right"></i>下一页</a></li>');
} else {
$pagination
.append(`<li class="previous"><a href="#" οnclick="getProduct(${currPage+1})"><i class="fa fa-angle-right"></i>下一页</a></li>`);
}
}
$(function () {
checkUsername();
checkCart();
getProduct();
});
购物车
shopping-cart.html
<div class="cart-area">
<div class="container">
<div class="row">
<div class="col-lg-12">
<form action="#" class="cart-form">
<div class="cart-title">
<h5 class="last-title mt-50 mb-20">购物车
</h5>
</div>
<div class="table-desc">
<div class="cart-page table-responsive">
<table>
<thead>
<tr>
<th class="product-remove">选中
</th>
<th class="product-image">图片
</th>
<th class="product-name">产品名
</th>
<th class="product-price">产品价格
</th>
<th class="product-quantity">购买数量
</th>
<th class="product-remove">删除
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="product-remove"><input type="checkbox" name="" id=""></td>
<td class="product-image"><a href="#"><img src="assets/images/feature/feature-4.jpg" alt=""></a></td>
<td class="product-name"><a href="#">Natus erro at congue massa commodo sit dignissim
</a></td>
<td class="product-price">£65.00
</td>
<td class="product-quantity"><label>Quantity
</label> <input min="1" max="100" value="1" type="number" default="1"></td>
<td class="product-remove"><a href="#"><i class="fa fa-trash-o"></i></a></td>
</tr>
</tbody>
</table>
</div>
<div class="cart-submit">
<input type="checkbox" onclick="selectAll(this)" id="selAll"> <label for="selAll">全选
</label>
<button type="button" class="btn btn-info" onclick="saveAll()">保存信息
</button>
<button type="button" class="btn btn-success" onclick="buy()">购买
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
cart.js
function getProduct(ids
){
console
.log(ids
);
$
.ajax({
type
: "GET",
dataType
: "json",
url
: "/goods/gets",
traditional
: true,
data
:{"ids":ids
},
success
: function(result
) {
if (result
.status
== 200){
showData(result
.data
);
}else if(result
.status
== 404){
location
.href
="404.html";
return;
}else{
console
.log(result
.msg
);
return null;
}
},
error
: function() {
location
.href
="404.html";
return;
}
});
}
function getCartByUser(token
,ids
){
$
.ajax({
type
: "GET",
dataType
: "json",
url
: "/cart/getlist",
data
:{"ids":ids
},
traditional
: true,
beforeSend
: function (request
) {
request
.setRequestHeader("token", token
);
},
success
: function (result
) {
if (result
.status
==200){
showData(result
.data
.CartProductVoList
);
} else if (result
.status
== 404) {
location
.href
= "404.html";
return;
}else{
alert(result
.msg
);
}
},
error
: function () {
location
.href
="404.html";
return;
}
});
}
function getContent(good
,index
){
return `<tr><td class="product-id"><input type="checkbox" value="${good.id}"></td>
<td class="product-image"><a href="#"><img src="${good.product_main_image}" alt="" style="height:100px;width:100px;"></a></td>
<td class="product-name"><a href="#">${good.product_name}</a></td>
<td class="product-price">￥${good.product_price}</td>
<td class="product-quantity"><label>Quantity</label> <input min="1" max="${good.product_stock}" value="${good.quantity}" defaultValue="${good.quantity}" type="number"></td>
<td class="product-remove"><a href="#" οnclick="delCart(${good.id},${index})"><i class="fa fa-trash-o"></i></a></td></tr>`
}
function showData(data
){
if(isNull(data
)){
return;
}
$
.cookie("goodCartIdLen",data
.length
);
$table
=$(".table-desc tbody");
$table
.empty();
for(let i
=0, len
= data
.length
; i
< len
; ++i
){
$table
.append(getContent(data
[i
],i
));
}
}
function delCart(id
,index
){
let token
= sessionStorage
.getItem("token");
let len
= $
.cookie("goodCartIdLen")-1;
$
.cookie("goodCartIdLen",len
);
if (isNull(token
)) {
let idList
= $
.cookie("goodCartId").split(",");
idList
.splice(index
,1);
$(".table-desc tbody tr:eq("+index
+")").remove();
return ;
}
$
.ajax({
type
: "DELETE",
dataType
: "json",
url
: "/cart/del/"+id
,
beforeSend
: function (request
) {
request
.setRequestHeader("token", token
);
},
success
: function (result
) {
if (result
.status
==200){
$(".table-desc tbody tr:eq("+index
+")").remove();
return ;
} else if (result
.status
== 404) {
location
.href
= "404.html";
return;
}else{
alert(result
.msg
);
}
},
error
: function () {
location
.href
="404.html";
return;
}
});
}
function getData(){
let token
= sessionStorage
.getItem("token");
let ids
= $
.cookie("goodCartId");
let idList
;
if(isNull(ids
)){
idList
= [];
}else{
idList
= ids
.split();
}
if (isNull(token
)) {
getProduct(idList
);
} else {
getCartByUser(token
,idList
);
$
.cookie("goodCartId",null);
}
}
function selectAll(check
) {
$(".table-desc tbody input[type=checkbox]").prop("checked",check
.checked
);
}
$(function(){
checkUsername();
getData();
});
function saveCart(id
,num
,index
){
let token
= sessionStorage
.getItem("token");
if (isNull(token
)) {
alert("登录已过期，修改信息请先登录");
window
.location
.href
= "login.html";
return;
}
$
.ajax({
type
: "PUT",
dataType
: "json",
url
: "/cart/update/"+id
,
contentType
: "application/json; charset=utf-8",
data
: JSON.stringify({"num":num
}),
beforeSend
: function (request
) {
request
.setRequestHeader("token", token
);
},
success
: function (result
) {
if (result
.status
== 404) {
location
.href
= "404.html";
return;
} else if (result
.status
== 200) {
$(".table-desc tbody tr .product-quantity:eq("+index
+") input").attr("defaultValue",num
);
}
},
error
: function () {
location
.href
="404.html";
return;
}
});
}
function saveAll(){
$(".table-desc tbody tr").each(function(index
){
let defaultValue
= $(".table-desc tbody tr .product-quantity:eq("+index
+") input").attr("defaultValue");
let num
= $(".table-desc tbody tr .product-quantity:eq("+index
+") input").val();
console
.log("saveAll---"+defaultValue
+"---"+num
);
if (defaultValue
!= num
){
let id
= $(".table-desc tbody tr .product-id:eq("+index
+") input").val();
console
.log("id----"+id
);
saveCart(id
,num
,index
);
}
});
return false;
}
function buy(){
let token
= sessionStorage
.getItem("token");
if (isNull(token
)) {
alert("登录已过期，修改信息请先登录");
window
.location
.href
= "login.html";
return;
}
let a
= [];
$(".product-id input[type=checkbox]").each(function(index
){
if($(this).prop('checked')){
console
.log(index
+"---"+$('.product-quantity input:eq('+index
+')'));
a
.push({"id":$(this).val(),"quantity":$('.product-quantity input:eq('+index
+')').val()});
}
});
if (a
.length
== 0){
return ;
}
$
.ajax({
type
: "POST",
dataType
: "json",
url
: "/order/add",
contentType
: "application/json; charset=utf-8",
data
: JSON.stringify(a
),
beforeSend
: function (request
) {
request
.setRequestHeader("token", token
);
},
success
: function (result
) {
console
.log(result
);
if (result
.status
== 200) {
sessionStorage
.setItem("orderId",result
.data
);
if(confirm("前往订单详情页查看")){
location
.href
="orderDetail.html";
}else{
getCartByUser(token
);
}
} else if (result
.status
== 404) {
console
.log("buy---"+result
.msg
);
}
},
error
: function () {
console
.log("接口异常----buy");
return;
}
});
}
