今天我們來做一下電商網(wǎng)站常見的購物車功能
實現(xiàn)功能，購物車相信大家都熟悉
- 顯示商品列表
- 商品添加進購物車
- 購物車內(nèi)沒有商品時，顯示去購物
- 當(dāng)購物車內(nèi)沒有商品時，顯示去購物
- 購物車內(nèi)商品總件數(shù)和總價的計算及顯示
首先我們來看下實際運行效果
2180072-eb25ddf150bd3966.png
2180072-9dcf22670887d4c7.png
頁面相關(guān)樣式（不做贅述）
*{
padding:0px;
margin:0px;
font-family:Arial, 'Microsoft YaHei', Helvetica, 'Hiragino Sans GB';
}
html{
font-size:10px;
}
.page{
background-color:#f8f8f8;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 60px;
overflow: auto;
text-align: left;
font-size: 2rem;
}
nav{
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
height: 60px;
display: flex;
border-top:1px solid #ededed;
background-color: #fff;
}
nav a:link,nav a:visited{
text-decoration:none;
flex: 1;
text-align: center;
box-sizing: border-box;
/* border-right: 1px solid #ededed;*/
color: #666;
padding-top: 5px;
position: relative;
}
nav a:last-child{
border-right: none;
}
nav a.active{
color: #FF4354;
}
nav a i{
display: block;
margin: 0 auto;
width: 25px;
height: 25px;
}
nav a .tip{
display: block;
width: 10px;
height: 10px;
position: absolute;
line-height: 10px;
left: 50%;
top: -5px;
padding: 5px;
transform: translateX(5px);
background-color: #FF4354;
color: #fff;
border-radius: 50%;
}
nav a.home.active i{
background: url('images/nav-home-on.png') no-repeat center;
background-size: contain;
}
nav a.home i{
background: url('images/nav-home-off.png') no-repeat center;
background-size: contain;
}
nav a.topics.active i{
background: url('images/nav-circle-on.png') no-repeat center;
background-size: contain;
}
nav a.topics i{
background: url('images/nav-circle-off.png') no-repeat center;
background-size: contain;
}
nav a.message.active i{
background: url('images/nav-message-on.png') no-repeat center;
background-size: contain;
}
nav a.message i{
background: url('images/nav-message-off.png') no-repeat center;
background-size: contain;
}
nav a.user.active i{
background: url('images/nav-mine-on.png') no-repeat center;
background-size: contain;
}
nav a.user i{
background: url('images/nav-mine-off.png') no-repeat center;
background-size: contain;
}
.goods-list{
}
.goods-item{
background-color: #ffffff;
box-sizing: border-box;
float: left;
width: 50%;
border-right: 1px solid #ededed;
text-align: left;
}
.goods-item img{
width: 100%;
}
.goods-item .item-op{
color: #FF4354;
padding: 10px 15px;
border-bottom: 1px solid #ededed;
}
.goods-item a:link,.goods-item a:visited{
color: #FF4354;
}
.goods-item .item-con{
padding: 10px 15px;
border-bottom: 1px solid #ededed;
color: #717171;
}
.goods-item .item-con .add{
display: inline-block;
padding: 5px 10px;
background-color:#ff4354;
color: #ffffff;
border-radius: 50%;
margin: 0px;
}
.c_333{
color: #333;
}
.c_ccc{
color: #ccc;
}
.c_ff4354{
color:#ff4354;
}
.f-r{
float: right;
}
.goods-item .item-btn{
display: inline-block;
padding: 0px 10px;
margin-left: 10px;
}
.shopcar-items{
text-align: left;
}
.shopcar-item{
font-size: 1.5rem;
background-color: #ffffff;
position: relative;
padding: 10px 10px 10px 70px;
border-bottom: 1px solid #ededed;
}
.shopcar-item img{
width: 100%;
}
.shopcar-item .item-img{
position: absolute;
left: 10px;
top:10px;
width:50px;
height:50px;
border-radius: 5px;
}
.shopcar-item .item-con .mul-btn,.shopcar-item .item-con .add-btn{
display: inline-block;
padding: 5px 10px;
background-color:#ff4354;
color: #ffffff;
border-radius: 5px;
margin: 0px 5px;
}
.total-info{
padding: 10px 15px;
text-align: left;
}
.nothing{
padding: 40px;
}
.nothing div{
background-color: #ff4354;
color: #ffffff;
border-radius: 10px;
margin: 0 auto;
padding: 10px;
text-align: center;
}
頁面相關(guān)標(biāo)簽結(jié)構(gòu)
<body ng-app="" ng-controller="myTabCtrl">
<div class="pages">
<div class="page" ng-show="focusIndex==0">
<!--商品列表-->
<div class="goods-list">
<div class="goods-item" ng-repeat="item in goods">
<div class="item-op">
</div>
<div class="item-con">
<p>{{item.name}}</p>
<p>
<span class="c_ff4354">￥{{item.price}}</span>
<span class="f-r c_ccc add" ng-click="addToShopcar(item)">+</span>
</p>
</div>
</div>
</div>
<!--商品列表/-->
</div>
<div class="page" ng-show="focusIndex==1">游記內(nèi)容</div>
<div class="page" ng-show="focusIndex==2">
<!--購物車商品列表-->
<div class="total-info">總商品數(shù)：{{shopCarItems.length}} 件;總價：￥<span class="c_ff4354">{{totalMoney}}</span>元</div>
<div class="shopcar-items">
<div class="shopcar-item" ng-repeat="item in shopCarItems">
<div class="item-img">
</div>
<div class="item-con">
<p>{{item.name}}</p>
<p>
<span class="c_ff4354">￥{{item.price}}</span>
<span class="f-r c_ccc">
<span class="mul-btn" ng-click="mulGoodAmount($index)">-</span>
{{item.amount}}
<span class="add-btn" ng-click="addToShopcar(item)">+</span>
</span>
</p>
</div>
</div>
</div>
<!--購物車商品列表/-->
<div class="nothing" ng-if="shopCarItems.length==0">
<div ng-click="focus(0)">去購物</div>
</div>
</div>
<div class="page" ng-show="focusIndex==3">個人中心內(nèi)容</div>
</div>
<nav>
<a class="home" ng-class="{'active':focusIndex==0}" href="javascript:;" ng-click="focus(0)"><i></i>優(yōu)選圈</a>
<a class="topics" ng-class="{'active':focusIndex==1}" href="javascript:;" ng-click="focus(1)"><i></i>游記</a>
<a class="message" ng-class="{'active':focusIndex==2}" href="javascript:;" ng-click="focus(2)"><i></i>購物車<span class="tip" ng-if="shopCarItems.length">{{shopCarItems.length}}</span></a>
<a class="user" ng-class="{'active':focusIndex==3}" href="javascript:;" ng-click="focus(3)"><i></i>個人中心</a>
</nav>
</body>
頁面的angular代碼、實現(xiàn)邏輯及解釋
<script>
//顯示操作成功
function showAltMsg(msg){
var toast=document.getElementById('toast');
if(toast){
toast.innerHTML=msg;
toast.style.display="block";
}else{
var msgDom=document.createElement('div');
msgDom.id='toast';
msgDom.innerHTML=msg;
var body=document.getElementsByTagName('body')[0]
body.appendChild(msgDom);
}
setTimeout(function(){
var toast=document.getElementById('toast');
toast.style.display="none";
},2000);
}
function myTabCtrl($scope) {
//設(shè)置當(dāng)前聚焦的索引
$scope.focusIndex = 0;
//設(shè)置聚焦方法
$scope.focus = function(index) {
$scope.focusIndex = index;
}
//默認(rèn)商品列表
$scope.goods = [
{
price: 28,
id: 1,
name: "滿減【三只松鼠_琥珀核桃仁165g】堅果特產(chǎn)休閑零食紙",
url: 'http://img10.360buyimg.com/n1/jfs/t2821/18/1316712878/430655/c65ffb7/573c06a0N956686b0.jpg',
left: '4/50'
}, {
price: 28,
id: 2,
name: "旺旺旺仔牛奶2940ml原味245 ml× 8罐+蘋果味245ml×4罐",
url: 'http://img14.360buyimg.com/n1/jfs/t2623/71/2055615738/228070/6f87f326/57553c7aNa8b4b9c3.jpg',
left: '4/50'
}, {
price: 28,
id: 3,
name: "旺旺旺仔牛奶2940ml原味245 ml× 8罐+蘋果味245ml×4罐",
url: 'http://img14.360buyimg.com/n1/jfs/t2623/71/2055615738/228070/6f87f326/57553c7aNa8b4b9c3.jpg',
left: '4/50'
}, {
price: 28,
id: 4,
name: "滿減【三只松鼠_琥珀核桃仁165g】堅果特產(chǎn)休閑零食紙",
url: 'http://img10.360buyimg.com/n1/jfs/t2821/18/1316712878/430655/c65ffb7/573c06a0N956686b0.jpg',
left: '4/50'
}, {
price: 28,
id: 5,
name: "滿減【三只松鼠_琥珀核桃仁165g】堅果特產(chǎn)休閑零食紙",
url: 'http://img10.360buyimg.com/n1/jfs/t2821/18/1316712878/430655/c65ffb7/573c06a0N956686b0.jpg',
left: '4/50'
}, {
price: 28,
id: 6,
name: "旺旺旺仔牛奶2940ml原味245 ml× 8罐+蘋果味245ml×4罐",
url: 'http://img14.360buyimg.com/n1/jfs/t2623/71/2055615738/228070/6f87f326/57553c7aNa8b4b9c3.jpg',
left: '4/50'
}, {
price: 28,
id: 7,
name: "滿減【三只松鼠_琥珀核桃仁165g】堅果特產(chǎn)休閑零食紙",
url: 'http://img10.360buyimg.com/n1/jfs/t2821/18/1316712878/430655/c65ffb7/573c06a0N956686b0.jpg',
left: '4/50'
}, {
price: 28,
id: 8,
name: "旺旺旺仔牛奶2940ml原味245 ml× 8罐+蘋果味245ml×4罐",
url: 'http://img14.360buyimg.com/n1/jfs/t2623/71/2055615738/228070/6f87f326/57553c7aNa8b4b9c3.jpg',
left: '4/50'
}, {
price: 28,
id: 9,
name: "滿減【三只松鼠_琥珀核桃仁165g】堅果特產(chǎn)休閑零食紙",
url: 'http://img10.360buyimg.com/n1/jfs/t2821/18/1316712878/430655/c65ffb7/573c06a0N956686b0.jpg',
left: '4/50'
}
]
//購物車商品；列表
$scope.shopCarItems = [
{
price: 28,
id: 1,
name: "滿減【三只松鼠_琥珀核桃仁165g】堅果特產(chǎn)休閑零食紙皮核桃",
url: 'http://img10.360buyimg.com/n1/jfs/t2821/18/1316712878/430655/c65ffb7/573c06a0N956686b0.jpg',
amount: 2
}, {
price: 28,
id: 2,
name: "旺旺旺仔牛奶2940ml原味245 ml× 8罐+蘋果味245ml×4罐",
url: 'http://img14.360buyimg.com/n1/jfs/t2623/71/2055615738/228070/6f87f326/57553c7aNa8b4b9c3.jpg',
amount: 1
}
]
//添加商品到購物車
$scope.addToShopcar = function(item) {
var realIndex = $scope.getRealIndex(item.id);
/**
得到的真實索引>=0則代表商品已經(jīng)在購物車內(nèi)
若已經(jīng)在則增加商品數(shù)量
若不在則增加一個商品條目
**/
if (realIndex >= 0) {
$scope.shopCarItems[realIndex].amount += 1;
} else {
item.amount = 1;
$scope.shopCarItems.push(item);
}
//增加商品數(shù)量或條目則重新計算購物車商品總金額
$scope.getTotalMoney();
showAltMsg("添加到購物車成功");
}
//獲得商品在購物車中的真實索引
$scope.getRealIndex = function(id) {
var realIndex = -1;
for (var i = 0; i < $scope.shopCarItems.length; i++) {
if ($scope.shopCarItems[i].id == id) {
realIndex = i;
break;
}
}
return realIndex;
}
//計算購物車總額
$scope.getTotalMoney = function() {
var sum = 0;
for (var i = 0; i < $scope.shopCarItems.length; i++) {
sum += $scope.shopCarItems[i].price * $scope.shopCarItems[i].amount
}
$scope.totalMoney = sum;
};
//初次加載計算一下總金額
$scope.getTotalMoney();
//減少購物車商品數(shù)量
$scope.mulGoodAmount = function(index) {
$scope.shopCarItems[index].amount -= 1;
//商品數(shù)量減少到0時直接刪除商品
if ($scope.shopCarItems[index].amount == 0) {
$scope.shopCarItems.splice(index, 1);
}
//減少商品數(shù)量之后重新計算購物車商品總金額
$scope.getTotalMoney();
}
}
</script>
主要指令
- ng-app
- ng-controller
- ng-repeat
- ng-if
- ng-src 這是一個未講過的指令，這個指令的功能是給img標(biāo)簽綁定 src屬性
//數(shù)據(jù)
{
price: 28,
id: 2,
name: "旺旺旺仔牛奶2940ml原味245 ml× 8罐+蘋果味245ml×4罐",
url: 'http://img14.360buyimg.com/n1/jfs/t2623/71/2055615738/228070/6f87f326/57553c7aNa8b4b9c3.jpg',
amount: 1
}
- ng-click
- ng-show
- ng-class
