vuejs手把手教你寫一個完整的購物車實(shí)例代碼
更新時間：2017年07月06日 15:46:56 作者：走火愛上魚
這篇文章主要介紹了vuejs-手把手教你寫一個完整的購物車實(shí)例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
由于我們公司是主營業(yè)務(wù)是海淘，所以每個項目都是類似淘寶天貓之類的商城，那么購物車就是一個重點(diǎn)開發(fā)功能模塊。介于之前我都是用jq來寫購物車的，這次就用vuejs來寫一個購物車。下面我就從全選，數(shù)量控制器，運(yùn)費(fèi)，商品金額計算等方法來演示一下一個能用在實(shí)際場景的購物車是怎么做出來的以及記錄一下這次用vuejs踩過的坑。
1.一層數(shù)據(jù)結(jié)構(gòu)-全選
下面這段代碼和vuejs官網(wǎng)里面checkbox綁定很像。不明白的可以直接上vuejs官網(wǎng)看看。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs-全選</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
a {
color: #333;
text-decoration:none;
}
</style>
</head>
<body>
<label>
<input type="checkbox" name="all" v-on:click="chooseAll" v-model="selectArr.length==goodsList.length" />
<span>全選</span>
</label>
<div v-for="(index, item) in goodsList">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<input type="checkbox" :value="index" v-model="selectArr" />
商品名稱:<span v-html="item.name"></span> |
價格:<span v-html="item.price"></span>
</a>
</div>
<label>
<input type="checkbox" name="all" v-on:click="chooseAll" v-model="selectArr.length==goodsList.length" />
<span>全選</span>
</label>
<script src="http://cdn.bootcss.com/vue/1.0.7/vue.js"></script>
<script>
var vue = new Vue({
el : 'body',
data : {
goodsList : [
{
name : '山本漢方1',
price : '19.00'
},
{
name : '山本漢方2',
price : '19.00'
},
{
name : '山本漢方3',
price : '19.00'
},
{
name : '山本漢方4',
price : '19.00'
},
{
name : '山本漢方5',
price : '19.00'
},
],
selectArr : []
},
ready : function() {},
methods : {
chooseAll : function(event) {
var oThis = this;
oThis.selectArr = [];
if ( event.currentTarget.checked ) {
oThis.goodsList.forEach(function(item , index) {
oThis.selectArr.push(index);
});
}
console.log(oThis.selectArr);
}
}
})
</script>
</body>
</html>
2.二層數(shù)據(jù)結(jié)構(gòu)-全選
一層數(shù)據(jù)結(jié)構(gòu)的購物車在現(xiàn)實(shí)中是很少看到的，比如我們最熟悉的淘寶購物車是按照店鋪分的，那么必然是多層的數(shù)據(jù)結(jié)構(gòu)。這次在寫這個二層數(shù)據(jù)接口的全選，碰到一個很大的坑，一開始我是用了一層數(shù)據(jù)結(jié)構(gòu)的數(shù)據(jù)，發(fā)現(xiàn)當(dāng)對象數(shù)組里面的某個值改變了，視圖竟然沒有觸發(fā)！，所以會造成下面所有的checkbox都被選中了，最上面的那個全選checkbox竟然還是沒有被選中。感覺告訴我這是vuejs的坑，后來發(fā)現(xiàn)是js的坑。具體可以看這個。方法是百度到了，可是放我這里沒有用（應(yīng)該是版本問題）。于是我就改了數(shù)據(jù)結(jié)構(gòu)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs-全選</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
a {
color: #333;
text-decoration:none;
}
.goods-item {
display: block;
}
.store-item {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div v-for="(index1, item) in goodsObj" class="store-item">
<p>
<span v-html="item.name"></span>
<label>
<input type="checkbox" name="all" v-on:click="chooseShopGoods(index1)" v-model="item.checked" />
<span>全選</span>
</label>
</p>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-for="(index, data) in item.list" class="goods-item">
<input type="checkbox" v-model="data.checked" v-on:click="choose(index1, index)" />
商品名稱:<span v-html="data.name"></span> |
價格:<span v-html="data.price"></span>
</a>
</div>
<label>
<input type="checkbox" name="all" v-on:click="chooseAllGoods()" v-model="allChecked" />
<span>全選</span>
</label>
<script src="http://cdn.bootcss.com/vue/1.0.7/vue.js"></script>
<script>
var goodsObj = [
{
name : '大胖的店',
checked : false,
list : [
{
name : '麻辣二胖',
price : 23.00,
realStock : 10,
fare : 1.5,
num : 1,
checked : false,
},
{
name : '香辣二胖',
price : 21.00,
realStock : 2,
fare : 1.5,
num : 2,
checked : false,
},
{
name : '紅燒二胖',
price : 88.00,
realStock : 8,
fare : 1.5,
num : 4,
checked : false,
}
]
},
{
name : '二胖的店',
checked : false,
list : [
{
name : '漂亮的裙子',
price : 166.00,
realStock : 10,
fare : 2,
num : 1,
checked : false,
},
{
name : '漂亮的短袖',
price : 188.00,
realStock : 2,
fare : 1.5,
num : 2,
checked : false,
},
{
name : '漂亮的鞋子',
price : 299.00,
realStock : 1,
fare : 3,
num : 1,
checked : false,
}
]
},
{
name : '胖胖的店',
checked : false,
list : [
{
name : '福滿多',
price : 3.00,
realStock : 10,
fare : .5,
num : 10,
checked : false,
},
{
name : '精品衛(wèi)龍',
price : 1.50,
realStock : 2,
fare : 2,
num : 2,
checked : false,
},
{
name : '周長江',
price : 2.50,
realStock : 3,
fare : 5,
num : 2,
checked : false,
}
]
},
];
var vue = new Vue({
el : 'body',
data : {
goodsObj : goodsObj,
allChecked : false
},
ready : function() {
},
methods : {
// 全部商品全選
chooseAllGoods : function() {
var flag = true;
if ( this.allChecked ) {
flag = false;
}
for ( var i = 0, len = this.goodsObj.length; i < len; i++ ) {
this.goodsObj[i]['checked'] = flag;
var list = this.goodsObj[i]['list'];
for ( var k = 0, len1 = list.length; k < len1; k++ ) {
list[k]['checked'] = flag;
}
}
this.allChecked = !this.allChecked;
},
// 每個店鋪全選
chooseShopGoods : function( index) {
var list = this.goodsObj[index]['list'],
len = list.length;
if ( this.goodsObj[index]['checked'] ) {
for (var i = 0; i < len; i++ ) {
list[i]['checked'] = false;
}
} else {
for (var i = 0; i < len; i++ ) {
list[i]['checked'] = true;
}
}
this.goodsObj[index]['checked'] = !this.goodsObj[index]['checked'];
// 判斷是否選擇所有商品的全選
this.isChooseAll();
},
// 單個選擇
choose : function( index1, index) {
var list = this.goodsObj[index1]['list'],
len = list.length;
if ( list[index]['checked'] ) {
this.goodsObj[index1]['checked'] = false;
this.allChecked = false;
list[index]['checked'] = !list[index]['checked'];
} else {
list[index]['checked'] = !list[index]['checked'];
// 判斷是否選擇當(dāng)前店鋪的全選
var flag = true;
for (var i = 0; i < len; i++ ) {
if ( list[i]['checked'] == false ) {
flag = false;
break;
}
}
flag == true ? this.goodsObj[index1]['checked'] = true : this.goodsObj[index1]['checked'] = false;
}
// 判斷是否選擇所有商品的全選
this.isChooseAll();
},
// 判斷是否選擇所有商品的全選
isChooseAll : function() {
var flag1 = true;
for ( var i = 0, len = this.goodsObj.length; i < len; i++ ) {
if ( this.goodsObj[i]['checked'] == false ) {
flag1 = false;
break;
}
}
flag1 == true ? this.allChecked = true : this.allChecked = false;
},
}
})
</script>
</body>
</html>
3.一層數(shù)據(jù)結(jié)構(gòu)-數(shù)量選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs-數(shù)量選擇器(1層數(shù)據(jù)結(jié)構(gòu))</title>
<style type="text/css">
*{
padding:0;
margin: 0;
box-sizing: border-box;
font-size: 16px;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: .1px;
font-size: .1em;
line-height: 0;
clear: both;
}
.quantity-selector {
margin-bottom: 20px;
width: 8.571rem;
line-height: 2.857rem;
border: 1px solid #d1d6e4;
border-radius: 3px;
}
.quantity-selector .reduce,
.quantity-selector .add {
float: left;
width: 33.33%;
border-right: 1px solid #d1d6e4;
text-align: center;
cursor: pointer;
}
.quantity-selector .number {
float: left;
width: 33.33%;
height: 2.857rem;
padding: .5rem 0;
line-height: 1rem;
border: none;
text-align: center;
}
.quantity-selector .add {
border-left: 1px solid #d1d6e4;
border-right: none;
}
.quantity-selector .disable {
color: #d2d2d2;
cursor: default;
}
</style>
</head>
<body>
<div v-for="data in goodsList">
<p>商品數(shù)量 ：<span v-html="data.num"></span></p>
<p>商品庫存 ：<span v-html="data.realStock"></span></p>
<div class="quantity-selector clearfix">
<span class="reduce" v-on:click="numChange($index, -1)" v-bind:class="{ 'disable' : data.num==1 }">－</span>
<input type="number" v-bind:value="data.num" class="number" v-bind:data-realStock="data.realStock" v-on:keyUp="numEntry($index)" v-on:keyDown="numEntry($index)" v-model="data.num"/>
<span class="add" v-on:click="numChange($index, 1)" v-bind:class="{ 'disable' : data.num==data.realStock }">＋</span>
</div>
</div>
<script src="http://cdn.bootcss.com/vue/1.0.7/vue.js"></script>
<script>
var vue = new Vue({
el : 'body',
data : {
goodsList : [
{
name : '山本漢方1',
price : '19.00',
realStock : 10,
num : 1
},
{
name : '山本漢方1',
price : '19.00',
realStock : 7,
num : 8
},
{
name : '山本漢方1',
price : '19.00',
realStock : 2,
num : 2
},
]
},
ready : function() {},
methods : {
numChange : function(index, numChange) {
var goods = this.goodsList[index];
if ( numChange == 1 ) {
goods.num++;
} else if ( numChange == -1 ) {
goods.num--;
}
if ( goods.num <= 1 ) {
goods.num = 1;
}
if ( goods.num >= goods.realStock ) {
goods.num = goods.realStock;
}
},
numEntry : function(index) {
var goods = this.goodsList[index];
if ( goods.num <=1 ) {
goods.num = 1;
}
if ( goods.num > goods.realStock ) {
goods.num = goods.realStock;
}
}
}
})
</script>
</body>
</html>
4.二層數(shù)據(jù)結(jié)構(gòu)-數(shù)據(jù)選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs-數(shù)量選擇器(2層數(shù)據(jù)結(jié)構(gòu))</title>
<style type="text/css">
*{
padding:0;
margin: 0;
box-sizing: border-box;
font-size: 16px;
}
a {
text-decoration: none;
color: #333;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: .1px;
font-size: .1em;
line-height: 0;
clear: both;
}
.quantity-selector {
margin: 0 auto;
width: 8.571rem;
line-height: 30px;
border: 1px solid #d1d6e4;
border-radius: 3px;
}
.quantity-selector .reduce,
.quantity-selector .add {
float: left;
width: 33.33%;
border-right: 1px solid #d1d6e4;
text-align: center;
cursor: pointer;
}
.quantity-selector .number {
float: left;
width: 33.33%;
height: 30px;
border: none;
padding-left: 10px;
text-align: center;
}
.quantity-selector .add {
border-left: 1px solid #d1d6e4;
border-right: none;
}
.quantity-selector .disable {
color: #d2d2d2;
cursor: default;
}
/*店鋪開始*/
.store-item {
width: 600px;
margin: 30px auto;
}
.store-item th {
height: 40px;
background: #d2d2d2;
-webkit-text-stroke: 1px #ff7500;
font-size: 18px;
}
.store-item td {
height: 60px;
text-align: center;
}
.cal-store-box {
text-align: right;
}
.store-footer {
width: 600px;
margin: 50px auto;
display: flex;
justify-content: space-between;
align-items: center;
}
/*店鋪結(jié)束*/
</style>
</head>
<body>
<div class="store-item" v-for="(index1, item) in goodsObj">
<p v-html="index1"></p>
<table class="store-item">
<col width="10%"></col>
<col width="10%"></col>
<col width="20%"></col>
<col width="10%"></col>
<col width="40%"></col>
<col width="10%"></col>
<thead class="thead">
<tr>
<th>選擇</th>
<th>商品</th>
<th>單價</th>
<th>運(yùn)費(fèi)</th>
<th>數(shù)量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(index, data) in item">
<td>
</td>
<td>
<p><span v-html="data.name"></span></p>
</td>
<td v-html="(data.price).toFixed(2)"></td>
<td v-html="(data.fare).toFixed(2)"></td>
<td>
<div class="quantity-selector clearfix">
<span class="reduce" v-on:click="numChange(index1, $index, -1)" v-bind:class="{ 'disable' : data.num==1 }">－</span>
<input type="number" v-bind:value="data.num" class="number" v-bind:data-realStock="data.realStock" v-on:keyUp="numEntry(index1, $index)" v-on:keyDown="numEntry(index1, $index)" v-model="data.num"/>
<span class="add" v-on:click="numChange(index1, $index, 1)" v-bind:class="{ 'disable' : data.num==data.realStock }">＋</span>
</div>
</td>
<td>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >刪除</a>
</td>
</tr>
</tbody>
</table>
<div class="cal-store-box">
<p>店鋪總運(yùn)費(fèi): <span v-html="calEveryFare(index1)"></span></p>
<p>店鋪商品總金額: <span v-html="calEveryStore(index1)"></span></p>
</div>
</div>
<div class="store-footer">
<!-- <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<input type="checkbox" />
<span>全選</span>
</a> -->
<div class="cal-box">
<p>商品總金額:<span v-html="totalFare"></span></p>
<p>運(yùn)費(fèi)總金額:<span v-html="totalMoney"></span></p>
</div>
</div>
<script src="http://cdn.bootcss.com/vue/1.0.7/vue.js"></script>
<script>
var goodsObj = {
'大胖的店' : [
{
name : '康師傅',
price : 23.00,
realStock : 10,
fare : 1.5,
num : 1
},
{
name : '今麥郎',
price : 26.00,
realStock : 2,
fare : 1.5,
num : 2
},
{
name : '比巴卜',
price : 88.00,
realStock : 8,
fare : 1.5,
num : 4
}
],
'二胖的店' : [
{
name : '好看的鞋子',
price : 23.00,
realStock : 7,
fare : 2,
num : 1
},
{
name : '好看的裙子',
price : 26.00,
realStock : 5,
fare : 2,
num : 5
},
{
name : '好看的短袖',
price : 88.00,
realStock : 10,
fare : 2,
num : 1
}
],
'胖胖的店' : [
{
name : '福滿多1號',
price : 26.00,
realStock : 7,
fare : 3,
num : 1
},
{
name : '福滿多2號',
price : 26.00,
realStock : 7,
fare : 3,
num : 1
},
{
name : '經(jīng)典衛(wèi)龍辣條',
price : 16.00,
realStock : 50,
fare : 3,
num : 5
},
{
name : '霸王牛津',
price : 80.00,
realStock : 10,
fare : 3,
num : 6
}
]
};
var vue = new Vue({
el : 'body',
data : {
goodsObj : goodsObj,
totalMoney : 0,
totalFare : 0
},
ready : function() {
this.calTotalMoney();
this.calTotalFare();
},
methods : {
numChange : function(index1, index, numChange) {
var goods = this.goodsObj[index1][index],
oThis = this;
if ( numChange == 1 ) {
goods.num++;
} else if ( numChange == -1 ) {
goods.num--;
}
if ( goods.num <= 1 ) {
goods.num = 1;
}
if ( goods.num >= goods.realStock ) {
goods.num = goods.realStock;
}
this.calTotalMoney();
},
numEntry : function(index1, index) {
var goods = this.goodsObj[index1][index];
if ( goods.num <=1 ) {
goods.num = 1;
}
if ( goods.num > goods.realStock ) {
goods.num = goods.realStock;
}
this.calTotalMoney();
},
calEveryStore : function(index) {
var everyStoreMoney = 0;
this.goodsObj[index].forEach(function(item, index, arr) {
everyStoreMoney += parseFloat(item.price) * parseFloat(item.num);
});
return everyStoreMoney.toFixed(2);
},
calEveryFare : function(index) {
var everyStoreFare = 0;
this.goodsObj[index].forEach(function(item, index, arr) {
everyStoreFare += parseFloat(item.fare) * parseFloat(item.num);
});
return everyStoreFare.toFixed(2);
},
calTotalMoney : function () {
var oThis = this;
this.totalMoney = 0;
for ( var x in this.goodsObj ) {
this.goodsObj[x].forEach(function(item, index, arr) {
oThis.totalMoney += parseFloat(item.price) * parseFloat(item.num);
});
}
this.totalMoney = this.totalMoney.toFixed(2);
},
calTotalFare : function () {
var oThis = this;
this.totalFare = 0;
for ( var x in this.goodsObj ) {
this.goodsObj[x].forEach(function(item, index, arr) {
oThis.totalFare += parseFloat(item.fare) * parseFloat(item.num);
});
}
this.totalFare = this.totalFare.toFixed(2);
},
}
})
</script>
</body>
</html>
5.一個完整的購物車
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs-數(shù)量選擇器(2層數(shù)據(jù)結(jié)構(gòu))</title>
<style type="text/css">
*{
padding:0;
margin: 0;
box-sizing: border-box;
font-size: 16px;
}
a {
text-decoration: none;
color: #333;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: .1px;
font-size: .1em;
line-height: 0;
clear: both;
}
.quantity-selector {
margin: 0 auto;
width: 8.571rem;
line-height: 30px;
border: 1px solid #d1d6e4;
border-radius: 3px;
}
.quantity-selector .reduce,
.quantity-selector .add {
float: left;
width: 33.33%;
border-right: 1px solid #d1d6e4;
text-align: center;
cursor: pointer;
}
.quantity-selector .number {
float: left;
width: 33.33%;
height: 30px;
border: none;
padding-left: 10px;
text-align: center;
}
.quantity-selector .add {
border-left: 1px solid #d1d6e4;
border-right: none;
}
.quantity-selector .disable {
color: #d2d2d2;
cursor: default;
}
label {
cursor: pointer;
}
.choose-all {
margin-left: 20px;
}
/*店鋪開始*/
.store-item {
width: 600px;
margin: 30px auto;
}
.store-item th {
height: 40px;
background: #d2d2d2;
-webkit-text-stroke: 1px #ff7500;
font-size: 18px;
}
.store-item td {
height: 60px;
text-align: center;
}
.cal-store-box {
text-align: right;
}
.store-footer {
width: 600px;
margin: 50px auto;
display: flex;
justify-content: space-between;
align-items: center;
}
/*店鋪結(jié)束*/
</style>
</head>
<body>
<div class="store-item" v-for="(index1, item) in goodsObj">
<p>
<span v-html="item.name"></span>
<label class="choose-all">
<input type="checkbox" name="all" v-on:click="chooseShopGoods(index1)" v-model="item.checked" />
<span>全選</span>
</label>
</p>
<table class="store-item">
<col width="10%"></col>
<col width="15%"></col>
<col width="15%"></col>
<col width="10%"></col>
<col width="40%"></col>
<col width="10%"></col>
<thead class="thead">
<tr>
<th>選擇</th>
<th>商品</th>
<th>單價</th>
<th>運(yùn)費(fèi)</th>
<th>數(shù)量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(index, data) in item.list">
<td>
<input type="checkbox" name="all" v-model="data.checked" v-on:click="choose(index1, index)" />
</td>
<td>
<p><span v-html="data.name"></span></p>
</td>
<td v-html="(data.price).toFixed(2)"></td>
<td v-html="(data.fare).toFixed(2)"></td>
<td>
<div class="quantity-selector clearfix">
<span class="reduce" v-on:click="numChange(index1, $index, -1)" v-bind:class="{ 'disable' : data.num==1 }">－</span>
<input type="number" v-bind:value="data.num" class="number" v-bind:data-realStock="data.realStock" v-on:keyUp="numEntry(index1, $index)" v-on:keyDown="numEntry(index1, $index)" v-model="data.num"/>
<span class="add" v-on:click="numChange(index1, $index, 1)" v-bind:class="{ 'disable' : data.num==data.realStock }">＋</span>
</div>
</td>
<td>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="delGoods(index1, index)">刪除</a>
</td>
</tr>
</tbody>
</table>
<div class="cal-store-box">
<p>店鋪總運(yùn)費(fèi): <span v-html="calEveryFare(index1)"></span></p>
<p>店鋪商品總金額: <span v-html="calEveryStore(index1)"></span></p>
</div>
</div>
<div class="store-footer">
<label>
<input type="checkbox" v-on:click="chooseAllGoods($event)" v-model="allChecked" />
<span>全選</span>
</label>
<div class="cal-box">
<p>商品總運(yùn)費(fèi):<span v-html="totalFare.toFixed(2)"></span></p>
<p>商品總金額:<span v-html="totalMoney.toFixed(2)"></span></p>
</div>
</div>
<script src="http://cdn.bootcss.com/vue/1.0.7/vue.js"></script>
<script>
var goodsObj = [
{
name : '大胖的店',
checked : false,
list : [
{
name : '麻辣二胖',
price : 23.00,
realStock : 10,
fare : 1.5,
num : 1,
checked : false,
},
{
name : '香辣二胖',
price : 21.00,
realStock : 2,
fare : 1.5,
num : 2,
checked : false,
},
{
name : '紅燒二胖',
price : 88.00,
realStock : 8,
fare : 1.5,
num : 4,
checked : false,
}
]
},
{
name : '二胖的店',
checked : false,
list : [
{
name : '漂亮的裙子',
price : 166.00,
realStock : 10,
fare : 2,
num : 1,
checked : false,
},
{
name : '漂亮的短袖',
price : 188.00,
realStock : 2,
fare : 1.5,
num : 2,
checked : false,
},
{
name : '漂亮的鞋子',
price : 299.00,
realStock : 1,
fare : 3,
num : 1,
checked : false,
}
]
},
{
name : '胖胖的店',
checked : false,
list : [
{
name : '福滿多',
price : 3.00,
realStock : 10,
fare : .5,
num : 10,
checked : false,
},
{
name : '精品衛(wèi)龍',
price : 1.50,
realStock : 2,
fare : 2,
num : 2,
checked : false,
},
{
name : '周長江',
price : 2.50,
realStock : 3,
fare : 5,
num : 2,
checked : false,
}
]
},
];
var vue = new Vue({
el : 'body',
data : {
goodsObj : goodsObj,
totalMoney : 0,
totalFare : 0,
allChecked : false
},
ready : function() {},
methods : {
// 全部商品全選
chooseAllGoods : function() {
var flag = true;
if ( this.allChecked ) {
flag = false;
}
for ( var i = 0, len = this.goodsObj.length; i < len; i++ ) {
this.goodsObj[i]['checked'] = flag;
var list = this.goodsObj[i]['list'];
for ( var k = 0, len1 = list.length; k < len1; k++ ) {
list[k]['checked'] = flag;
}
}
this.allChecked = !this.allChecked;
this.calTotalMoney();
this.calTotalFare();
},
// 每個店鋪全選
chooseShopGoods : function( index) {
var list = this.goodsObj[index]['list'],
len = list.length;
if ( this.goodsObj[index]['checked'] ) {
for (var i = 0; i < len; i++ ) {
list[i]['checked'] = false;
}
} else {
for (var i = 0; i < len; i++ ) {
list[i]['checked'] = true;
}
}
this.goodsObj[index]['checked'] = !this.goodsObj[index]['checked'];
// 判斷是否選擇所有商品的全選
this.isChooseAll();
this.cal(index);
},
// 單個選擇
choose : function( index1, index) {
var list = this.goodsObj[index1]['list'],
len = list.length;
if ( list[index]['checked'] ) {
this.goodsObj[index1]['checked'] = false;
this.allChecked = false;
list[index]['checked'] = !list[index]['checked'];
} else {
list[index]['checked'] = !list[index]['checked'];
// 判斷是否選擇當(dāng)前店鋪的全選
var flag = true;
for (var i = 0; i < len; i++ ) {
if ( list[i]['checked'] == false ) {
flag = false;
break;
}
}
flag == true ? this.goodsObj[index1]['checked'] = true : this.goodsObj[index1]['checked'] = false;
}
// 判斷是否選擇所有商品的全選
this.isChooseAll();
this.cal(index);
},
// 判斷是否選擇所有商品的全選
isChooseAll : function() {
var flag1 = true;
for ( var i = 0, len = this.goodsObj.length; i < len; i++ ) {
if ( this.goodsObj[i]['checked'] == false ) {
flag1 = false;
break;
}
}
flag1 == true ? this.allChecked = true : this.allChecked = false;
},
// 商品數(shù)量控制
numChange : function(index1, index, numChange) {
var goods = this.goodsObj[index1]['list'][index],
oThis = this;
if ( numChange == 1 ) {
goods.num++;
} else if ( numChange == -1 ) {
goods.num--;
}
if ( goods.num <= 1 ) {
goods.num = 1;
}
if ( goods.num >= goods.realStock ) {
goods.num = goods.realStock;
}
this.cal(index);
},
// 用戶填寫容錯處理
numEntry : function(index1, index) {
var goods = this.goodsObj[index1]['list'][index];
if ( goods.num <=1 ) {
goods.num = 1;
}
if ( goods.num > goods.realStock ) {
goods.num = goods.realStock;
}
this.cal(index);
},
// 計算每個店鋪的商品總額
calEveryStore : function(index) {
var everyStoreMoney = 0,
list = this.goodsObj[index]['list'];
list.forEach(function(item, index, arr) {
if ( list[index]['checked'] ) {
everyStoreMoney += parseFloat(item.price) * parseFloat(item.num);
}
});
return everyStoreMoney.toFixed(2);
},
// 計算每個店鋪的運(yùn)費(fèi)總額
calEveryFare : function(index) {
var everyStoreFare = 0,
list = this.goodsObj[index]['list'];
list.forEach(function(item, index, arr) {
if ( list[index]['checked'] ) {
everyStoreFare += parseFloat(item.fare) * parseFloat(item.num);
}
});
return everyStoreFare.toFixed(2);
},
// 計算商品總金額
calTotalMoney : function () {
var oThis = this;
this.totalMoney = 0;
for ( var i = 0, len = this.goodsObj.length; i < len; i++ ) {
var list = this.goodsObj[i]['list'];
list.forEach(function(item, index, arr) {
if ( list[index]['checked'] ) {
oThis.totalMoney += parseFloat(item.price) * parseFloat(item.num);
}
});
}
},
// 計算商品總運(yùn)費(fèi)
calTotalFare : function () {
var oThis = this;
this.totalFare = 0;
for ( var i = 0, len = this.goodsObj.length; i < len; i++ ) {
var list = this.goodsObj[i]['list'];
list.forEach(function(item, index, arr) {
if ( list[index]['checked'] ) {
oThis.totalFare += parseFloat(item.fare) * parseFloat(item.num);
}
});
}
},
// 計算方法集合
cal : function(index) {
this.calEveryStore(index);
this.calEveryFare(index);
this.calTotalMoney();
this.calTotalFare();
},
// 刪除操作
delGoods : function(index1, index) {
console.log(index1);
console.log(index);
this.goodsObj[index1]['list'].splice(index, 1);
this.cal(index);
}
}
})
</script>
</body>
</html>
效果如下：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue.js動態(tài)數(shù)據(jù)綁定學(xué)習(xí)筆記
這篇文章主要為大家詳細(xì)介紹了vue.js動態(tài)數(shù)據(jù)綁定學(xué)習(xí)筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
Vue使用moment將GMT時間轉(zhuǎn)換為北京時間
GMT（Greenwich Mean Time）和UTC（Coordinated Universal Time）是兩個時間標(biāo)準(zhǔn),它們在許多方面非常相似,但也有一些微小的差異,本文給大家詳細(xì)介紹了Vue使用moment將GMT時間轉(zhuǎn)換為北京時間,需要的朋友可以參考下2023-12-12
vue2 前后端分離項目ajax跨域session問題解決方法
本篇文章主要介紹了vue2 前后端分離項目ajax跨域session問題解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
相信大家做項目的時候,功能中都有導(dǎo)出模塊,下面這篇文章主要給大家介紹了關(guān)于vue導(dǎo)出excel表格的詳細(xì)教程,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
vue+iview 實(shí)現(xiàn)可編輯表格的示例代碼
這篇文章主要介紹了vue+iview 實(shí)現(xiàn)可編輯表格的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
Vue mixin實(shí)現(xiàn)組件功能復(fù)用示例詳解
這篇文章主要為大家介紹了Vue mixin實(shí)現(xiàn)組件功能復(fù)用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-10-10
使用Vue3和ApexCharts實(shí)現(xiàn)交互式3D折線圖
ApexCharts 是一個功能強(qiáng)大的 JavaScript 庫,用于創(chuàng)建交互式、可定制的圖表,在 Vue.js 中,它可以通過 vue3-apexcharts 插件輕松集成,本文給大家介紹了使用Vue3和ApexCharts實(shí)現(xiàn)交互式3D折線圖,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了.html頁面引入vue并使用公共組件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細(xì)介紹了vue項目實(shí)現(xiàn)添加圖片裁剪組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
vue.js2.0點(diǎn)擊獲取自己的屬性和jquery方法
下面小編就為大家分享一篇vue.js2.0點(diǎn)擊獲取自己的屬性和jquery方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02