<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<link rel="stylesheet" href="assets/css/cssreset.css">
<link rel="stylesheet" href="css/login.css">
<link rel="stylesheet" href="assets/css/cosmetics.css">
<link rel="stylesheet" href="assets/font-awesome-4.5.0/css/font-awesome.css">
<link rel="stylesheet" href="assets/css/bootstrap.css">
<style>
.content{
width: 1903px;
height: auto;
background: url("assets/img/bg.jpg");
}
.content{
background: url("assets/img/bg.jpg");
background-size: cover;
width: 100%;
height: auto;
}
.content .title{
width: 1200px;
height: 70px;
margin: 0 auto;
}
.content .title ul{
width: 700px;
height: 100%;
display: flex;
margin-left: 60px;
}
.content .title ul li{
flex: 1;
text-align: center;
line-height: 70px;
font-size: 20px;
font-weight: normal;
cursor: pointer;
}
.content .title ul li a{
color: #999999;
}
.content .title ul li a:hover{
color: red;
text-decoration: none;
}
.content .title ul li:nth-child(1){
border-bottom:2px solid black;
}
.content .title ul li:nth-child(1) a{
color: black;
font-weight: bold;
}
.content .main{
width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-around;
}
.content .main .right{
width: 300px;
height: 800px;
}
.content .main .right .concat{
width: 100%;
height: 420px;
background-color: white;
box-shadow:0 0 12px #ccc ;
}
.content .main .right .concat h2{
font-size: 16px;
line-height: 40px;
font-weight: normal;
text-indent: 1em;
padding-top: 20px;
}
.content .main .right .concat p{
text-indent: 1em;
font-size: 14px;
line-height: 40px;
color: #999999;
}
.content .main .right .concat .dapartment:nth-child(3){
margin-top: 20px;
}
.content .main .right .concat .dapartment>span{
display: inline-block;
margin-left: 40px;
line-height: 20px;
}
.content .main .right .concat .email{
margin-top: 30px;
display: inline-block;
}
.content .main .right .special{
margin-top: 20px;
height: 230px;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
background-color: white;
box-shadow:0 0 12px #ccc ;
}
.content .main .right .special h1{
font-size: 16px;
font-weight: normal;
margin-left: 16px;
width: 268px;
line-height: 40px;
border-bottom: 1px solid #ccc;
}
.content .main .right .special p{
margin-left: 16px;
}
.content .left{
width: 800px;
box-shadow:0 0 12px #ccc ;
}
.shopping-car-container {
padding: 50px 40px;
width: 800px;
}
.shopping-car-container .car-headers-menu {
border-bottom: 1px solid #f5f5f5;
padding: 0 15px;
}
.shopping-car-container .panel-body {
padding: 15px 0;
}
#checkAll {
display: inline-block;
width: 30px;
position: absolute;
top: 0;
left: 20px;
}
.shopping-car-container .car-menu label{
width: 60px;
height: 30px;
display: block;
position: relative;
}
/*
商品区
* */
.shopping-car-container .goods-content {
margin-top: 15px;
}
.shopping-car-container .goods-content h1{
text-align: center;
margin-top: 80px;
}
.shopping-car-container .goods-content a{
text-align: center;
display: block;
width: 100%;
margin: 40px;
}
.shopping-car-container .goods-content .goods-item {
margin-top: 0;
}
.shopping-car-container .goods-content .goods-item .car-goods-info {
height: 150px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.shopping-car-container .goods-content .goods-item .goods-image-column img,
.shopping-car-container .goods-content .goods-item .goods-image-column span {
display: block;
float: left;
}
.shopping-car-container .goods-content .goods-item .goods-image-column span {
width: calc(100% - 100px);
box-sizing: border-box;
text-indent: 2rem;
line-height: 25px;
padding: 10px;
}
.goods-item{
margin-top: 0px;
border: none;
}
.goods-item .panel-body{
border: none;
}
.goods-operate{
width: 54px;
}
.goods-price {
color: red;
font-weight: bolder;
align-items: center;
}
.form-control {
text-align: center;
}
.goods-counts{
width: 120px;
}
.goods-counts .btn{
border-radius: 50%;
outline: none;
}
.single-total {
color: red;
font-weight: bold;
}
.goods-params {
display: flex;
flex-direction: column;
}
.goods-params p:nth-child(1){
color: black;
font-size: 12px;
font-weight: bold;
}
.goods-params p:nth-child(2){
font-size: 12px;
color: darkgray;
}
.bottom-menu {
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin-left: -20px;
}
.bottom-menu span {
vertical-align: text-bottom;
position: absolute;
left: 40px;
top: 0;
display: block;
width: 200px;
}
#deleteMulty {
color: cornflowerblue;
cursor: pointer;
vertical-align: text-bottom;
}
.bottom-menu-include {
background: #e5e5e5;
}
#selectGoodsCount {
color: orangered;
font-size: 16px;
font-weight: bolder;
width: 20px;
display: block;
left: 60px;
}
#selectGoodsMoney {
color: orangered;
font-size: 16px;
font-weight: bolder;
}
.panel-default .submitData {
background: orangered;
color: white;
cursor: pointer;
font-weight: bolder;
height: 58px;
position: absolute;
width: 90px;
font-size: 14px;
right: 0;
top: 0;
}
.panel-default .submitDis {
background: #B0B0B0;
cursor: no-drop;
}
.shopping-car-container .panel-default {
position: relative;
}
.content .main .left .footer{
width: 100%;
height: 200px;
background-color:#F6F6F6;
}
.content .main .left .footer .three{
width: 720px;
height: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.content .main .left .footer .three .safe{
width: 184px;
height: 184px;
}
.content .main .left .footer .three h2{
font-size: 18px;
font-weight: normal;
line-height: 35px;
}
.content .main .left .footer .three p{
font-size: 14px;
color: #767676;
line-height: 20px;
}
.content .main .left .footer .three .paystyle{
width: 184px;
height: 184px;
}
.content .main .left .footer .three .paystyle img{
margin-left: 20px;
margin-top: 20px;
}
.content .main .left .footer .three .return{
width: 184px;
height: 184px;
}
</style>
</head>
<body>
<div class="cartTop"></div>
<div class="content serve">
<div class="title">
<ul>
<li><a href="">购物袋</a></li>
<li><a href="">订单提交</a></li>
<li><a href="">支付</a></li>
</ul>
</div>
<div class="main">
<div class="left">
<div class="shopping-car-container">
<div class="goods-content">
<h1>很遗憾，你还未选购商品</h1>
<a href="http://localhost:8080/cosmetics.html">点此选购商品</a>
</div>
<div class="panel panel-default">
<div class="panel-body bottom-menu-include">
<div class="col-md-1 check-all-bottom bottom-menu">
<label>
<input type="checkbox" id="checked-all-bottom" />
<span id="checkAllBottom">全选</span>
</label>
</div>
<div class="col-md-6 bottom-menu">
</div>
<div class="col-md-2 bottom-menu">
<span>已选商品 <span id="selectGoodsCount">0</span> 件</span>
</div>
<div class="col-md-1 bottom-menu">
<span>合计：<span id="selectGoodsMoney">0.00</span></span>
</div>
<div class="submitData">
提交订单
</div>
</div>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="deleteItemTip" aria-labelledby="gridSystemModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="gridSystemModalLabel">提示</h4>
</div>
<div class="modal-body">
确认删除此商品？
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary deleteSure">确定</button>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="three">
<div class="safe">
<h2>信息安全保障</h2>
<p>您的数据包括订单信息都将通过加密的方式传输。</p>
</div>
<div class="paystyle">
<h2>支付方式</h2>
<p>我们支持支付宝，网银支付以及微信支付</p>
<img src="assets/img/wechat.jpg" alt="">
<img src="assets/img/alipay.jpg" alt="">
</div>
<div class="return">
<h2>信息安全保障</h2>
<p>您可以享受7天内无理由退货。如需帮助，请拨打客服热线
<br>
迪奥时装：400-122-6622
<br>
迪奥美妆：400-921-8833
</p>
</div>
</div>
</div>
</div>
<div class="right">
<div class="concat">
<h2>您可以通过以下方式联系到我们
</h2>
<div class="dapartment">
<p><i class="fa fa-weixin"></i> <span>迪奥时装</span>
</p>
<span>
客户服务热线：400 122 66 22</span>
<br>
<span>
(周一至周日 10:00 - 22:00)
</span>
<br>
<span class="email">
电子邮件:
</span>
<br>
<span>
<a href="">
[email protected]
</a>
</span>
</div>
<div class="dapartment">
<p><i class="fa fa-weixin"></i> <span>迪奥美妆</span>
</p>
<span>
客户服务热线：400 921 88 33</span>
<br>
<span>
(周一至周日 9:00 - 21:00)
</span>
<br>
<span class="email">
电子邮件:
</span>
<br>
<span>
<a href="">[email protected]
</a>
</span>
</div>
</div>
<div class="special">
<h1>Dior迪奥官网购物的特殊礼遇 </h1>
<p><b>免配送费</b></p>
<p><b>Dior迪奥美妆订单配以试用装礼赠</b></p>
<p><b>Dior迪奥艺术包装</b></p>
</div>
</div>
</div>
</div>
</div>
<div class="cartFooter"></div>
</body>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/ajax.js"></script>
<script src="assets/js/jquery.cookie.js"></script>
<script src="assets/js/cookie.js"></script>
<script src="assets/js/jquery-menu.js"></script>
<script src="js/login.js"></script>
<script>
$(".cartTop").load("http://localhost:8080/public.html .log-h",function () {
$(".top").find("button").on("click",function () {
$(".top").css("display","none")
})
$(".cartTop").find(".login").on("click",function () {
if($.cookie("onoff")){
window.location.href="http://localhost:8080/personcenter.html"
}
else{
alert("您还未登录，请先登录")
window.location.href='http://localhost:8080/login.html'
}
});
$(".cartTop").find(".fa-shopping-bag").on("click",function () {
if($.cookie("onoff")){
window.location.href="http://localhost:8080/car.html"
}
else{
alert("您还未登录，请先登录")
window.location.href='http://localhost:8080/login.html'
}
});
})
$(".cartFooter").load("http://localhost:8080/public.html .log-f",function () {
$(".footer").pull({ //课下再看看
li:$(".list").find("li"),
menu:$(".footer").find(".menu"),
list:$(".footer").find(".list"),
h2:$(".footer").find("h2"),
})//下拉地点搜索菜单
});
</script>
<script>
class Cart{
constructor(){
this.content=document.querySelector(".goods-content")
this.all=document.querySelector("#checked-all-bottom")
this.url="http://localhost:8080/assets/data/cosmetics.json";
this.load();
this.addEvent()
}
addEvent(){
var that=this;
$(".submitData").on("click",function () {
{
that.agoods=[];
var abox=document.querySelectorAll(".goods-list-item")
console.log(abox.length)
for(var i=0;i<abox.length;i++){
if(abox[i].checked){
that.agoods.push({
id:abox[i].getAttribute('index'),
num:abox[i].getAttribute('num')
});
console.log(that.agoods)
}
}
that.setCookie()
}
})
this.content.addEventListener("click",function (eve) {
var e=eve||window.event;
var target=e.target||e.srcElement;
if(target.className=="btn btn-danger item-delete"){
that.id = target.getAttribute("index");//要把id也改变了
target.parentNode.parentNode.parentNode.remove();
var subnum=0;
var abox=document.querySelectorAll(".goods-list-item");
for(var i=0;i<abox.length;i++){ //关键思想：难点！！！！！！！！！！！！！！！
if(abox[i].checked){
subnum++;
}
}
if(subnum==abox.length){
that.all.checked=true;
}else{
that.all.checked=false;
}
if(target.parentNode.parentNode.firstElementChild.firstElementChild.firstElementChild.checked){
$("#selectGoodsMoney").text(parseFloat( $("#selectGoodsMoney").text())-parseFloat(target.parentNode.parentNode.lastElementChild.previousElementSibling.lastElementChild.innerHTML));
$("#selectGoodsCount").text(parseInt($("#selectGoodsCount").text())-parseInt(target.parentNode.parentNode.lastElementChild.previousElementSibling.previousElementSibling.firstElementChild.firstElementChild.nextElementSibling.value))
}
that.removeCookie();
}
if(target.className=="btn btn-default car-add"){
that.id = target.getAttribute("index");
console.log(that.id)
target.parentNode.previousElementSibling.value=parseInt(target.parentNode.previousElementSibling.value)+1
console.log( target.parentNode)
if(target.parentNode.parentNode.parentNode.parentNode.firstChild.nextSibling.firstChild.nextSibling.firstChild.checked){
$("#selectGoodsMoney").text(parseFloat( $("#selectGoodsMoney").text())+parseFloat(parseFloat($(target).attr("price"))));
$("#selectGoodsCount").text(parseInt($("#selectGoodsCount").text())+1)
}
var p=parseFloat($(target).attr("price"))
var n=parseFloat(target.parentNode.previousElementSibling.value)
target.parentNode.parentNode.parentNode.nextSibling.nextSibling.lastChild.innerHTML=p*n;//单个总价
that.count=parseFloat(target.parentNode.previousElementSibling.value)//单个商品num
that.updateCookie()
}
if(target.className=="btn btn-default car-decrease"){
that.id = target.getAttribute("index");
console.log(that.id)
target.parentNode.nextSibling.nextSibling.value=parseInt( target.parentNode.nextSibling.nextSibling.value)-1;
if(target.parentNode.nextSibling.nextSibling.value>=1){
if(target.parentNode.parentNode.parentNode.parentNode.firstChild.nextSibling.firstChild.nextSibling.firstChild.checked){
$("#selectGoodsMoney").text(parseFloat( $("#selectGoodsMoney").text())-parseFloat(parseFloat($(target).attr("price"))));
$("#selectGoodsCount").text(parseInt($("#selectGoodsCount").text())-1)
}
}
if(target.parentNode.nextSibling.nextSibling.value<=1){
target.parentNode.nextSibling.nextSibling.value=1;
}
var p=parseFloat($(target).attr("price"))
var n= target.parentNode.nextSibling.nextSibling.value
target.parentNode.parentNode.parentNode.nextSibling.nextSibling.lastChild.innerHTML=p*n;
that.count=parseFloat(target.parentNode.nextSibling.nextSibling.value)
that.updateCookie()
}
if(target.id="#checked"){
var abox = document.querySelectorAll(".goods-list-item");
var subnum=0;
if(target.checked){
$("#selectGoodsMoney").text(parseFloat( $("#selectGoodsMoney").text())+parseFloat(target.parentNode.parentNode.parentNode.lastChild.previousSibling.previousSibling.previousSibling.lastChild.innerHTML));
$("#selectGoodsCount").text(parseFloat($("#selectGoodsCount").text())+parseFloat(target.parentNode.parentNode.parentNode.lastChild.previousSibling.previousSibling.previousSibling.previousElementSibling.children[0].children[1].value))
}
else{
$("#selectGoodsMoney").text(parseFloat( $("#selectGoodsMoney").text())-parseFloat(target.parentNode.parentNode.parentNode.lastChild.previousSibling.previousSibling.previousSibling.lastChild.innerHTML));
$("#selectGoodsCount").text(parseFloat($("#selectGoodsCount").text())-parseFloat(target.parentNode.parentNode.parentNode.lastChild.previousSibling.previousSibling.previousSibling.previousElementSibling.children[0].children[1].value))
}
for(var i=0;i<abox.length;i++){
if(abox[i].checked){
subnum++;
}
}
if(subnum==abox.length){
that.all.checked=true;
}else{
that.all.checked=false;
}
}
});
this.all.addEventListener("click",function () {
if(that.all.checked==true){
that.display();
$("#selectGoodsMoney").text(that.rmb);
$("#selectGoodsCount").text(that.num);
var abox = document.querySelectorAll(".goods-list-item");
for (var i = 0; i < abox.length; i++) {
abox[i].checked = true;
}
}
else{
$("#selectGoodsMoney").text(0);
$("#selectGoodsCount").text(0);
var abox = document.querySelectorAll(".goods-list-item");
for (var i = 0; i < abox.length; i++) {
abox[i].checked = false;
}
}
})
}
setCookie(){
setCookie("indent",JSON.stringify(this.agoods))
setCookie("countmoney",$("#selectGoodsMoney").text())
this.other()//要写在setcookie后面，否则异步
}
other（）{
if(that.agoods.length>0){
window.location.href="http://localhost:8080/indent.html"}}
updateCookie(){
var i = 0;
// 遍历数组，找到符合条件的数据
var onoff = this.cosmetics.some((val,index)=>{//这里的val是cookie中的json的每一个对象。
i = index;
return val.id == this.id;//val.id是cookie中的id
});
if(onoff){
// 找到符合的数据之后，更新数组中的数据
this.cosmetics[i].num = this.count;//这里的this.val是输入框总的值
}
// 将数组再设置回cookie
setCookie("cosmetics",JSON.stringify(this.cosmetics))
} //更新
removeCookie(){
var i=0;
var onoff=this.cosmetics.some((val,index)=>{ //val是数组对象中中，每一个对象。
i=index;//每次将传达的索引存出来。就是所点击的那个id在cookie数组中拍的那个位置。
return val.id==this.id;//返回val的id是否等当前点击的id；如果相等返回true，同时index停止往前走。
})
if(onoff){ //找到相同的了。
this.cosmetics.splice(i,1)
}
setCookie("cosmetics",JSON.stringify(this.cosmetics))
//更改了原来的cookie；
} //删除
load(){
ajax({
url:this.url,
success:res=>{
this.res = JSON.parse(res);
console.log(this.res);
this.getCookie();
}
})
} //请求ajax
getCookie(){
this.cosmetics=getCookie("cosmetics")?JSON.parse(getCookie("cosmetics")):[];
this.display();
} //得到cookie
display(){
var goodsHtml = ""
this.rmb=0;
this.num=0;
for(var i=0;i<this.res.length;i++){
for(var j=0;j<this.cosmetics.length;j++){
if(this.res[i].id==this.cosmetics[j].id){
this.rmb+=this.res[i].singleGoodsMoney* this.cosmetics[j].num;
this.num+=(this.cosmetics[j].num*1)
goodsHtml += `<div class="goods-item" index="${this.cosmetics[j].id}">
<div class="panel panel-default">
<div class="panel-body">
<div class="col-md-1 car-goods-info">
<label><input type="checkbox" class="goods-list-item" title=${this.res[i].tip1} img="${this.res[i].url}" num="${this.cosmetics[j].num}" index="${this.res[i].id}" ap="${this.num * this.res[i].price}" id="checked" /></label>
</div>
<div class="col-md-3 car-goods-info goods-image-column">
<img class="goods-image" src="${this.res[i].url}" style="width: 100px; height: 100px;" />
</div>
<div class="col-md-3 car-goods-info goods-params">${this.res[i].tip2}</div>
<div class="col-md-1 car-goods-info goods-price"><span>￥</span><span class="single-price">${this.res[i].price}</span></div>
<div class="col-md-1 car-goods-info goods-counts">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default car-decrease" price="${this.res[i].price}" index="${this.res[i].id}">-</button>
</div>
<input type="text" style="width: 50px" class="form-control goods-count" value=${this.cosmetics[j].num}>
<div class="input-group-btn">
<button type="button" class="btn btn-default car-add" index="${this.res[i].id}" price="${this.res[i].price}">+</button>
</div>
</div>
</div>
<div class="col-md-1 car-goods-info goods-money-count"><span>￥</span><span class="single-total">${this.res[i].singleGoodsMoney* this.cosmetics[j].num} </span></div>
<div class="col-md-2 car-goods-info goods-operate">
<button type="button" class="btn btn-danger item-delete" index="${this.res[i].id}">删除</button>
</div>
</div>
</div>
</div>`
}
}
}
if(!goodsHtml){
console.log("你好呢" )
}
else{
$(".goods-content")[0].innerHTML= goodsHtml ;
}
} //渲染页面
}
new Cart()
</script>
//直接修改购物车物品数量思想：修改了数量存入cookie，如果单选框被勾上了，那么修改总价和总数。总价是加上（物品数量修改后的价格减去修改前的价格。）总数是加上（物品数量修改后的减去修改前的）；实现太麻烦了吧。。。
长风破浪会有时，直挂云帆济沧海