代码拉取完成，页面将自动刷新
<!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">
<div class="fl logo"><span class="title">购物车</span></div>
</div>
<!--All goods-->
<div class="allgoods">
<h4>全部商品<span>11</span></h4>
<div class="cart-main">
<div class="yui3-g cart-th">
<div class="yui3-u-1-4"><input type="checkbox"/> 全部</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,index) in carts" :key="index">
<li class="yui3-u-1-24">
<input type="checkbox" name="" 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:70px ">
{{cart.title}}
<span v-for="(v,k,i) in JSON.parse(cart.ownSpec)" :key="i">
{{k}}：{{v}}
</span>
</span>
</div>
</div>
</li>
<li class="yui3-u-1-8"><span style="line-height:70px " class="price">{{ly.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">{{ly.formatPrice(cart.price*cart.num)}}</span>
</li>
<li class="yui3-u-1-8">
<a href="javascript:void(0)" @click="delCart(index)">删除</a><br/>
<a href="#none">移到我的关注</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="cart-tool">
<div class="select-all">
<input type="checkbox" name="" id="" value=""/>
<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>0</span>件商品</div>
<div class="sumprice">
<span><em>总价（不含运费） ：</em><i class="summoney">{{ly.formatPrice(totalPrice)}}</i></span>
<span><em>已节省：</em><i>-¥20.00</i></span>
</div>
<div class="sumbtn">
<a class="sum-btn" href="javascript:void(0)" @click="toOrderInfo">结算</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: {
ly,
carts: [],//存储购物车列表
selected: [],//用于记录选中的商品
},
created() {
this.loadCarts();
},
computed: {
//计算总价格
//数组的reduce()方法：
/**
* 参数一： 一个函数（使用箭头函数）代表运算逻辑
* 函数的两个参数
* c1: 用于存储累计的结果
* c2: 当前需要运算的元素
* 参数二： 默认值
*/
totalPrice() {
return this.selected.reduce((c1, c2) => c1 + c2.price * c2.num, 0);
}
},
methods: {
//查询购物车
loadCarts() {
//判断用户是否登录
ly.http.get('/auth/verify').then(resp => {
//合并未登录的购物车
//1.取出LocalStorage的购物车商品
let carts = ly.store.get('LY_CART') || [];
// [ {xxx:xxx},... ]
//2.判断 本地有无商品
if (carts && carts.length > 0) {
//2.1 本地有商品，把数据传递到后台，存储在redis，查询redis数据
ly.http.post('/cart/list', carts).then(resp => {
//删除本地的购物车数据
ly.store.del('LY_CART');
//合并后再查询redis数据库
this.loadLoginCarts();
}).catch(e => {
console.log('合并购物车失败');
})
} else {
//2.2 本地没有商品，直接查询redis数据
this.loadLoginCarts();
}
}).catch(e => {
//未登录
//从LocalStorage取出购物车数据
let carts = ly.store.get('LY_CART') || [];
//赋值给data
this.carts = carts;
//初始化选中所有商品
this.selected = this.carts;
})
},
//查询redis数据
loadLoginCarts() {
ly.http.get('/cart/list').then(resp => {
this.carts = resp.data;
//初始化选中所有商品
this.selected = this.carts;
}).catch(e => {
console.log('查询购物车失败');
})
},
//添加数量
increment(cart) {
//添加数量
cart.num++;
//判断用户是否登录
ly.http.get('/auth/verify').then(resp => {
//已经登录
this.updateNum(cart.skuId, cart.num);
}).catch(e => {
//未登录
//把更新的数量保存到LocalStorage
ly.store.set('LY_CART', this.carts);
})
},
//减少数量
decrement(cart) {
if (cart.num <= 1) {
return;
}
//减少数量
cart.num--;
//判断用户是否登录
ly.http.get('/auth/verify').then(resp => {
//已经登录
this.updateNum(cart.skuId, cart.num);
}).catch(e => {
//未登录
//把更新的数量保存到LocalStorage
ly.store.set('LY_CART', this.carts);
})
},
//更新商品数量
updateNum(skuId, num) {
ly.http.put('/cart?skuId=' + skuId + "&num=" + num).then(resp => {
}).catch(e => {
console.log('更新数量失败');
})
},
//删除商品
delCart(index) {
//判断用户是否登录
ly.http.get('/auth/verify').then(resp => {
//已经登录
ly.http.delete('/cart?skuId=' + this.carts[index].skuId).then(resp => {
//把页面元素删除
this.carts.splice(index, 1);
}).catch(e => {
console.log('删除购物车失败');
})
}).catch(e => {
//未登录
//根据下标从数组中删除元素
/**
* splice方法
* 参数一：删除的开始下标位置
* 参数二：删除元素个数
*/
this.carts.splice(index, 1);
ly.store.set('LY_CART', this.carts);
})
},
//订单结算
toOrderInfo() {
//1.把选择的商品存入LocalStorage
ly.store.set('selectedCarts', this.selected);
//2.跳转到结算页面
window.location.href = "http://www.leyou.com/getOrderInfo.html";
}
},
components: {
shortcut: () => import("/js/pages/shortcut.js")
}
})
</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 助手
