代码拉取完成，页面将自动刷新
同步操作将从 liuwang/yitao-portal 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<title>易淘商城--购物车页面</title>
<link rel="stylesheet" type="text/css" href="css/webbase.css"/>
<link rel="stylesheet" type="text/css" href="css/pages-cart.css"/>
</head>
<body>
<div id="cartApp">
<div class="top">
<shortcut/>
</div>
<div class="cart py-container">
<!--logoArea-->
<div class="logoArea">
<a href="index.html"><div class="fl logo"><span class="title">购物车</span></div></a>
</div>
<!--All goods-->
<div class="allgoods">
<h4>全部商品</h4>
<div class="cart-main">
<div class="yui3-g cart-th">
<div class="yui3-u-1-4"><input ref="selectAllTop" type="checkbox" @click="selectAll()"/> 全部</div>
<div class="yui3-u-1-4">商品</div>
<div class="yui3-u-1-8">单价（元）</div>
<div class="yui3-u-1-8">数量</div>
<div class="yui3-u-1-8">小计（元）</div>
<div class="yui3-u-1-8">操作</div>
</div>
<div class="cart-item-list">
<div class="cart-body">
<div class="cart-list">
<ul class="goods-list yui3-g" v-for="(cart,i) in carts" :key="i">
<li class="yui3-u-1-24">
<input type="checkbox" @click="selectSingle()" v-model="selected" :value="cart" />
</li>
<li class="yui3-u-11-24">
<div class="good-item">
<div class="item-img"><img :src="cart.image" width="80px" height="80px"/></div>
<div class="item-msg">
<span style="line-height:23px">
{{cart.title | ellipsis}}<br/>
<span v-for="(v,k) in cart.ownSpec" :key="k">
{{k}}:<span style="color: #c81623;">{{v}}<span><br/>
</span>
</span>
</div>
</div>
</li>
<li class="yui3-u-1-8"><span style="line-height:70px " class="price">{{yt.formatPrice(cart.price)}}</span></li>
<li class="yui3-u-1-8" style="padding-top: 20px">
<a href="javascript:void(0)" class="increment mins" @click="decrement(cart)">-</a>
<input autocomplete="off" type="text" v-model="cart.num" minnum="1" class="itxt" />
<a href="javascript:void(0)" class="increment plus" @click="increment(cart)">+</a>
</li>
<li class="yui3-u-1-8"><span style="line-height:70px " class="sum">{{yt.formatPrice(cart.price*cart.num)}}</span></li>
<li class="yui3-u-1-8">
<a href="#none" @click="deleteCart(i)">删除</a><br />
<a href="#none">移到我的关注</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="cart-tool">
<div class="select-all">
<input type="checkbox" @click="selectAll" ref="selectAllBottom"/>
<span>全选</span>
</div>
<div class="option">
<a href="#none">删除选中的商品</a>
<a href="#none">移到我的关注</a>
<a href="#none">清除下柜商品</a>
</div>
<div class="toolbar">
<div class="chosed">已选择<span>{{totalNum}}</span>件商品</div>
<div class="sumprice">
<span><em>总价（不含运费） ：</em><i class="summoney">{{totalPrice}}</i></span>
<!--<span><em>已节省：</em><i>-¥20.00</i></span>-->
</div>
<div class="sumbtn">
<a class="sum-btn" @click.prevent="toOrderInfo" target="_blank">结算</a>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="deled">
<span>已删除商品，您可以重新购买或加关注：</span>
<div class="cart-list del">
<ul class="goods-list yui3-g">
<li class="yui3-u-1-2">
<div class="good-item">
<div class="item-msg">Apple Macbook Air 13.3英寸笔记本电脑 银色（Corei5）处理器/8GB内存</div>
</div>
</li>
<li class="yui3-u-1-6"><span class="price">8848.00</span></li>
<li class="yui3-u-1-6">
<span class="number">1</span>
</li>
<li class="yui3-u-1-8">
<a href="#none">重新购买</a>
<a href="#none">移到我的关注</a>
</li>
</ul>
</div>
</div>
<div class="liked">
<ul class="sui-nav nav-tabs">
<li class="active">
<a href="#index" data-toggle="tab">猜你喜欢</a>
</li>
<li>
<a href="#profile" data-toggle="tab">特惠换购</a>
</li>
</ul>
<div class="clearfix"></div>
<div class="tab-content">
<div id="index" class="tab-pane active">
<div id="myCarousel" data-ride="carousel" data-interval="4000" class="sui-carousel slide">
<div class="carousel-inner">
<div class="active item">
<ul>
<li>
<img src="img/like1.png"/>
<div class="intro">
<i>Apple苹果iPhone 6s (A1699)</i>
</div>
<div class="money">
<span>$29.00</span>
</div>
<div class="incar">
<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
class="car"></i><span class="cartxt">加入购物车</span></a>
</div>
</li>
<li>
<img src="img/like2.png"/>
<div class="intro">
<i>Apple苹果iPhone 6s (A1699)</i>
</div>
<div class="money">
<span>$29.00</span>
</div>
<div class="incar">
<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
class="car"></i><span class="cartxt">加入购物车</span></a>
</div>
</li>
<li>
<img src="img/like3.png"/>
<div class="intro">
<i>Apple苹果iPhone 6s (A1699)</i>
</div>
<div class="money">
<span>$29.00</span>
</div>
<div class="incar">
<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
class="car"></i><span class="cartxt">加入购物车</span></a>
</div>
</li>
<li>
<img src="img/like4.png"/>
<div class="intro">
<i>Apple苹果iPhone 6s (A1699)</i>
</div>
<div class="money">
<span>$29.00</span>
</div>
<div class="incar">
<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
class="car"></i><span class="cartxt">加入购物车</span></a>
</div>
</li>
</ul>
</div>
<div class="item">
<ul>
<li>
<img src="img/like1.png"/>
<div class="intro">
<i>Apple苹果iPhone 6s (A1699)</i>
</div>
<div class="money">
<span>$29.00</span>
</div>
<div class="incar">
<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
class="car"></i><span class="cartxt">加入购物车</span></a>
</div>
</li>
<li>
<img src="img/like2.png"/>
<div class="intro">
<i>Apple苹果iPhone 6s (A1699)</i>
</div>
<div class="money">
<span>$29.00</span>
</div>
<div class="incar">
<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
class="car"></i><span class="cartxt">加入购物车</span></a>
</div>
</li>
<li>
<img src="img/like3.png"/>
<div class="intro">
<i>Apple苹果iPhone 6s (A1699)</i>
</div>
<div class="money">
<span>$29.00</span>
</div>
<div class="incar">
<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
class="car"></i><span class="cartxt">加入购物车</span></a>
</div>
</li>
<li>
<img src="img/like4.png"/>
<div class="intro">
<i>Apple苹果iPhone 6s (A1699)</i>
</div>
<div class="money">
<span>$29.00</span>
</div>
<div class="incar">
<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
class="car"></i><span class="cartxt">加入购物车</span></a>
</div>
</li>
</ul>
</div>
</div>
<a href="#myCarousel" data-slide="prev" class="carousel-control left">‹</a>
<a href="#myCarousel" data-slide="next" class="carousel-control right">›</a>
</div>
</div>
<div id="profile" class="tab-pane">
<p>特惠选购</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="./js/vue/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<script type="text/javascript">
var cartVm = new Vue({
el: "#cartApp",
data: {
yt,
carts:[], //购物车数据
selected:[] //记录选中的商品
}, // 标题长度的过滤器
filters: {
ellipsis (value) {
if (!value) return ''
if (value.length > 43) {
return value.slice(0,43) + '...'
}
return value
}
},
components: {
shortcut: () => import("/js/pages/shortcut.js")
},
created(){
this.loadCarts();
},
computed:{
totalPrice(){
return yt.formatPrice(this.selected.reduce((c1,c2) => c1+c2.num*c2.price,0))
},
totalNum(){
return this.selected.reduce((c1,c2) => c1+c2.num,0);
}
},
methods:{
loadCarts() {
//1.先判断登录状态
yt.verifyUser().then(res => {
// 获取本地购物数据
this.carts = yt.store.get("carts") || [];
// 添加到添加到购物车
yt.http.post("/cart/batch",this.carts).then(() =>{
// 清空本地购物车数据
yt.store.del("carts");
});
//2.已经登录
yt.http.get("/cart/list").then(({data}) => {
this.carts = data;
this.carts.forEach(s => {
s.ownSpec = eval("("+s.ownSpec+")");
});
this.selected = this.carts;
this.$refs.selectAllTop.checked = true;
this.$refs.selectAllBottom.checked = true;
}).catch(() => {
console.log("查询失败")
})
}).catch(() => {
//3.未登陆
this.carts = yt.store.get("carts") || [];
this.carts.forEach(s => {
s.ownSpec = eval("("+s.ownSpec+")");
});
this.selected = this.carts;
this.$refs.selectAllTop.checked = true;
this.$refs.selectAllBottom.checked = true;
})
},
increment(c){
c.num++;
yt.verifyUser().then(() =>{
//已经登录，向后台发起请求
yt.http.put("/cart",yt.stringify({id:c.skuId,num:c.num}))
}).catch(() => {
//未登录，直接操作本地数据库
yt.store.set("carts",this.carts);
})
},
decrement(c){
if (c.num <= 1){
return;
}
c.num--;
yt.verifyUser().then(() =>{
//已经登录，向后台发起请求
yt.http.put("/cart",yt.stringify({id:c.skuId,num:c.num}))
}).catch(() => {
//未登录，直接操作本地数据库
yt.store.set("carts",this.carts);
})
},
deleteCart(i){
yt.verifyUser().then(() =>{
//已经登录，向后台发起请求
yt.http.delete("/cart/"+this.carts[i].skuId).then(() => {
this.carts.splice(i,1);
});
//console.log(this.carts[i].skuId)
}).catch(() => {
//未登录，直接操作本地数据库
this.carts.splice(i,1);
yt.store.set("carts",this.carts);
})
},
selectAll(){
if(this.selected.length !== yt.store.get("carts").length){
this.selected = this.carts;
}else {
this.selected = [];
}
},
selectSingle(){
if(this.selected.length !== yt.store.get("carts").length - 1){
this.$refs.selectAllTop.checked=false;
this.$refs.selectAllBottom.checked=false;
}else{
this.$refs.selectAllTop.checked=true;
this.$refs.selectAllBottom.checked=true;
}
},
toOrderInfo(){
//1.判断是否登录
yt.verifyUser().then(() => {
//2.已登录
//2.1 保存已经选购的购物车记录到localStorage
yt.store.set("selectedCarts",this.selected);
//2.2 跳转到订单页面
window.location.href = "/getOrderInfo.html";
}).catch(() => {
//3.未登录
window.location.href = "/login.html?returnUrl=" + window.location.href;
})
}
}
})
</script>
<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/widget/nav.js"></script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手