509 lines
17 KiB
HTML
509 lines
17 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
<title>购物车页面</title>
|
||
<link rel="shortcut icon" href="img/foodie.ico"/>
|
||
|
||
<link href="AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css" />
|
||
<link href="basic/css/demo.css" rel="stylesheet" type="text/css" />
|
||
<link href="css/cartstyle.css" rel="stylesheet" type="text/css" />
|
||
<link href="css/optstyle.css" rel="stylesheet" type="text/css" />
|
||
<link href="css/lee.css" rel="stylesheet" type="text/css" />
|
||
|
||
<script type="text/javascript" src="js/jquery.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.9/dist/vue.js"></script>
|
||
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="shopcart">
|
||
<!--顶部导航条 -->
|
||
<div class="am-container header">
|
||
<ul class="message-l">
|
||
<div class="topMessage">
|
||
<div class="menu-hd" v-show="!userIsLogin">
|
||
<a href="login.html" target="_top" class="h">亲，请登录</a>
|
||
<a href="register.html" target="_top">免费注册</a>
|
||
</div>
|
||
<div class="menu-hd" v-show="userIsLogin">
|
||
<span style="color: #d2364c">欢迎，{{userInfo.username}}</span>
|
||
</div>
|
||
</div>
|
||
</ul>
|
||
<ul class="message-r">
|
||
<div class="topMessage home">
|
||
<div class="menu-hd"><a href="index.html" target="_top" class="h">商城首页</a></div>
|
||
</div>
|
||
<div class="topMessage my-shangcheng">
|
||
<div class="menu-hd MyShangcheng"><a href="javascript:void(0);" @click="goUserCenter">
|
||
<i class="am-icon-user am-icon-fw"></i>个人中心</a></div>
|
||
</div>
|
||
</ul>
|
||
</div>
|
||
|
||
<!--悬浮搜索框-->
|
||
<div class="nav white">
|
||
<!-- <div class="logo"><img src="images/logo.png" /></div> -->
|
||
<div class="logoBig">
|
||
<li><a href="index.html"><img src="images/logobig.png" /></a></li>
|
||
</div>
|
||
<div class="search-bar pr">
|
||
<a name="index_none_header_sysc" href="#"></a>
|
||
<form>
|
||
<input id="searchInput" v-model="keywords" name="index_none_header_sysc" type="text"
|
||
placeholder="搜索" autocomplete="off">
|
||
<input id="ai-topsearch" @click="doSearch" class="submit am-btn" value="搜索" index="1">
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<div class="clear"></div>
|
||
<!--购物车 -->
|
||
<div class="concent" >
|
||
|
||
<div class="cart-attention" v-show="!userIsLogin" style="margin-top: 10px">
|
||
<i style="margin-right: 10px;"><img src="img/omg.png" class="img-ico"></i>
|
||
您还没有登录！登录后购物车的商品将同步保存到您账号中
|
||
<button class="login-quick" @click="goLogin">立即登录</button>
|
||
</div>
|
||
|
||
<div id="cartTable" style="margin-top: 30px">
|
||
<div class="cart-table-th">
|
||
<div class="wp">
|
||
<div class="th th-chk">
|
||
<div id="J_SelectAll1" class="select-all J_SelectAll"></div>
|
||
</div>
|
||
<div class="th th-item">
|
||
<div class="td-inner">商品信息</div>
|
||
</div>
|
||
<div class="th th-price">
|
||
<div class="td-inner">单价</div>
|
||
</div>
|
||
<div class="th th-amount">
|
||
<div class="td-inner">数量</div>
|
||
</div>
|
||
<div class="th th-sum">
|
||
<div class="td-inner">金额</div>
|
||
</div>
|
||
<div class="th th-op">
|
||
<div class="td-inner">操作</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="clear"></div>
|
||
|
||
<tr class="item-list">
|
||
<div class="bundle bundle-last">
|
||
<div class="clear"></div>
|
||
<div class="bundle-main">
|
||
|
||
<ul class="item-content clearfix" v-for="(cartItem, sidx) in shopcartList">
|
||
<li class="td td-chk">
|
||
<div class="cart-checkbox ">
|
||
<input class="check" v-model="specIds" :value="cartItem.specId" type="checkbox">
|
||
</div>
|
||
</li>
|
||
<li class="td td-item" style="width: 50%">
|
||
<div class="item-pic">
|
||
<a :href="'item.html?itemId=' + cartItem.itemId" target="_blank" class="J_MakePoint">
|
||
<img :src="cartItem.itemImgUrl" class="itempic J_ItemImg" style="width: 80px; height: 80px;"></a>
|
||
</div>
|
||
<div class="item-info">
|
||
<div class="item-basic-info">
|
||
<a :href="'item.html?itemId=' + cartItem.itemId" target="_blank" class="item-title J_MakePoint">{{cartItem.itemName}}</a>
|
||
<div class="item-props" style="margin-top: 5px;">
|
||
<span class="sku-line">规格：{{cartItem.specName}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="td td-price">
|
||
<div class="item-price price-promo-promo">
|
||
<div class="price-content">
|
||
<div class="price-line">
|
||
<em class="price-original">{{cartItem.priceNormal / 100}}</em>
|
||
</div>
|
||
<div class="price-line">
|
||
<em class="J_Price price-now" tabindex="0">{{cartItem.priceDiscount / 100}}</em>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="td td-amount">
|
||
<div class="amount-wrapper ">
|
||
<div class="item-amount ">
|
||
<div class="sl">
|
||
{{cartItem.buyCounts}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="td td-sum">
|
||
<div class="td-inner">
|
||
<em tabindex="0" class="J_ItemSum number">{{cartItem.priceDiscount / 100 * cartItem.buyCounts}}</em>
|
||
</div>
|
||
</li>
|
||
<li class="td td-op">
|
||
<div class="td-inner">
|
||
<a href="javascript:void(0);" @click="delFromCart(cartItem.specId)" data-point-url="#" class="delete">删除</a>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
|
||
</div>
|
||
</div>
|
||
</tr>
|
||
|
||
<!-- {{specIds}} -->
|
||
|
||
<div class="clear"></div>
|
||
</div>
|
||
<div class="clear"></div>
|
||
|
||
<div class="float-bar-wrapper">
|
||
<div id="J_SelectAll2" class="select-all J_SelectAll">
|
||
<div class="cart-checkbox">
|
||
<input class="check-all check" name="select-all" v-model="allChecked" type="checkbox" @click="checkedAll">
|
||
</div>
|
||
<span>全选</span>
|
||
</div>
|
||
<div class="float-bar-right">
|
||
<div class="amount-sum">
|
||
<span class="txt">已选商品</span>
|
||
<em id="J_SelectedItemsCount">{{allSelectedCounts}}</em><span class="txt">件</span>
|
||
<div class="arrow-box">
|
||
<span class="selected-items-arrow"></span>
|
||
<span class="arrow"></span>
|
||
</div>
|
||
</div>
|
||
<div class="price-sum">
|
||
<span class="txt">合计:</span>
|
||
<strong class="price">¥<em id="J_Total">{{totalAmount / 100}}</em>元</strong>
|
||
</div>
|
||
<div class="btn-area" @click="goPay">
|
||
<a href="javascript:void(0);" id="J_Go" class="submit-btn submit-btn-disabled">
|
||
<span>结 算</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="footer ">
|
||
<div class="footer-hd ">
|
||
<p><a href="https://www.imooc.com/" target="_blank">慕课网</a><b>|</b>
|
||
<a href="https://coding.imooc.com/class/217.html" target="_blank">分布式架构仿抖音短视频</a><b>|</b>
|
||
<a href="https://coding.imooc.com/class/261.html" target="_blank">Netty仿微信聊天</a><b>|</b>
|
||
<a href="https://coding.imooc.com/class/201.html" target="_blank">Zookeeper与dubbo入门</a><b>|</b>
|
||
<a href="https://coding.imooc.com/class/293.html" target="_blank">支付宝小程序</a></p>
|
||
</div>
|
||
<div class="footer-bd "><p><em>© 2019 imooc.com 京ICP备12003892号-11 北京奥鹏文化传媒有限公司 版权所有</em></p></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!--操作页面-->
|
||
|
||
<div class="theme-popover-mask"></div>
|
||
</div>
|
||
<script type="text/javascript " src="js/app.js"></script>
|
||
<script type="text/javascript">
|
||
var index = new Vue({
|
||
el: "#shopcart",
|
||
data: {
|
||
userIsLogin: false,
|
||
userInfo: {},
|
||
|
||
keywords: null,
|
||
|
||
shopcartList: [],
|
||
specIds: [], // 选中的那些商品规格
|
||
allChecked: false, // chkbox是否全部选中
|
||
|
||
allSelectedCounts: 0, // 购物车中选则的几项
|
||
totalAmount: 0, // 购物车中选则的几项商品总价
|
||
},
|
||
created() {
|
||
// var me = this;
|
||
// 通过cookie判断用户是否登录
|
||
this.judgeUserLoginStatus();
|
||
|
||
// 从购物车中拿到商品的数量
|
||
this.shopcartItemCounts = app.getShopcartItemCounts();
|
||
|
||
// 渲染购物车商品数据到页面
|
||
this.renderShopcart();
|
||
},
|
||
watch: { //深度 watcher
|
||
'specIds': {
|
||
handler: function(val, oldVal) {
|
||
if (val.length === this.shopcartList.length) {
|
||
this.allChecked = true;
|
||
} else {
|
||
this.allChecked = false;
|
||
}
|
||
this.reCalItemsCountsAndAmount();
|
||
},
|
||
deep: true
|
||
}
|
||
},
|
||
methods: {
|
||
goUserCenter() {
|
||
// 判断用户是否登录
|
||
var userIsLogin = this.userIsLogin;
|
||
if (!userIsLogin) {
|
||
// 用户未登录，则跳转
|
||
window.location.href = "login.html?returnUrl=" + app.centerServerUrl;
|
||
} else {
|
||
window.location.href = app.centerServerUrl;
|
||
}
|
||
},
|
||
// 前往结算页面
|
||
goPay() {
|
||
var shopcartList = app.getShopcartList();
|
||
if (shopcartList.length <= 0) {
|
||
alert("购物车中没有商品，无法结算");
|
||
return;
|
||
}
|
||
|
||
var selectedItemSpecIds = this.specIds;
|
||
if (selectedItemSpecIds.length <= 0) {
|
||
alert("请至少在购物车中选择一个商品后再结算");
|
||
return;
|
||
}
|
||
|
||
// 判断是否登录
|
||
var userIsLogin = this.userIsLogin;
|
||
if (userIsLogin) {
|
||
var specIdsStr = selectedItemSpecIds.toString();
|
||
window.location.href = "pay.html?selectedItemSpecIds=" + specIdsStr;
|
||
} else {
|
||
var bool = window.confirm("请登录/注册后再进行结算操作噢~！");
|
||
if (!bool) {
|
||
return;
|
||
} else {
|
||
this.goLogin();
|
||
}
|
||
}
|
||
},
|
||
// 从购物车中删除商品
|
||
delFromCart(specId) {
|
||
// console.log(specId);
|
||
|
||
var bool = window.confirm("确认从购物车中移除该商品吗？");
|
||
if (!bool) {
|
||
return;
|
||
}
|
||
|
||
// 删除cookie中的商品
|
||
var shopcartList = app.getShopcartList();
|
||
for (var i = 0 ; i < shopcartList.length ; i ++) {
|
||
var tmpItem = shopcartList[i];
|
||
if (tmpItem.specId == specId) {
|
||
shopcartList.splice(i, 1);
|
||
break;
|
||
}
|
||
}
|
||
// 重新放入cookie，更新一下
|
||
app.setCookie("shopcart", JSON.stringify(shopcartList));
|
||
this.shopcartList = shopcartList;
|
||
|
||
// 清除选中项
|
||
var specIds = this.specIds;
|
||
for (var i = 0 ; i < specIds.length ; i++) {
|
||
var tmpSpecId = specIds[i];
|
||
if (specId == tmpSpecId) {
|
||
specIds.splice(i, 1);
|
||
}
|
||
}
|
||
this.reCalItemsCountsAndAmount();
|
||
|
||
// 如果用户是已经登录状态，需要再把redis中的购物车商品删除
|
||
var userIsLogin = this.userIsLogin;
|
||
if (userIsLogin) {
|
||
var userInfo = this.userInfo;
|
||
var serverUrl = app.serverUrl;
|
||
axios.defaults.withCredentials = true;
|
||
axios.post(
|
||
serverUrl + '/shopcart/del?userId=' + userInfo.id + '&itemSpecId=' + specId,
|
||
{},
|
||
{
|
||
headers: {
|
||
'headerUserId': userInfo.id,
|
||
'headerUserToken': userInfo.userUniqueToken
|
||
}
|
||
})
|
||
.then(res => {
|
||
if (res.data.status == 200) {
|
||
|
||
} else if (res.data.status == 500) {
|
||
alert(res.data.msg);
|
||
}
|
||
});
|
||
}
|
||
|
||
},
|
||
// 重新计算购物车中选中的件数以及总价格
|
||
reCalItemsCountsAndAmount() {
|
||
var specIds = this.specIds;
|
||
if (specIds == null || specIds == '' || specIds == undefined || specIds.length == 0) {
|
||
this.allSelectedCounts = 0;
|
||
this.totalAmount = 0;
|
||
} else {
|
||
// 把specIds和cookie中的购物车进行对比
|
||
this.allSelectedCounts = specIds.length;
|
||
|
||
var shopcartList = app.getShopcartList();
|
||
|
||
var totalAmount = 0;
|
||
// debugger;
|
||
for (var i = 0 ; i < shopcartList.length ; i ++) {
|
||
var tmpItem = shopcartList[i];
|
||
|
||
for (var j = 0 ; j < specIds.length ; j ++) {
|
||
var selectSpecId = specIds[j];
|
||
if (tmpItem.specId == selectSpecId) {
|
||
totalAmount += tmpItem.priceDiscount * tmpItem.buyCounts;
|
||
}
|
||
}
|
||
}
|
||
this.totalAmount = totalAmount;
|
||
}
|
||
},
|
||
// 全选与反选
|
||
checkedAll() {
|
||
var _this = this;
|
||
// console.log(_this.specIds);
|
||
// console.log(_this.allChecked);
|
||
if (_this.allChecked) { //实现反选
|
||
_this.specIds = [];
|
||
} else { //实现全选
|
||
_this.specIds = [];
|
||
this.shopcartList.forEach(function(item, index) {
|
||
_this.specIds.push(item.specId);
|
||
});
|
||
}
|
||
this.reCalItemsCountsAndAmount();
|
||
},
|
||
renderShopcart() {
|
||
var shopcartList = app.getShopcartList();
|
||
|
||
// console.log(shopcartList);
|
||
// this.shopcartList = shopcartList;
|
||
|
||
if (shopcartList.length <= 0) {
|
||
return;
|
||
}
|
||
|
||
// 刷新购物车中价格，以防长时间未登录网址，价格发生变动
|
||
// 拼接规格ids
|
||
var itemSpecIds = "";
|
||
for (var i = 0 ; i < shopcartList.length ; i ++) {
|
||
var tmpSpecId = shopcartList[i].specId;
|
||
itemSpecIds += tmpSpecId;
|
||
if (i < shopcartList.length-1) {
|
||
itemSpecIds += ",";
|
||
}
|
||
}
|
||
// 1001，2002，3003，4004
|
||
|
||
// 请求后端获得最新数据
|
||
var serverUrl = app.serverUrl;
|
||
axios.defaults.withCredentials = true;
|
||
axios.get(
|
||
serverUrl + '/items/refresh?itemSpecIds=' + itemSpecIds,
|
||
{},)
|
||
.then(res => {
|
||
if (res.data.status == 200) {
|
||
var newItemList = res.data.data;
|
||
// 删除现有购物车cookie
|
||
app.deleteCookie("shopcart");
|
||
// console.log(newItemList);
|
||
// 拿到最新商品数据以后，重新组合成购物车数据
|
||
for (var i = 0 ; i < newItemList.length ; i ++) {
|
||
var tmpNewItem = newItemList[i];
|
||
var tmpNewItemSpecId = tmpNewItem.specId;
|
||
var buyCounts = this.getBuyCountsFromCookieShopcartList(shopcartList, tmpNewItemSpecId);
|
||
// console.log(buyCounts);
|
||
|
||
// 构建购物车商品对象
|
||
var shopcartItem = new app.ShopcartItem(tmpNewItem.itemId,
|
||
tmpNewItem.itemImgUrl,
|
||
tmpNewItem.itemName,
|
||
tmpNewItem.specId,
|
||
tmpNewItem.specName,
|
||
buyCounts,
|
||
tmpNewItem.priceDiscount,
|
||
tmpNewItem.priceNormal);
|
||
// 添加商品至购物车list
|
||
app.addItemToShopcart(shopcartItem);
|
||
}
|
||
// 重新获取cookie中的商品list渲染到页面
|
||
shopcartList = app.getShopcartList();
|
||
// console.log(shopcartList);
|
||
this.shopcartList = shopcartList;
|
||
} else if (res.data.status == 500) {
|
||
alert(res.data.msg);
|
||
}
|
||
});
|
||
|
||
|
||
},
|
||
getBuyCountsFromCookieShopcartList(shopcartList, specId) {
|
||
for (var i = 0 ; i < shopcartList.length ; i ++) {
|
||
var tmpSpecId = shopcartList[i].specId;
|
||
if (tmpSpecId == specId) {
|
||
return shopcartList[i].buyCounts;
|
||
}
|
||
}
|
||
},
|
||
goToShopcart() {
|
||
window.location.href = "shopcart.html";
|
||
},
|
||
doSearch() {
|
||
var keywords = this.keywords;
|
||
// console.log(keywords);
|
||
if (keywords == null || keywords == undefined || keywords == '') {
|
||
alert("搜索内容不能为空");
|
||
return;
|
||
}
|
||
// window.location.href = "search.html?keywords=" + keywords;
|
||
window.open("search.html?keywords=" + keywords);
|
||
},
|
||
goLogin() {
|
||
window.location.href = "login.html?returnUrl=shopcart.html";
|
||
},
|
||
// 打开商品详情页面
|
||
showItemDetail(itemId){
|
||
window.open("item.html?itemId=" + itemId);
|
||
},
|
||
// 通过cookie判断用户是否登录
|
||
judgeUserLoginStatus() {
|
||
var userCookie = app.getCookie("user");
|
||
if (userCookie != null && userCookie != undefined && userCookie != '') {
|
||
var userInfoStr = decodeURIComponent(userCookie);
|
||
// console.log(userInfo);
|
||
if (userInfoStr != null && userInfoStr != undefined && userInfoStr != '') {
|
||
var userInfo = JSON.parse(userInfoStr);
|
||
// 判断是否是一个对象
|
||
if ( typeof(userInfo) == "object" ) {
|
||
this.userIsLogin = true;
|
||
// console.log(userInfo);
|
||
this.userInfo = userInfo;
|
||
} else {
|
||
this.userIsLogin = false;
|
||
this.userInfo = {};
|
||
}
|
||
}
|
||
} else {
|
||
this.userIsLogin = false;
|
||
this.userInfo = {};
|
||
}
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html> |